@extends('dashboard.layouts.app')

@section('title', __('courses.Create Course'))
@section('page_heading', __('courses.Create Course'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.courses.index') }}" class="text-muted text-hover-primary">{{ __('courses.Courses') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('courses.Create Course') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('courses.Create Course') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('dashboard.courses.store') }}" method="POST" class="needs-validation" novalidate>
            @csrf
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="track_category_id" class="form-label">{{ __('courses.Track Category') }}</label>
                    <select class="form-select @error('track_category_id') is-invalid @enderror" id="track_category_id" name="track_category_id" required data-control="select2">
                        <option value="">{{ __('dashboard.Select an option') }}</option>
                        @foreach ($trackCategories as $category)
                            <option value="{{ $category->id }}" {{ old('track_category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('track_category_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label for="track_id" class="form-label">{{ __('courses.Track') }}</label>
                    <select class="form-select @error('track_id') is-invalid @enderror" id="track_id" name="track_id" required data-control="select2" data-placeholder="{{__('courses.Select Track')}}">
                        <option value="">{{ __('dashboard.Select an option') }}</option>
                    </select>
                    @error('track_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="track_level_id" class="form-label">{{ __('courses.Track Level') }}</label>
                    <select class="form-select @error('track_level_id') is-invalid @enderror" id="track_level_id" name="track_level_id" required data-control="select2" data-placeholder="{{__('courses.Select Level')}}">
                        <option value="">{{ __('dashboard.Select an option') }}</option>
                    </select>
                    @error('track_level_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="level_sessions_count" class="form-label">{{ __('courses.Level Sessions Count') }}</label>
                    <input type="text" class="form-control" id="level_sessions_count" readonly>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="track_type_id" class="form-label">{{ __('courses.Track Type') }}</label>
                    <select class="form-select @error('track_type_id') is-invalid @enderror" id="track_type_id" name="track_type_id" required data-control="select2">
                        <option value="">{{ __('dashboard.Select an option') }}</option>
                        @foreach ($trackTypes as $type)
                            <option value="{{ $type->id }}" {{ old('track_type_id') == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                        @endforeach
                    </select>
                    @error('track_type_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="sessions_per_week" class="form-label">{{ __('courses.Sessions Per Week') }}</label>
                    <input type="number" class="form-control @error('sessions_per_week') is-invalid @enderror" id="sessions_per_week" name="sessions_per_week" value="{{ old('sessions_per_week', 1) }}" required min="1">
                    @error('sessions_per_week')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="start_date" class="form-label">{{ __('courses.Start Date') }}</label>
                    <input type="date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" name="start_date" value="{{ old('start_date') }}" required>
                    @error('start_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">{{ __('courses.Select Time Slots (24-hour format)') }}</label>
                <div id="time-slots-container" class="border p-3 rounded bg-light"></div>
                @error('slots')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
                @error('slots.*')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">{{ __('dashboard.Create') }}</button>
                <a href="{{ route('dashboard.courses.index') }}" class="btn btn-secondary">{{__('dashboard.Cancel')}}</a>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('#track_category_id, #track_id, #track_level_id, #track_type_id').select2({
                placeholder: "{{ __('dashboard.Select an option') }}",
                allowClear: true,
                width: '100%'
            });

            // Initialize Flatpickr for time inputs
            flatpickr('.slot-start, .slot-end', {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i", // 24-hour format (e.g., 16:00)
                time_24hr: true,
                defaultHour: 16,
                defaultMinute: 0
            });

            function updateOptions(elementId, data, placeholder) {
                const selectElement = $(elementId);
                selectElement.empty().append(`<option value="">${placeholder}</option>`);
                $.each(data, function(index, item) {
                    selectElement.append(`<option value="${item.id}">${item.text || item.name}</option>`);
                });
                selectElement.trigger('change');
            }

            $('#track_category_id').change(function() {
                const categoryId = $(this).val();
                if (categoryId) {
                    $.ajax({
                        url: "{{ route('dashboard.courses.getTracksByCategory') }}",
                        type: "GET",
                        data: { category_id: categoryId },
                        success: function(data) {
                            updateOptions('#track_id', data.results, "{{ __('courses.Select Track') }}");
                            updateOptions('#track_level_id', [], "{{ __('courses.Select Level') }}");
                            $('#level_sessions_count').val('');
                            resetTimeSlots();
                        }
                    });
                } else {
                    updateOptions('#track_id', [], "{{ __('courses.Select Track') }}");
                    updateOptions('#track_level_id', [], "{{ __('courses.Select Level') }}");
                    $('#level_sessions_count').val('');
                    resetTimeSlots();
                }
            });

            $('#track_id').change(function() {
                const trackId = $(this).val();
                if (trackId) {
                    $.ajax({
                        url: "{{ route('dashboard.courses.getLevelsByTrack') }}",
                        type: "GET",
                        data: { track_id: trackId },
                        success: function(data) {
                            updateOptions('#track_level_id', data.results, "{{__('courses.Select Level')}}");
                            $('#level_sessions_count').val('');
                            resetTimeSlots();
                        }
                    });
                } else {
                    updateOptions('#track_level_id', [], "{{__('courses.Select Level')}}");
                    $('#level_sessions_count').val('');
                    resetTimeSlots();
                }
            });

            $('#track_level_id').change(function() {
                const levelId = $(this).val();
                if (levelId) {
                    $.ajax({
                        url: "{{ route('dashboard.courses.getSessionsByLevel') }}",
                        type: "GET",
                        data: { level_id: levelId },
                        success: function(data) {
                            $('#level_sessions_count').val(data.sessions_count);
                            updateTimeSlots();
                        }
                    });
                } else {
                    $('#level_sessions_count').val('');
                    resetTimeSlots();
                }
            });

            function generateTimeSlot(index) {
                const days = ['{{__('courses.Sunday')}}', '{{__('courses.Monday')}}', '{{__('courses.Tuesday')}}', '{{__('courses.Wednesday')}}', '{{__('courses.Thursday')}}', '{{__('courses.Friday')}}', '{{__('courses.Saturday')}}'];
                return `
                    <div class="row mb-3 time-slot-row" data-index="${index}">
                        <div class="col-md-4">
                            <label class="form-label">${index === 0 ? '{{__('courses.Day')}}' : ''}</label>
                            <select class="form-select slot-day" name="slots[${index}][day]" required>
                                <option value="">{{__('courses.Select Day')}}</option>
                                ${days.map((day, i) => `<option value="${i}">${day}</option>`).join('')}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">${index === 0 ? '{{__('courses.Start Time')}}' : ''}</label>
                            <input type="text" class="form-control slot-start" name="slots[${index}][start]" required data-toggle="flatpickr">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">${index === 0 ? '{{__('courses.End Time')}}' : ''}</label>
                            <input type="text" class="form-control slot-end" name="slots[${index}][end]" required data-toggle="flatpickr">
                        </div>
                        <div class="col-12 mt-2">
                            <label class="form-label">Available Teachers:</label>
                            <div class="available-teachers-count mb-2" data-index="${index}"><i>Loading...</i></div>
                            <div class="available-teachers" data-index="${index}"></div>
                            <input type="hidden" name="slots[${index}][teacher_id]" class="teacher-id-input" data-index="${index}">
                        </div>
                    </div>
                `;
            }

            function resetTimeSlots() {
                $('#time-slots-container').empty();
                updateTimeSlots();
            }

            function updateTimeSlots() {
                const sessionsPerWeek = parseInt($('#sessions_per_week').val() || 1, 10);
                const currentSlots = $('.time-slot-row').length;
                const container = $('#time-slots-container');

                if (currentSlots > sessionsPerWeek) {
                    $('.time-slot-row').slice(sessionsPerWeek).remove();
                } else if (currentSlots < sessionsPerWeek) {
                    for (let i = currentSlots; i < sessionsPerWeek; i++) {
                        container.append(generateTimeSlot(i));
                        $(`[name="slots[${i}][day]"]`).select2({
                            width: '100%',
                            allowClear: true,
                            placeholder: "{{__('courses.Select Day')}}"
                        });
                        flatpickr(`[name="slots[${i}][start]"]`, {
                            enableTime: true,
                            noCalendar: true,
                            dateFormat: "H:i",
                            time_24hr: true,
                            defaultHour: 16,
                            defaultMinute: 0
                        });
                        flatpickr(`[name="slots[${i}][end]"]`, {
                            enableTime: true,
                            noCalendar: true,
                            dateFormat: "H:i",
                            time_24hr: true,
                            defaultHour: 17,
                            defaultMinute: 0
                        });
                    }
                }
                attachSlotChangeListeners();
            }

            function attachSlotChangeListeners() {
                $('.slot-day, .slot-start, .slot-end, #start_date').off('change').on('change', function() {
                    const row = $(this).hasClass('slot-day') || $(this).hasClass('slot-start') || $(this).hasClass('slot-end')
                        ? $(this).closest('.time-slot-row')
                        : null;
                    if (row) {
                        const index = row.data('index');
                        const day = row.find('.slot-day').val();
                        const start = row.find('.slot-start').val();
                        const end = row.find('.slot-end').val();
                        const startDate = $('#start_date').val();

                        if (day && start && end && startDate) {
                            fetchAvailableTeachers(index, day, start, end, startDate);
                        }
                    } else {
                        $('.time-slot-row').each(function() {
                            const index = $(this).data('index');
                            const day = $(this).find('.slot-day').val();
                            const start = $(this).find('.slot-start').val();
                            const end = $(this).find('.slot-end').val();
                            const startDate = $('#start_date').val();

                            if (day && start && end && startDate) {
                                fetchAvailableTeachers(index, day, start, end, startDate);
                            }
                        });
                    }
                });
            }

            function fetchAvailableTeachers(index, day, start, end, startDate) {
                const startHour = parseInt(start.split(':')[0]);
                const slotValue = parseInt(day) * 24 + startHour;

                $.ajax({
                    url: "{{ route('dashboard.courses.getAvailableTeachers') }}",
                    type: "GET",
                    data: {
                        slots: [slotValue],
                        timezone: 'UTC',
                        start_date: startDate
                    },
                    success: function(data) {
                        let teacherList = '';
                        if (Array.isArray(data) && data.length > 0) {
                            teacherList = data.map(teacher => `
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input teacher-checkbox"
                                           data-index="${index}" data-teacher-id="${teacher.id}"
                                           id="teacher_${index}_${teacher.id}">
                                    <label class="form-check-label" for="teacher_${index}_${teacher.id}">
                                        ${teacher.text}
                                    </label>
                                </div>
                            `).join('');
                            $(`.available-teachers-count[data-index="${index}"]`).html(`<span>Available Teachers: ${data.length}</span>`);
                        } else {
                            teacherList = '<i>No teachers available</i>';
                            $(`.available-teachers-count[data-index="${index}"]`).html('<span>Available Teachers: 0</span>');
                        }
                        $(`.available-teachers[data-index="${index}"]`).html(teacherList);

                        // Handle checkbox change to update hidden input
                        $(`.teacher-checkbox[data-index="${index}"]`).on('change', function() {
                            const selectedTeacherId = $(this).data('teacher-id');
                            const hiddenInput = $(`.teacher-id-input[data-index="${index}"]`);
                            if ($(this).is(':checked')) {
                                hiddenInput.val(selectedTeacherId);
                                // Uncheck other checkboxes in the same slot
                                $(`.teacher-checkbox[data-index="${index}"]`).not(this).prop('checked', false);
                            } else {
                                hiddenInput.val('');
                            }
                        });
                    },
                    error: function() {
                        $(`.available-teachers-count[data-index="${index}"]`).html('<span>Available Teachers: 0</span>');
                        $(`.available-teachers[data-index="${index}"]`).html('<i>Error loading teachers</i>');
                    }
                });
            }

            $('#sessions_per_week').on('input', updateTimeSlots);
            updateTimeSlots();
        });
    </script>
@endsection