@extends('layouts-v2.app')
@include('class.partials-v2.styles')

@section('content')
    <div class="flex-1 space-y-6">
        <!-- Header -->
        <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
            <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <a href="{{ route('class.index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách lớp học</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <span>Thêm lớp</span>
        </div>
        <h1 class="text-3xl font-bold text-slate-900 mb-6">Thêm lớp</h1>

        <!-- Message Notification V2 -->
        <div class="message-class hidden fixed top-4 right-4 z-50 max-w-md w-full">
            <div
                class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-4 flex items-start gap-3 animate-slide-in">
                <div class="notification-icon flex-shrink-0 mt-0.5">
                    <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                    <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div id="content_message" class="text-sm font-medium text-slate-800"></div>
                </div>
                <button type="button"
                    class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors"
                    aria-label="Close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
        </div>

        @if(session('success-v2'))
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    showNotificationV2('success', '{{ session('success-v2') }}');
                });
            </script>
        @endif

        @if(session('error-v2'))
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    showNotificationV2('error', '{{ session('error-v2') }}');
                });
            </script>
        @endif

        <!-- Form -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 md:p-6">
            <form action="{{ route('class.store') }}" id="form_tab_info" method="post">
                @csrf
                <input type="hidden" name="isProductList" value="{{ $filterInfo['isProductList'] ?? 0 }}">
                <input type="hidden" name="is_v2" value="1">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Tên lớp <span
                                class="text-red-500">(*)</span></label>
                        <input type="text" name="class_name" value=""
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Trạng thái</label>
                        <select name="status"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                            <option value="0">Đang vận hành</option>
                            <option value="1">Đã kết thúc khóa học</option>
                        </select>
                    </div>
                    @php
                        $currentYear = date('Y');
                        $startYear = 2020;
                    @endphp
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Năm học</label>
                        <select id="year" name="year"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                            <option value="">Chọn năm học</option>
                            @for ($year = $currentYear; $year >= $startYear; $year--)
                                @php
                                    $nextYear = $year + 1;
                                    $label = $year . '-' . $nextYear;
                                @endphp
                                <option value="{{ $year }}" {{ request('year') == $year ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Khóa học <span
                                class="text-red-500">(*)</span></label>
                        @if($filterInfo['isProductList'] ?? false)
                            <div class="px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm text-slate-700">
                                {{ $filterInfo['product']->moodle_name ?? '' }}
                            </div>
                            <input type="hidden" name="course_ids[]" value="{{ $filterInfo['product']->id ?? '' }}">
                        @else
                            @include('class.partials-v2.custom-select', [
                                'id' => 'course',
                                'name' => 'course_ids[]',
                                'placeholder' => 'Chọn khóa học',
                                'options' => $courses,
                                'selectedValues' => [],
                                'searchPlaceholder' => 'Tìm tên khóa học...'
                            ])
                        @endif

                                           </div>

                    <div class="flex justify-end gap-3 pt-4">
                        <button type="submit" id="btn-save" class="px-6 py-2 bg-blue-600 text-white !rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">
                            Lưu
                        </button>
                        <a href="{{ route('class.index') }}" id="btn-cancel" class="px-6 py-2 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors">
                            Huỷ
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Hidden Inputs -->
    <input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">

@endsection

@section('scripts')
    <script src="{{ URL::asset('js/classes/classes-v2.js') }}"></script>
    <script>
        $(document).ready(function () {
            // Initialization for Custom Multi-Select logic (Simplified for Add/Edit)
            const id = 'course';
            const trigger = document.getElementById(`${id}-trigger`);
            const dropdown = document.getElementById(`${id}-dropdown`);
            const search = document.getElementById(`${id}-search`);
            const text = document.getElementById(`${id}-text`);
            const icon = document.getElementById(`${id}-icon`);
            const options = document.getElementById(`${id}-options`);
            const tagsEl = document.getElementById(`selected-${id}-tags`);
            const hiddenSelect = document.getElementById(`filter-${id}`);
            const selectAllCb = document.getElementById(`select-all-${id}`);

            if (!trigger || !dropdown) return;

            function updateSelectText() {
                if (!hiddenSelect) return;
                let selected = Array.from(hiddenSelect.options).filter(opt => opt.selected);
                if (selected.length === 0) {
                    text.textContent = 'Chọn khóa học';
                } else if (selected.length === 1) {
                    text.textContent = selected[0].text;
                } else {
                    text.textContent = selected.length + ' khóa học đã chọn';
                }
                renderTags();
            }

            function renderTags() {
                if (!tagsEl) return;
                tagsEl.innerHTML = '';
                let selected = Array.from(hiddenSelect.options).filter(opt => opt.selected);
                if (selected.length === 0) {
                    tagsEl.innerHTML = '<span class="text-xs text-slate-400 self-center">Chưa chọn</span>';
                    return;
                }
                selected.forEach(opt => {
                    const tag = document.createElement('span');
                    tag.className = 'course-tag';
                    tag.innerHTML = `<span>${opt.text}</span><span class="course-tag-remove" data-val="${opt.value}" title="Xóa">&#215;</span>`;
                    tagsEl.appendChild(tag);
                });
            }

            trigger.addEventListener('click', (e) => {
                e.stopPropagation();
                dropdown.classList.toggle('hidden');
                if (icon) icon.classList.toggle('rotate');
                if (!dropdown.classList.contains('hidden') && search) search.focus();
            });

            if (search) {
                search.addEventListener('input', (e) => {
                    const term = e.target.value.toLowerCase();
                    let hasResults = false;
                    $(`.${id}-option`).each(function () {
                        const name = $(this).data('name').toString().toLowerCase();
                        const isMatch = name.includes(term);
                        $(this).toggleClass('hidden', !isMatch);
                        if (isMatch) hasResults = true;
                    });
                    $(`#${id}-no-results`).toggleClass('hidden', hasResults);
                });
            }

            if (options) {
                options.addEventListener('change', (e) => {
                    if (e.target.classList.contains(`${id}-checkbox`)) {
                        const val = e.target.value;
                        const opt = Array.from(hiddenSelect.options).find(o => o.value == val);
                        if (opt) opt.selected = e.target.checked;
                        updateSelectText();
                    }
                });
            }

            if (selectAllCb) {
                selectAllCb.addEventListener('change', (e) => {
                    const isChecked = e.target.checked;
                    $(`.${id}-option:not(.hidden) .${id}-checkbox`).each(function () {
                        $(this).prop('checked', isChecked);
                        const opt = Array.from(hiddenSelect.options).find(o => o.value == this.value);
                        if (opt) opt.selected = isChecked;
                    });
                    updateSelectText();
                });
            }

            // Tag removal logic
            $(document).on('click', '.course-tag-remove', function (e) {
                e.stopPropagation();
                const val = $(this).data('val');
                const opt = Array.from(hiddenSelect.options).find(o => o.value == val);
                if (opt) {
                    opt.selected = false;
                    $(`.${id}-checkbox[value="${val}"]`).prop('checked', false);
                    updateSelectText();
                    if (selectAllCb) selectAllCb.checked = false;
                }
            });

            // Global click to close dropdowns
            document.addEventListener('click', (e) => {
                if (trigger && !trigger.contains(e.target) && dropdown && !dropdown.contains(e.target)) {
                    dropdown.classList.add('hidden');
                    if (icon) icon.classList.remove('rotate');
                }
            });

            // Initialize state
            updateSelectText();
        });
    </script>
@endsection