@extends('layouts.header')

@section('content')
    <main class="container">
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
            <li class="breadcrumb-item active"><a href="{{ route('report_cards.index') }}">Student Report Cards</a></li>
            <li class="breadcrumb-item active">Edit Report Card</li>
        </ol>
        <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">Edit Report Card</h2>
                        <form action="{{ route('report_cards.update', $reportCard->id) }}" method="POST"
                            enctype="multipart/form-data" class="mt-4">
                            @csrf
                            @method('PUT')

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

                            <!-- Select Student dropdown -->
                            <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>
                                    @foreach ($students as $student)
                                        <option value="{{ $student->id }}"
                                            {{ $student->id == $reportCard->student_id ? 'selected' : '' }}
                                            data-dob="{{ $student->date_of_birth }}"
                                            data-class="{{ $student->student_class }}">
                                            {{ $student->student_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Date of Birth field -->
                            <div class="mb-3">
                                <label for="dob" class="form-label">Date of Birth:</label>
                                <input type="text" id="dob" name="dob" class="form-control"
                                    value="{{ $reportCard->Studentdetails->date_of_birth }}" readonly>
                            </div>

                            <!-- Exam Name field -->
                            <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"
                                    value="{{ $reportCard->exam_name }}" readonly>
                            </div>

                            <!-- Class field -->
                            <div class="mb-3">
                                <label for="class" class="form-label">Class:</label>
                                <input type="text" id="class" name="class" class="form-control"
                                    value="{{ $reportCard->Studentdetails->student_class }}" readonly>
                            </div>

                            <!-- Grade field -->
                            <div class="mb-3">
                                <label for="grade" class="form-label">Grade:</label>
                                <input type="text" id="grade" name="grade" class="form-control"
                                    value="{{ $reportCard->grade }}" >
                            </div>

                            <!-- Current Report Card PDF preview -->
                            <div class="mb-3">
                                <label for="current_report_card_pdf" class="form-label">Current Report Card PDF:</label><br>
                                @if ($reportCard->report_card_image)
                                    <a href="{{ asset($reportCard->report_card_image) }}" target="_blank"
                                        class="btn btn-secondary">View Current PDF</a>
                                @else
                                    <p>No PDF available</p>
                                @endif
                            </div>

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

                            <!-- Submit Button -->
                            <button type="submit" class="btn btn-primary">Update 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