@extends('dashboard.layouts.app')

@section('content')
    <div class="container mt-5">
        <div class="card shadow-lg border-0 rounded-3">
            <div class="card-header py-3">
                <div class="mb-0"><i class="fas fa-edit me-2"></i>Edit HR Request</div>
            </div>
            <div class="card-body">
                <form action="{{ route('requests.update', $row->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="department_id" class="form-label fw-bold">Department</label>
                            <select name="department_id" id="department_id" class="form-select rounded-3 select2" required>
                                <option value="">Select</option>
                                @foreach ($departments as $department)
                                    <option value="{{ $department->id }}" {{ $row->department_id == $department->id ? 'selected' : '' }}>
                                        {{ $department->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('department_id')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6" id="request_for_field">
                            <label for="request_for" class="form-label fw-bold">Request For</label>
                            <select name="request_for" id="request_for" class="form-select rounded-3 select2">
                                <option value="">Select</option>
                                @foreach ($staffs as $staff)
                                    <option value="{{ $staff->id }}" {{ $row->request_for == $staff->id ? 'selected' : '' }}>
                                        {{ $staff->first_name . ' ' . $staff->last_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('request_for')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="request_type_id" class="form-label fw-bold">Request Type</label>
                            <select id="request_type_id" name="request_type_id" class="form-select select2 rounded-3">
                                <option value="">Request Types</option>
                                @foreach ($requestTypes as $type)
                                    <option value="{{ $type->id }}" {{ $row->request_type_id == $type->id ? 'selected' : '' }}>
                                        {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('request_type_id')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="priority" class="form-label fw-bold">Priority</label>
                            <select name="priority" id="priority" class="form-select rounded-3 select2" required>
                                <option value="">Select</option>
                                <option value="low" {{ $row->priority == 'low' ? 'selected' : '' }}>Low</option>
                                <option value="medium" {{ $row->priority == 'medium' ? 'selected' : '' }}>Medium</option>
                                <option value="high" {{ $row->priority == 'high' ? 'selected' : '' }}>High</option>
                            </select>
                            @error('priority')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>


                        
                        <div class="col-md-6 d-none" id="hr_field">
                            @if ($auth->department->slug =='hr')
                                <div class="" id="staff_id_field">
                                    <label for="staff_id" class="form-label fw-bold">Staff</label>
                                    <select name="staff_id" id="staff_id" class="form-select rounded-3 select2">
                                        <option value="">Select</option>
                                        
                                    </select>
                                    @error('staff_id')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif
                        </div>
                        
                        <!-- recruitment Field (Hidden by default) -->
                       
                        <div class="card shadow-lg border-0 rounded-3 mt-3" id="recruitment_field" style="display: none;">
                            <div class="card-header">
                                <div class="mb-0">Recruitment Details</div>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">

                                    <!-- Job Title -->
                                    <div class="col-md-6">
                                        <label for="job_title_id" class="form-label fw-bold">Job Title <span style="color: red">*</span></label>
                                        <select name="job_title_id" id="job_title_id" class="form-select rounded-3 select2">
                                            <option value="">Select Job Title</option>
                                            @foreach ($jobTitles as $item)
                                            <option 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="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Number of Vacancies -->
                                    <div class="col-md-6">
                                        <label for="number_of_vacancies" class="form-label fw-bold">Number of Vacancies <span style="color: red">*</span></label>
                                        <input type="number" name="number_of_vacancies" id="number_of_vacancies"
                                            class="form-control rounded-3" value="{{ old('number_of_vacancies', optional($row->requestRecruitments->first())->number_of_vacancies) }}" min="1" />

                                        @error('number_of_vacancies')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Expected Start Date -->
                                    <div class="col-md-6">
                                        <label for="expected_start_date" class="form-label fw-bold">Expected Start Date <span style="color: red">*</span></label>
                                        <input type="date" name="expected_start_date" id="expected_start_date"
                                            class="form-control rounded-3" value="{{ old('expected_start_date', optional($row->requestRecruitments->first())->expected_start_date) }}" />

                                        @error('expected_start_date')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Role Description -->
                                    <div class="col-md-6">
                                        <label for="role_description" class="form-label fw-bold">Role Description <span style="color: red">*</span></label>
                                        <textarea name="role_description" id="role_description" class="form-control rounded-3"
                                            rows="3">{{ old('role_description', optional($row->requestRecruitments->first())->role_description) }}</textarea>
                                        @error('role_description')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Required Qualifications & Skills -->
                                    <div class="col-md-12">
                                        <label for="required_qualifications_skills" class="form-label fw-bold">
                                            Required Qualifications & Skills <span style="color: red">*</span>
                                        </label>
                                        <textarea name="required_qualifications_skills" id="required_qualifications_skills" class="form-control rounded-3"
                                            rows="3">{{ old('required_qualifications_skills', optional($row->requestRecruitments->first())->required_qualifications_skills) }}</textarea>
                                        @error('required_qualifications_skills')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Justification / Reason -->
                                    <div class="col-md-12">
                                        <label for="justification_reason" class="form-label fw-bold">Justification / Reason <span style="color: red">*</span></label>
                                        <textarea name="justification_reason" id="justification_reason" class="form-control rounded-3"
                                            rows="3">{{ old('justification_reason', optional($row->requestRecruitments->first())->justification_reason) }}</textarea>
                                        @error('justification_reason')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                </div>
                            </div>
                        </div>

                        <!-- Resignation Field (Hidden by default) -->
                         <div class="card shadow-lg border-0 rounded-3 mt-3" id="resignation_field" style="display: none;">
                            <div class="card-header">
                                <div class="mb-0">Resignation Details</div>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">

                                    <!--Resignation Date -->
                                    <div class="col-md-12">
                                        <label for="resignation_date" class="form-label fw-bold">Resignation Date<span style="color: red">*</span></label>
                                        <input type="date" name="resignation_date" id="resignation_date"
                                            class="form-control rounded-3" value="{{ old('resignation_date', optional($row->reference)->resignation_date) }}"/>
                                        @error('resignation_date')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                    
                                    <!--Reason -->
                                    <div class="col-md-12">
                                        <label for="reason" class="form-label fw-bold">Reason <span style="color: red">*</span></label>
                                        <textarea name="reason" id="reason" class="form-control rounded-3"
                                            rows="3">{{ old('reason', optional($row->reference)->reason) }}</textarea>
                                        @error('reason')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                </div>
                            </div>
                        </div>

                         <!-- leave Field (Hidden by default) -->
                         <div class="card shadow-lg border-0 rounded-3 mt-3" id="leave_field" style="display: none;">
                            <div class="card-header">
                                <div class="mb-0">leave Details</div>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">

                                    <!--leave from -->
                                    <div class="col-md-6">
                                        <label for="leave_from" class="form-label fw-bold">leave From<span style="color: red">*</span></label>
                                        <input type="date" name="leave_from" id="leave_from"
                                            class="form-control rounded-3" value="{{ old('leave_from', optional($row->reference)->leave_from) }}"/>
                                        @error('leave_from')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!--leave to -->
                                    <div class="col-md-6">
                                        <label for="leave_to" class="form-label fw-bold">leave To<span style="color: red">*</span></label>
                                        <input type="date" name="leave_to" id="leave_to"
                                            class="form-control rounded-3" value="{{ old('leave_to', optional($row->reference)->leave_to) }}"/>
                                        @error('leave_to')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Leave Type -->
                                    <div class="col-md-12">
                                        <label for="leave_type_id" class="form-label fw-bold">Job Title <span style="color: red">*</span></label>
                                        <select name="leave_type_id" id="leave_type_id" class="form-select rounded-3 select2">
                                            <option value="">Select Job Title</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>
                                        @error('leave_type_id')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                    
                                    <!--leave_reason -->
                                    <div class="col-md-12">
                                        <label for="leave_reason" class="form-label fw-bold">Leave Reason <span style="color: red">*</span></label>
                                        <textarea name="leave_reason" id="leave_reason" class="form-control rounded-3"
                                            rows="3">{{ old('leave_reason', optional($row->reference)->leave_reason) }}</textarea>
                                        @error('leave_reason')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                </div>
                            </div>
                        </div>

                         <!-- It Field (Hidden by default) -->
                         <div class="card shadow-lg border-0 rounded-3 mt-3" id="it_field" style="display: none;">
                            <div class="card-header">
                                <div class="mb-0">IT Details</div>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">

                                    <div class="col-md-12 d-none" id="it_staff_field">
                                        @if ($auth->department->slug =='it')
                                            <div class="" id="staff_id_it_field">
                                                <label for="it_staff_id" class="form-label fw-bold">Staff</label>
                                                <select name="staff_id" id="it_staff_id" class="form-select rounded-3 select2">
                                                    <option value="">Select</option>
                                                         @foreach ($allStaffs as $staff)
                                                            <option value="{{ $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="text-danger mt-1">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        @endif
                                    </div>

                                    <div class="col-md-6">
                                        <label for="it_category" class="form-label fw-bold">Category<span style="color: red">*</span></label>
                                        <input type="text" name="it_category" id="it_category"
                                            class="form-control rounded-3" value="{{ old('it_category', optional($row->reference)->it_category) }}"/>
                                        @error('it_category')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                   
                                    <div class="col-md-6">
                                        <label for="it_sub_category" class="form-label fw-bold">Category<span style="color: red">*</span></label>
                                        <input type="text" name="it_sub_category" id="it_sub_category"
                                            class="form-control rounded-3" value="{{ old('it_sub_category', optional($row->reference)->it_sub_category) }}"/>
                                        @error('it_sub_category')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <label for="it_item" class="form-label fw-bold">Category<span style="color: red">*</span></label>
                                        <input type="text" name="it_item" id="it_item"
                                            class="form-control rounded-3" value="{{ old('it_item', optional($row->reference)->it_item) }}"/>
                                        @error('it_item')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <label for="it_subject" class="form-label fw-bold">Category<span style="color: red">*</span></label>
                                        <input type="text" name="it_subject" id="it_subject"
                                            class="form-control rounded-3" value="{{ old('it_subject', optional($row->reference)->it_subject) }}"/>
                                        @error('it_subject')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label for="deadline" class="form-label fw-bold">Deadline</label>
                            <input type="date" name="deadline" id="deadline" class="form-control rounded-3"
                                value="{{ old('deadline', $row->deadline) }}">
                            @error('deadline')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12">
                            <label for="details" class="form-label fw-bold">Details</label>
                            <textarea name="details" id="details" class="form-control rounded-3"
                                rows="4">{{ old('details', $row->details) }}</textarea>
                            @error('details')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Attachments -->
                        <div class="col-md-12">
                            <label for="attachments" class="form-label fw-bold">Attachments</label>
                            <input type="file" name="attachments[]" id="attachments" class="form-control rounded-3"
                                multiple>
                            <small class="text-muted">You can upload multiple files</small>

                            @error('attachments')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                            @error('attachments.*')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Show old attachments --}}
                        @if($row->attachments && count($row->attachments) > 0)
                            <div class="col-md-12 mt-3">
                                <label class="form-label fw-bold">Existing Attachments</label><br>
                                @foreach($row->attachments as $file)
                                    <a href="{{ asset($file->file_path) }}" target="_blank" class="me-2 d-inline-block">
                                        <img src="{{ asset($file->file_path) }}" alt="{{ $file->original_name }}"
                                            class="img-thumbnail rounded shadow-sm" style="max-height: 150px;">
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-success px-4"><i class="fas fa-save me-2"></i>Update</button>
                        <a href="{{ route('requests.index') }}" class="btn btn-secondary px-4 ms-2">Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- {{ dd($row) }} --}}
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            // CSRF Token Setup - Recommended to use a meta tag as explained above
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            let oldDepartmentId = "{{ old('department_id', $row->department_id) }}";
            let $requestFor = $('#request_for');
            let $staff_id = $('#staff_id');
            let $requestType = $('#request_type_id');
            let oldRequestFor = "{{ old('request_for', $row->request_for) }}";
            let old_staff_id = "{{ old('staff_id', optional($row->reference)->staff_id) ?? '' }}";

            let oldRequestType = "{{ old('request_type_id', $row->request_type_id) }}";

            $requestFor.empty().append('<option value="">Select</option>').trigger('change');
            $requestType.empty().append('<option value="">Select Request Type</option>').trigger('change');
            if (oldDepartmentId) {
                $.ajax({
                    url: "{{ url('/requests/get-staffs-types') }}/" + oldDepartmentId,
                    type: "GET",
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function (data) {
                        $requestFor.empty().append('<option value="">Select</option>');
                        data.staffs.forEach(function (staff) {
                            let selected = (staff.id == oldRequestFor) ? 'selected' : '';
                            $requestFor.append(
                                `<option value="${staff.id}" ${selected}>${staff.first_name} ${staff.last_name}</option>`
                            );
                        });
                        $requestType.empty().append('<option value="">Select Request Type</option>');
                        data.request_types.forEach(function (type) {
                            let selected = (type.id == oldRequestType) ? 'selected' : '';
                            $requestType.append(
                                `<option value="${type.id}" ${selected}>${type.name}</option>`
                            );
                        });
                        $requestType.trigger('change');
                    },
                    error: function (xhr, status, error) {
                        console.error('Error fetching data:', error);
                    }
                });
                $.ajax({
                    url: "{{ url('/staffonDepartment') }}/",
                    type: "GET",
                    data: { department_id: $('#department_id').val() },
                    success: function (data) {
                        $staff_id.empty().append('<option value="">Select</option>');
                        data.staffs.forEach(function (staff) {
                            let selected = (staff.id == old_staff_id) ? 'selected' : '';
                            $staff_id.append(
                                `<option value="${staff.id}" ${selected}>${staff.first_name} ${staff.last_name}</option>`
                            );
                        });
                        $staff_id.trigger('change');
                    },
                    error: function (xhr, status, error) {
                        console.error('Error fetching data:', error);
                    }
                });

            }

            $('select').select2({
                width: '100%',
                placeholder: "Select",
                allowClear: true
            });
            $('#department_id').on('change', function () {
                let departmentId = $(this).val();
                let $requestFor = $('#request_for');
                let $requestType = $('#request_type_id');
                let $staff_id = $('#staff_id');
                $staff_id.empty().append('<option value="">Select</option>').trigger('change');

                // Clear and reset the dependent select boxes
                $requestFor.empty().append('<option value="">Select</option>').trigger('change');
                $requestType.empty().append('<option value="">Select Request Type</option>').trigger('change');
                if (departmentId) {
                    $.ajax({
                        url: "{{ url('/requests/get-staffs-types') }}/" + departmentId,
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        success: function (data) {
                            // Staffs
                            $requestFor.empty();
                            $staff_id.append(`<option value="">Select</option>`);
                            data.staffs.forEach(function (staff) {
                                $requestFor.append(
                                    `<option value="${staff.id}">${staff.first_name} ${staff.last_name}</option>`
                                );
                            });
                            $requestFor.trigger('change');
                            $requestType.empty();
                            data.request_types.forEach(function (type) {
                                $requestType.append(
                                    `<option value="${type.id}">${type.name}</option>`
                                );
                            });
                            $requestType.trigger('change');
                        },
                        error: function (xhr, status, error) {
                            console.error('Error fetching data:', error);
                        }
                    });
                    $.ajax({
                        url: "{{ url('/staffonDepartment') }}/",
                        type: "GET",
                        data: { department_id: $('#department_id').val() },
                        success: function (data) {
                            // Staffs
                            $staff_id.empty();
                            data.staffs.forEach(function (staff) {
                                $staff_id.append(
                                    `<option value="${staff.id}">${staff.first_name} ${staff.last_name}</option>`
                                );
                            });
                        },
                        error: function (xhr, status, error) {
                            console.error('Error fetching data:', error);
                        }
                    });
                }
            });

            $('#request_type_id').on('change', function () {              
                let selectedText = $('#request_type_id').find('option:selected').text().trim().toLowerCase();
                if (selectedText.trim().toLowerCase() === 'recruitment') {
                    $('#recruitment_field').slideDown(); 
                    
                    $('#leave_field').slideUp(); 
                    $('#resignation_field').slideUp(); 
                    $('#it_field').slideUp();

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


                } else if (selectedText.trim().toLowerCase() === 'resignation') {
                    $('#resignation_field').slideDown(); 

                    $('#recruitment_field').slideUp(); 
                    $('#leave_field').slideUp(); 
                    $('#it_field').slideUp(); 

                    $('#request_for_field').addClass('d-none');
                    $('#hr_field').removeClass('d-none');
                    $('#request_for').val('');
                    
                }else if (selectedText.trim().toLowerCase() === 'leave') {
                    $('#leave_field').slideDown(); 

                    $('#recruitment_field').slideUp(); 
                    $('#resignation_field').slideUp(); 
                    $('#it_field').slideUp(); 

                    $('#request_for_field').addClass('d-none');
                    $('#hr_field').removeClass('d-none');
                    $('#request_for').val('');
                    
                }else if (selectedText.trim().toLowerCase() === 'it-ticket') {
                    $('#it_field').slideDown(); 
                    
                    $('#it_staff_field').removeClass('d-none');

                    $('#recruitment_field').slideUp(); 
                    $('#resignation_field').slideUp(); 
                    $('#leave_field').slideUp(); 

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


                } else {
                    $('#recruitment_field').slideUp(); 
                    $('#it_field').slideUp(); 
                    $('#resignation_field').slideUp(); 
                    $('#leave_field').slideUp(); 
                    $('#hr_field').addClass('d-none');
                    $('#it_staff_field').addClass('d-none');
                    $('#request_for_field').removeClass('d-none');


                }
            });

            $('form').on('submit', function() {
                if ($('#recruitment_field').is(':hidden')) {
                    $('#recruitment_field').find('input, select, textarea').val('');
                }
                if ($('#it_field').is(':hidden')) {
                    $('#it_field').find('input, select, textarea').val('');
                }
                if ($('#resignation_field').is(':hidden')) {
                    $('#resignation_field').find('input, select, textarea').val('');
                }
                if ($('#leave_field').is(':hidden')) {
                    $('#leave_field').find('input, select, textarea').val('');
                }
            });

        });


        
