@extends('layouts.master')

@section('title', 'Edit Course')
@section('meta-tag')
<meta name="description" content="Admin Backoffice for Editing Course">
@endsection

@section('content')
<div class="container mt-4">
    <form id="courseForm">
        @csrf
        @method('PUT')
        <div class="card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <div class="mb-3">
                            <label for="center" class="form-label">Center</label>
                            <select class="form-control" id="center" name="center" required>
                                <option value="1" data-code="1" {{ $course->center == 1 ? 'selected' : '' }}>Offline (1)</option>
                                <option value="0" data-code="0" {{ $course->center == 0 ? 'selected' : '' }}>Online (0)</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="program_id" class="form-label">Program</label>
                            <select class="form-control" id="program_id" name="program_id" required>
                                <option value="">-- Select Program --</option>
                                @foreach($programs as $program)
                                <option value="{{ $program->id }}" data-code="{{ $program->kode }}" {{ $course->program_id == $program->id ? 'selected' : '' }}>
                                    {{ $program->name }} ({{ $program->kode }})
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mb-3">
                            <label for="level_id" class="form-label">Level</label>
                            <select class="form-control" id="level_id" name="level_id" required>
                                <option value="">-- Select Level --</option>
                                @foreach($levels as $level)
                                <option value="{{ $level->id }}" data-code="{{ $level->kode }}" {{ $course->level_id == $level->id ? 'selected' : '' }}>
                                    {{ $level->name }} ({{ $level->kode }})
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3 d-flex justify-content-between align-items-center gap-3">
                            <div class="flex-grow-1">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $course->start_date }}" required>
                            </div>
                            <div class="flex-grow-1">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $course->end_date }}" required>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row align-items-center">
                    <div class="col">
                        <div class="mb-3">
                            <label for="meeting_count" class="form-label">Meeting Count</label>
                            <input type="number" class="form-control" id="meeting_count" name="meeting_count" min="1" value="{{ $course_meets->count() }}" required>
                        </div>
                    </div>
                    <div class="col">
                        <label for="kode" class="form-label">Kode</label>
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="front-code"></span>
                            <input type="text" class="form-control" id="kode" name="kode">
                            <span class="input-group-text" id="end-code"></span>
                        </div>
                        <small class="text-danger mb-3">*Jika tidak diisi, kode kelas akan tetap sama</small>
                        <p class="text-primary">Preview Kode Kelas : <span id="result-code" class="text-dark fw-bold"></span></p>
                    </div>
                    <small class="text-muted mb-3">Kode Kelas Sebelumnya: {{ $course->course_code }}</small>
                </div>
            </div>
        </div>
        <hr>
        <div class="card">
            <div class="card-body">
                <div id="courseMeetContainer">
                    @foreach($course_meets as $index => $meet)
                    <div class="mb-3">
                        <h5>Meeting {{ $index + 1 }}</h5>
                        <label for="course_meet[{{ $index }}][teacher_id]" class="form-label">Teacher</label>
                        <select class="form-control" id="course_meet[{{ $index }}][teacher_id]" name="course_meet[{{ $index }}][teacher_id]" required>
                            <option value="">-- Select Teacher --</option>
                            @foreach($teachers as $teacher)
                            <option value="{{ $teacher->id }}" {{ $meet->teacher_id == $teacher->id ? 'selected' : '' }}>
                                {{ $teacher->name }}
                            </option>
                            @endforeach
                        </select>

                        <label for="course_meet[{{ $index }}][date]" class="form-label">Date</label>
                        <input type="date" class="form-control" id="course_meet[{{ $index }}][date]" name="course_meet[{{ $index }}][date]" value="{{ $meet->date }}" required>

                        <div class="mb-3 d-flex justify-content-between align-items-center gap-3">
                            <div class="flex-grow-1">
                                <label for="start_time" class="form-label">Start Time</label>
                                <input type="time" class="form-control" id="start_time" name="course_meet[{{ $index }}][start_time]" value="{{ $meet->start_time }}" required>
                            </div>
                            <div class="flex-grow-1">
                                <label for="end_time" class="form-label">End Time</label>
                                <input type="time" class="form-control" id="end_time" name="course_meet[{{ $index }}][end_time]" value="{{ $meet->end_time }}" required>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary mt-3">Update</button>
    </form>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        let teachers = @json($teachers);

        function updateCodeDisplay() {
            let programCode = $('#program_id option:selected').data('code') || '';
            let levelCode = $('#level_id option:selected').data('code') || '';
            let centerType = $('#center option:selected').data('code');
            let kode = $('#kode').val() || '';
            let frontCode = `${programCode}${levelCode}`;
            let endCode = `-${centerType}`;
            $('#front-code').text(frontCode);
            $('#end-code').text(endCode);
            $('#result-code').text(`${frontCode}${kode}${endCode}`);
        }

        updateCodeDisplay();
        $('#program_id, #level_id, #center').on('change', updateCodeDisplay);
        $('#kode').on('input', updateCodeDisplay);

        $('#meeting_count').on('input', function() {
            let meetingCount = $(this).val();
            let container = $('#courseMeetContainer');
            container.empty();

            if (meetingCount > 0) {
                for (let i = 0; i < meetingCount; i++) {
                    let teacherOptions = teachers.map(teacher => `<option value="${teacher.id}">${teacher.name}</option>`).join('');
                    container.append(`
                        <div class="mb-3">
                            <h5>Meeting ${i + 1}</h5>
                            <label for="course_meet[${i}][teacher_id]" class="form-label">Teacher</label>
                            <select class="form-control" id="course_meet[${i}][teacher_id]" name="course_meet[${i}][teacher_id]" required>
                                <option value="">-- Select Teacher --</option>
                                ${teacherOptions}
                            </select>

                            <label for="course_meet[${i}][date]" class="form-label">Date</label>
                            <input type="date" class="form-control" id="course_meet[${i}][date]" name="course_meet[${i}][date]" required>

                            <div class="mb-3 d-flex justify-content-between align-items-center gap-3">
                                <div class="flex-grow-1">
                                    <label for="start_time" class="form-label">Start Time</label>
                                    <input type="time" class="form-control" id="start_time" name="course_meet[${i}][start_time]" required>
                                </div>
                                <div class="flex-grow-1">
                                    <label for="end_time" class="form-label">End Time</label>
                                    <input type="time" class="form-control" id="end_time" name="course_meet[${i}][end_time]" required>
                                </div>
                            </div>
                        </div>
                    `);
                }
            }
        });

        $('#courseForm').on('submit', function(e) {
            e.preventDefault();

            $.ajax({
                url: '{{ route("admin.course.update", $course->id) }}',
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'Course updated successfully!',
                    });

                    window.location.href = '{{ route("admin.course.index") }}';
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    let errorText = Object.values(errors).map(err => err.join(' ')).join('\n');

                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: errorText,
                    });
                }
            });
        });
    });
</script>
@endpush