@extends('dashboard.layouts.app')

@section('content')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 20px;
            font-weight: 600;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        textarea.asset-input {
            min-height: 120px;
            resize: vertical;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-invalid {
            border-color: #dc3545 !important;
        }

        .request-highlight {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            padding: 1rem 1.1rem;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #f8fafc;
        }

        .request-highlight__icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4338ca;
            flex-shrink: 0;
        }

        .request-highlight__title {
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.15rem;
        }

        .request-highlight__text {
            color: #6b7280;
            font-size: 0.92rem;
            margin: 0;
        }

        .request-sub-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fcfcfd;
            padding: 1rem;
        }

        .request-sub-card__head {
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #eceff3;
        }

        .request-sub-card__title {
            font-size: 20px;
            font-weight: 500;
            color: #111827;
            margin-bottom: 0.2rem;
        }

        .request-sub-card__sub {
            color: #6b7280;
            font-size: 0.9rem;
            margin: 0;
        }

        .balance-box {
            display: none;
            margin-top: 0.75rem;
            padding: 0.95rem 1rem;
            border-radius: 14px;
            font-weight: 700;
        }

        .balance-box--info {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .balance-box--danger {
            background: #fef2f2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        .asset-actions {
            display: flex;
            justify-content: end;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-container .selection {
            display: block !important;
        }

        .select2-container--default .select2-selection--single,
        .select2-container--default .select2-selection--multiple {
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.35rem 0.45rem;
            background: #fff;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px;
            color: #111827;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px;
        }

        @media (max-width: 991.98px) {

            .asset-col-6,
            .asset-col-12 {
                grid-column: span 12 / span 12;
            }
        }
    </style>

    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Add New Request"
                    description="Create a new request, assign it to the correct department, and complete any additional details based on the selected request type.">
                    <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Requests
                    </a>
                </x-page-title>

                <form id="requestForm" action="{{ route('requests.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Request Overview</h5>
                                <p class="form-section__sub mb-0">
                                    Start by selecting the department, request type, assignee, priority, and deadline.
                                </p>
                            </div>

                            <div class="request-highlight mb-4">
                                <div class="request-highlight__icon">
                                    <iconify-icon icon="mdi:file-document-edit-outline" width="22"
                                        height="22"></iconify-icon>
                                </div>
                                <div>
                                    <div class="request-highlight__title">Dynamic request form</div>
                                    <p class="request-highlight__text">
                                        Additional fields will appear automatically depending on the selected request type.
                                    </p>
                                </div>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="department_id" class="asset-label">Department <span
                                            class="text-danger">*</span></label>
                                    <select name="department_id" id="department_id" class="asset-select" required>
                                        <option value="">Select Department</option>
                                        @foreach ($departments as $department)
                                            <option data-department-name="{{ $department->name }}"
                                                value="{{ $department->id }}"
                                                {{ old('department_id', $auth->department_id) == $department->id ? 'selected' : '' }}>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('department_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6" id="request_for_field">
                                    <label for="request_for" class="asset-label">Requester Name</label>
                                    <select name="request_for" id="request_for" class="asset-select">
                                        <option value="">Select Staff</option>
                                        @foreach ($staffs as $staff)
                                            <option value="{{ $staff->id }}"
                                                {{ (int) old('request_for') === $staff->id ? 'selected' : '' }}>
                                                {{ $staff->first_name . ' ' . $staff->last_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('request_for')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="request_type_id" class="asset-label">Request Type <span
                                            class="text-danger">*</span></label>
                                    <select id="request_type_id" name="request_type_id" class="asset-select" required>
                                        <option value="">Select Request Type</option>
                                    </select>
                                    @error('request_type_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="priority" class="asset-label">Priority <span
                                            class="text-danger">*</span></label>
                                    <select name="priority" id="priority" class="asset-select" required>
                                        <option value="">Select Priority</option>
                                        <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low
                                        </option>
                                        <option value="medium"
                                            {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High
                                        </option>
                                    </select>
                                    @error('priority')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6 d-none" id="hr_field">
                                    @if ($auth->department->slug == 'hr')
                                        <div id="staff_id_field">
                                            <label for="staff_id" class="asset-label">Staff</label>
                                            <select name="staff_id" id="staff_id" class="asset-select select2"></select>
                                            @error('staff_id')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    @endif
                                </div>


                            </div>
                        </div>

                        <div class="request-sub-card mt-4" id="recruitment_field" style="display: none;">
                            <div class="request-sub-card__head">
                                <h5 class="request-sub-card__title">Recruitment Details</h5>
                                <p class="request-sub-card__sub">Provide the role requirements, vacancies, and hiring
                                    context.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="job_title_id" class="asset-label">Job Title <span
                                            class="text-danger">*</span></label>
                                    <select name="job_title_id" id="job_title_id" class="asset-select select2">
                                        <option value="">Select Job Title</option>
                                        @foreach ($jobTitles as $item)
                                            <option data-slug="{{ $item->slug }}" value="{{ $item->id }}"
                                                {{ old('job_title_id') == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('job_title_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="number_of_vacancies" class="asset-label">Number of Vacancies <span
                                            class="text-danger">*</span></label>
                                    <input type="number" name="number_of_vacancies" id="number_of_vacancies"
                                        class="asset-input" value="{{ old('number_of_vacancies') }}" min="1">
                                    @error('number_of_vacancies')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6 d-none" id="teacher_category_field">
                                    <label for="category_id" class="asset-label">Categories</label>
                                    <select name="category_id" id="category_id" class="asset-select select2">
                                        <option value="">Select Category</option>
                                        @foreach ($categories as $item)
                                            <option value="{{ $item->id }}"
                                                {{ old('category_id') == $item->id ? 'selected' : '' }}>
                                                {{ $item->name_en }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12 d-none" id="shift_time_emp_field">
                                    <label for="shift_time_ids" class="asset-label">Shift Time</label>
                                    <select multiple name="shift_time_ids[]" id="shift_time_ids"
                                        class="asset-select select2">
                                        @foreach ($shiftTimeEmp as $item)
                                            <option value="{{ $item->id }}"
                                                {{ old('shift_time_emp') == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('shift_time_emp')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6 d-none" id="teacher_track_types_field">
                                    <label for="track_type_ids" class="asset-label">Track Type</label>
                                    <select multiple name="track_type_ids[]" id="track_type_ids"
                                        class="asset-select select2">
                                        @foreach ($trackTypes as $item)
                                            <option value="{{ $item->id }}"
                                                {{ old('track_type_id') == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('track_type_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6 d-none" id="teacher_tracks_field">
                                    <label for="track_ids" class="asset-label">Programs</label>
                                    <select multiple name="track_ids[]" id="track_ids"
                                        class="asset-select select2"></select>
                                    @error('track_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6 d-none" id="shif_time_field">
                                    <label for="shif_time" class="asset-label">Shift Time</label>
                                    <select name="shift_time" id="shif_time" class="asset-select select2">
                                        <option value="">Select Shift Time</option>
                                        <option value="morning" {{ old('shift_time') == 'morning' ? 'selected' : '' }}>
                                            Morning
                                        </option>
                                        <option value="night" {{ old('shift_time') == 'night' ? 'selected' : '' }}>Night
                                        </option>
                                    </select>
                                    @error('shif_time')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="expected_start_date" class="asset-label">Expected Start Date <span
                                            class="text-danger">*</span></label>
                                    <input type="date" name="expected_start_date" id="expected_start_date"
                                        class="asset-input" value="{{ old('expected_start_date') }}">
                                    @error('expected_start_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="role_description" class="asset-label">Role Description <span
                                            class="text-danger">*</span></label>
                                    <textarea name="role_description" id="role_description" class="asset-input" rows="3">{{ old('role_description') }}</textarea>
                                    @error('role_description')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="required_qualifications_skills" class="asset-label">Required
                                        Qualifications &
                                        Skills <span class="text-danger">*</span></label>
                                    <textarea name="required_qualifications_skills" id="required_qualifications_skills" class="asset-input"
                                        rows="3">{{ old('required_qualifications_skills') }}</textarea>
                                    @error('required_qualifications_skills')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="justification_reason" class="asset-label">Justification / Reason <span
                                            class="text-danger">*</span></label>
                                    <textarea name="justification_reason" id="justification_reason" class="asset-input" rows="3">{{ old('justification_reason') }}</textarea>
                                    @error('justification_reason')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="request-sub-card mt-4" id="resignation_field" style="display: none;">
                            <div class="request-sub-card__head">
                                <h5 class="request-sub-card__title">Resignation Details</h5>
                                <p class="request-sub-card__sub">Provide the resignation date and the reason for leaving.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-12">
                                    <label for="resignation_date" class="asset-label">Resignation Date <span
                                            class="text-danger">*</span></label>
                                    <input type="date" name="resignation_date" id="resignation_date"
                                        class="asset-input" value="{{ old('resignation_date') }}">
                                    @error('resignation_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="reason" class="asset-label">Reason <span
                                            class="text-danger">*</span></label>
                                    <textarea name="reason" id="reason" class="asset-input" rows="3">{{ old('reason') }}</textarea>
                                    @error('reason')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="reason_type" class="asset-label">Resignation Type</label>
                                    <select name="reason_type" id="reason_type" class="asset-input">
                                        <option value="">-- Select Type --</option>
                                        <option value="voluntary" {{ old('reason_type') === 'voluntary' ? 'selected' : '' }}>Voluntary</option>
                                        <option value="involuntary" {{ old('reason_type') === 'involuntary' ? 'selected' : '' }}>Non-Voluntary</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="request-sub-card mt-4" id="it_field" style="display: none;">
                            <div class="request-sub-card__head">
                                <h5 class="request-sub-card__title">IT Details</h5>
                                <p class="request-sub-card__sub">Provide the IT category, item, and the issue subject.</p>
                                <a href="https://upedia-it.thetailors.tech/it-solutions" target="_blank" class="btn btn-outline-primary btn-sm">View IT Solutions</a>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-12 d-none" id="it_staff_field">
                                    @if ($auth->department->slug == 'it')
                                        <div id="staff_id_it_field">
                                            <label for="it_staff_id" class="asset-label">All Staff</label>
                                            <select name="staff_id" id="it_staff_id" class="asset-select">
                                                <option value="">Select Staff</option>
                                                @foreach ($allStaffs as $staff)
                                                    <option value="{{ $staff->id }}"
                                                        {{ (int) old('staff_id') === $staff->id ? 'selected' : '' }}>
                                                        {{ $staff->first_name . ' ' . $staff->last_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('it_staff_id')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    @endif
                                </div>

                                <div class="asset-col-6">
                                    <label for="it_category" class="asset-label">Category <span
                                            class="text-danger">*</span></label>
                                    <select name="it_category" id="it_category" class="asset-select">
                                        <option value="">Select Category</option>
                                        @foreach ($parentCategories as $category)
                                            <option value="{{ $category->id }}"
                                                {{ (int) old('it_category') === $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('it_category')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="it_sub_category" class="asset-label">Sub Category <span
                                            class="text-danger">*</span></label>
                                    <select name="it_sub_category" id="it_sub_category" class="asset-select">
                                        <option value="">Select Sub Category</option>

                                    </select>
                                    @error('it_sub_category')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror

                                </div>

                                <div class="asset-col-6">
                                    <label for="it_item" class="asset-label">Item <span
                                            class="text-danger">*</span></label>

                                    <select name="it_item" id="it_item" class="asset-select">
                                        <option value="">Select Item</option>
                                    </select>
                                    @error('it_item')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror


                                </div>

                                <div class="asset-col-6">
                                    <label for="it_subject" class="asset-label">Subject <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="it_subject" id="it_subject" class="asset-input"
                                        value="{{ old('it_subject') }}">
                                    @error('it_subject')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="request-sub-card mt-4" id="retest_field" style="display: none;">
                            <div class="request-sub-card__head">
                                <h5 class="request-sub-card__title">Retest Details</h5>
                                <p class="request-sub-card__sub">Select the student for retest.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-12">
                                    <label for="student_id" class="asset-label">Student <span
                                            class="text-danger">*</span></label>
                                    <select name="student_id" id="student_id" class="asset-select select2">
                                        <option value="">Select Student</option>
                                    </select>
                                    @error('student_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="request-sub-card mt-4" id="leave_field" style="display: none;">
                            <div class="request-sub-card__head">
                                <h5 class="request-sub-card__title">Leave Details</h5>
                                <p class="request-sub-card__sub">Select the leave range, type, and the supporting reason.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="leave_from" class="asset-label">Leave From <span
                                            class="text-danger">*</span></label>
                                    <input type="date" name="leave_from" id="leave_from" class="asset-input"
                                        value="{{ old('leave_from') }}">
                                    @error('leave_from')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="leave_to" class="asset-label">Leave To <span
                                            class="text-danger">*</span></label>
                                    <input type="date" name="leave_to" id="leave_to" class="asset-input"
                                        value="{{ old('leave_to') }}">
                                    @error('leave_to')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="leave_type_id" class="asset-label">Leave Type</label>
                                    <select name="leave_type_id" id="leave_type_id" class="asset-select select2">
                                        <option value="">Select Leave Type</option>
                                        @foreach ($leaveTypes as $item)
                                            <option value="{{ $item->id }}"
                                                data-type="{{ strtolower($item->type) }}"
                                                {{ (int) old('leave_type_id') === $item->id ? 'selected' : '' }}>
                                                {{ $item->type }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <div id="leaveBalanceInfo" class="balance-box balance-box--info">
                                        Available Balance: <span id="balance_amount">--</span> days
                                    </div>

                                    <div id="leaveBalanceError" class="balance-box balance-box--danger"></div>

                                    @error('leave_type_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="leave_reason" class="asset-label">Leave Reason <span
                                            class="text-danger">*</span></label>
                                    <textarea name="leave_reason" id="leave_reason" class="asset-input" rows="3">{{ old('leave_reason') }}</textarea>
                                    @error('leave_reason')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="asset-col-12" style="padding: 0px 15px 0px 15px;">
                            <label for="details" class="asset-label">Details</label>
                            <textarea name="details" id="details" class="asset-input" rows="4">{{ old('details') }}</textarea>
                            @error('details')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>


                        <div class="asset-col-12" id="attachment_field" style="padding: 0px 15px 0px 15px;">
                            <label for="attachments" class="asset-label">Attachments</label>
                            <input type="file" name="attachments[]" id="attachments" class="asset-input" multiple>
                            <div class="form-text mt-2">You can upload multiple files.</div>
                            @error('attachments')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            @error('attachments.*')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>


                        <div class="asset-actions">
                            <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--primary">
                                Cancel
                            </a>
                            <button type="submit" class="asset-btn asset-btn--secondary">
                                <span class="asset-btn submit-text">Submit Request</span>
                                <span class="spinner-border spinner-border-sm d-none ms-2" role="status"></span>
                            </button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            const $form = $('#requestForm');
            const $department = $('#department_id');
            const $requestFor = $('#request_for');
            const $requestType = $('#request_type_id');
            const $staffId = $('#staff_id');
            const $submitBtn = $('#submitBtn');
            const $submitText = $submitBtn.find('.submit-text');
            const $spinner = $submitBtn.find('.spinner-border');

            const $leaveInfo = $('#leaveBalanceInfo');
            const $leaveError = $('#leaveBalanceError');
            const $balanceAmount = $('#balance_amount');

            let leaveBalances = {};

            $('.select2').select2({
                allowClear: true,
                width: '100%'
            });

            function showField(id) {
                $(id).removeClass('d-none').stop(true, true).slideDown(200);
            }

            function hideField(id) {
                const $field = $(id);
                $field.stop(true, true).slideUp(200, function() {
                    $field.addClass('d-none');
                });

                $field.find('input[type="text"], input[type="number"], input[type="date"], textarea').val('');
                $field.find('select').each(function() {
                    $(this).val($(this).prop('multiple') ? [] : '').trigger('change');
                });
            }

            function isLeaveRequestTypeName(typeName) {
                const normalized = (typeName || '').trim().toLowerCase().replace(/\s+/g, '-');
                return normalized.includes('leave') || normalized.includes('vacation');
            }

            function isVacationRequestTypeName(typeName) {
                const normalized = (typeName || '').trim().toLowerCase().replace(/\s+/g, '-');
                return normalized.includes('vacation');
            }

            function skipLeaveBalanceCheck() {
                return isVacationRequestTypeName($requestType.find('option:selected').text());
            }

            function resetSpecialSections() {
                $('#recruitment_field, #resignation_field, #leave_field, #it_field, #retest_field').hide();
                $('#hr_field, #it_staff_field').addClass('d-none');
                $('#request_for_field').removeClass('d-none');
                $('#recruitment_request_for_note').addClass('d-none');
                $leaveInfo.hide();
                $leaveError.hide().text('');
                $submitBtn.prop('disabled', false);
            }

            const loginUserDepartmentSlug = @json(strtolower($auth->department->slug ?? ''));
            const loginUserDepartmentName = @json(strtolower($auth->department->name ?? ''));


            function loadDepartmentData(departmentId, selectedRequestTypeId = null) {
                if (!departmentId) {
                    $requestFor.empty()
                        .append('<option value="">Select Staff</option>')
                        .trigger('change');

                    $requestType.empty()
                        .append('<option value="">Select Request Type</option>')
                        .trigger('change');

                    $staffId.empty()
                        .append('<option value="">Select Staff</option>')
                        .trigger('change');

                    return;
                }

                $.ajax({
                    url: "{{ url('/requests/get-staffs-types') }}/" + departmentId,
                    type: "GET",
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(data) {
                        $requestFor.empty().append('<option value="">Select Staff</option>');

                        data.staffs.forEach(function(staff) {
                            $requestFor.append(
                                `<option value="${staff.id}">${staff.first_name} ${staff.last_name}</option>`
                            );
                        });

                        const oldRequestFor = @json(old('request_for'));

                        if (oldRequestFor) {
                            $requestFor.val(oldRequestFor).trigger('change');
                        } else {
                            $requestFor.trigger('change');
                        }

                        $requestType.empty().append('<option value="">Select Request Type</option>');

                        const isLoginUserIT =
                            loginUserDepartmentSlug === 'it' ||
                            loginUserDepartmentName === 'it';

                        data.request_types.forEach(function(type) {
                            const requestTypeName = (type.name || '')
                                .trim()
                                .toLowerCase()
                                .replace(/\s+/g, '-');

                            // Hide IT Ticket only if logged-in user belongs to IT department
                            if (isLoginUserIT && requestTypeName === 'it-ticket') {
                                return;
                            }

                            $requestType.append(
                                `<option value="${type.id}">${type.name}</option>`
                            );
                        });

                        const finalRequestType = selectedRequestTypeId || @json(old('request_type_id'));

                        if (finalRequestType) {
                            const selectedOptionExists = $requestType
                                .find(`option[value="${finalRequestType}"]`)
                                .length > 0;

                            if (selectedOptionExists) {
                                $requestType.val(finalRequestType).trigger('change');
                            } else {
                                $requestType.val('').trigger('change');
                            }
                        } else {
                            $requestType.trigger('change');
                        }
                    }
                });

                $.ajax({
                    url: "{{ url('/staffonDepartment') }}/",
                    type: "GET",
                    data: {
                        department_id: departmentId
                    },
                    success: function(data) {
                        $staffId.empty().append('<option value="">Select Staff</option>');

                        data.staffs.forEach(function(staff) {
                            $staffId.append(
                                `<option value="${staff.id}">${staff.first_name} ${staff.last_name}</option>`
                            );
                        });

                        const oldStaffId = @json(old('staff_id'));

                        if (oldStaffId) {
                            $staffId.val(oldStaffId).trigger('change');
                        }
                    }
                });
            }

            function updateRequestTypeSections() {
                const selectedText = ($requestType.find('option:selected').text() || '')
                    .trim()
                    .toLowerCase();

                const normalizedSelectedText = selectedText.replace(/\s+/g, '-');

                const leaveTypeText = ($('#leave_type_id').find('option:selected').text() || '')
                    .trim()
                    .toLowerCase();

                const $attachmentField = $('#attachment_field');

                resetSpecialSections();

                // Attachment logic
                if (isLeaveRequestTypeName(normalizedSelectedText)) {
                    if (leaveTypeText.includes('sick leave')) {
                        $attachmentField.stop(true, true).slideDown(200);
                    } else {
                        $attachmentField.stop(true, true).slideUp(200);
                        $('#attachments').val('');
                    }
                } else {
                    $attachmentField.stop(true, true).slideDown(200);
                }

                if (normalizedSelectedText === 'recruitment') {
                    $('#recruitment_field').slideDown(200);

                    $('#request_for_field').addClass('d-none');

                    $('#recruitment_request_for_note')
                        .removeClass('d-none')
                        .hide()
                        .slideDown(200);

                    $requestFor.val('').trigger('change');

                } else if (normalizedSelectedText === 'resignation') {
                    $('#resignation_field').slideDown(200);

                    $('#request_for_field').addClass('d-none');
                    $('#hr_field').removeClass('d-none');

                    $requestFor.val('').trigger('change');

                } else if (isLeaveRequestTypeName(normalizedSelectedText)) {
                    $('#leave_field').slideDown(200);

                    $('#request_for_field').addClass('d-none');
                    $('#hr_field').removeClass('d-none');

                    $requestFor.val('').trigger('change');

                    updateLeaveBalanceDisplay();

                } else if (normalizedSelectedText === 'it-ticket') {
                    $('#it_field').slideDown(200);

                    $('#it_staff_field').removeClass('d-none');

                } else if (normalizedSelectedText === 'retest') {
                    $('#retest_field').slideDown(200);

                    $('#request_for_field').addClass('d-none');

                    loadRetestStudents();
                }
            }

            function loadRetestStudents() {
                const $studentSelect = $('#student_id');
                $studentSelect.empty().append('<option value="">Loading students...</option>').trigger('change');

                $.ajax({
                    url: "{{ route('requests.get_retest_students') }}",
                    type: "GET",
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(data) {
                        $studentSelect.empty().append('<option value="">Select Student</option>');
                        data.students.forEach(function(student) {
                            $studentSelect.append(
                                `<option value="${student.id}">${student.name}</option>`
                            );
                        });
                        $studentSelect.trigger('change');
                    },
                    error: function(xhr) {
                        const errorMsg = xhr.responseJSON?.error || 'Failed to load students';
                        $studentSelect.empty().append(`<option value="">${errorMsg}</option>`).trigger(
                            'change');
                    }
                });
            }

            function updateRecruitmentJobFields() {
                const slug = $('#job_title_id').find('option:selected').data('slug');

                hideField('#teacher_category_field');
                hideField('#teacher_track_types_field');
                hideField('#teacher_tracks_field');
                hideField('#shif_time_field');
                hideField('#shift_time_emp_field');

                if (slug === 'teacher') {
                    showField('#teacher_category_field');
                    showField('#teacher_track_types_field');
                    showField('#teacher_tracks_field');
                    showField('#shif_time_field');
                } else if (slug === 'tester') {
                    showField('#shif_time_field');
                } else if (slug) {
                    showField('#shift_time_emp_field');
                }
            }

            function ajaxCategory(categoryId, trackTypeIds) {
                if (!categoryId || !trackTypeIds || trackTypeIds.length === 0) {
                    $('#track_ids').empty().trigger('change');
                    return;
                }

                $.ajax({
                    url: "{{ url('/getTracks') }}",
                    type: "GET",
                    data: {
                        category_id: categoryId,
                        track_type_id: trackTypeIds
                    },
                    success: function(data) {
                        const $tracks = $('#track_ids');
                        $tracks.empty();

                        data.tracks.forEach(function(track) {
                            $tracks.append(
                                `<option value="${track.id}">${track.name_en}</option>`);
                        });

                        const oldTrackIds = @json(old('track_ids', []));
                        if (oldTrackIds && oldTrackIds.length) {
                            $tracks.val(oldTrackIds).trigger('change');
                        }
                    }
                });
            }




            let itCategory = $('#it_category');

            itCategory.on('change', function() {
                let categoryId = $(this).val();
                $('#it_sub_category').empty().append('<option value="">Select Sub Category</option>')
                    .trigger('change');

                if (categoryId) {
                    $.ajax({
                        url: `{{ url('/getSubsOnTicketCategory') }}/${categoryId}`,
                        type: 'GET',
                        success: function(data) {
                            data.forEach(function(sub) {
                                $('#it_sub_category').append(
                                    `<option value="${sub.id}">${sub.name}</option>`
                                );
                            });
                            $('#it_sub_category').trigger('change');
                        }
                    });
                }


            });
            let itSubCategory = $('#it_sub_category');

            itSubCategory.on('change', function() {
                let subCategoryId = $(this).val();
                $('#it_item').empty().append('<option value="">Select Sub Category</option>').trigger(
                    'change');

                if (subCategoryId) {
                    $.ajax({
                        url: `{{ url('/getItemsOnTicketSubs') }}/${subCategoryId}`,
                        type: 'GET',
                        success: function(data) {
                            data.forEach(function(sub) {
                                $('#it_item').append(
                                    `<option value="${sub.id}">${sub.name}</option>`
                                );
                            });
                            $('#it_item').trigger('change');
                        }
                    });
                }


            });


            function checkLeaveTypeBalance() {
                const leaveTypeId = $('#leave_type_id').val();

                if (skipLeaveBalanceCheck()) {
                    $leaveInfo.hide();
                    $leaveError.hide().text('');
                    $submitBtn.prop('disabled', false);
                    return;
                }

                if (!leaveTypeId) {
                    $leaveInfo.hide();
                    $leaveError.hide().text('');
                    $submitBtn.prop('disabled', false);
                    return;
                }

                $.ajax({
                    url: `/requests/leave-balances/${leaveTypeId}`,
                    type: 'GET',
                    success: function(response) {

                        console.log(response)
                        if (response.type !== undefined && response.type === "sick leave") {
                            return;

                        }

                        if (response.success === false) {
                            $leaveInfo.hide();
                            $leaveError.text(response.message || 'No leave balance available.').show();
                            $submitBtn.prop('disabled', true);
                            return;
                        }



                        if (response.success === true && response.balance !== undefined && response
                            .balance !== 0) {
                            $leaveError.hide().text('');
                            $leaveInfo.show();
                            $balanceAmount.text(response.balance);
                            $submitBtn.prop('disabled', false);
                        } else {
                            $leaveInfo.hide();
                            $leaveError.text(response.message || 'No available balance.').show();
                            $balanceAmount.text('0');
                            $submitBtn.prop('disabled', true);
                        }
                    },
                    error: function(xhr) {
                        $leaveInfo.hide();
                        $leaveError.text(xhr.responseJSON?.message || 'Failed to fetch leave balance.')
                            .show();
                        $submitBtn.prop('disabled', true);
                    }
                });
            }

            function updateLeaveBalanceDisplay() {
                const leaveTypeId = $('#leave_type_id').val();

                if (skipLeaveBalanceCheck()) {
                    $leaveInfo.hide();
                    $leaveError.hide().text('');
                    $submitBtn.prop('disabled', false);
                    return;
                }

                if (!leaveTypeId) {
                    $leaveInfo.hide();
                    $leaveError.hide().text('');
                    $submitBtn.prop('disabled', false);
                    return;
                }

                if (leaveBalances[leaveTypeId]) {
                    $balanceAmount.text(leaveBalances[leaveTypeId].available_balance);
                    $leaveInfo.show();
                    $leaveError.hide().text('');
                } else {
                    checkLeaveTypeBalance();
                }
            }

            function updateRequestTypeSections() {
                const selectedText = ($requestType.find('option:selected').text() || '').trim().toLowerCase();

                resetSpecialSections();

                if (selectedText === 'recruitment') {
                    $('#recruitment_field').slideDown();
                    $('#request_for_field').addClass('d-none');
                    $('#recruitment_request_for_note').removeClass('d-none').hide().slideDown(200);
                    $requestFor.val('').trigger('change');
                } else if (selectedText === 'resignation') {
                    $('#resignation_field').slideDown();
                    $('#request_for_field').addClass('d-none');
                    $('#hr_field').removeClass('d-none');
                    $requestFor.val('').trigger('change');
                } else if (isLeaveRequestTypeName(selectedText)) {
                    $('#leave_field').slideDown();
                    $('#request_for_field').addClass('d-none');
                    $('#hr_field').removeClass('d-none');
                    $requestFor.val('').trigger('change');
                    updateLeaveBalanceDisplay();
                } else if (selectedText === 'it-ticket') {
                    $('#it_field').slideDown();
                    $('#it_staff_field').removeClass('d-none');
                } else if (selectedText === 'retest') {
                    $('#retest_field').slideDown();
                    $('#request_for_field').addClass('d-none');
                    loadRetestStudents();
                }
            }
            const urlParams = new URLSearchParams(window.location.search);
            const urlDepartmentId = urlParams.get('department_id');
            const urlRequestType = urlParams.get('request_type');
            const oldDepartmentId = @json(old('department_id', $auth->department_id));
            const initialDepartmentId = urlDepartmentId || oldDepartmentId;

            if (urlDepartmentId) {
                $department.val(urlDepartmentId).trigger('change');
                $department.prop('disabled', true);

                if ($('input[name="department_id_hidden"]').length === 0) {
                    $('<input>', {
                        type: 'hidden',
                        name: 'department_id',
                        value: urlDepartmentId
                    }).appendTo($form);
                }
            }

            if (initialDepartmentId) {
                loadDepartmentData(initialDepartmentId, urlRequestType);
            }

            $department.on('change', function() {
                loadDepartmentData($(this).val());
            });

            $('#job_title_id').on('change', function() {
                updateRecruitmentJobFields();
            });

            $('#category_id, #track_type_ids').on('change', function() {
                ajaxCategory($('#category_id').val(), $('#track_type_ids').val());
            });

            $requestType.on('change', function() {
                updateRequestTypeSections();

                if (urlRequestType && $('input[name="request_type_id_hidden"]').length === 0) {
                    $requestType.prop('disabled', true);

                    $('<input>', {
                        type: 'hidden',
                        name: 'request_type_id',
                        value: urlRequestType
                    }).appendTo($form);
                }
            });


            $('#leave_type_id').on('change', function() {
                updateLeaveBalanceDisplay();
            });

            $form.on('submit', function(e) {
                e.preventDefault();

                if ($('#recruitment_field').is(':hidden')) {
                    $('#recruitment_field').find('input, select, textarea').val('').trigger('change');
                }
                if ($('#it_field').is(':hidden')) {
                    $('#it_field').find('input, select, textarea').val('').trigger('change');
                }
                if ($('#resignation_field').is(':hidden')) {
                    $('#resignation_field').find('input, select, textarea').val('').trigger('change');
                }
                if ($('#leave_field').is(':hidden')) {
                    $('#leave_field').find('input, select, textarea').val('').trigger('change');
                }
                if ($('#retest_field').is(':hidden')) {
                    $('#retest_field').find('input, select, textarea').val('').trigger('change');
                }

                $submitBtn.prop('disabled', true);
                $submitText.addClass('d-none');
                $spinner.removeClass('d-none');

                $('.alert').remove();

                const formData = new FormData(this);

                $.ajax({
                    url: $form.attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(response) {
                        if (response.redirect) {
                            window.location.href = response.redirect;
                            return;
                        }

                        window.location.href = "{{ route('requests.index') }}";
                    },
                    error: function(xhr) {
                        const errors = xhr.responseJSON?.errors;
                        const message = xhr.responseJSON?.message;

                        let errorHtml = `
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fas fa-exclamation-circle me-2"></i>
                        `;

                        if (errors) {
                            errorHtml += `<ul class="mb-0">`;
                            $.each(errors, function(key, value) {
                                errorHtml += `<li>${value[0]}</li>`;
                            });
                            errorHtml += `</ul>`;
                        } else {
                            errorHtml +=
                                `${message || 'An error occurred while submitting the request.'}`;
                        }

                        errorHtml += `
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        `;

                        $form.before(errorHtml);
                    },
                    complete: function() {
                        $submitBtn.prop('disabled', false);
                        $submitText.removeClass('d-none');
                        $spinner.addClass('d-none');
                    }
                });
            });

            updateRecruitmentJobFields();
            updateRequestTypeSections();
        });
    </script>
    <script>
        $(document).ready(function() {

            function toggleAttachmentField() {

                const selectedOption = $('#leave_type_id option:selected');
                const leaveType = selectedOption.data('type');

                if (leaveType === 'annual leave') {

                    $('#attachment_field').slideUp(200);

                    $('#attachments').val('');

                } else {

                    $('#attachment_field').slideDown(200);
                }
            }

            toggleAttachmentField();

            $('#leave_type_id').on('change', function() {
                toggleAttachmentField();
            });

        });
    </script>
@endpush