@extends('layouts.admin')

@section('page_title', 'User Management')

@section('content')
    <div class="row align-items-center mb-5">
        <div class="col">
            <h2 class="fw-extrabold tracking-tight mb-1" style="font-weight: 800; font-size: 1.875rem;">User Management</h2>
            <p class="text-secondary opacity-75 mb-0">Manage employee accounts and their system access levels.</p>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary px-4 py-2 fw-bold d-flex align-items-center gap-2 shadow-lg"
                style="border-radius: 0.625rem; font-size: 0.9375rem;" data-bs-toggle="offcanvas"
                data-bs-target="#addUserDrawer">
                <span class="material-symbols-outlined" style="font-size: 1.25rem;">person_add</span>
                Add New User
            </button>
        </div>
    </div>

    <!-- Filters Bar -->
    <div class="card border-0 shadow-sm mb-4"
        style="border-radius: 0.875rem; border: 1px solid rgba(0,0,0,0.05) !important;">
        <div class="card-body p-4">
            <div class="row g-4 align-items-end">
                <div class="col-lg-5 col-md-12">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Search Users</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-0 px-3"><span
                                class="material-symbols-outlined text-secondary opacity-50"
                                style="font-size: 1.25rem;">search</span></span>
                        <input type="text" id="userFilterSearch" class="form-control border-0 bg-light py-2"
                            placeholder="Name or email..." style="font-size: 0.875rem;">
                    </div>
                </div>
                <div class="col-lg-2 col-md-4">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Department</label>
                    <select id="filterDept" class="form-select border-0 bg-light py-2" style="font-size: 0.875rem;">
                        <option value="">All Departments</option>
                        @foreach ($departments as $dept)
                            <option value="{{ $dept->name }}">{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-4">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Role</label>
                    <select id="filterRole" class="form-select border-0 bg-light py-2" style="font-size: 0.875rem;">
                        <option value="">Any Role</option>
                        @foreach ($roles as $role)
                            <option value="{{ $role->name }}">{{ ucfirst($role->name) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-4">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Status</label>
                    <select id="filterStatus" class="form-select border-0 bg-light py-2" style="font-size: 0.875rem;">
                        <option value="">All Status</option>
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                    </select>
                </div>
                <div class="col-lg-1 col-md-12">
                    <button class="btn btn-light w-100 fw-bold py-2" style="font-size: 0.875rem; background: #eaedf2;"
                        onclick="location.reload()">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Card -->
    <div class="card border-0 shadow-sm overflow-hidden"
        style="border-radius: 0.875rem; border: 1px solid rgba(0,0,0,0.05) !important;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="usersTable">
                    <thead class="bg-light bg-opacity-50">
                        <tr>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem; width: 60px;">#</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">User</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Email</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Department</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Role</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Status</th>
                            <th class="px-4 py-3 text-end text-uppercase text-secondary fw-bold pe-4"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem; width: 140px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        @foreach ($users as $user)
                            <tr class="transition-all hover-row">
                                <td class="px-4 py-4 text-secondary fw-medium" style="font-size: 0.8125rem;">
                                    {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</td>
                                <td class="px-4 py-4">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="size-9 rounded-circle d-flex align-items-center justify-content-center fw-bold text-sm shadow-sm"
                                            style="width: 36px; height: 36px; font-size: 0.8rem; background-color: {{ ['#eef2ff', '#fff1f2', '#ecfdf5', '#fffbeb'][$user->id % 4] }}; color: {{ ['#4f46e5', '#e11d48', '#059669', '#d97706'][$user->id % 4] }};">
                                            {{ substr($user->name, 0, 1) }}{{ substr(strrchr($user->name, ' '), 1, 1) ?: '' }}
                                        </div>
                                        <span class="fw-bold" style="font-size: 0.875rem;">{{ $user->name }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-4 text-secondary fs-sm" style="font-size: 0.875rem;">{{ $user->email }}
                                </td>
                                <td class="px-4 py-4 fw-medium text-dark" style="font-size: 0.875rem;">
                                    {{ $user->department->name ?? 'N/A' }}</td>
                                <td class="px-4 py-4">
                                    <span class="px-2.5 py-0.5 rounded-pill text-uppercase fw-bold"
                                        style="font-size: 0.625rem; background-color: {{ strtolower($user->role) == 'admin' ? '#f3e8ff' : '#dbeafe' }}; color: {{ strtolower($user->role) == 'admin' ? '#7e22ce' : '#1d4ed8' }};">
                                        {{ $user->role }}
                                    </span>
                                </td>
                                <td class="px-4 py-4">
                                    @if ($user->is_active)
                                        <span class="d-flex align-items-center gap-1.5 fw-bold text-emerald-600"
                                            style="font-size: 0.75rem; color: #059669;">
                                            <span class="rounded-circle"
                                                style="width: 6px; height: 6px; background: #059669;"></span>
                                            Active
                                        </span>
                                    @else
                                        <span class="d-flex align-items-center gap-1.5 fw-bold text-secondary opacity-50"
                                            style="font-size: 0.75rem;">
                                            <span class="rounded-circle"
                                                style="width: 6px; height: 6px; background: #94a3b8;"></span>
                                            Inactive
                                        </span>
                                    @endif
                                    <span class="d-none">{{ $user->is_active ? 'Active' : 'Inactive' }}</span>
                                </td>
                                <td class="px-4 py-4 text-end pe-4">
                                    <div class="d-flex justify-content-end gap-1">
                                        <button class="btn btn-icon hover-primary" title="View"><span
                                                class="material-symbols-outlined fs-5">visibility</span></button>
                                        <button class="btn btn-icon hover-emerald"
                                            onclick="editUser({{ $user->toJson() }})" title="Edit"><span
                                                class="material-symbols-outlined fs-5">edit</span></button>
                                        <button class="btn btn-icon hover-red"
                                            onclick="confirmDeactivate('{{ $user->id }}')" title="Deactivate"><span
                                                class="material-symbols-outlined fs-5">block</span></button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- Pagination Placeholder (Match Roznama) -->
            <div class="px-4 py-4 bg-light bg-opacity-25 border-top d-flex align-items-center justify-content-between">
                <p class="text-secondary mb-0 fw-medium" style="font-size: 0.8125rem;">Showing <span
                        class="text-dark fw-bold">1-{{ count($users) }}</span> of <span
                        class="text-dark fw-bold">{{ count($users) }}</span> users</p>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-light border text-secondary px-2 py-1 btn-sm"><span
                            class="material-symbols-outlined fs-6 d-block">chevron_left</span></button>
                    <button class="btn btn-primary btn-sm px-2.5 py-1 fw-bold" style="font-size: 0.75rem;">1</button>
                    <button class="btn btn-outline-light border text-secondary px-2 py-1 btn-sm"><span
                            class="material-symbols-outlined fs-6 d-block">chevron_right</span></button>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Side Drawer -->
    <div class="offcanvas offcanvas-end border-0 shadow-lg" tabindex="-1" id="addUserDrawer" style="width: 448px;">
        <div class="offcanvas-header p-5 pb-4 d-block">
            <div class="d-flex justify-content-between align-items-start mb-1">
                <h3 class="offcanvas-title fw-extrabold tracking-tight" id="drawerTitle"
                    style="font-weight: 800; font-size: 1.25rem;">Add New User</h3>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <p class="text-secondary opacity-75 mb-0 fs-sm" style="font-size: 0.8125rem;">Fill in the information to
                create a profile.</p>
        </div>
        <div class="offcanvas-body p-5 pt-2">
            <form action="{{ route('admin.users.store') }}" method="POST" id="userForm">
                @csrf
                <div id="methodField"></div>

                <div class="text-center py-4 mb-4">
                    <div class="avatar-upload mx-auto d-flex flex-column align-items-center justify-content-center bg-light rounded-circle border-2 border-dashed"
                        style="width: 96px; height: 96px; cursor: pointer; border-color: #cbd5e1;">
                        <span class="material-symbols-outlined text-secondary fs-1">add_a_photo</span>
                        <span class="fw-bold text-uppercase text-secondary mt-1" style="font-size: 0.6rem;">Upload</span>
                    </div>
                    <p class="text-secondary opacity-50 mt-2 mb-0" style="font-size: 0.65rem;">Avatar must be .jpg, .png
                        (Max 2MB)</p>
                </div>

                <div class="row g-4">
                    <div class="col-12">
                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Full Name</label>
                        <input type="text" name="name" id="userName"
                            class="form-control border-0 bg-light py-2.5 rounded-3" placeholder="e.g. Ali Hassan"
                            required>
                    </div>
                    <div class="col-12">
                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Email Address</label>
                        <input type="email" name="email" id="userEmail"
                            class="form-control border-0 bg-light py-2.5 rounded-3" placeholder="email@roznama.pk"
                            required>
                    </div>
                    <div class="col-md-6" id="passwordField">
                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Password</label>
                        <input type="password" name="password" class="form-control border-0 bg-light py-2.5 rounded-3"
                            placeholder="Min 8 chars" required>
                    </div>
                    <div class="col-md-6">
                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Designation</label>
                        <input type="text" name="designation" id="userDesignation"
                            class="form-control border-0 bg-light py-2.5 rounded-3" placeholder="Senior Dev">
                    </div>
                    <div class="col-md-6">
                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Department</label>
                        <select name="department_id" id="userDept"
                            class="form-select border-0 bg-light py-2.5 rounded-3">
                            @foreach ($departments as $dept)
                                <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Role</label>
                        <select name="role" id="userRole" class="form-select border-0 bg-light py-2.5 rounded-3">
                            @foreach ($roles as $role)
                                <option value="{{ $role->name }}">{{ strtoupper($role->name) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Info Box -->
                <div class="mt-5 p-4 rounded-4 bg-primary bg-opacity-5 border border-primary border-opacity-10">
                    <div class="d-flex gap-3 text-primary mb-2">
                        <span class="material-symbols-outlined fs-5">info</span>
                        <span class="fw-bold fs-sm" style="font-size: 0.8125rem;">Permissions</span>
                    </div>
                    <p class="text-secondary opacity-75 mb-0 leading-relaxed" style="font-size: 0.75rem;">
                        Roles define access levels. <b>Managers</b> can approve work reports. <b>Admins</b> can manage all
                        users and settings.
                    </p>
                </div>

                <div class="mt-5 pt-4 d-flex gap-3">
                    <button type="button"
                        class="btn btn-light flex-grow-1 py-3 fw-bold border-0 bg-light text-secondary rounded-3"
                        data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn btn-primary flex-grow-1 py-3 fw-bold rounded-3 shadow-lg"
                        id="submitBtn">Create User</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .tracking-tight {
            letter-spacing: -0.015rem;
        }

        .btn-icon {
            padding: 0.4rem;
            border-radius: 0.5rem;
            color: #94a3b8;
            background: transparent;
            border: 0;
            transition: all 0.2s;
        }

        .btn-icon:hover {
            color: #1a1f2e;
            background: #eaedf2;
        }

        .hover-primary:hover {
            color: var(--primary-color);
            background: rgba(13, 110, 253, 0.1);
        }

        .hover-emerald:hover {
            color: #059669;
            background: #ecfdf5;
        }

        .hover-red:hover {
            color: #dc2626;
            background: #fef2f2;
        }

        .hover-row:hover {
            background-color: rgba(248, 250, 252, 0.5) !important;
        }

        .form-control:focus,
        .form-select:focus {
            background-color: #f8fafc !important;
            box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1) !important;
        }

        /* DataTable Overrides */
        #usersTable_wrapper .dataTables_filter,
        #usersTable_wrapper .dataTables_length,
        #usersTable_wrapper .dataTables_info,
        #usersTable_wrapper .dataTables_paginate {
            display: none !important;
        }

        .table> :not(caption)>*>* {
            border-bottom-width: 1px;
            border-color: #f1f5f9;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            const table = $('#usersTable').DataTable({
                paging: true,
                lengthChange: false,
                pageLength: 25,
                searching: true
            });

            $('#userFilterSearch').on('keyup', function() {
                table.search(this.value).draw();
            });
            $('#filterDept').on('change', function() {
                table.column(3).search(this.value).draw();
            });
            $('#filterRole').on('change', function() {
                table.column(4).search(this.value).draw();
            });
            $('#filterStatus').on('change', function() {
                table.column(5).search(this.value).draw();
            });

            $('#addUserDrawer').on('hidden.bs.offcanvas', function() {
                $('#drawerTitle').text('Add New User');
                $('#submitBtn').text('Create User');
                $('#userForm').attr('action', "{{ route('admin.users.store') }}");
                $('#methodField').empty();
                $('#passwordField').show();
                $('#userForm')[0].reset();
            });
        });

        function editUser(user) {
            $('#drawerTitle').text('Edit User');
            $('#submitBtn').text('Update User');
            $('#userForm').attr('action', `{{ url('admin/users') }}/${user.id}`);
            $('#methodField').html('@method('PUT')');
            $('#passwordField').hide();

            $('#userName').val(user.name);
            $('#userEmail').val(user.email);
            $('#userDept').val(user.department_id);
            $('#userRole').val(user.role);
            $('#userDesignation').val(user.designation);

            const myOffcanvas = new bootstrap.Offcanvas(document.getElementById('addUserDrawer'));
            myOffcanvas.show();
        }

        function confirmDeactivate(id) {
            Swal.fire({
                title: 'Confirm Deactivation',
                text: "This user profile will be disabled. Proceed?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Yes, Disable Profile',
                borderRadius: '1rem'
            }).then((result) => {
                if (result.isConfirmed) {
                    const f = document.createElement('form');
                    f.method = 'POST';
                    f.action = `{{ url('admin/users') }}/${id}`;
                    f.innerHTML = '@csrf @method('DELETE')';
                    document.body.appendChild(f);
                    f.submit();
                }
            });
        }
    </script>
@endpush