{{-- @extends('layouts.header')

@section('content')
<main class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">Report Card Upload Form</h2>
                    <form action="{{ route('report_cards.store') }}" method="POST" enctype="multipart/form-data" class="mt-4">
                        @csrf

                        <div class="mb-3">
                            <label for="id" class="form-label">Select Student:</label>
                            <select id="id" name="id" class="form-control" required>
                                <option value="" disabled selected>Select a student</option>
                                <!-- Populate this dropdown with student options from the database -->
                                @foreach ($students as $student)
                                    <option value="{{ $student->id }}" data-dob="{{ $student->date_of_birth }}" data-class="{{ $student->student_class }}">{{ $student->student_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="dob" class="form-label">Date of Birth:</label>
                            <input type="text" id="dob" name="dob" class="form-control" readonly>
                        </div>

                        <div class="mb-3">
                            <label for="exam_name" class="form-label">Exam Name:</label>
                            <input type="text" id="exam_name" name="exam_name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label for="class" class="form-label">Class:</label>
                            <input type="text" id="class" name="class" class="form-control" readonly>
                        </div>

                       <div class="mb-3">
                            <label for="grade" class="form-label">Grade:</label>
                            <select id="grade" name="grade" class="form-control" required>
                                <option value="" disabled selected>Select Grade</option>
                                @for ($grade = 'A'; $grade <= 'F'; $grade++)
                                    <option>{{ $grade }}</option>
                                @endfor
                            </select>
                        </div>


                        <div class="mb-3">
                            <label for="report_card_image" class="form-label">Report Card Picture:</label>
                            <input type="file" id="report_card_image" name="report_card_image" class="form-control" accept="image/*" required>
                        </div>



                        <button type="submit" class="btn btn-primary">Upload Report Card</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#student_id').change(function() {
            var dob = $(this).find(':selected').data('dob');
            var classValue = $(this).find(':selected').data('class');
            $('#dob').val(dob);
            $('#class').val(classValue);
        });
    });
</script>
@endpush

@endsection --}}

@extends('layouts.header')

@section('content')
    <main class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card shadow">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Report Card Upload Form</h2>
                        <form action="{{ route('report_cards.store') }}" method="POST" enctype="multipart/form-data"
                            class="mt-4">
                            @csrf

                            <div class="mb-3">
                                <label for="school_id" class="form-label">School Name:</label>
                                <select id="school_id" name="school_id" class="form-control" required
                                    onchange="setSchoolName()">
                                    <option value="" disabled selected>Select School</option>
                                    @foreach ($schools as $school)
                                        <option value="{{ $school->Id }}">
                                            {{ $school->school_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="student_id" class="form-label">Select Student:</label>
                                <select id="student_id" name="student_id" class="form-control" required>
                                    <option value="" disabled selected>Select a student</option>
                                    @foreach ($students as $student)
                                        <option value="{{ $student->id }}" data-dob="{{ $student->date_of_birth }}"
                                            data-class="{{ $student->student_class }}">
                                            {{ $student->student_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="dob" class="form-label">Date of Birth:</label>
                                <input type="text" id="dob" name="dob" class="form-control" readonly>
                            </div>

                            <div class="mb-3">
                                <label for="exam_name" class="form-label">Exam Name:</label>
                                <input type="text" id="exam_name" name="exam_name" class="form-control" >
                            </div>

                            <div class="mb-3">
                                <label for="class" class="form-label">Class:</label>
                                <input type="text" id="class" name="class" class="form-control" readonly>
                            </div>

                            <div class="mb-3">
                                <label for="grade" class="form-label">Grade:</label>
                                <select id="grade" name="grade" class="form-control" >
                                    <option value="" disabled selected>Select Grade</option>
                                    @for ($grade = 'A'; $grade <= 'F' ; $grade++) 
                                        <option>{{ $grade }}</option>
                                    @endfor
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="report_card_image" class="form-label">Report Card PDF:</label>
                                <input type="file" id="report_card_image" name="report_card_image" class="form-control" 
                                       accept=".pdf" required>
                            </div>
                            

                            <button type="submit" class="btn btn-primary">Upload Report Card</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @push('scripts')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#student_id').change(function() {
                    var dob = $(this).find(':selected').data('dob');
                    var classValue = $(this).find(':selected').data('class');
                    $('#dob').val(dob);
                    $('#class').val(classValue);
                });
            });
        </script>
    @endpush
@endsection