@extends('layouts.master')

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

@section('content')
<div class="container mt-4">
    <form id="courseForm">
        @csrf
        <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">Offline (1)</option>
                                <option value="0" data-code="0">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 }}">
                                    {{ $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 }}">
                                    {{ $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" 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" 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" 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" required>
                            <span class="input-group-text" id="end-code"></span>
                        </div>
                        <p class="text-primary">Kode Kelas : <span id="result-code" class="text-dark fw-bold"></span></p>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="card">
            <div class="card-body">
                <div id="courseMeetContainer"></div>
            </div>
        </div>

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

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        // Handle meeting_count change
        let teachers = @json($teachers);

        function updateCodeDisplay() {
            // Get selected program code
            let programCode = $('#program_id option:selected').data('code') || '';
            // Get selected level code
            let levelCode = $('#level_id option:selected').data('code') || '';
            // Get center type
            let centerType = $('#center option:selected').data('code');
            let kode = $('#kode').val() || '';
            // Combine codes
            let frontCode = `${programCode}${levelCode}`;
            let endCode = `-${centerType}`;

            // Update the display
            $('#front-code').text(frontCode);
            $('#end-code').text(endCode);
            $('#result-code').text(`${frontCode}${kode}${endCode}`);
        }
        updateCodeDisplay();
        $('#program_id, #level_id, #center').on('change', function() {
            console.log('Change detected');
            updateCodeDisplay();
        });
        $('#kode').on('input', function() {
            console.log('Input detected');
            updateCodeDisplay();
        });


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

            if (meetingCount > 0) {
                for (let i = 1; 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}</h5>
        <label for="course_meet[${i - 1}][teacher_id]" class="form-label">Teacher</label>
        <select class="form-control" id="course_meet[${i - 1}][teacher_id]" name="course_meet[${i - 1}][teacher_id]" required>
            <option value="">-- Select Teacher --</option>
            ${teacherOptions}
        </select>

        <label for="course_meet[${i - 1}][date]" class="form-label">Date</label>
        <input type="date" class="form-control" id="course_meet[${i - 1}][date]" name="course_meet[${i - 1}][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 - 1}][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 - 1}][end_time]" required>
            </div>
        </div>
    </div>
`);
                }
            }
        });

        // Handle form submission
        $('#courseForm').on('submit', function(e) {
            e.preventDefault();

            $.ajax({
                url: '{{ route("admin.course.store") }}', // Update with your route
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'Course saved successfully!',
                    });

                    // Clear form
                    $('#courseForm')[0].reset();
                    $('#courseMeetContainer').empty();
                    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