@extends('dashboard.layouts.app')

@section('content')

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i>
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <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-plus-circle me-2"></i>Add New Request</div>
            </div>
            <div class="card-body">
                <form action="{{ route('requests.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">
                        <!-- Department -->
                        <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 data-department-name="{{ $department->name }}" value="{{ $department->id }}" {{ old('department_id', $auth->department_id) == $department->id ? 'selected' : '' }}>{{ $department->name }}</option>
                                @endforeach
                            </select>
                            @error('department_id')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Request For -->
                        <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 }}" {{ (int) old('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>

                        <!-- Request Type -->
                        <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"
                                required>
                                <option value="">Request Types</option>
                            </select>
                            @error('request_type_id')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>



                        <!-- Priority -->
                        <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">Low</option>
                                <option value="medium" selected>Medium</option>
                                <option value="high">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 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">                                       
                                    </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') == $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') }}" 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') }}" />
                                        @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') }}</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') }}</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') }}</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') }}" />
                                        @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') }}</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') }}" />
                                        @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') }}" />
                                        @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">Leave Type</label>
                                        <select name="leave_type_id" id="leave_type_id" class="form-select rounded-3 select2">
                                            <option value=""></option> 
                                            @foreach ($leaveTypes as $item)
                                                <option value="{{ $item->id }}" {{ (int) old('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') }}</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 id="staff_id_it_field">
                                                <label for="it_staff_id" class="form-label fw-bold">All Staff</label>
                                                <select name="staff_id" id="it_staff_id" class="form-select rounded-3 select2">     
                                                    @foreach ($allStaffs as $staff)
                                                        <option value="{{ $staff->id }}" {{ (int) old('staff_id') === $staff->id ? 'selected' : '' }}>
                                                            {{ $staff->first_name . ' ' . $staff->last_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('it_staff_id')
                                                    <div class="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') }}" />
                                        @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">Sub 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') }}" />
                                        @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">Item<span style="color: red">*</span></label>
                                        <input type="text" name="it_item" id="it_item"
                                            class="form-control rounded-3" value="{{ old('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">Subject<span style="color: red">*</span></label>
                                        <input type="text" name="it_subject" id="it_subject"
                                            class="form-control rounded-3" value="{{ old('it_subject') }}" />
                                        @error('it_subject')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Deadline -->
                        <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') }}">
                            @error('deadline')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Details -->
                        <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') }}</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>

                    </div>
                    <div class="mt-3">
                        <button type="submit" id="submitBtn" class="btn btn-primary px-3">
                            <i class="fas fa-save me-2"></i>
                            <span class="submit-text">Submit</span>
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        </button>
                        <a href="{{ route('requests.index') }}" class="btn btn-secondary px-3 ms-2">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            let oldDepartmentId = "{{ old('department_id', $auth->department_id) }}";
            let $requestFor = $('#request_for');
            let $requestType = $('#request_type_id');
            let departmentId = $(this).val();
            $requestFor.empty().append('<option value="">Select</option>').trigger('change');
            $requestType.empty().append('<option value="">Select Request Type</option>').trigger('change');
            
            // Get URL parameters
            const urlParams = new URLSearchParams(window.location.search);
            const urlDepartmentId = urlParams.get('department_id');
            const urlRequestType = urlParams.get('request_type');
            
            // If department_id is in URL, select it and disable the field
            if (urlDepartmentId) {
                $('#department_id').val(urlDepartmentId).trigger('change');
                $('#department_id').prop('disabled', true);
                // Add hidden input to ensure value is submitted
                if ($('input[name="department_id_hidden"]').length === 0) {
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'department_id',
                        value: urlDepartmentId
                    }).appendTo('form');
                }
            }
            // Handle URL department_id or old department_id
            const initialDepartmentId = urlDepartmentId || oldDepartmentId;
            
            if (initialDepartmentId) {
                $.ajax({
                    url: "{{ url('/requests/get-staffs-types') }}/" + initialDepartmentId,
                    type: "GET",
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function (data) {
                        // Staffs
                        $requestFor.empty();
                        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');
                        
                        // If request_type is in URL, select it and disable the field
                        if (urlRequestType) {
                            setTimeout(function() {
                                $('#request_type_id').val(urlRequestType).trigger('change');
                                $('#request_type_id').prop('disabled', true);
                                // Add hidden input to ensure value is submitted
                                if ($('input[name="request_type_id_hidden"]').length === 0) {
                                    $('<input>').attr({
                                        type: 'hidden',
                                        name: 'request_type_id',
                                        value: urlRequestType
                                    }).appendTo('form');
                                }
                            }, 100);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('Error fetching data:', error);
                    }
                });
            }

            $('#department_id').on('change', function () {
                let $requestFor = $('#request_for');
                let $staff_id = $('#staff_id');
                let $requestType = $('#request_type_id');
                let departmentId = $(this).val();
                $requestFor.empty().append('<option value="">Select</option>').trigger('change');
                $staff_id.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();
                            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();
                            $staff_id.append(`<option value="">Select</option>`);
                            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