{{-- resources/views/admin/users/index.blade.php --}}
{{-- Users list with permissions management button --}}
{{-- Controller: Admin\UserController@index --}}

@extends('layouts.admin')

@section('title', 'Users & Permissions')
@section('page_title', 'Users & Permissions')

@section('page_css')
    <link rel="stylesheet" href="{{ asset('css/admin/tables.css') }}">
@endsection

@section('content')

    <x-admin.page-header
        title="Users &amp; Permissions"
        :breadcrumb="[['label' => 'Users']]"
        button-label="Add New User"
        :button-route="route('admin.users.create')"
        module="users"
    />

    <div class="table-toolbar">
        <form method="GET" action="{{ route('admin.users.index') }}" class="table-toolbar__search-form">
            <div class="table-toolbar__search-wrap">
                <i class="bi bi-search table-toolbar__search-icon"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search users..." class="table-toolbar__search-input">
            </div>
            <button type="submit" class="table-toolbar__search-btn">Search</button>
            @if(request('search'))
                <a href="{{ route('admin.users.index') }}" class="table-toolbar__clear-btn">Clear</a>
            @endif
        </form>
    </div>

    <x-admin.data-table :headers="['#', 'Avatar', 'Name', 'Email', 'Role', 'Joined', 'Status', 'Actions']">
        @forelse($users as $user)
            <tr class="data-table__row">
                <td class="data-table__td">{{ $users->firstItem() + $loop->index }}</td>
                <td class="data-table__td">
                    <div class="user-avatar-initials">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                </td>
                <td class="data-table__td data-table__td--name">{{ $user->name }}</td>
                <td class="data-table__td">{{ $user->email }}</td>
                <td class="data-table__td">
                    @foreach($user->roles as $role)
                        <span class="role-badge">{{ $role->name }}</span>
                    @endforeach
                </td>
                <td class="data-table__td">{{ $user->created_at->format('d M Y') }}</td>
                <td class="data-table__td">
                    <x-admin.status-badge :status="$user->status ?? 'active'" />
                </td>
                <td class="data-table__td">
                    {{-- Permissions modal trigger --}}
                    <button
                        type="button"
                        class="action-btn action-btn--perms js-open-permissions"
                        data-user-id="{{ $user->id }}"
                        data-user-name="{{ $user->name }}"
                        data-bs-toggle="modal"
                        data-bs-target="#permissionsModal"
                        title="Manage Permissions"
                    >
                        <i class="bi bi-shield-check"></i>
                    </button>
                    <a href="{{ route('admin.users.edit', $user->id) }}" class="action-btn action-btn--edit" title="Edit">
                        <i class="bi bi-pencil-square"></i>
                    </a>
                    @if(auth()->id() !== $user->id)
                        <button
                            type="button"
                            class="action-btn action-btn--delete js-delete-trigger"
                            data-delete-route="{{ route('admin.users.destroy', $user->id) }}"
                            data-item-name="{{ $user->name }}"
                            data-bs-toggle="modal"
                            data-bs-target="#confirmDeleteModal"
                            title="Delete"
                        >
                            <i class="bi bi-trash3"></i>
                        </button>
                    @endif
                </td>
            </tr>
        @empty
            <tr><td colspan="8" class="data-table__empty">No users found.</td></tr>
        @endforelse
    </x-admin.data-table>

    <div class="table-pagination">
        <span class="pagination-info">
            Showing <strong>{{ $users->firstItem() }}</strong>–<strong>{{ $users->lastItem() }}</strong>
            of <strong>{{ $users->total() }}</strong> users
        </span>
        {{ $users->appends(request()->query())->links('vendor.pagination.bootstrap-5') }}
    </div>

    {{-- Permissions Modal --}}
    <div class="modal fade" id="permissionsModal" tabindex="-1" aria-labelledby="permissionsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content perm-modal">

                <div class="modal-header perm-modal__header">
                    <h5 class="modal-title perm-modal__title" id="permissionsModalLabel">
                        <i class="bi bi-shield-check"></i>
                        Manage Permissions: <span class="perm-modal__user-name" id="permModalUserName"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body perm-modal__body">
                    <form id="permissionsForm" class="admin-form" data-save-url="{{ route('admin.users.permissions.save') }}">
                        <input type="hidden" name="user_id" id="permModalUserId">

                        {{-- Admin note --}}
                        <div id="permAdminNote" class="perm-admin-note" style="display:none">
                            <i class="bi bi-info-circle-fill"></i>
                            This user has the <strong>Admin</strong> role and already has full access to all modules.
                        </div>

                        {{-- Select All / Clear All --}}
                        <div class="perm-bulk-actions">
                            <button type="button" id="permSelectAll" class="perm-bulk-btn perm-bulk-btn--select">
                                <i class="bi bi-check-all"></i> Select All
                            </button>
                            <button type="button" id="permClearAll" class="perm-bulk-btn perm-bulk-btn--clear">
                                <i class="bi bi-x-lg"></i> Clear All
                            </button>
                            <span class="perm-bulk-hint">Click a module name to toggle its row</span>
                        </div>

                        <div class="perm-table-wrap">
                            <table class="perm-table">
                                <thead>
                                    <tr>
                                        <th class="perm-table__th">Module</th>
                                        <th class="perm-table__th perm-table__th--center">View</th>
                                        <th class="perm-table__th perm-table__th--center">Create</th>
                                        <th class="perm-table__th perm-table__th--center">Edit</th>
                                        <th class="perm-table__th perm-table__th--center">Delete</th>
                                    </tr>
                                </thead>
                                <tbody id="permissionsTableBody">
                                    @foreach(['categories','countries','destinations','hotels','flights','brands','products','banners','faqs','page-metas','support','users'] as $module)
                                        <x-admin.permission-row
                                            :module="$module"
                                            :permissions="[]"
                                        />
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </form>
                </div>

                <div class="modal-footer perm-modal__footer">
                    <button type="button" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn-primary-action" id="savePermissionsBtn">
                        <i class="bi bi-check-lg"></i> Save Permissions
                    </button>
                </div>

            </div>
        </div>
    </div>

    {{-- Delete confirm modal --}}
    <x-admin.confirm-modal />

@endsection

@section('page_js')
    <script src="{{ asset('js/admin/confirm-delete.js') }}"></script>
    <script src="{{ asset('js/admin/permissions.js') }}"></script>
@endsection