@extends('dashboard.layouts.app')
@section('content')
    <style>
        .request-edit-shell {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
            margin-bottom: 1.25rem;
        }

        .task-hero-card {
            overflow: hidden;
            padding: 0;
        }

        .task-hero-card__progress {
            width: 100%;
            height: 5px;
            background: #eef2f7;
        }

        .task-hero-card__progress-bar {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
        }

        .task-hero-card__content {
            padding: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .task-id-badge {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.15rem;
            padding: 0.8rem 1rem;
            border-radius: 14px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            min-width: 140px;
        }

        .task-id-badge__label {
            font-size: 0.78rem;
            color: #64748b;
        }

        .task-id-badge__value {
            font-size: 1rem;
            font-weight: 800;
            color: #111827;
        }

        .request-edit-hero-card {
            background:
                radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 32%),
                linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
        }

        .request-edit-hero-card__title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #111827;
            margin-bottom: 0.35rem;
        }

        .request-edit-hero-card__text {
            color: #6b7280;
            font-size: 0.93rem;
            line-height: 1.65;
            max-width: 720px;
            margin: 0;
        }

        .request-edit-hero-card__meta {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .request-edit-hero-card__chips {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .request-edit-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            background: #eef2ff;
            color: #4338ca;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .request-edit-chip--priority {
            background: #fff7ed;
            color: #c2410c;
        }

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

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            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--solid {
            background: #fff;
        }

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

        .request-sub-card__title {
            font-size: 0.98rem;
            font-weight: 700;
            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;
        }

        .btn-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .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;
        }

        .file-upload-wrapper {
            position: relative;
        }

        .file-upload {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .file-upload-label {
            display: block;
            border: 1.5px dashed #cbd5e1;
            border-radius: 16px;
            padding: 2rem 1.25rem;
            text-align: center;
            background: #f8fafc;
            transition: 0.2s ease;
            cursor: pointer;
        }

        .file-upload-label:hover {
            border-color: #a5b4fc;
            background: #f5f7ff;
        }

        .file-upload-label__icon {
            font-size: 2rem;
            line-height: 1;
            color: #4f46e5;
            margin-bottom: 0.65rem;
        }

        .file-upload-label__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.2rem;
        }

        .file-upload-label__text {
            font-size: 0.9rem;
            color: #6b7280;
        }

        .attachment-section__head {
            margin-bottom: 0.9rem;
        }

        .attachment-section__title {
            font-size: 0.98rem;
            font-weight: 700;
            color: #111827;
        }

        .attachment-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            gap: 1rem;
        }

        .attachment-item {
            display: block;
            text-decoration: none;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            transition: 0.2s ease;
        }

        .attachment-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        }

        .attachment-preview {
            height: 120px;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .attachment-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .attachment-info {
            padding: 0.8rem 0.9rem;
        }

        .attachment-info__name {
            font-size: 0.88rem;
            font-weight: 600;
            color: #111827;
            line-height: 1.45;
            word-break: break-word;
            margin-bottom: 0.2rem;
        }

        .attachment-info__action {
            font-size: 0.8rem;
            color: #4f46e5;
            font-weight: 700;
        }

        @media (max-width: 991.98px) {

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

            .request-edit-hero-card__meta {
                justify-content: flex-start;
            }
        }
    </style>

    @include('components.alert')

    @php
        $currentRequestTypeName = optional($row->type)->name;

        if (!$currentRequestTypeName && isset($requestTypes)) {
            $currentRequestTypeName = optional($requestTypes->firstWhere('id', $row->request_type_id))->name;
        }

        $currentRequestTypeName = $currentRequestTypeName ?: 'Request';
        $currentPriorityLabel = ucfirst($row->priority ?? 'normal');
        $currentDepartmentName = optional($departments->firstWhere('id', $row->department_id))->name ?: 'Department';
        $requestCode = 'REQ-' . str_pad((string) $row->id, 4, '0', STR_PAD_LEFT);
    @endphp

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

                <x-page-title title="Edit Request"
                    description="Update request details while keeping the workflow and department-specific logic unchanged.">
                    <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Requests
                    </a>
                </x-page-title>


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

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <div class="form-section__title mb-1">Request Overview</div>
                                <p class="form-section__sub mb-0">
                                    Review the core request data first, then update the specialized section that matches the
                                    selected request type.
                                </p>
                            </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 select2" required>
                                        <option value="">Select</option>
                                        @foreach ($departments as $department)
                                        <option value="{{ $department->id }}" {{ old('department_id', $row->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">Request For</label>
                                    <select name="request_for" id="request_for" class="asset-select select2">
                                        <option value="">Select</option>
                                        @foreach ($staffs as $staff)
                                            <option value="{{ $staff->id }}" {{ old('request_for', $row->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 select2"
                                        required>
                                        <option value="">Select Request Type</option>
                                        @foreach ($requestTypes as $type)
                                            <option value="{{ $type->id }}" {{ old('request_type_id', $row->request_type_id) == $type->id ? 'selected' : '' }}>
                                                {{ $type->name }}
                                            </option>
                                        @endforeach
                                    </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 select2" required>
                                        <option value="">Select Priority</option>
                                        <option value="low" {{ old('priority', $row->priority) == 'low' ? 'selected' : '' }}>
                                            Low</option>
                                        <option value="medium" {{ old('priority', $row->priority) == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ old('priority', $row->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 class="asset-col-6">
                                    <label for="deadline" class="asset-label">Deadline</label>
                                    <input type="date" name="deadline" id="deadline" class="asset-input"
                                        value="{{ old('deadline', $row->deadline) }}">
                                    @error('deadline')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="details" class="asset-label">Details</label>
                                    <textarea name="details" id="details" class="asset-input"
                                        rows="4">{{ old('details', $row->details) }}</textarea>
                                    @error('details')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12" id="attachment_field">
                                    <label for="attachments" class="asset-label">Attachments</label>
                                    <div class="file-upload-wrapper">
                                        <input type="file" name="attachments[]" id="attachments"
                                            class="asset-input file-upload" multiple>
                                        <label for="attachments" class="file-upload-label">
                                            <div class="file-upload-label__icon">
                                                <i class="fas fa-cloud-upload-alt"></i>
                                            </div>
                                            <div class="file-upload-label__title">Upload Supporting Files</div>
                                            <div class="file-upload-label__text">
                                                Drag in files or click to browse multiple attachments.
                                            </div>
                                        </label>
                                    </div>
                                    @error('attachments')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    @error('attachments.*')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                @if ($row->attachments && count($row->attachments) > 0)
                                    <div class="asset-col-12">
                                        <div class="attachment-section__head">
                                            <div class="attachment-section__title">Existing Attachments</div>
                                        </div>
                                        <div class="attachment-grid">
                                            @foreach ($row->attachments as $file)
                                                <a href="{{ asset($file->file_path) }}" target="_blank" class="attachment-item">
                                                    <div class="attachment-preview">
                                                        <img src="{{ asset($file->file_path) }}" alt="{{ $file->original_name }}">
                                                    </div>
                                                    <div class="attachment-info">
                                                        <div class="attachment-info__name">{{ $file->original_name }}</div>
                                                        <div class="attachment-info__action">Open file</div>
                                                    </div>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="request-sub-card mt-3" id="recruitment_field" style="display: none;">
                        <div class="request-sub-card__head">
                            <div class="request-sub-card__title">Recruitment Details</div>
                            <p class="request-sub-card__sub">Define the vacancy, start date, and role requirements for the
                                hiring request.</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', optional($row->requestRecruitments->first())->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', optional($row->requestRecruitments->first())->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', optional($row->requestRecruitments->first())->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 }}" {{ in_array($item->id, old('shift_time_ids', optional($row->requestRecruitments->first())->shift_time_ids ?? []) ?? []) ? 'selected' : '' }}>
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('shift_time_ids')
                                    <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 }}" {{ in_array($item->id, old('track_type_ids', optional($row->requestRecruitments->first())->track_type_ids ?? []) ?? []) ? 'selected' : '' }}>
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('track_type_ids')
                                    <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_ids')
                                    <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', optional($row->requestRecruitments->first())->shift_time) == 'morning' ? 'selected' : '' }}>Morning</option>
                                    <option value="night" {{ old('shift_time', optional($row->requestRecruitments->first())->shift_time) == 'night' ? 'selected' : '' }}>Night</option>
                                </select>
                                @error('shift_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', optional($row->requestRecruitments->first())->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', optional($row->requestRecruitments->first())->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', optional($row->requestRecruitments->first())->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', optional($row->requestRecruitments->first())->justification_reason) }}</textarea>
                                @error('justification_reason')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="request-sub-card mt-3" id="resignation_field" style="display: none;">
                        <div class="request-sub-card__head">
                            <div class="request-sub-card__title">Resignation Details</div>
                            <p class="request-sub-card__sub">Add the resignation date and a short explanation for the
                                request history.</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', optional($row->reference)->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', optional($row->reference)->reason) }}</textarea>
                                @error('reason')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="request-sub-card mt-3" 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>
                                    @if($row->reference_type === 'App\Models\Student' && $row->reference)
                                        <option value="{{ $row->reference->id }}" selected>
                                            {{ $row->reference->first_name . ' ' . $row->reference->last_name }}
                                        </option>
                                    @endif
                                </select>
                                @error('student_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="request-sub-card mt-3" id="leave_field" style="display: none;">
                        <div class="request-sub-card__head">
                            <div class="request-sub-card__title">Leave Details</div>
                            <p class="request-sub-card__sub">Choose the leave dates and type, then confirm the available
                                balance before saving.</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', optional($row->reference)->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', optional($row->reference)->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 <span
                                        class="text-danger">*</span></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 }}" {{ old('leave_type_id', optional($row->reference)->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', optional($row->reference)->leave_reason) }}</textarea>
                                @error('leave_reason')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="request-sub-card mt-3" id="it_field" style="display: none;">
                        <div class="request-sub-card__head">
                            <div class="request-sub-card__title">IT Details</div>
                            <p class="request-sub-card__sub">Describe the issue clearly so the IT team can route and resolve
                                it faster.</p>
                        </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">Staff</label>
                                        <select name="staff_id" id="it_staff_id" class="asset-select select2">
                                            <option value="">Select Staff</option>
                                            @foreach ($allStaffs as $staff)
                                                <option value="{{ $staff->id }}" {{ old('staff_id', optional($row->reference)->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>
                                <input type="text" name="it_category" id="it_category" class="asset-input"
                                    value="{{ old('it_category', optional($row->reference)->it_category) }}">
                                @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>
                                <input type="text" name="it_sub_category" id="it_sub_category" class="asset-input"
                                    value="{{ old('it_sub_category', optional($row->reference)->it_sub_category) }}">
                                @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>
                                <input type="text" name="it_item" id="it_item" class="asset-input"
                                    value="{{ old('it_item', optional($row->reference)->it_item) }}">
                                @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', optional($row->reference)->it_subject) }}">
                                @error('it_subject')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="asset-actions">
                        <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>
                        <button type="submit" id="submitBtn" class="asset-btn asset-btn--primary btn-submit">
                            <i class="fas fa-save me-1"></i>
                            <span class="submit-text">Update</span>
                            <span class="spinner-border spinner-border-sm d-none ms-1" role="status"></span>
                        </button>
                    </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%'
            });

            const $attachmentsInput = $('#attachments');
            const $fileUploadLabel = $('.file-upload-label');

            if ($attachmentsInput.length && $fileUploadLabel.length) {
                $attachmentsInput.on('change', function (e) {
                    const files = e.target.files;

                    if (files && files.length > 0) {
                        $fileUploadLabel.css({
                            borderColor: '#a5b4fc',
                            background: '#f5f7ff'
                        });

                        $fileUploadLabel.find('.file-upload-label__title').html(
                            `<i class="fas fa-check-circle me-1"></i>${files.length} file(s) selected`
                        );
                    }
                });
            }

            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);
            }

            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', $row->request_for));
                        if (oldRequestFor) {
                            $requestFor.val(oldRequestFor).trigger('change');
                        } else {
                            $requestFor.trigger('change');
                        }

                        $requestType.empty().append('<option value="">Select Request Type</option>');
                        data.request_types.forEach(function (type) {
                            $requestType.append(`<option value="${type.id}">${type.name}</option>`);
                        });

                        const finalRequestType = selectedRequestTypeId || @json(old('request_type_id', $row->request_type_id));
                        if (finalRequestType) {
                            $requestType.val(finalRequestType).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', optional($row->reference)->staff_id));
                        if (oldStaffId) {
                            $staffId.val(oldStaffId).trigger('change');
                        }
                    }
                });
            }

            function updateAttachmentVisibility() {
                const requestTypeText = ($requestType.find('option:selected').text() || '').trim().toLowerCase();
                const leaveTypeText = ($('#leave_type_id').find('option:selected').text() || '').trim().toLowerCase();
                const $attachmentField = $('#attachment_field');

                if (!$attachmentField.length) {
                    return;
                }

                if (isLeaveRequestTypeName(requestTypeText)) {
                    if (leaveTypeText.includes('sick leave')) {
                        $attachmentField.slideDown();
                    } else {
                        $attachmentField.slideUp();
                    }
                } else {
                    $attachmentField.slideDown();
                }
            }

            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();
                    updateAttachmentVisibility();
                } 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();
                }
            }

            function loadRetestStudents() {
                const $studentSelect = $('#student_id');
                const currentStudentId = @json($row->reference_type === 'App\Models\Student' ? $row->reference_id : null);

                if ($studentSelect.children('option').length > 1 && $studentSelect.val()) {
                     // If students already loaded and one is selected, don't reload unless empty
                     // But we might want to reload to get the full list for the teacher
                }

                $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) {
                            const selected = (currentStudentId && student.id == currentStudentId) ? 'selected' : '';
                            $studentSelect.append(
                                `<option value="${student.id}" ${selected}>${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');
                        }
                    }
                });
            }

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

                if (!staffId) {
                    leaveBalances = {};
                    updateLeaveBalanceDisplay();
                    return;
                }

                $.ajax({
                    url: `{{ url('/requests/leave-balances') }}/${staffId}`,
                    type: 'GET',
                    success: function (data) {
                        if (data.success) {
                            leaveBalances = data.balances || {};
                            updateLeaveBalanceDisplay();
                        }
                    }
                });
            }

            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) {
                        if (response.type !== undefined && response.type === 'sick leave') {
                            $leaveInfo.hide();
                            $leaveError.hide().text('');
                            $submitBtn.prop('disabled', false);
                            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();
                }
            }

            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', $row->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);
                }
            });

            $('#staff_id, #it_staff_id, #request_for').on('change', function () {
                fetchLeaveBalances($(this).val());
            });

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

            $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-1"></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();
            updateAttachmentVisibility();
        });
    </script>
@endpush