@extends('layouts.finance')

@section('title', 'Page Access')
@section('subtitle', 'Control which pages each user can access')

@push('styles')
    <style>
        .page-access-item-icon {
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-2);
        }

        .page-access-item-icon .ico {
            width: 18px;
            height: 18px;
            display: block;
            flex-shrink: 0;
        }
    </style>
@endpush

@section('content')
    <section class="card">
        <div class="section-head">
            <h2>Page Access</h2>
            <div class="flex gap-2 items-center">
                <a href="{{ route('access.users.index') }}" class="btn btn-sm">Manage Users</a>
                <a href="{{ route('access.roles.index') }}" class="btn btn-sm">Manage Roles</a>
            </div>
        </div>

        {{-- ── User selector ──────────────────────────────────────────── --}}
        <div class="card-pad" style="border-bottom:1px solid var(--border)">
            <form method="GET" action="{{ route('access.page-access.index') }}" class="flex items-center gap-3 flex-wrap">
                <label class="label" for="user_select" style="margin-bottom:0;white-space:nowrap">Select User</label>
                <select
                    id="user_select"
                    name="user"
                    class="field"
                    style="max-width:320px"
                    onchange="this.form.submit()"
                >
                    <option value="">— choose a user —</option>
                    @foreach($users as $user)
                        <option
                            value="{{ $user->id }}"
                            {{ optional($selectedUser)->id === $user->id ? 'selected' : '' }}
                        >
                            {{ $user->name }} ({{ $user->email }})
                        </option>
                    @endforeach
                </select>
                <noscript>
                    <button type="submit" class="btn">Load</button>
                </noscript>
            </form>

            @if($users->isEmpty())
                <p class="muted text-xs" style="margin-top:10px">
                    No non-admin users exist yet.
                    <a href="{{ route('access.users.create') }}" style="color:var(--accent)">Invite a user first.</a>
                </p>
            @endif
        </div>

        {{-- ── Permission checkboxes (shown only when a user is selected) ── --}}
        @if($selectedUser)
            <form method="POST" action="{{ route('access.page-access.update') }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">

                {{-- Group items by section for a clear visual layout --}}
                @php
                    $sections = collect($navItems)->groupBy('section');
                @endphp

                <div class="card-pad" style="padding-bottom:0">
                    <p class="muted text-xs mb-4">
                        Checked pages are accessible by
                        <strong>{{ $selectedUser->name }}</strong>.
                        Admin users automatically bypass all page restrictions and do not appear here.
                    </p>
                </div>

                @foreach($sections as $sectionName => $items)
                    <div class="card-pad" style="border-bottom:1px solid var(--border-2);padding-bottom:12px;padding-top:12px">
                        <div class="sidebar-section" style="margin-bottom:8px;padding:0">{{ $sectionName }}</div>

                        <div class="grid grid-cols-1" style="gap:2px">
                            @foreach($items as $item)
                                <label
                                    class="flex items-center gap-3"
                                    style="cursor:pointer;padding:9px 4px;border-bottom:1px solid var(--border-2);font-size:13.5px"
                                >
                                    <input
                                        type="checkbox"
                                        name="permissions[]"
                                        value="{{ $item['permission'] }}"
                                        {{ isset($userPermissions[$item['permission']]) ? 'checked' : '' }}
                                        style="width:15px;height:15px;flex-shrink:0;accent-color:var(--accent)"
                                    >
                                    <span style="display:flex;align-items:center;gap:8px">
                                        <span class="page-access-item-icon">{!! $item['icon'] !!}</span>
                                        <span class="font-semibold">{{ $item['label'] }}</span>
                                        <span class="pill" style="font-size:10px">{{ $item['permission'] }}</span>
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endforeach

                <div class="card-pad" style="display:flex;gap:10px;align-items:center">
                    <button type="submit" class="btn btn-primary">Save Page Access</button>
                    <a href="{{ route('access.page-access.index') }}" class="btn">Clear Selection</a>
                    <span class="muted text-xs">
                        Changes take effect immediately on next page load.
                    </span>
                </div>
            </form>
        @else
            <div class="card-pad" style="padding:32px;text-align:center">
                <p class="muted">Select a user above to manage their page access.</p>
            </div>
        @endif
    </section>
@endsection