$(document).ready(function () {
    // Initialize Select2
    $('.select2').select2({
        allowClear: true,
        width: '100%'
    });

    // Submit Form via AJAX
    $('form').on('submit', function (e) {
        e.preventDefault();

        let $form = $(this);
        let $submitBtn = $('#submitBtn');
        let $submitText = $submitBtn.find('.submit-text');
        let $spinner = $submitBtn.find('.spinner-border');

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

        // Clear previous alerts
        $('.alert').remove();

        // Prepare FormData
        let formData = new FormData(this);

        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                // Success: Show message & redirect
                let successAlert = `
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle me-2"></i>${response.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>`;
                $form.before(successAlert);

                window.location.href = response.redirect;
            },
            error: function (xhr) {
                let errors = xhr.responseJSON?.errors;
                let message = xhr.responseJSON?.message;

                // Handle validation errors
                if (errors) {
                    let errorHtml = `
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <ul class="mb-0">`;
                    $.each(errors, function (key, value) {
                        errorHtml += `<li>${value[0]}</li>`;
                    });
                    errorHtml += `
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>`;
                    $form.before(errorHtml);
                }

                // Handle custom error message
                if (message && !errors) {
                    let errorHtml = `
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>${message}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>`;
                    $form.before(errorHtml);
                }

                // Re-enable select2 if needed
                $('.select2').select2({
                    allowClear: true,
                    width: '100%'
                });
            },
            complete: function () {
                // Hide loading
                $submitBtn.prop('disabled', false);
                $submitText.removeClass('d-none');
                $spinner.addClass('d-none');
            }
        });
    });

    // Hide success alert after 10 seconds
    setTimeout(() => {
        $('#successAlert').fadeOut();
    }, 10000);
});
</script>
@endpush