@extends('admin.layout.app')

@section('body')
<div class="card card-page p-3 shadow-sm">
    <h4 class="mb-3">{{ __('admin.generate_student_transcript') }}</h4>

    <form method="POST" action="{{ route('exam.students.transcript.generate') }}" id="transcriptForm">
        @csrf

        <div class="row g-3">
            <!-- University -->
            <div class="col-md-6">
                <label class="form-label">{{ __('admin.university') }}</label>
                <select id="university_id" class="form-select" required>
                    <option value="">{{ __('admin.select_university') }}</option>
                    @foreach($universities as $uni)
                        <option value="{{ $uni->id }}">{{ $uni->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Faculty (dynamic) -->
            <div class="col-md-6">
                <label class="form-label">{{ __('admin.faculty_2') }}</label>
                <select id="faculty_id" class="form-select" disabled>
                    <option value="">{{ __('admin.first_select_university') }}</option>
                </select>
            </div>

            <!-- Department (dynamic) -->
            <div class="col-md-6">
                <label class="form-label">{{ __('admin.department') }}</label>
                <select id="department_id" class="form-select" disabled>
                    <option value="">{{ __('admin.first_select_faculty') }}</option>
                </select>
            </div>

            <!-- Program (dynamic) -->
            <div class="col-md-6">
                <label class="form-label">{{ __('admin.program') }}</label>
                <select id="program_id" class="form-select" disabled>
                    <option value="">{{ __('admin.first_select_department') }}</option>
                </select>
            </div>

            <!-- Semester (dynamic) -->
            <div class="col-md-6">
                <label class="form-label">{{ __('admin.semester_optional') }}</label>
                <select id="semester_id" name="semester_id" class="form-select" disabled>
                    <option value="">{{ __('admin.first_select_program') }}</option>
                </select>
                <small>{{ __('admin.leave_empty_for_cumulative_transcript') }}</small>
            </div>

            <!-- Student (dynamic) -->
            <div class="col-md-6">
                <label class="form-label">{{ __('admin.student_2') }}</label>
                <select id="student_id" name="student_id" class="form-select" disabled required>
                    <option value="">{{ __('admin.first_select_semester') }}</option>
                </select>
            </div>

            <div class="col-md-12">
                <button type="submit" class="btn btn-primary" id="submitBtn" disabled>{{ __('admin.generate_pdf') }}</button>
            </div>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // When university changes
        $('#university_id').change(function() {
            let uniId = $(this).val();
            if (uniId) {
                $.get('/exam/get-faculties/' + uniId, function(data) {
                    $('#faculty_id').prop('disabled', false).html('<option value="">{{ __('admin.select_faculty_2') }}</option>');
                    $.each(data, function(key, faculty) {
                        $('#faculty_id').append('<option value="'+faculty.id+'">{{ __('admin.faculty_name') }}</option>');
                    });
                    // Reset downstream selects
                    $('#department_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_faculty') }}</option>');
                    $('#program_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_department') }}</option>');
                    $('#semester_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_program') }}</option>');
                    $('#student_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_semester') }}</option>');
                    $('#submitBtn').prop('disabled', true);
                });
            } else {
                $('#faculty_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_university') }}</option>');
                $('#department_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_faculty') }}</option>');
                $('#program_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_department') }}</option>');
                $('#semester_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_program') }}</option>');
                $('#student_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_semester') }}</option>');
                $('#submitBtn').prop('disabled', true);
            }
        });

        // When faculty changes
        $('#faculty_id').change(function() {
            let facultyId = $(this).val();
            if (facultyId) {
                $.get('/exam/get-departments/' + facultyId, function(data) {
                    $('#department_id').prop('disabled', false).html('<option value="">{{ __('admin.select_department') }}</option>');
                    $.each(data, function(key, dept) {
                        $('#department_id').append('<option value="'+dept.id+'">{{ __('admin.dept_name') }}</option>');
                    });
                    $('#program_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_department') }}</option>');
                    $('#semester_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_program') }}</option>');
                    $('#student_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_semester') }}</option>');
                    $('#submitBtn').prop('disabled', true);
                });
            }
        });

        // When department changes
        $('#department_id').change(function() {
            let deptId = $(this).val();
            if (deptId) {
                $.get('/exam/get-programs/' + deptId, function(data) {
                    $('#program_id').prop('disabled', false).html('<option value="">{{ __('admin.select_program') }}</option>');
                    $.each(data, function(key, prog) {
                        $('#program_id').append('<option value="'+prog.id+'">{{ __('admin.prog_name') }}</option>');
                    });
                    $('#semester_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_program') }}</option>');
                    $('#student_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_semester') }}</option>');
                    $('#submitBtn').prop('disabled', true);
                });
            }
        });

        // When program changes
        $('#program_id').change(function() {
            let progId = $(this).val();
            if (progId) {
                $.get('/exam/get-semesters/' + progId, function(data) {
                    $('#semester_id').prop('disabled', false).html('<option value="">{{ __('admin.all_semesters_cumulative') }}</option>');
                    $.each(data, function(key, sem) {
                        $('#semester_id').append('<option value="'+sem.id+'">{{ __('admin.sem_name') }}</option>');
                    });
                    $('#student_id').prop('disabled', true).html('<option value="">{{ __('admin.first_select_semester') }}</option>');
                    $('#submitBtn').prop('disabled', true);
                });
            }
        });

        // When semester changes
        $('#semester_id').change(function() {
            let semId = $(this).val();
            if (semId) {
                $.get('/exam/get-students/' + semId, function(data) {
                    $('#student_id').prop('disabled', false).html('<option value="">{{ __('admin.select_student_2') }}</option>');
                    $.each(data, function(key, student) {
                        $('#student_id').append('<option value="'+student.id+'">{{ __('admin.student_name_student_email') }}</option>');
                    });
                    $('#submitBtn').prop('disabled', true);
                });
            } else {
                // If "All Semesters" is selected, we cannot fetch students without a semester.
                // So we disable student dropdown and show a message.
                $('#student_id').prop('disabled', true).html('<option value="">{{ __('admin.please_select_a_specific_semester') }}</option>');
                $('#submitBtn').prop('disabled', true);
                alert('For cumulative transcript, you need to select a semester to choose a student, then leave semester empty on the final form.');
            }
        });

        // When student is selected, enable submit button
        $('#student_id').change(function() {
            if ($(this).val()) {
                $('#submitBtn').prop('disabled', false);
            } else {
                $('#submitBtn').prop('disabled', true);
            }
        });
    });
</script>
@endsection