@extends('admin.admin_dashboard')
@section('admin')
<div class="content-body">
    <div class="container-fluid">
        <h4>Marksheet – Select Term Exam & Student</h4>

        <form method="GET" action="{{ route('admin.reports.marksheet.show') }}" class="row g-2">
            <div class="col-md-4">
                <label class="form-label">Term Exam</label>
                <select id="exam_id" name="exam_id" class="form-control" required>
                    <option value="">Select Term Exam</option>
                    @foreach($termExams as $ex)
                        <option value="{{ $ex->id }}">
                            {{ $ex->exam_name }} ({{ $ex->session->name ?? 'Session' }}) – {{ $ex->class->name ?? 'Class' }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Student</label>
                <select id="student_id" name="student_id" class="form-control" required>
                    <option value="">Select Student</option>
                </select>
            </div>

            <div class="col-md-4 d-flex align-items-end gap-2">
                <button type="submit" class="btn btn-primary">View</button>

                <a id="btnPdf" class="btn btn-outline-secondary disabled">PDF</a>
                <a id="btnExcel" class="btn btn-outline-secondary disabled">Excel</a>
            </div>
        </form>
    </div>
</div>

<script>
/**
 * When exam changes, load students registered in that session+class (approved)
 */
document.getElementById('exam_id').addEventListener('change', async function() {
    const examId = this.value;
    const studentSel = document.getElementById('student_id');
    studentSel.innerHTML = '<option value="">Loading...</option>';

    if(!examId) return;

    try {
        const res = await fetch(`/admin/reports/marksheet/students?exam_id=${examId}`);
        const data = await res.json();

        studentSel.innerHTML = '<option value="">Select Student</option>';
        data.forEach(s => {
            const opt = document.createElement('option');
            opt.value = s.id;
            opt.textContent = `${s.roll ?? '-'} - ${s.name}`;
            studentSel.appendChild(opt);
        });

        document.getElementById('btnPdf').classList.add('disabled');
        document.getElementById('btnExcel').classList.add('disabled');

    } catch(e) {
        alert('Failed to load students.');
    }
});

document.getElementById('student_id').addEventListener('change', function() {
    const examId = document.getElementById('exam_id').value;
    const studentId = this.value;
    const btnPdf = document.getElementById('btnPdf');
    const btnExcel = document.getElementById('btnExcel');

    if(examId && studentId){
        btnPdf.classList.remove('disabled');
        btnPdf.href = `{{ route('admin.reports.marksheet.pdf') }}?exam_id=${examId}&student_id=${studentId}`;
        btnExcel.classList.remove('disabled');
        btnExcel.href = `{{ route('admin.reports.marksheet.excel') }}?exam_id=${examId}&student_id=${studentId}`;
    }else{
        btnPdf.classList.add('disabled');
        btnExcel.classList.add('disabled');
    }
});
</script>
@endsection