{{-- Author By : zulfazdliabuas@gmail.com | Date : 2026 --}}
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.css" rel="stylesheet">
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            @php
                $viewer = auth()->user();
                $canManageUsers = $viewer?->hasRole('admin') ?? false;
                $canApproveUsers = $viewer?->hasAnyRole(['admin', 'spv']) ?? false;
            @endphp

            <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="h5 mb-0">User List</h2>
                @if($canManageUsers)
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#userModal">Add</button>
                @endif
            </div>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <x-admin.list-card
                title="User List"
                :route="route('admin.users.index')"
                search-placeholder="Name, email, phone"
                :search-value="request('q')"
                :exclude="['role_id', 'approval_status', 'phone', 'created_from', 'created_to']"
                :show-title="false"
            >
                <x-slot:filters>
                    <div class="col-12 col-md-3 col-lg-3">
                        <label class="form-label">Role</label>
                        <select name="role_id" class="form-select">
                            <option value="">All Roles</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}" @selected((string) request('role_id') === (string) $role->id)>{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-3 col-lg-3">
                        <label class="form-label">Approval</label>
                        <select name="approval_status" class="form-select">
                            <option value="">All Status</option>
                            <option value="pending" @selected(request('approval_status') === 'pending')>Pending</option>
                            <option value="approved" @selected(request('approval_status') === 'approved')>Approved</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-3 col-lg-3">
                        <label class="form-label">Phone</label>
                        <input name="phone" class="form-control" value="{{ request('phone') }}" placeholder="Phone no.">
                    </div>
                    <div class="col-12 col-md-3 col-lg-3">
                        <label class="form-label">Created From</label>
                        <input type="date" name="created_from" class="form-control" value="{{ request('created_from') }}">
                    </div>
                    <div class="col-12 col-md-3 col-lg-3">
                        <label class="form-label">Created To</label>
                        <input type="date" name="created_to" class="form-control" value="{{ request('created_to') }}">
                    </div>
                </x-slot:filters>
                <div id="tableToolbar" class="d-flex align-items-center gap-2 mb-3">
                    <button type="button" class="btn btn-sm btn-outline-secondary js-refresh-list" title="Refresh list">
                        <i class="bi bi-arrow-clockwise"></i> Refresh List
                    </button>
                    <a class="btn btn-outline-success btn-sm" data-no-ajax href="{{ route('admin.users.export', request()->query()) }}">Export Excel</a>
                </div>

                <div class="table-responsive">
                    <table id="usersTable" class="table table-hover align-middle">
                        <thead class="table-light">
                        <tr>
                            <th data-field="no" style="width:50px">No</th>
                            <th data-field="name">Name</th>
                            <th data-field="email">Email</th>
                            <th data-field="role">Role</th>
                            <th data-field="approval" style="width:100px">Approval</th>
                            <th data-field="actions" class="text-end" style="width:150px">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($users as $user)
                            @php
                                $roleSlug = $user->roleSlug();
                                $approvalStatus = $user->approval_status ?? 'approved';
                            @endphp
                            <tr>
                                <td>{{ $loop->index + 1 }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <span class="badge {{ $user->uiRoleSlug() === 'admin' ? 'text-bg-primary' : 'text-bg-secondary' }}">
                                        {{ $user->displayRoleName() }}
                                    </span>
                                    @if(in_array($roleSlug, ['ao', 'ae', 'spv'], true) && $user->sites->isNotEmpty())
                                        <div class="small text-muted mt-1">
                                            {{ $user->sites->pluck('name')->take(3)->join(', ') }}
                                            @if($user->sites->count() > 3)
                                                and {{ $user->sites->count() - 3 }} more
                                            @endif
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $approvalStatus === 'approved' ? 'text-bg-success' : 'text-bg-warning text-dark' }}">
                                        {{ ucfirst($approvalStatus) }}
                                    </span>
                                    @if($user->approved_at)
                                        <div class="small text-muted mt-1">{{ $user->approved_at->format('d/m/Y H:i') }}</div>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="d-flex gap-2 justify-content-end">
                                        @if($canApproveUsers && $roleSlug === 'customer' && $approvalStatus === 'pending')
                                            <form method="post" action="{{ route('admin.users.approve', $user) }}">
                                                @csrf
                                                <button class="btn btn-sm btn-success" onclick="return confirm('Approve this user account?')">Approve</button>
                                            </form>
                                            <form method="post" action="{{ route('admin.users.reject', $user) }}">
                                                @csrf
                                                <button class="btn btn-sm btn-outline-danger" onclick="return confirm('Reject and remove this registration?')">Reject</button>
                                            </form>
                                        @endif
                                        {{-- Assign Sites button hidden for now --}}
                                        {{-- @if($canManageUsers && in_array($roleSlug, ['ao', 'ae', 'spv'], true)) --}}
                                        {{--     <button type="button" --}}
                                        {{--             class="btn btn-sm btn-outline-primary" --}}
                                        {{--             data-bs-toggle="modal" --}}
                                        {{--             data-bs-target="#assignSiteModal-{{ $user->id }}"> --}}
                                        {{--         Assign Sites --}}
                                        {{--     </button> --}}
                                        {{-- @endif --}}
                                        @if($canManageUsers)
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-secondary"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#editUserModal-{{ $user->id }}">
                                                Edit
                                            </button>
                                            <form method="post" action="{{ route('admin.users.destroy', $user) }}">
                                                @csrf
                                                @method('delete')
                                                <button class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this user?')">Delete</button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">No users.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

            </x-admin.list-card>
        </div>
    </div>

    @if($canManageUsers)
        <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="userModalLabel">Add User</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.users.store') }}" class="row g-3 px-3 pb-3">
                        @csrf
                        @include('admin.users.partials.form', ['user' => null, 'roles' => $roles, 'sites' => $sites])
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @foreach($users as $user)
            <div class="modal fade" id="editUserModal-{{ $user->id }}" tabindex="-1" aria-labelledby="editUserModalLabel-{{ $user->id }}" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editUserModalLabel-{{ $user->id }}">Edit User #{{ $user->id }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form method="post" action="{{ route('admin.users.update', $user) }}" class="row g-3 px-3 pb-3">
                            @csrf
                            @method('put')
                            @include('admin.users.partials.form', ['user' => $user, 'roles' => $roles, 'sites' => $sites])
                            <div class="d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach

        {{-- Assign Site modals hidden for now --}}
        {{-- @foreach($users as $user) --}}
        {{--     @if(in_array($user->roleSlug(), ['ao', 'ae', 'spv'], true)) --}}
        {{--         <div class="modal fade" id="assignSiteModal-{{ $user->id }}" tabindex="-1" aria-labelledby="assignSiteModalLabel-{{ $user->id }}" aria-hidden="true"> --}}
        {{--             <div class="modal-dialog modal-lg modal-dialog-centered"> --}}
        {{--                 <div class="modal-content"> --}}
        {{--                     <div class="modal-header"> --}}
        {{--                         <h5 class="modal-title" id="assignSiteModalLabel-{{ $user->id }}">Assign sites for AO/AE/SPV to manage customer e-invoice requests.</h5> --}}
        {{--                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
        {{--                     </div> --}}
        {{--                     @php --}}
        {{--                         $userSites = $user->sites; --}}
        {{--                         $context = 'assign-'.$user->id; --}}
        {{--                         $availableSites = $sites->whereNotIn('id', $userSites->pluck('id')); --}}
        {{--                     @endphp --}}
        {{--                     <form method="post" action="{{ route('admin.users.assignSites', $user) }}" class="px-3 pb-3 pt-2 dual-form" data-context="{{ $context }}"> --}}
        {{--                         @csrf --}}
        {{--                         @include('admin.users.partials.assign-sites', [ --}}
        {{--                             'context' => $context, --}}
        {{--                             'availableSites' => $availableSites, --}}
        {{--                             'selectedSites' => $userSites, --}}
        {{--                             'name' => 'site_ids[]' --}}
        {{--                         ]) --}}
        {{--                         <div class="d-flex justify-content-end gap-2 mt-3"> --}}
        {{--                             <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button> --}}
        {{--                             <button type="submit" class="btn btn-primary">Save</button> --}}
        {{--                         </div> --}}
        {{--                     </form> --}}
        {{--                 </div> --}}
        {{--             </div> --}}
        {{--         </div> --}}
        {{--     @endif --}}
        {{-- @endforeach --}}
    @endif

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                $('#usersTable').bootstrapTable({
                    toolbar: '#tableToolbar',
                    search: true,
                    searchAlign: 'right',
                    pagination: true,
                    pageSize: 20,
                    pageList: [10, 20, 50],
                    sortable: true
                });

                const hasError = @json($errors->any());
                const editId = @json(old('edit_user_id'));
                const canManageUsers = @json($canManageUsers);

                if (hasError && canManageUsers) {
                    if (editId) {
                        const editModal = document.getElementById(`editUserModal-${editId}`);
                        if (editModal) new bootstrap.Modal(editModal).show();
                    } else {
                        const modal = new bootstrap.Modal(document.getElementById('userModal'));
                        modal.show();
                    }
                }
            });
        </script>
    @endpush
</x-app-layout>