@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Employee')
@endsection

@section('content')
    <style>
        .employee-shell {
            --emp-sidebar-bg: #fff;
            --emp-detail-bg: #fff;
        }

        .employee-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .employee-toolbar .lead {
            color: var(--salon-muted);
            font-size: 0.95rem;
            margin: 0;
        }

        .employee-layout {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            min-height: 0;
        }

        @media (min-width: 992px) {
            .employee-layout {
                flex-direction: row;
                align-items: stretch;
            }

            .employee-sidebar {
                flex: 0 0 340px;
                max-width: 380px;
                min-height: 0;
            }

            .employee-detail-wrap {
                flex: 1 1 auto;
                min-width: 0;
                min-height: 0;
            }
        }

        .employee-sidebar .card,
        .employee-detail-wrap .card {
            height: 100%;
            min-height: 0;
        }

        /* Sidebar card: stack header + body; body grows so the list fills remaining height */
        .employee-sidebar > .card {
            display: flex;
            flex-direction: column;
        }

        .employee-sidebar > .card > .card-body {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .employee-search {
            position: relative;
        }

        .employee-search .form-control {
            border-radius: var(--salon-radius-sm);
            padding-left: 2.5rem;
            border-color: var(--salon-input-border);
        }

        .employee-search .fa-search {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--salon-muted);
            pointer-events: none;
        }

        .employee-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            margin: 0 -0.25rem;
            padding: 0 0.25rem;
            -webkit-overflow-scrolling: touch;
        }

        /* Mobile: cap list height when layout is stacked */
        @media (max-width: 991.98px) {
            .employee-list {
                max-height: min(55vh, 480px);
            }
        }

        .employee-list-item {
            width: 100%;
            text-align: left;
            border: 1px solid var(--salon-border);
            background: #fff;
            border-radius: var(--salon-radius-sm);
            padding: 0.75rem 0.9rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .employee-list-item:hover {
            border-color: var(--salon-primary-soft);
            box-shadow: 0 4px 14px rgba(76, 111, 255, 0.12);
        }

        .employee-list-item.active {
            border-color: var(--salon-primary);
            background: linear-gradient(90deg, rgba(76, 111, 255, 0.08), #fff);
            box-shadow: 0 4px 18px rgba(76, 111, 255, 0.15);
        }

        .employee-list-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--salon-border);
            flex-shrink: 0;
        }

        .employee-list-meta {
            min-width: 0;
            flex: 1;
        }

        .employee-list-name {
            font-weight: 600;
            color: var(--salon-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .employee-list-sub {
            font-size: 0.82rem;
            color: var(--salon-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .employee-badge {
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.2rem 0.45rem;
            border-radius: 999px;
        }

        .employee-detail-empty {
            text-align: center;
            padding: 3rem 1.5rem;
            color: var(--salon-muted);
        }

        .employee-detail-empty i {
            font-size: 2.5rem;
            opacity: 0.35;
            margin-bottom: 0.75rem;
        }

        .employee-detail-body {
            display: none;
        }

        .employee-detail-body.is-visible {
            display: block;
        }

        .employee-detail-header {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: flex-start;
            margin-bottom: 1.25rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--salon-border);
        }

        .employee-detail-photo {
            width: 96px;
            height: 96px;
            border-radius: var(--salon-radius);
            object-fit: cover;
            border: 2px solid var(--salon-border);
            box-shadow: var(--salon-card-shadow);
        }

        .employee-detail-actions {
            margin-left: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: flex-end;
        }

        .modal-add-employee .modal-content {
            border-radius: var(--salon-radius);
            border: 1px solid var(--salon-border);
            box-shadow: 0 18px 50px rgba(28, 38, 74, 0.18);
        }

        .modal-add-employee .modal-header {
            border-bottom: 1px solid var(--salon-border);
        }

        .modal-add-employee .modal-footer {
            border-top: 1px solid var(--salon-border);
        }

        .modal-add-employee .modal-dialog-scrollable .modal-content > form {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        .modal-add-employee .modal-dialog-scrollable .modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        .modal-add-employee .modal-dialog-scrollable .modal-footer {
            flex-shrink: 0;
        }

        .employee-sidebar-filters {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            flex-shrink: 0;
        }

        .employee-sidebar-filters label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--salon-muted);
            margin-bottom: 0.25rem;
        }

        .employee-list-wrap {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        .employee-list-wrap.is-loading .employee-list {
            opacity: 0.45;
            pointer-events: none;
        }

        .employee-list-wrap .employee-list-spinner {
            display: none;
            position: absolute;
            inset: 0;
            align-items: center;
            justify-content: center;
            z-index: 2;
            background: rgba(255, 255, 255, 0.45);
            border-radius: var(--salon-radius-sm);
        }

        .employee-list-wrap.is-loading .employee-list-spinner {
            display: flex;
        }

        .employee-detail-tabs {
            margin-top: 0.25rem;
        }

        .employee-detail-tabs .nav-link {
            border-radius: var(--salon-radius-sm) var(--salon-radius-sm) 0 0;
            font-weight: 600;
            color: var(--salon-muted);
        }

        .employee-detail-tabs .nav-link.active {
            color: var(--salon-primary, #4c6fff);
        }

        .employee-leave-stat {
            border: 1px solid var(--salon-border);
            border-radius: var(--salon-radius-sm);
            padding: 0.75rem 0.5rem;
            text-align: center;
            background: #fafbfc;
            height: 100%;
        }

        .employee-leave-stat .num {
            font-size: 1.45rem;
            font-weight: 700;
            line-height: 1.2;
            color: var(--salon-text);
        }

        .employee-leave-stat .lbl {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--salon-muted);
            margin-top: 0.25rem;
        }

        .employee-leave-table-wrap {
            border: 1px solid var(--salon-border);
            border-radius: var(--salon-radius-sm);
            overflow: hidden;
        }

        .employee-leave-table-wrap table {
            margin-bottom: 0;
            font-size: 0.9rem;
        }

        .employee-available-leave-panel {
            border: 1px solid var(--salon-border);
            border-radius: var(--salon-radius-sm);
            background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
            padding: 1rem 1.1rem;
        }

        .employee-available-leave-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--salon-text);
            margin-bottom: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--salon-border);
        }

        .employee-available-leave-list {
            margin: 0;
        }

        .employee-available-leave-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            font-size: 0.95rem;
        }

        .employee-available-leave-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .employee-available-leave-name {
            color: var(--salon-text);
            font-weight: 500;
        }

        .employee-available-leave-days {
            font-weight: 700;
            color: var(--salon-primary, #4c6fff);
            white-space: nowrap;
        }
    </style>

    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Employees</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Employees</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="content employee-shell">
            <div class="container-fluid">
                <div class="employee-toolbar">
                    <p class="lead mb-0">Choose someone on the left to view and edit their profile, or add a new team member.</p>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_employee_modal">
                        <i class="fas fa-user-plus mr-1"></i> Add employee
                    </button>
                </div>

                <div class="employee-layout">
                    <div class="employee-sidebar">
                        <div class="card card-outline card-primary">
                            <div class="card-header border-0 pb-0">
                                <h3 class="card-title">Team</h3>
                            </div>
                            <div class="card-body pt-2">
                                <div class="employee-sidebar-filters">
                                    <div>
                                        <label for="employee_status_filter">Status</label>
                                        <select id="employee_status_filter" class="form-control form-control-sm">
                                            <option value="all" selected>All employees</option>
                                            <option value="active">Active only</option>
                                            <option value="inactive">Inactive only</option>
                                        </select>
                                    </div>
                                    <div class="employee-search mb-0">
                                        <i class="fas fa-search"></i>
                                        <input type="search" id="employee_list_filter" class="form-control"
                                            placeholder="Search name or email (server)…" autocomplete="off">
                                    </div>
                                </div>
                                <script type="application/json" id="employees-page-json">@json($employeesPageJson)</script>
                                <div class="employee-list-wrap" id="employee_list_wrap">
                                    <div class="employee-list-spinner text-primary">
                                        <i class="fas fa-circle-notch fa-spin fa-2x"></i>
                                    </div>
                                    <div class="employee-list" id="employee_list">
                                        @forelse ($employees as $item)
                                            <button type="button" class="employee-list-item"
                                                data-employee-id="{{ $item->idEmployee }}">
                                                <img class="employee-list-avatar"
                                                    src="{{ asset('images/' . $item->Image) }}"
                                                    alt="{{ $item->Full_Name }}">
                                                <div class="employee-list-meta">
                                                    <div class="employee-list-name">{{ $item->Full_Name }}</div>
                                                    <div class="employee-list-sub">{{ $item->email }}</div>
                                                </div>
                                                @if ($item->Status == '1' || $item->Status === 1)
                                                    <span class="employee-badge badge-success">Active</span>
                                                @else
                                                    <span class="employee-badge badge-secondary">Inactive</span>
                                                @endif
                                            </button>
                                        @empty
                                            <p class="text-muted text-center mb-0 employee-list-empty-msg">No employees yet. Use <strong>Add employee</strong> to create the first profile.</p>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="employee-detail-wrap">
                        <div class="card card-outline card-primary">
                            <div class="card-header border-0">
                                <h3 class="card-title mb-0">Employee details</h3>
                            </div>
                            <div class="card-body">
                                <div id="employee_detail_empty" class="employee-detail-empty">
                                    <i class="fas fa-hand-pointer d-block"></i>
                                    <p class="mb-0">Select an employee from the list to see their information and make updates.</p>
                                </div>

                                <div id="employee_detail_form" class="employee-detail-body">
                                    <div class="employee-detail-header">
                                        <img id="u_header_photo" class="employee-detail-photo" src=""
                                            alt="">
                                        <div class="flex-grow-1 min-w-0">
                                            <h4 class="mb-1 font-weight-bold" id="u_display_name"></h4>
                                            <p class="text-muted mb-0 small" id="u_display_email"></p>
                                        </div>
                                        <div class="employee-detail-actions">
                                            <button type="button" class="btn btn-outline-primary btn-sm"
                                                id="btn_toggle_status">
                                                <i class="fas fa-exchange-alt mr-1"></i> <span id="btn_toggle_status_label">Change status</span>
                                            </button>
                                        </div>
                                    </div>

                                    <ul class="nav nav-tabs employee-detail-tabs" id="employee_detail_tabs" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="tab-profile-link" data-toggle="tab"
                                                href="#tab-profile" role="tab" aria-controls="tab-profile"
                                                aria-selected="true">Profile</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="tab-leaves-link" data-toggle="tab" href="#tab-leaves"
                                                role="tab" aria-controls="tab-leaves" aria-selected="false">Leaves</a>
                                        </li>
                                    </ul>

                                    <div class="tab-content pt-3" id="employee_detail_tab_content">
                                        <div class="tab-pane fade show active" id="tab-profile" role="tabpanel"
                                            aria-labelledby="tab-profile-link">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="u_Full_Name">Full name</label>
                                                <input type="text" name="u_Full_Name" class="form-control"
                                                    id="u_Full_Name" placeholder="Full name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="u_email">Email</label>
                                                <input type="email" name="u_email" class="form-control" id="u_email"
                                                    placeholder="Email address">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="u_Tp">Contact number</label>
                                                <input type="text" name="u_Tp" class="form-control" id="u_Tp"
                                                    placeholder="10-digit mobile number" maxlength="10">
                                                <small id="error-message-edit"
                                                    class="form-text error-number-message text-danger">Enter a valid number (10 digits required)</small>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="u_password">New password</label>
                                                <input type="password" name="u_password" class="form-control" id="u_password"
                                                    autocomplete="new-password"
                                                    placeholder="Leave blank to keep current password">
                                                <small class="form-text text-muted">Only fill this when changing the sign-in password (min. 6 characters).</small>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="u_Address">Address</label>
                                                <textarea name="u_Address" class="form-control" id="u_Address"
                                                    rows="3" placeholder="Street, city, postal code…"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="u_joining_date">Joining date</label>
                                                <input type="date" name="u_joining_date" class="form-control" id="u_joining_date">
                                                <small class="form-text text-muted">Yearly leave renews on this date each year.</small>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group mb-0">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" class="custom-control-input" id="u_require_otp" checked>
                                                    <label class="custom-control-label" for="u_require_otp">Require email OTP after sign-in</label>
                                                </div>
                                                <small class="form-text text-muted">When off, this employee can open the dashboard immediately after entering email and password (use only for trusted devices).</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="u_services">Services</label>
                                                <select id="u_services" class="form-control clear u-services-select"
                                                    style="width: 100%;" multiple="multiple">
                                                    @foreach ($services as $service)
                                                        <option value="{{ $service->idServices }}">{{ $service->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="u_imageInput">Profile image</label>
                                                <input type="file" name="u_image" class="form-control" id="u_imageInput"
                                                    accept="image/*">
                                                <img id="u_imagePreview" src="#" alt="Preview"
                                                    class="mt-2 rounded border"
                                                    style="max-width: 200px; max-height: 200px; object-fit: cover;">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-right">
                                        <button type="button" class="btn btn-primary" id="btn_update_employee">
                                            <i class="fas fa-save mr-1"></i> Save changes
                                        </button>
                                    </div>
                                        </div>

                                        <div class="tab-pane fade" id="tab-leaves" role="tabpanel"
                                            aria-labelledby="tab-leaves-link">
                                            <div id="employee_leave_summary_loading" class="text-muted small py-2">
                                                <i class="fas fa-circle-notch fa-spin"></i> Loading leave…
                                            </div>
                                            <div id="employee_leave_summary_content" style="display: none;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    {{-- Add employee (popup) --}}
    <div class="modal fade modal-add-employee" id="add_employee_modal" tabindex="-1" role="dialog"
        aria-labelledby="addEmployeeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addEmployeeModalLabel">Add employee</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="save_customer_form">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="Full_Name">Full name</label>
                                    <input type="text" name="Full_Name" class="form-control" id="Full_Name"
                                        placeholder="Full name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" name="email" class="form-control" id="email"
                                        placeholder="Email address">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="password">Password</label>
                                    <input type="password" name="password" class="form-control" id="password"
                                        placeholder="Temporary password">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="Tp">Contact number</label>
                                    <input type="text" name="Tp" class="form-control" id="Tp"
                                        placeholder="10-digit mobile number" maxlength="10">
                                    <small id="error-message"
                                        class="form-text error-number-message text-danger">Enter a valid number (10 digits required)</small>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="Address">Address</label>
                                    <textarea name="Address" class="form-control" id="Address" rows="2"
                                        placeholder="Street, city, postal code… (optional)"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="joining_date">Joining date</label>
                                    <input type="date" name="joining_date" class="form-control" id="joining_date">
                                    <small class="form-text text-muted">Yearly leave renews on this anniversary.</small>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group mb-0">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="require_otp_new" checked>
                                        <label class="custom-control-label" for="require_otp_new">Require email OTP after sign-in</label>
                                    </div>
                                    <small class="form-text text-muted">Recommended: keep on. Turn off only for fixed salon PCs.</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="services">Services</label>
                                    <select id="services" class="form-control clear add-services-select"
                                        style="width: 100%;" multiple="multiple">
                                        @foreach ($services as $service)
                                            <option value="{{ $service->idServices }}">{{ $service->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="imageInput">Profile image</label>
                                    <input type="file" name="image" class="form-control" id="imageInput" accept="image/*">
                                    <img id="imagePreview" src="user-placeholder.png" alt="Preview"
                                        class="mt-2 rounded border"
                                        style="max-width: 200px; max-height: 200px; object-fit: cover;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" onclick="validateSubmitEmployee(event)">Save employee</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-validation/additional-methods.min.js') }}"></script>
    <script src="{{ asset('dist/js/adminlte.min.js') }}"></script>
    <script src="{{ asset('JS/validate.js') }}"></script>
    <script src="{{ asset('JS/employee.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        window.employeeSidebarUrl = @json(route('employee.sidebar-data'));
        window.employeeImagesBase = @json(rtrim(asset('images'), '/'));
        window.employeeLeaveSummaryUrl = function(id) {
            return @json(url('/employee')) + '/' + encodeURIComponent(id) + '/leave-summary';
        };

        $(function() {
            var employeesById = {};
            var lastSelectedEmployeeId = null;
            var searchDebounceTimer = null;

            function rebuildEmployeesById(list) {
                employeesById = {};
                (list || []).forEach(function(emp) {
                    if (emp && emp.idEmployee != null && emp.idEmployee !== '') {
                        employeesById[String(emp.idEmployee)] = emp;
                    }
                });
            }

            function syncEmployeesJsonScript(list) {
                var el = document.getElementById('employees-page-json');
                if (el) {
                    el.textContent = JSON.stringify(list || []);
                }
            }

            function renderEmployeeList(list) {
                var $list = $('#employee_list');
                $list.empty();
                if (!list || !list.length) {
                    $list.append(
                        $('<p class="text-muted text-center mb-0 employee-list-empty-msg">').html(
                            'No matching employees. Try different <strong>status</strong> or <strong>search</strong>.'
                        )
                    );
                    return;
                }
                var base = (window.employeeImagesBase || '').replace(/\/?$/, '');
                list.forEach(function(emp) {
                    var $btn = $('<button type="button" class="employee-list-item">').attr(
                        'data-employee-id',
                        emp.idEmployee
                    );
                    var file = emp.Image || '';
                    var imgSrc = file
                        ? base + '/' + encodeURIComponent(file)
                        : 'user-placeholder.png';
                    $btn.append(
                        $('<img class="employee-list-avatar">').attr('src', imgSrc).attr('alt', emp.Full_Name || '')
                    );
                    var $meta = $('<div class="employee-list-meta">');
                    $meta.append($('<div class="employee-list-name">').text(emp.Full_Name || ''));
                    $meta.append($('<div class="employee-list-sub">').text(emp.email || ''));
                    $btn.append($meta);
                    if (emp.Status) {
                        $btn.append(
                            $('<span class="employee-badge badge-success">').text('Active')
                        );
                    } else {
                        $btn.append(
                            $('<span class="employee-badge badge-secondary">').text('Inactive')
                        );
                    }
                    $list.append($btn);
                });
            }

            (function loadEmployeesJson() {
                var el = document.getElementById('employees-page-json');
                if (!el) {
                    return;
                }
                var raw = (el.textContent || '').trim();
                if (!raw) {
                    return;
                }
                try {
                    rebuildEmployeesById(JSON.parse(raw));
                } catch (err) {
                    console.error('Failed to parse employees-page-json', err);
                }
            })();

            function fetchSidebarList() {
                if (!window.employeeSidebarUrl) {
                    return;
                }
                var q = $('#employee_list_filter').val().trim();
                var status = $('#employee_status_filter').val() || 'all';
                var $wrap = $('#employee_list_wrap');
                $wrap.addClass('is-loading');
                $.ajax({
                    url: window.employeeSidebarUrl,
                    type: 'GET',
                    data: {
                        q: q,
                        status: status
                    },
                    dataType: 'json'
                })
                    .done(function(res) {
                        var list = (res && res.employees) || [];
                        rebuildEmployeesById(list);
                        syncEmployeesJsonScript(list);
                        renderEmployeeList(list);
                        if (!list.length) {
                            if (typeof window.clearEmployeeDetailSelection === 'function') {
                                window.clearEmployeeDetailSelection();
                            }
                            return;
                        }
                        var pick =
                            lastSelectedEmployeeId != null &&
                            employeesById[String(lastSelectedEmployeeId)]
                                ? String(lastSelectedEmployeeId)
                                : String(list[0].idEmployee);
                        var $pickBtn = $('#employee_list .employee-list-item[data-employee-id="' + pick + '"]');
                        if ($pickBtn.length) {
                            $pickBtn.trigger('click');
                        } else {
                            $('#employee_list .employee-list-item').first().trigger('click');
                        }
                    })
                    .fail(function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Could not load employees',
                            text: 'Check your connection and try again.'
                        });
                    })
                    .always(function() {
                        $wrap.removeClass('is-loading');
                    });
            }

            function scheduleFetchSidebar() {
                clearTimeout(searchDebounceTimer);
                searchDebounceTimer = setTimeout(fetchSidebarList, 400);
            }

            var addModal = $('#add_employee_modal');
            var select2Common = {
                theme: 'bootstrap4',
                placeholder: 'Select services…',
                allowClear: true,
                width: '100%'
            };

            $('.add-services-select').select2($.extend({}, select2Common, {
                dropdownParent: addModal
            }));

            $('.u-services-select').select2(select2Common);

            addModal.on('shown.bs.modal', function() {
                $('#Full_Name').trigger('focus');
            });

            addModal.on('hidden.bs.modal', function() {
                $('#save_customer_form')[0].reset();
                $('#services').val(null).trigger('change');
                $('#imagePreview').attr('src', 'user-placeholder.png');
                $('#require_otp_new').prop('checked', true);
                $('#error-message').removeClass('error-visible');
            });

            $(document).on('change', '#imageInput', function(event) {
                var reader = new FileReader();
                reader.onload = function() {
                    $('#imagePreview').attr('src', reader.result);
                };
                if (event.target.files.length > 0) {
                    reader.readAsDataURL(event.target.files[0]);
                } else {
                    $('#imagePreview').attr('src', 'user-placeholder.png');
                }
            });

            $('#employee_list_filter').on('input', scheduleFetchSidebar);
            $('#employee_status_filter').on('change', function() {
                clearTimeout(searchDebounceTimer);
                fetchSidebarList();
            });

            $('#employee_list').on('click', '.employee-list-item', function() {
                var id = $(this).data('employee-id');
                lastSelectedEmployeeId = id;
                var data = employeesById[String(id)];
                if (!data) {
                    return;
                }
                $('#employee_list .employee-list-item').removeClass('active');
                $(this).addClass('active');
                if (typeof window.populateEmployeeDetail === 'function') {
                    window.populateEmployeeDetail(data);
                }
            });

            $('#btn_update_employee').on('click', function(e) {
                validateSubmitEditEmployee(e);
            });

            $('#btn_toggle_status').on('click', function() {
                if (window.selectedEmployeeId) {
                    updateStatusEmployee(window.selectedEmployeeId);
                }
            });

            var first = $('#employee_list .employee-list-item').first();
            if (first.length) {
                first.trigger('click');
            }
        });
    </script>
@endsection