@extends('layouts.admin')

@section('title', '編輯帳號')

@push('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('users.index') }}">帳號管理</a></li>
    <li class="breadcrumb-item active" aria-current="page">編輯帳號</li>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/users_edit.css') }}">
@endpush

@section('content')
<div class="page-header">
    <h1><i class="bi bi-pencil-square me-2"></i>編輯帳號</h1>
</div>

<form method="POST" action="{{ route('users.update', $user) }}">
    @csrf
    @method('PUT')
    <div class="row g-4">
        <div class="col-lg-4">
            <div class="edit-card h-100">
                <div class="card-header">{{ $user->name }}（{{ $user->username }}）</div>
                <div class="card-body d-flex flex-column">
                    <div class="mb-3">
                        <label class="form-label fw-bold">顯示名稱</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $user->name) }}" required>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">登入名稱</label>
                        <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                               value="{{ old('username', $user->username) }}" required pattern="[A-Za-z0-9_-]+">
                        @error('username')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold d-block">角色</label>
                        <div class="form-check form-switch">
                            <input type="hidden" name="role" value="user">
                            <input class="form-check-input" type="checkbox" id="roleSelect" name="role" value="admin"
                                   @checked(old('role', $user->role) === 'admin')>
                            <label class="form-check-label" for="roleSelect">管理員（全部頁面完整權限）</label>
                        </div>
                        <div class="form-text">未勾選則為一般使用者，可於右側設定各頁權限。</div>
                        @error('role')<div class="text-danger small">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">新密碼 <span class="text-muted fw-normal">（留空則不更改）</span></label>
                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" minlength="6">
                        @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold">確認新密碼</label>
                        <input type="password" name="password_confirmation" class="form-control" minlength="6">
                    </div>

                    <div class="d-flex gap-2 mt-auto pt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle me-1"></i>儲存
                        </button>
                        <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">返回</a>
                    </div>
                </div>
            </div>
        </div>

        {{-- 頁面權限設定（僅使用者角色）：勾選管理員時整個右側卡片隱藏 --}}
        <div class="col-lg-8" id="permissionPanel">
            <div class="edit-card h-100">
                <div class="card-header"><i class="bi bi-shield-lock me-1"></i>頁面權限設定</div>
                <div class="card-body">
                    <div class="form-text mb-3">勾選 = 可使用該頁面（編輯權限）；取消勾選 = 不顯示。管理員不受此限制。</div>
                    <div class="table-responsive">
                        <table class="table table-sm align-middle mb-0 perm-table">
                            <thead class="table-light">
                                <tr>
                                    <th>頁面</th>
                                    <th class="text-center" style="width: 90px;">權限</th>
                                    <th class="text-center" style="width: 90px;">唯讀</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($pages as $key => $page)
                                    @php $level = old("permissions.{$key}.enabled") !== null ? (old("permissions.{$key}.readonly") ? 'read' : 'edit') : ($user->page_permissions[$key] ?? \App\Support\PagePermissions::READ); @endphp
                                    <tr>
                                        <td>{{ $page['label'] }}</td>
                                        <td class="text-center">
                                            <div class="form-check form-switch d-inline-block m-0">
                                                <input type="hidden" name="permissions[{{ $key }}][enabled]" value="0">
                                                <input class="form-check-input perm-check" type="checkbox" data-page="{{ $key }}"
                                                       name="permissions[{{ $key }}][enabled]" value="1"
                                                       @checked($level !== \App\Support\PagePermissions::NONE)>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="form-check d-inline-block m-0">
                                                <input class="form-check-input perm-readonly" type="checkbox"
                                                       name="permissions[{{ $key }}][readonly]" value="1"
                                                       @checked($level === \App\Support\PagePermissions::READ)>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3 d-flex gap-2">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="permAllOn">全部開啟</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="permAllOff">全部關閉</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const roleSelect = document.getElementById('roleSelect');
    const panel = document.getElementById('permissionPanel');

    function syncPanel() {
        if (!roleSelect || !panel) return;
        panel.style.display = roleSelect.checked ? 'none' : '';
    }
    roleSelect?.addEventListener('change', syncPanel);
    syncPanel();

    document.getElementById('permAllOn')?.addEventListener('click', function () {
        document.querySelectorAll('.perm-check').forEach(function (cb) { cb.checked = true; });
    });
    document.getElementById('permAllOff')?.addEventListener('click', function () {
        document.querySelectorAll('.perm-check').forEach(function (cb) { cb.checked = false; });
    });
});
</script>
@endpush