{{-- <x-layouts.app> --}}
    <style>
        .staff-page { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
        
        .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
        .page-header .title h1 { font-size: 24px; font-weight: 600; color: #111827; margin: 0 0 4px 0; }
        .page-header .title p { font-size: 14px; color: #6b7280; margin: 0; }
        .page-header .badges { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
        .page-header .badge { padding: 4px 10px; background: #f3f4f6; border-radius: 6px; font-size: 12px; color: #6b7280; display: flex; align-items: center; gap: 5px; }
        .page-header .badge.blood { background: #fef2f2; color: #dc2626; }
        .back-btn { display: inline-flex; align-items: center; gap: 8px; color: #6366f1; font-size: 14px; font-weight: 500; text-decoration: none; }
        .back-btn:hover { color: #4f46e5; }
        
        .section-card {
            background: white; border-radius: 16px; padding: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
        .section-header .left { display: flex; align-items: center; gap: 12px; }
        .section-icon {
            width: 40px; height: 40px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; color: white;
        }
        .section-icon.purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
        .section-icon.orange { background: linear-gradient(135deg, #f97316, #ef4444); }
        .section-icon.red { background: linear-gradient(135deg, #ef4444, #ec4899); }
        .section-icon.blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }
        .section-icon.green { background: linear-gradient(135deg, #10b981, #14b8a6); }
        .section-title { font-size: 16px; font-weight: 600; color: #111827; }
        .step-badge {
            padding: 6px 14px; background: #eef2ff; border-radius: 20px;
            font-size: 12px; font-weight: 600; color: #6366f1;
        }
        
        .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
        .form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
        
        .form-group { }
        .form-group.span-2 { grid-column: span 2; }
        .form-group label { display: block; font-size: 14px; font-weight: 500; color: #374151; margin-bottom: 8px; }
        .form-group label .req { color: #ef4444; margin-left: 2px; }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 10px;
            font-size: 14px; background: white; box-sizing: border-box; transition: all 0.2s;
        }
        .form-group input::placeholder { color: #9ca3af; }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
        }
        .form-group textarea { resize: vertical; min-height: 70px; }
        
        .pwd-wrapper { position: relative; }
        .pwd-wrapper input { padding-right: 44px; }
        .pwd-toggle {
            position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: #9ca3af; cursor: pointer;
        }
        .pwd-toggle:hover { color: #6b7280; }
        
        .info-box {
            display: flex; align-items: center; gap: 10px; padding: 12px 16px;
            background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; margin-bottom: 20px;
        }
        .info-box i { color: #3b82f6; }
        .info-box span { font-size: 13px; color: #1e40af; }
        
        .status-box {
            display: flex; align-items: center; gap: 14px; padding: 16px 20px;
            background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb;
        }
        .status-box.disabled { opacity: 0.6; cursor: not-allowed; }
        .toggle { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
        .toggle input { opacity: 0; width: 0; height: 0; }
        .toggle-track {
            position: absolute; cursor: pointer; inset: 0;
            background: #d1d5db; border-radius: 26px; transition: 0.25s;
        }
        .toggle-track:before {
            content: ""; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px;
            background: white; border-radius: 50%; transition: 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .toggle input:checked + .toggle-track { background: #10b981; }
        .toggle input:checked + .toggle-track:before { transform: translateX(22px); }
        .status-text strong { display: block; font-size: 14px; color: #111827; margin-bottom: 2px; }
        .status-text span { font-size: 13px; color: #6b7280; }
        
        .roles-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
        .role-chip {
            display: flex; align-items: center; gap: 10px; padding: 10px 16px;
            background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 10px;
            cursor: pointer; transition: all 0.15s;
        }
        .role-chip:hover { border-color: #d1d5db; background: #f3f4f6; }
        .role-chip.selected { background: #eef2ff; border-color: #6366f1; }
        .role-chip input { display: none; }
        .role-chip .checkbox {
            width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 5px;
            display: flex; align-items: center; justify-content: center; transition: all 0.15s;
        }
        .role-chip.selected .checkbox { background: #6366f1; border-color: #6366f1; color: white; }
        .role-chip .checkbox i { font-size: 10px; }
        .role-chip .name { font-size: 14px; font-weight: 500; color: #374151; }
        
        .gen-btn {
            display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; margin-top: 12px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; border-radius: 8px;
            font-size: 13px; font-weight: 500; color: white; cursor: pointer; transition: 0.2s;
        }
        .gen-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
        
        .form-actions {
            display: flex; justify-content: flex-end; gap: 12px;
            padding: 20px 0; margin-top: 10px;
        }
        .form-actions .btn { padding: 12px 28px; font-size: 14px; font-weight: 500; border-radius: 10px; }
        
        .alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; }
        .alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
        .alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
        .alert ul { margin: 0; padding-left: 18px; font-size: 14px; }

        /* Blood group select styling */
        .blood-group-select {
            position: relative;
        }
        .blood-group-select select {
            padding-left: 40px;
        }
        .blood-group-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #ef4444;
            font-size: 16px;
        }

        /* Department select with add button */
        .dept-select-wrapper {
            display: flex; gap: 8px; align-items: stretch;
        }
        .dept-select-wrapper select {
            flex: 1;
        }
        .add-dept-btn {
            width: 46px; height: 46px; border: 2px dashed #d1d5db; border-radius: 10px;
            background: #f9fafb; color: #6b7280; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s; flex-shrink: 0;
        }
        .add-dept-btn:hover {
            border-color: #6366f1; background: #eef2ff; color: #6366f1;
        }
        .add-dept-btn i { font-size: 16px; }

        /* Floating Modal Styles */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
            display: none; align-items: center; justify-content: center;
            z-index: 9999; padding: 20px; backdrop-filter: blur(4px);
        }
        .modal-overlay.active { display: flex; }
        
        .modal-card {
            background: white; border-radius: 20px; width: 100%; max-width: 480px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            animation: modalSlideIn 0.3s ease;
            max-height: 90vh; overflow-y: auto;
        }
        @keyframes modalSlideIn {
            from { opacity: 0; transform: translateY(-20px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        
        .modal-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px 24px; border-bottom: 1px solid #f3f4f6;
        }
        .modal-header .header-left {
            display: flex; align-items: center; gap: 12px;
        }
        .modal-header .icon {
            width: 42px; height: 42px; border-radius: 12px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 18px;
        }
        .modal-header h3 { font-size: 18px; font-weight: 600; color: #111827; margin: 0; }
        .modal-header p { font-size: 13px; color: #6b7280; margin: 2px 0 0 0; }
        .modal-close {
            width: 36px; height: 36px; border-radius: 10px; border: none;
            background: #f3f4f6; color: #6b7280; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
        }
        .modal-close:hover { background: #fee2e2; color: #ef4444; }
        
        .modal-body { padding: 24px; }
        .modal-body .form-group { margin-bottom: 18px; }
        .modal-body .form-group:last-child { margin-bottom: 0; }
        .modal-body .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        
        .modal-footer {
            display: flex; justify-content: flex-end; gap: 12px;
            padding: 16px 24px; border-top: 1px solid #f3f4f6; background: #f9fafb;
            border-radius: 0 0 20px 20px;
        }
        .modal-footer .btn {
            padding: 10px 20px; border-radius: 10px; font-size: 14px;
            font-weight: 500; cursor: pointer; border: none;
            display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s;
        }
        .modal-footer .btn-cancel { background: white; color: #374151; border: 1px solid #e5e7eb; }
        .modal-footer .btn-cancel:hover { background: #f3f4f6; }
        .modal-footer .btn-save {
            background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white;
        }
        .modal-footer .btn-save:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
        .modal-footer .btn-save:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        /* Toast notification */
        .toast {
            position: fixed; bottom: 24px; right: 24px; padding: 14px 20px;
            background: #111827; color: white; border-radius: 12px;
            font-size: 14px; display: none; align-items: center; gap: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 10000;
            animation: toastSlide 0.3s ease;
        }
        .toast.success { background: linear-gradient(135deg, #10b981, #059669); }
        .toast.error { background: linear-gradient(135deg, #ef4444, #dc2626); }
        .toast.show { display: flex; }
        @keyframes toastSlide {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @media (max-width: 900px) {
            .form-grid { grid-template-columns: repeat(2, 1fr); }
            .form-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .form-grid, .form-grid.cols-4, .form-grid.cols-2 { grid-template-columns: 1fr; }
            .form-group.span-2 { grid-column: span 1; }
            .modal-body .form-row { grid-template-columns: 1fr; }
        }
    </style>

    @php
        $firstName = old('first_name', $staff->first_name ?? '');
        $lastName = old('last_name', $staff->last_name ?? '');
        if (empty($firstName) && !empty($user->name)) {
            $nameParts = explode(' ', $user->name, 2);
            $firstName = $nameParts[0];
            $lastName = $nameParts[1] ?? '';
        }
        $isSelf = $user->id === auth('admin')->id();
    @endphp

    <div class="staff-page">
        <div class="page-header">
            <div class="title">
                <h1>Edit Staff</h1>
                <p>Update staff member information</p>
                <div class="badges">
                    @if($staff && $staff->employee_code)
                        <span class="badge"><i class="fas fa-id-badge"></i> {{ $staff->employee_code }}</span>
                    @endif
                    @if($staff && $staff->join_date)
                        <span class="badge"><i class="fas fa-calendar"></i> Joined {{ $staff->join_date->format('M d, Y') }}</span>
                    @endif
                    @if($staff && $staff->blood_group)
                        <span class="badge blood"><i class="fas fa-tint"></i> {{ $staff->blood_group }}</span>
                    @endif
                </div>
            </div>
            <a href="{{ route('admin.settings.users.index') }}" class="back-btn">
                <i class="fas fa-arrow-left"></i> Back to List
            </a>
        </div>

        @if($errors->any())
            <div class="alert alert-error">
                <i class="fas fa-exclamation-circle"></i>
                <div><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
            </div>
        @endif

        @if(session('success'))
            <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
        @endif

        <form action="{{ route('admin.settings.users.update', $user->id) }}" method="POST" id="staffForm">
            @csrf

            {{-- Section 1: Personal Information --}}
            <div class="section-card">
                <div class="section-header">
                    <div class="left">
                        <div class="section-icon orange"><i class="fas fa-user"></i></div>
                        <span class="section-title">Personal Information</span>
                    </div>
                    <span class="step-badge">Step 1 of 5</span>
                </div>
                <div class="form-grid">
                    <div class="form-group">
                        <label>First Name <span class="req">*</span></label>
                        <input type="text" name="first_name" value="{{ $firstName }}" placeholder="Enter first name" required>
                    </div>
                    <div class="form-group">
                        <label>Last Name <span class="req">*</span></label>
                        <input type="text" name="last_name" value="{{ $lastName }}" placeholder="Enter last name" required>
                    </div>
                    <div class="form-group">
                        <label>Email <span class="req">*</span></label>
                        <input type="email" name="email" value="{{ old('email', $user->email) }}" placeholder="email@example.com" required>
                    </div>
                    <div class="form-group">
                        <label>Phone</label>
                        <input type="text" name="phone" value="{{ old('phone', $staff->phone ?? '') }}" placeholder="+91 98765 43210">
                    </div>
                    <div class="form-group">
                        <label>Date of Birth</label>
                        <input type="date" name="dob" value="{{ old('dob', $staff->dob?->format('Y-m-d')) }}">
                    </div>
                    <div class="form-group">
                        <label>Gender</label>
                        <select name="gender">
                            <option value="">-- Select Gender --</option>
                            <option value="male" {{ old('gender', $staff->gender ?? '') === 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender', $staff->gender ?? '') === 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other" {{ old('gender', $staff->gender ?? '') === 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Blood Group</label>
                        <div class="blood-group-select">
                            <i class="fas fa-tint blood-group-icon"></i>
                            <select name="blood_group" style="padding-left: 40px;">
                                <option value="">-- Select Blood Group --</option>
                                @foreach($bloodGroups as $value => $label)
                                    <option value="{{ $value }}" {{ old('blood_group', $staff->blood_group ?? '') === $value ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Section 2: Employment Details --}}
            <div class="section-card">
                <div class="section-header">
                    <div class="left">
                        <div class="section-icon purple"><i class="fas fa-briefcase"></i></div>
                        <span class="section-title">Employment Details</span>
                    </div>
                    <span class="step-badge">Step 2 of 5</span>
                </div>
                <div class="form-grid cols-4">
                    <div class="form-group">
                        <label>Employee Code</label>
                        <input type="text" name="employee_code" value="{{ old('employee_code', $staff->employee_code ?? '') }}" placeholder="Employee code">
                    </div>
                    <div class="form-group">
                        <label>Department</label>
                        <div class="dept-select-wrapper">
                            <select name="department_id" id="department_id">
                                <option value="">-- Select Department --</option>
                                @foreach($departments as $dept)
                                    <option value="{{ $dept->id }}" {{ old('department_id', $staff->department_id ?? '') == $dept->id ? 'selected' : '' }}>
                                        {{ $dept->name }}
                                        @if($dept->code) ({{ $dept->code }}) @endif
                                    </option>
                                @endforeach
                            </select>
                            <button type="button" class="add-dept-btn" onclick="openDeptModal()" title="Add New Department">
                                <i class="fas fa-plus">+</i>
                            </button>
                        </div>
                        <input type="hidden" name="department" id="department_text" value="{{ old('department', $staff->department ?? '') }}">
                    </div>
                    <div class="form-group">
                        <label>Designation</label>
                        <input type="text" name="designation" value="{{ old('designation', $staff->designation ?? '') }}" placeholder="e.g. Manager">
                    </div>
                    <div class="form-group">
                        <label>Join Date</label>
                        <input type="date" name="join_date" value="{{ old('join_date', $staff->join_date?->format('Y-m-d')) }}">
                    </div>
                    <div class="form-group">
                        <label>Confirmation Date</label>
                        <input type="date" name="confirmation_date" value="{{ old('confirmation_date', $staff->confirmation_date?->format('Y-m-d')) }}">
                    </div>
                    <div class="form-group">
                        <label>Exit Date</label>
                        <input type="date" name="exit_date" value="{{ old('exit_date', $staff->exit_date?->format('Y-m-d')) }}">
                    </div>
                </div>
            </div>

            {{-- Section 3: Address --}}
            <div class="section-card">
                <div class="section-header">
                    <div class="left">
                        <div class="section-icon red"><i class="fas fa-map-marker-alt"></i></div>
                        <span class="section-title">Address</span>
                    </div>
                    <span class="step-badge">Step 3 of 5</span>
                </div>
                <div class="form-grid">
                    <div class="form-group span-2">
                        <label>Address Line 1</label>
                        <input type="text" name="address_line1" value="{{ old('address_line1', $staff->address_line1 ?? '') }}" placeholder="Street address">
                    </div>
                    <div class="form-group">
                        <label>Address Line 2</label>
                        <input type="text" name="address_line2" value="{{ old('address_line2', $staff->address_line2 ?? '') }}" placeholder="Apt, suite, building">
                    </div>
                    <div class="form-group">
                        <label>City</label>
                        <input type="text" name="city" value="{{ old('city', $staff->city ?? '') }}" placeholder="City">
                    </div>
                    <div class="form-group">
                        <label>State</label>
                        <input type="text" name="state" value="{{ old('state', $staff->state ?? '') }}" placeholder="State">
                    </div>
                    <div class="form-group">
                        <label>Pincode</label>
                        <input type="text" name="pincode" value="{{ old('pincode', $staff->pincode ?? '') }}" placeholder="Pincode">
                    </div>
                    <div class="form-group">
                        <label>Country</label>
                        <input type="text" name="country" value="{{ old('country', $staff->country ?? 'India') }}" placeholder="Country">
                    </div>
                </div>
            </div>

            {{-- Section 4: Emergency Contact --}}
            <div class="section-card">
                <div class="section-header">
                    <div class="left">
                        <div class="section-icon blue"><i class="fas fa-phone-alt"></i></div>
                        <span class="section-title">Emergency Contact</span>
                    </div>
                    <span class="step-badge">Step 4 of 5</span>
                </div>
                <div class="form-grid">
                    <div class="form-group">
                        <label>Contact Name</label>
                        <input type="text" name="emergency_contact_name" value="{{ old('emergency_contact_name', $staff->emergency_contact_name ?? '') }}" placeholder="Full name">
                    </div>
                    <div class="form-group">
                        <label>Contact Phone</label>
                        <input type="text" name="emergency_contact_phone" value="{{ old('emergency_contact_phone', $staff->emergency_contact_phone ?? '') }}" placeholder="Phone number">
                    </div>
                    <div class="form-group">
                        <label>Relationship</label>
                        <select name="emergency_contact_relation">
                            <option value="">-- Select Relation --</option>
                            @foreach(['Father', 'Mother', 'Spouse', 'Sibling', 'Friend', 'Other'] as $rel)
                                <option value="{{ $rel }}" {{ old('emergency_contact_relation', $staff->emergency_contact_relation ?? '') === $rel ? 'selected' : '' }}>{{ $rel }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Section 5: Access & Credentials --}}
            <div class="section-card">
                <div class="section-header">
                    <div class="left">
                        <div class="section-icon green"><i class="fas fa-shield-alt"></i></div>
                        <span class="section-title">Access & Credentials</span>
                    </div>
                    <span class="step-badge">Step 5 of 5</span>
                </div>
                
                @if($isSelf)
                    <label class="status-box disabled" style="margin-bottom: 24px;">
                        <div class="toggle"><input type="checkbox" checked disabled><span class="toggle-track"></span></div>
                        <div class="status-text"><strong>Account Active</strong><span>You cannot deactivate your own account</span></div>
                    </label>
                    <input type="hidden" name="is_active" value="1">
                @else
                    <label class="status-box" style="margin-bottom: 24px; cursor: pointer;">
                        <div class="toggle">
                            <input type="checkbox" name="is_active" value="1" {{ old('is_active', $user->is_active) ? 'checked' : '' }}>
                            <span class="toggle-track"></span>
                        </div>
                        <div class="status-text">
                            <strong>Account Active</strong>
                            <span>Inactive staff cannot login to the system</span>
                        </div>
                    </label>
                @endif

                <div class="info-box">
                    <i class="fas fa-info-circle"></i>
                    <span>Leave password fields empty to keep the current password</span>
                </div>

                <div class="form-grid cols-2">
                    <div class="form-group">
                        <label>New Password</label>
                        <div class="pwd-wrapper">
                            <input type="password" name="password" id="password" placeholder="Enter new password">
                            <button type="button" class="pwd-toggle" onclick="togglePwd('password')"><i class="fas fa-eye" id="password-icon"></i></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Confirm Password</label>
                        <div class="pwd-wrapper">
                            <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Confirm new password">
                            <button type="button" class="pwd-toggle" onclick="togglePwd('password_confirmation')"><i class="fas fa-eye" id="password_confirmation-icon"></i></button>
                        </div>
                    </div>
                </div>
                <button type="button" class="gen-btn" onclick="genPwd()"><i class="fas fa-magic"></i> Generate Strong Password</button>

                <div style="margin-top: 28px;">
                    <label style="font-size: 14px; font-weight: 500; color: #374151; margin-bottom: 12px; display: block;">
                        Assign Roles <span class="req">*</span>
                    </label>
                    @if($roles->count() > 0)
                        <div class="roles-grid">
                            @foreach($roles as $role)
                                <label class="role-chip {{ in_array($role->name, old('roles', $userRoles ?? [])) ? 'selected' : '' }}">
                                    <input type="checkbox" name="roles[]" value="{{ $role->name }}" {{ in_array($role->name, old('roles', $userRoles ?? [])) ? 'checked' : '' }}>
                                    <span class="checkbox"><i class="fas fa-check"></i></span>
                                    <span class="name">{{ ucfirst(str_replace('-', ' ', $role->name)) }}</span>
                                </label>
                            @endforeach
                        </div>
                    @else
                        <p style="color: #6b7280; font-size: 14px;">No roles available</p>
                    @endif
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ route('admin.settings.users.index') }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Update Staff</button>
            </div>
        </form>
    </div>

    {{-- Add Department Modal --}}
    <div class="modal-overlay" id="deptModal">
        <div class="modal-card">
            <div class="modal-header">
                <div class="header-left">
                    <div class="icon"><i class="fas fa-building"></i></div>
                    <div>
                        <h3>Add New Department</h3>
                        <p>Create a department quickly</p>
                    </div>
                </div>
                <button type="button" class="modal-close" onclick="closeDeptModal()">
                    <i class="fas fa-times">x</i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group">
                        <label>Department Name <span class="req">*</span></label>
                        <input type="text" id="dept_name" placeholder="e.g. Engineering" required>
                    </div>
                    <div class="form-group">
                        <label>Code</label>
                        <input type="text" id="dept_code" placeholder="Auto-generated" maxlength="20">
                    </div>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <textarea id="dept_description" placeholder="Brief description of the department..."></textarea>
                </div>
                <div class="form-group">
                    <label>Parent Department</label>
                    <select id="dept_parent">
                        <option value="">-- None (Root Department) --</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-cancel" onclick="closeDeptModal()">Cancel</button>
                <button type="button" class="btn btn-save" id="saveDeptBtn" onclick="saveDepartment()">
                    <i class="fas fa-check"></i> Create Department
                </button>
            </div>
        </div>
    </div>

    {{-- Toast Notification --}}
    <div class="toast" id="toast">
        <i class="fas fa-check-circle"></i>
        <span id="toastMsg">Department created successfully!</span>
    </div>

    <script>
        // Role chip selection
        document.querySelectorAll('.role-chip').forEach(chip => {
            chip.querySelector('input').addEventListener('change', function() {
                chip.classList.toggle('selected', this.checked);
            });
        });

        // Password toggle
        function togglePwd(id) {
            const field = document.getElementById(id);
            const icon = document.getElementById(id + '-icon');
            if (field.type === 'password') {
                field.type = 'text';
                icon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                field.type = 'password';
                icon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        }

        // Generate password
        function genPwd() {
            const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%&*';
            let pwd = '';
            for (let i = 0; i < 14; i++) pwd += chars.charAt(Math.floor(Math.random() * chars.length));
            document.getElementById('password').value = pwd;
            document.getElementById('password_confirmation').value = pwd;
            document.getElementById('password').type = 'text';
            document.getElementById('password_confirmation').type = 'text';
            document.getElementById('password-icon').classList.replace('fa-eye', 'fa-eye-slash');
            document.getElementById('password_confirmation-icon').classList.replace('fa-eye', 'fa-eye-slash');
        }

        // Form validation
        document.getElementById('staffForm').addEventListener('submit', function(e) {
            const pw = document.querySelector('[name="password"]').value;
            const pc = document.querySelector('[name="password_confirmation"]').value;
            const roles = document.querySelectorAll('[name="roles[]"]:checked');
            
            if (pw && pw.length < 6) { alert('Password must be at least 6 characters'); e.preventDefault(); return; }
            if (pw && pw !== pc) { alert('Passwords do not match'); e.preventDefault(); return; }
            if (!roles.length) { alert('Please select at least one role'); e.preventDefault(); return; }
        });

        // Department Modal Functions
        function openDeptModal() {
            document.getElementById('deptModal').classList.add('active');
            document.getElementById('dept_name').focus();
            document.body.style.overflow = 'hidden';
        }

        function closeDeptModal() {
            document.getElementById('deptModal').classList.remove('active');
            document.body.style.overflow = '';
            // Clear form
            document.getElementById('dept_name').value = '';
            document.getElementById('dept_code').value = '';
            document.getElementById('dept_description').value = '';
            document.getElementById('dept_parent').value = '';
        }

        // Close modal on overlay click
        document.getElementById('deptModal').addEventListener('click', function(e) {
            if (e.target === this) closeDeptModal();
        });

        // Close modal on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && document.getElementById('deptModal').classList.contains('active')) {
                closeDeptModal();
            }
        });

        // Auto-generate code from name
        document.getElementById('dept_name').addEventListener('input', function() {
            const codeField = document.getElementById('dept_code');
            if (!codeField.dataset.userEdited) {
                const name = this.value.replace(/[^A-Za-z]/g, '').toUpperCase().substring(0, 3);
                codeField.value = name ? name + '01' : '';
            }
        });

        document.getElementById('dept_code').addEventListener('input', function() {
            this.dataset.userEdited = this.value ? 'true' : '';
        });

        // Save Department via AJAX
        function saveDepartment() {
            const name = document.getElementById('dept_name').value.trim();
            const code = document.getElementById('dept_code').value.trim();
            const description = document.getElementById('dept_description').value.trim();
            const parentId = document.getElementById('dept_parent').value;

            if (!name) {
                showToast('Please enter department name', 'error');
                document.getElementById('dept_name').focus();
                return;
            }

            const btn = document.getElementById('saveDeptBtn');
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating...';

            // AJAX request to create department
            fetch('{{ route("admin.settings.departments.store") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    name: name,
                    code: code || null,
                    description: description || null,
                    parent_id: parentId || null,
                    is_active: true
                })
            })
            .then(response => response.json())
            .then(data => {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-check"></i> Create Department';

                if (data.success) {
                    // Add to department dropdown
                    const select = document.getElementById('department_id');
                    const option = document.createElement('option');
                    option.value = data.data.id;
                    option.text = data.data.name + (data.data.code && data.data.code !== '-' ? ' (' + data.data.code + ')' : '');
                    option.selected = true;
                    select.add(option);

                    // Also add to parent dropdown in modal
                    const parentSelect = document.getElementById('dept_parent');
                    const parentOption = document.createElement('option');
                    parentOption.value = data.data.id;
                    parentOption.text = data.data.name;
                    parentSelect.add(parentOption);

                    closeDeptModal();
                    showToast('Department "' + name + '" created successfully!', 'success');
                } else {
                    showToast(data.message || 'Failed to create department', 'error');
                }
            })
            .catch(error => {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-check"></i> Create Department';
                console.error('Error:', error);
                showToast('Something went wrong. Please try again.', 'error');
            });
        }

        // Toast notification
        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            const toastMsg = document.getElementById('toastMsg');
            
            toast.className = 'toast ' + type + ' show';
            toastMsg.textContent = message;
            toast.querySelector('i').className = type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';

            setTimeout(() => {
                toast.classList.remove('show');
            }, 3500);
        }
    </script>
{{-- </x-layouts.app> --}}