@extends('layouts.master')

@section('title', 'Update Course Meet')
@section('meta-tag')
    <meta name="description" content="Update course meetings in the Admin Backoffice">
@endsection

@section('content')
    <div class="container mt-4">
        <h2 class="mb-4">{{ $course->start_date }} - {{ $course->end_date }}</h2>

        <!-- Form to Update Course Meet -->
        <form id="course-meet-update-form">
            @csrf
            @method('PUT')

            <input type="hidden" name="course_id" value="{{ $course->id }}">

            <div id="meetings-container">
                <!-- Existing meetings will be shown here if any -->
                @foreach ($course_meets as $meeting)
                    <div class="meeting-form-group mb-4" data-index="{{ $loop->index }}">
                        <div class="mb-3">
                            <label for="teacher_id_{{ $loop->index }}" class="form-label">Teacher</label>
                            <select name="meetings[{{ $loop->index }}][teacher_id]" id="teacher_id_{{ $loop->index }}" class="form-control">
                                <option value="">Select Teacher</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher->id }}" {{ old('meetings.' . $loop->index . '.teacher_id', $meeting->teacher_id) == $teacher->id ? 'selected' : '' }}>{{ $teacher->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="date_{{ $loop->index }}" class="form-label">Date</label>
                            <input type="date" name="meetings[{{ $loop->index }}][date]" id="date_{{ $loop->index }}" value="{{ old('meetings.' . $loop->index . '.date', $meeting->date) }}" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label for="start_time_{{ $loop->index }}" class="form-label">Start Time</label>
                            <input type="time" name="meetings[{{ $loop->index }}][start_time]" id="start_time_{{ $loop->index }}" value="{{ old('meetings.' . $loop->index . '.start_time', $meeting->start_time) }}" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label for="end_time_{{ $loop->index }}" class="form-label">End Time</label>
                            <input type="time" name="meetings[{{ $loop->index }}][end_time]" id="end_time_{{ $loop->index }}" value="{{ old('meetings.' . $loop->index . '.end_time', $meeting->end_time) }}" class="form-control">
                        </div>

                        <!-- Remove button for this meeting form -->
                        <button type="button" class="btn btn-danger remove-meeting-btn">Remove Meeting</button>
                    </div>
                @endforeach
            </div>


            <div class="d-flex flex-wrap justify-content-center gap-2 align-items-center mb-4">
                <!-- Add New Meeting Button -->
                <button type="button" id="add-meeting-btn" class="btn btn-primary mb-2 mb-sm-0">Add New Meeting</button>

                <!-- Update Course Meet Button -->
                <button type="submit" class="btn btn-success mb-2 mb-sm-0">Update Course Meet</button>

                <!-- Cancel Button -->
                <a href="{{ route('admin.course.index') }}" class="btn btn-secondary mb-2 mb-sm-0">Cancel</a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            // Handle adding a new meeting form dynamically
            $('#add-meeting-btn').on('click', function () {
                const meetingsContainer = $('#meetings-container');
                const index = meetingsContainer.find('.meeting-form-group').length;

                const newMeetingForm = `
                    <div class="meeting-form-group mb-4" data-index="${index}">
                        <div class="mb-3">
                            <label for="teacher_id_${index}" class="form-label">Teacher</label>
                            <select name="meetings[${index}][teacher_id]" id="teacher_id_${index}" class="form-control">
                                <option value="">Select Teacher</option>
                                @foreach ($teachers as $teacher)
                <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                                @endforeach
                </select>
            </div>

            <div class="mb-3">
                <label for="date_${index}" class="form-label">Date</label>
                            <input type="date" name="meetings[${index}][date]" id="date_${index}" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label for="start_time_${index}" class="form-label">Start Time</label>
                            <input type="time" name="meetings[${index}][start_time]" id="start_time_${index}" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label for="end_time_${index}" class="form-label">End Time</label>
                            <input type="time" name="meetings[${index}][end_time]" id="end_time_${index}" class="form-control">
                        </div>

                        <button type="button" class="btn btn-danger remove-meeting-btn">Remove Meeting</button>
                    </div>
                `;
                meetingsContainer.append(newMeetingForm);
            });

            // Handle removing a meeting form
            $(document).on('click', '.remove-meeting-btn', function () {
                $(this).closest('.meeting-form-group').remove();
            });

            // Handle form submission via AJAX
            $('#course-meet-update-form').on('submit', function (e) {
                e.preventDefault();

                const formData = $(this).serialize();

                $.ajax({
                    url: '{{ route("admin.course.meet.update", ":id") }}'.replace(':id', $("input[name='course_id']").val()),
                    type: 'PUT',
                    data: formData,
                    success: function (response) {
                        Swal.fire({
                            title: 'Success!',
                            text: 'Course meet updated successfully!',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(function() {
                            window.location.href = '{{ route("admin.course.index") }}';
                        });
                    },
                    error: function (response) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Error updating course meet: ' + response.responseText,
                            icon: 'error',
                            confirmButtonText: 'Try Again'
                        });
                    }
                });
            });
        });
    </script>
@endpush