@extends('admin.layouts.container')

@section('content')
    <div class="side-title">
        <h3>{{ $head ?? '' }}</h3>
    </div>
    <div class="border-item">
        <form class="form-row add_form form-submit-loader" id="form" method="post" action="{{ $action }}"
              enctype="multipart/form-data">
            @if($course ?? '' && $course->id)
                @method('PUT')
            @endif
            @csrf

            <div class="form-group col-lg-6">
                <label>{{ meta('category_id', $lang) ?? __('courses::courses.category_id') }} </label>
                <select name="category_id"
                        class="form-control select2 course-category-select {{ $errors->has('category_id') ? 'is-invalid' : '' }}"
                        data-selected-course-type="{{ old('course_type', $course->course_type ?? null) }}">
                    <option value="">{{ __('general.choose') .' '. __('courses::courses.category_id')}}</option>
                    @foreach($categories as $category)
                        <option
                            @selected(old('category_id', $course->category_id ?? null) == $category->id)
                            value="{{ $category->id }}"
                            data-live-lectures-number="{{ $category->live_lectures_number }}">
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('course_type', $lang) ?? __('courses::courses.course_type') }}</label>
                <select name="course_type"
                        class="form-control select2 course-type-select {{ $errors->has('course_type') ? 'is-invalid' : '' }}">
                    <option value="">{{ __('general.choose') .' '. __('courses::courses.course_type')}}</option>
                </select>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('user_id', $lang) ?? __('courses::courses.user_id') }}</label>
                <select name="user_id"
                        class="form-control select2 {{ $errors->has('user_id') ? 'is-invalid' : '' }}">
                    <option value="">{{ __('general.choose') .' '. __('courses::courses.user_id')}}</option>
                    @foreach($teachers as $teacher)
                        <option
                            @selected(old('user_id', $course->user_id ?? null) == $teacher->id)
                            value="{{ $teacher->id }}">
                            {{ $teacher->name ?? $teacher->username ?? "" }}
                        </option>
                    @endforeach
                </select>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('stage_id', $lang) ?? __('courses::courses.stage_id') }}</label>
                <select name="stage_id"
                        class="form-control select2 stage-select {{ $errors->has('stage_id') ? 'is-invalid' : '' }}"
                        data-selected-grade-id="{{ old('grade_id', $course->grade_id ?? null) }}">
                    <option value="">{{ __('general.choose') .' '. __('courses::courses.stage_id')}}</option>
                    @foreach($stages as $stage)
                        <option
                            @selected(old('stage_id', $course->stage_id ?? null) == $stage->id)
                            value="{{ $stage->id }}">
                            {{ $stage->title }}
                        </option>
                    @endforeach
                </select>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('grade_id', $lang) ?? __('courses::courses.grade_id') }}</label>
                <select name="grade_id"
                        class="form-control select2 grade-select {{ $errors->has('grade_id') ? 'is-invalid' : '' }}"
                        data-selected-subject-id="{{ old('subject_id', $course->subject_id ?? null) }}">
                    <option value="">{{ __('general.choose') .' '. __('courses::courses.grade_id')}}</option>
                </select>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('subject_id', $lang) ?? __('courses::courses.subject_id') }}</label>
                <select name="subject_id"
                        class="form-control select2 subject-select {{ $errors->has('subject_id') ? 'is-invalid' : '' }}">
                    <option value="">{{ __('general.choose') .' '. __('courses::courses.subject_id')}}</option>
                </select>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('price', $lang) ?? __('courses::courses.price') }} </label>
                <input type="number" min="0" step="0.01"
                       class="form-control {{ $errors->has('price') ? 'is-invalid' : '' }}"
                       name="price"
                       placeholder="{{ meta('price', $lang) ?? __('courses::courses.price') }}"
                       value='{{ old("price", $course->price ?? "") }}'/>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('price2', $lang) ?? __('courses::courses.price2') }} </label>
                <input type="number" min="0" step="0.01"
                       class="form-control {{ $errors->has('price2') ? 'is-invalid' : '' }}"
                       name="price2"
                       placeholder="{{ meta('price2', $lang) ?? __('courses::courses.price2') }}"
                       value='{{ old("price2", $course->price2 ?? "") }}'/>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('course_number', $lang) ?? __('courses::courses.course_number') }}</label>
                <input type="number" min="0"
                       class="form-control {{ $errors->has('course_number') ? 'is-invalid' : '' }}"
                       name="course_number"
                       placeholder="{{ meta('course_number', $lang) ?? __('courses::courses.course_number') }}"
                       value="{{ old('course_number', $course->course_number ?? '') }}" readonly/>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('intro_video_link', $lang) ?? __('courses::courses.intro_video_link') }}</label>
                <input type="url"
                       class="form-control {{ $errors->has('intro_video_link') ? 'is-invalid' : '' }}"
                       name="intro_video_link"
                       placeholder="{{ meta('intro_video_link', $lang) ?? __('courses::courses.intro_video_link') }}"
                       value="{{ old('intro_video_link', $course->intro_video_link ?? '') }}"/>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6 course-type course-type-live">
                <label>{{ meta('live_link', $lang) ?? __('courses::courses.live_link') }}</label>
                <input type="url"
                       class="form-control {{ $errors->has('live_link') ? 'is-invalid' : '' }}"
                       name="live_link"
                       placeholder="{{ meta('live_link', $lang) ?? __('courses::courses.live_link') }}"
                       value="{{ old('live_link', $course->live_link ?? '') }}"/>
            </div> <!-- end of form-group -->

            <div class="row w-100 m-auto">
                @foreach($languages as $key => $language)
                    {{-- $key == 0 ? 'offset-md-6' : '' --}}
                    <div class="form-group col-lg-6">
                        <label>
                            {{ meta('title', $language->local) ?? __('courses::courses.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}
                        </label>
                        <input type="text"
                               class="form-control {{ $errors->has('title_'.$language->local) ? 'is-invalid' : '' }}"
                               name="title_{{ $language->local }}"
                               placeholder="{{ meta('title', $language->local) ?? __('courses::courses.title') }}"
                               value="{{ old('title_'.$language->local, $course[$language->local]->title ?? '') }}"/>
                    </div>
                @endforeach
            </div>

            <div class="row w-100 m-auto course-type course-type-live">
                @foreach($languages as $key => $language)
                    <div class="form-group col-lg-6">
                        <label>
                            {{ meta('next_lecture_title', $language->local) ?? __('courses::courses.next_lecture_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}
                        </label>
                        <input type="text"
                               class="form-control {{ $errors->has('next_lecture_title_'.$language->local) ? 'is-invalid' : '' }}"
                               name="next_lecture_title_{{ $language->local }}"
                               placeholder="{{ meta('next_lecture_title', $language->local) ?? __('courses::courses.next_lecture_title') }}"
                               value="{{ old('next_lecture_title_'.$language->local, $course[$language->local]->next_lecture_title ?? '') }}"/>
                    </div>
                @endforeach
            </div>

            <div class="row w-100 m-auto">
                @foreach($languages as $language)
                    <div class="form-group col-lg-6">
                        <label>
                            {{ meta('description', $language->local) ?? __('courses::courses.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}
                        </label>
                        <textarea id="description_{{ $language->local }}"
                                  name="description_{{ $language->local }}"
                                  class="form-control my-editor {{ $errors->has('description_'.$language->local) ? 'is-invalid' : '' }}"
                                  placeholder="{{ meta('description', $language->local) ?? __('courses::courses.description') }}">{{ old('description_'.$language->local, $course[$language->local]->description ?? '') }}</textarea>
                    </div>
                @endforeach
            </div>

            <div class="form-group col-lg-6">
                <label>{{ meta('lectures_number', $lang) ?? __('courses::courses.lectures_number') }}</label>
                <input type="number" min="0"
                       class="form-control {{ $errors->has('lectures_number') ? 'is-invalid' : '' }}"
                       name="lectures_number"
                       placeholder="{{ meta('lectures_number', $lang) ?? __('courses::courses.lectures_number') }}"
                       value="{{ old('lectures_number', $course->lectures_number ?? '') }}"/>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('start_date', $lang) ?? __('courses::courses.start_date') }}</label>
                <input type="date"
                       class="form-control {{ $errors->has('start_date') ? 'is-invalid' : '' }}"
                       name="start_date"
                       placeholder="{{ meta('start_date', $lang) ?? __('courses::courses.start_date') }}"
                       value="{{ old('start_date', $course->start_date ?? '') }}"/>
            </div> <!-- end of form-group -->
            <div class="form-group col-lg-6">
                <label>{{ meta('end_date', $lang) ?? __('courses::courses.end_date') }}</label>
                <input type="date"
                       class="form-control {{ $errors->has('end_date') ? 'is-invalid' : '' }}"
                       name="end_date"
                       placeholder="{{ meta('end_date', $lang) ?? __('courses::courses.end_date') }}"
                       value="{{ old('end_date', $course->end_date ?? '') }}"/>
            </div> <!-- end of form-group -->

            <div class="form-group col-lg-12 course-type course-type-live">
                <label>{{ __('courses::courses.week_days') }}</label>

                <!-- Toggle All Checkbox -->
                <div class="custom-control custom-switch toggle-all-container mb-2">
                    <input type="checkbox" class="custom-control-input" id="toggle-all-days">
                    <label class="custom-control-label" for="toggle-all-days">{{ __('dashboard.select_all') }}</label>
                </div>

                <!-- checkboxes List -->
                <div class="checkboxes-container row">
                    @foreach($days as $day)
                        <div class="custom-control custom-switch col-lg-4">
                            <input type="checkbox" class="custom-control-input day-checkbox"
                                   id="day_{{ $day['id'] }}"
                                   name="days[]"
                                   value="{{ $day['id'] }}" @checked(in_array($day['id'], $selectedDays ?? [])) />
                            <label class="custom-control-label" for="day_{{ $day['id'] }}">
                                {{ $day['name_' . app()->getLocale()] ?? "" }}
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="form-group col-lg-12 course-type course-type-live">
                <label>{{ __('courses::courses.determine_lecture_time') }}</label>
                <table class="table table-bordered table-hover text-center custom-bordered">
                    <thead>
                    <tr>
                        <th>{{ __('courses::courses.day') }}</th>
                        <th>{{ __('courses::courses.start_time') }}</th>
                        <th>{{ __('courses::courses.end_time') }}</th>
                    </tr>
                    </thead>
                    <tbody id="schedule-table-body">
                    @if($schedules ?? null)
                        @foreach($schedules as $schedule)
                            <tr>
                                <td>
                                    {{ $schedule->day_of_week . ' ' . $schedule->date }}
                                    <input type="hidden" name="schedule_details[{{ $loop->index }}][date]"
                                           value="{{ $schedule->date }}" class="form-control"/>
                                </td>
                                <td>
                                    <input type="time" name="schedule_details[{{ $loop->index }}][start_time]"
                                           value="{{ $schedule->start_time }}" class="form-control"/>
                                </td>
                                <td>
                                    <input type="time" name="schedule_details[{{ $loop->index }}][end_time]"
                                           value="{{ $schedule->end_time }}" class="form-control"/>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ meta('sort', $lang) ?? __('courses::courses.sort') }}</label>
                <input type="number" min="0"
                       class="form-control {{ $errors->has('sort') ? 'is-invalid' : '' }}"
                       name="sort"
                       placeholder="{{ meta('sort', $lang) ?? __('courses::courses.sort') }}"
                       value="{{ old('sort', $course->sort ?? $maxSort ?? '') }}"/>
            </div> <!-- end of form-group -->

            @include('admin.partials._upload_photo', [
                'item_value' => old('image', $course->image ?? ''),
                'label_name' => meta('image', getCurrentLocale()) ?? __('courses::courses.image'),
                'input_name' => 'image',
                'parent_class' => 'col-lg-6'
            ])

            <div class="text-center mt-5 col-12">
                <button type="submit" class="butn add_type_button"><span>{{ __('dashboard.save') }}</span></button>
            </div>
        </form>
    </div>
@endsection

@section('inner_js')
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    <script>
        var route_prefix = "{{ url(config('lfm.prefix')) }}";
        var url = "{{ url('/') }}/";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
@endsection

@push('stack_scripts')
    @include('admin.courses::_module_script')
    @include('admin.subjects::_module_script')

    <script>
        $(document).ready(function () {
            let toggleAllDays = $('#toggle-all-days'),
                dayCheckbox = $('.day-checkbox'),
                lecturesNumberInput = $('input[name=lectures_number]'),
                scheduleTableBody = $('#schedule-table-body');

            // Toggle all checkboxes
            toggleAllDays.on('change', function () {
                let isChecked = $(this).is(':checked');
                dayCheckbox.prop('checked', isChecked);

                // Limit the number of selections when toggling all
                let lecturesNumber = parseInt(lecturesNumberInput.val()) || 0;
                if (isChecked && dayCheckbox.length > lecturesNumber) {
                    dayCheckbox.slice(lecturesNumber).prop('checked', false);
                    toggleAllDays.prop('checked', false);
                    toasterError("{{ __('courses::courses.days_selected_lectures_number') }}");
                }

                updateScheduleTable();
            });

            // Handle individual day-checkbox changes
            dayCheckbox.on('change', function () {
                enforceLecturesNumberLimit();
            });

            $('input[name="start_date"]').on('change', function () {
                updateScheduleTable();
            });

            // Handle lectures_number input changes
            lecturesNumberInput.on('input', function () {
                enforceLecturesNumberLimit();
            });

            // Ensure that checked days do not exceed lectures_number
            function enforceLecturesNumberLimit() {
                let daysChecked = $('.day-checkbox:checked');
                let lecturesNumber = parseInt(lecturesNumberInput.val()) || 0;

                if (daysChecked.length > lecturesNumber) {
                    // Uncheck the last selected checkboxes to meet the limit
                    daysChecked.slice(lecturesNumber).prop('checked', false);
                    daysChecked = $('.day-checkbox:checked');
                    toasterError("{{ __('courses::courses.days_selected_lectures_number') }}");
                }

                updateScheduleTable();

                // Adjust the toggle-all state
                toggleAllDays.prop('checked', daysChecked.length === dayCheckbox.length);
            }

            // Update toggle-all state initially
            if ($('.day-checkbox:checked').length === dayCheckbox.length) {
                toggleAllDays.prop('checked', true);
            }

            function updateScheduleTable() {
                let form = $('#form'); // Find the closest form
                let formData = new FormData(form[0]); // Pass the form DOM element to FormData
                formData.delete('_method');

                $.ajax({
                    url: '{{ route('courses.update.schedule.table') }}',
                    method: 'POST',
                    data: formData,
                    processData: false, // Required for FormData
                    contentType: false, // Required for FormData
                    success: function (response) {
                        scheduleTableBody.empty();

                        if (response.days && response.days.length > 0) {
                            response.days.forEach((day, index) => {
                                addSchedule(index, day);
                            });
                        }

                        if (response.end_date) {
                            $('input[name="end_date"]').val(response.end_date);
                        }
                    },
                    error: function (xhr) {
                        displayAjaxError(xhr);
                    }
                });
            }

            // Add a new schedule row
            function addSchedule(rowIndex, dayData) {
                let newRow = `
                    <tr>
                        <td>
                            ${dayData.day_name} ${dayData.translated_format}
                            <input type="hidden" name="schedule_details[${rowIndex}][date]" value="${dayData.date}" class="form-control"/>
                        </td>
                        <td>
                            <input type="time" name="schedule_details[${rowIndex}][start_time]" value="${dayData.start_time}" class="form-control"/>
                        </td>
                        <td>
                            <input type="time" name="schedule_details[${rowIndex}][end_time]" value="${dayData.end_time}" class="form-control"/>
                        </td>
                    </tr>
                `;
                scheduleTableBody.append(newRow);
            }

            // Handle course-type changes
            $(document).on('change', '.course-type-select', function () {
                let type = $(this).val();
                let liveLecturesNumber = $('[name="category_id"]').find(':selected').data('live-lectures-number');
                let oldLecturesNumberValue = '{{ old('lectures_number', $course->lectures_number ?? '') }}';

                $('.course-type').hide();
                $('.course-type-' + type).show();

                if (type === 'live') {
                    // lecturesNumberInput.val(liveLecturesNumber).attr('readonly', true);
                    enforceLecturesNumberLimit();
                    $('input[name="end_date"]').attr('readonly', true);
                } else {
                    lecturesNumberInput.val(oldLecturesNumberValue).attr('readonly', false);
                    $('input[name="end_date"]').attr('readonly', false);
                }
            });
        });
    </script>
@endpush