{{-- Modal --}}
<div class="modal fade" id="educationDetailsModal" tabindex="-1" aria-labelledby="educationDetailsModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="educationDetailsModal">Add Education Details</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('student.education-details.store') }}" method="POST" id="education_details_form"
                    enctype="multipart/form-data">
                    @csrf          
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Qualification *</label>
                            <select name="qualification_id" class="form-select" required>
                                <option value="">Select Qualification</option>
                                @foreach ($qualifications as $q)
                                    <option value="{{ $q->id }}">{{ $q->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Board/University *</label>
                            <input type="text" name="board" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Institution *</label>
                            <input type="text" name="institution" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Year of Passing *</label>
                            <input type="number" name="year" class="form-control" min="1980" max="2024"
                                required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Percentage/Grade *</label>
                            <input type="text" name="grade" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Upload Document *</label>
                            <input type="file" name="file" class="form-control" required>
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <button type="button" class="btn btn-outline" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-send"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section('add-education-details-modal-script')
<script>
    $(document).ready(function() {
        $('#education_details_form').on('submit', function(e) {
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: this.action,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        Swal.fire('Success!', response.message, 'success').then(() => {
                            $('#educationModal').modal('hide');
                            location.reload();
                        });
                    } else {
                        Swal.fire('Error!', response.message || 'Something went wrong.',
                            'error');
                    }
                },
                error: function(xhr) {
                    let msg = xhr.responseJSON?.message || 'Something went wrong.';
                    Swal.fire('Error!', msg, 'error');
                }
            });
        });
    });
</script>
@endsection