@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">Achievement Form</h2>
<form action="{{ route('achievements.store') }}" method="POST" enctype="multipart/form-data" class="mt-4">
                        @csrf

                        <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>
                                <!-- 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="class" class="form-label">Class:</label>
                            <input type="text" id="class" name="class" class="form-control" readonly>
                        </div>

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

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

                        <button type="submit" class="btn btn-primary">Submit Achievement</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