@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">Edit Achievement</h2>
                    <form action="{{ route('achievements.update', $achievement->id) }}" method="POST" enctype="multipart/form-data" class="mt-4">
                        @csrf
                        @method('PUT')

                        <!-- 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>
                                <!-- Populate this dropdown with student options from the database -->
                                @foreach ($students as $student)
                                    <option value="{{ $student->id }}" 
                                            {{ $student->id == $achievement->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="{{ $achievement->Studentdetails->date_of_birth }}" 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="{{ $achievement->Studentdetails->student_class }}" readonly>
                        </div>

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

                        <!-- Achievement Picture preview -->
                        <div class="mb-3">
                            <label for="current_achievement_image" class="form-label">Current Achievement Picture:</label><br>
                            @if ($achievement->achievement_image)
                                <img src="{{ asset($achievement->achievement_image) }}" alt="Current Achievement" class="img-fluid">
                            @else
                                <p>No picture available</p>
                            @endif
                        </div>

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

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