@extends('layouts-v2.app')

@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_id" value="{{ $filterInfo['product']->id ?? '' }}">
                    @else
                        <select name="course_ids[]" id="course_ids" required multiple class="w-full">
                            @foreach($courses as $course)
                                <option value="{{ $course->id }}">{{ $course->moodle_name }}</option>
                            @endforeach
                        </select>
                    @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>
@endsection