@extends('layouts.student_layout')

@section('content')
    @php
        $addDetails =
            '<button type="button" class="btn btn-primary btn-sm" id="openEducationModal">Add Details</button>';
    @endphp
    <!-- [ Page Header ] start -->
    <x-page-header title="{{ $pageTitle }}" :button="$addDetails" />

    <!-- [ Page Header ] end -->
    <div class="row">
        <div class="col-12">
            <!-- List -->
            <x-student.education-detail-card :educationDetails="$educationDetails" />
        </div>
    </div>

    {{-- Modal --}}
    <x-student.add-education-detail-modal :qualifications="$qualifications" />
    <x-student.edit-education-detail-modal :qualifications="$qualifications"  />
@endsection

@section('pages-scripts')
@yield('add-education-details-modal-script')
@yield('edit-education-details-modal-script')

<script>
    $(document).on('click', '#openEducationModal', function() {
        $('#educationDetailsModal').modal('show');
    });

    $(document).on('click', '#editEducationModal', function() {
        
        let educationId = $(this).data('id');
        $.ajax({
            url: `${baseUrl}/student/education-details/${educationId}/edit-details`,
            method: 'GET',
            success: function(response) {

                // console.log('AJAX response:', response);
                $('#edit_qualification').val(response.qualification_id);
                $('#edit_board').val(response.board || '');
                $('#edit_institution').val(response.institution || '');
                $('#edit_year').val(response.year || '');
                $('#edit_grade').val(response.grade || '');

                $('#edit_education_id').val(educationId);

                $('#editEducationDetailsModal').modal('show');
            },
            error: function(xhr) {
                let msg = xhr.responseJSON?.message || 'Error loading details.';
                Swal.fire('Error!', msg, 'error');
            }
            
        });
        
    });
</script>
@endsection