@extends('layouts-v2.app')

@section('title', 'Danh sách gói đề')

@section('content')
<div>
    {{-- Breadcrumb --}}
    <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>
        <span>Gói đề</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Gói đề</h1>

    {{-- Khu vực Tìm kiếm và Lọc --}}
    <div class="bg-white shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="w-72">
                {{-- Input ID Gói --}}
                <x-floating-input name="group_id" id="group_id" label="ID gói" clearable="true" />
            </div>
    
            <div class="w-72">
                {{-- Input Tên gói --}}
                <x-floating-input name="group_title" id="group_title" label="Tên gói" clearable="true" />
            </div>
        </div>

        {{-- Nút Lọc --}}
        <button id="btnFilter"
                class="inline-flex justify-center py-2.5 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            LỌC
        </button>
    </div>

    {{-- Khu vực Thao tác (Header của Bảng) --}}
    <div class="flex justify-between items-center mb-4">
        {{-- Số lượng hiển thị --}}
        <x-floating-select 
            name="perpage"
            id="perpage"
            class="w-40"
            label="Số lượng hiển thị"
            :options="[
                '' => '10',
                '20' => '20',
                '30' => '30',
                '50' => '50',
                '100' => '100'
            ]"
        />

        {{-- Nút Thêm Mới --}}
        <button type="button" id="btn-add-group-modal"
                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            <svg class="w-5 h-5 -ml-1 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
            THÊM MỚI
        </button>
    </div>

    {{-- Bảng Danh sách Gói Đề --}}
    <div class="flex flex-col">
        <div class="py-2 align-middle inline-block min-w-full">
            <div class="shadow-md border border-gray-100">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                GÓI
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                ẢNH GÓI
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                DANH MỤC GÓI
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                SẢN PHẨM
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                TRẠNG THÁI GÓI
                            </th>
                            <th scope="col" class="px-6 py-3 text-center text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                THAO TÁC
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="tbody-oa-groups">
                        <tr>
                            <td colspan="7" class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-900">
                                <div class="flex items-center justify-center">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes loader2{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#265BFF" d="M17.179 13.605a.431.431 0 00.279.514l.775.245a.393.393 0 00.499-.268 7.318 7.318 0 00-4.5-8.658.39.39 0 00-.507.255l-.245.775a.43.43 0 00.261.523 5.69 5.69 0 013.438 6.614z" style="animation:loader2 1s cubic-bezier(.63,-.71,.32,1.28) infinite both;transform-origin:center center"/></svg>
                                </div>            
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Phân trang -->
        <div class="mt-6 flex justify-center" id="pagination"></div>
    </div>

    <!-- Modal Thêm gói -->
    <div id="add-group-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title-add-group" role="dialog" aria-modal="true">

        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="add-group-content" class="relative w-full max-w-6xl bg-white rounded-xl shadow-xl transform transition-all">

                <div class="bg-white p-6 rounded-xl shadow-xl">
                    {{-- Modal Header --}}
                    <div class="flex justify-between items-center mb-6 border-b pb-4">
                        <h3 class="text-xl font-semibold text-gray-900">
                            Thêm gói
                        </h3>
                        {{-- Nút Đóng --}}
                        <button type="button"
                                class="text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100 btn-close-add-group-modal">
                            <span class="sr-only">Đóng</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <form id="add-group-form" action="#" method="POST">
                        @csrf
                        
                        {{-- PHẦN 1: THÔNG TIN GÓI --}}
                        <h4 class="text-lg font-semibold text-gray-800 mb-4">Thông tin gói</h4>
                        <div class="grid grid-cols-2 gap-4">
                            
                            {{-- 1. Tên gói --}}
                            <div class="col-span-1">
                                <x-floating-input name="title" id="add-group-title" label="Tên gói *"/>
                            </div>

                            {{-- 2. Danh mục gói --}}
                            <div class="col-span-1">
                                <x-floating-select 
                                    name="category_id"
                                    id="add-group-category-id"
                                    label="Danh mục gói"
                                    :options="config('oa.categories')"
                                    class="w-full"
                                />
                            </div>

                            {{-- 3. Trạng thái (Toggle) & Loại gói --}}
                            <div class="col-span-2 flex items-center justify-between space-x-4">
                                <div class="flex items-center gap-3">
                                    <label for="add-group-is-active" class="text-sm font-medium text-gray-400 cursor-pointer">Hoạt động</label>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="is_active" id="add-group-is-active" class="sr-only peer" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>

                                <div class="flex-1">
                                    <x-floating-select 
                                        name="type"
                                        id="add-group-type"
                                        label="Loại gói"
                                        :options="config('oa.group_type')"
                                        class="w-full"
                                    />
                                </div>
                            </div>

                            {{-- 5. Chọn Ảnh --}}
                            <div class="col-span-2 flex items-center space-x-4">
                                <div 
                                    id="group-image-picker"
                                    class="flex justify-center items-center w-64 h-24 border border-gray-100 shadow-md rounded cursor-pointer bg-gray-50 hover:bg-gray-100"
                                >
                                    <img 
                                        id="group-image-preview"
                                        class="hidden w-full h-full object-cover rounded-lg"
                                    />

                                    <span id="group-image-placeholder" class="text-gray-400 text-sm">
                                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes slide{0%{transform:translateX(0)}to{transform:translateX(5.5px) translateY(-1px)}}</style><path stroke="#0A0A30" stroke-width="1.5" d="M4 8a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H8a4 4 0 01-4-4V8z"/><path stroke="#0A0A30" stroke-width="1.5" d="M4.221 17.607c.498-.603.767-.816 1.263-1.426.944-1.169 1.58-1.507 2.287-1.21.287.123.575.308.87.503.79.523 1.888 1.24 3.334.461.994-.544 1.57-1.477 2.07-2.286.206-.329.4-.657.627-.954.235-.308 1.107-1.271 2.234-.586.719.432 1.314.915 1.96 1.54.247.24.433.614.55.905.352.88.457 1.372.457 2.488"/><path stroke="#265BFF" stroke-width="1.33" d="M8.647 11.032c.977 0 1.773-.796 1.773-1.773 0-.977-.796-1.773-1.773-1.773-.978 0-1.773.796-1.773 1.773 0 .977.795 1.773 1.773 1.773" style="transform-origin:center;animation:slide 1.5s cubic-bezier(.86,0,.07,1) infinite alternate-reverse both"/></svg>
                                    </span>
                                </div>

                                <input 
                                    type="file"
                                    id="group-image-input"
                                    name="thumbnail"
                                    accept="image/*"
                                    class="hidden"
                                />

                                {{-- 6. Mô tả --}}
                                <textarea rows="4" placeholder="Mô tả" name="description"
                                    class="w-full outline-none border border-gray-300 rounded-lg shadow-sm focus:!border-blue-500 focus:!ring-blue-500 py-2.5 px-4 text-sm"></textarea>
                            </div>
                        </div>
                    </form>

                    {{-- PHẦN 2: ĐỀ THI TRONG GÓI --}}
                    <h4 class="text-lg font-semibold text-gray-800 mt-8 mb-4 border-t pt-4">Đề thi trong gói</h4>
                    
                    <form class="flex space-x-3 items-end mb-4" id="add-group-add-exam-form">
                        {{-- Chọn Đề thi --}}
                        <div class="flex-1 relative">
                            <span class="text-gray-500 pointer-events-none z-10 text-xs bg-white">
                                Đề thi
                            </span>
                            <select id="exam_search" name="exam_search" multiple style="width: 100%" class="border-gray-300 rounded-lg shadow-sm focus:!border-blue-500 focus:!ring-blue-500 text-sm"></select>
                        </div>

                        {{-- Số lượt làm đề --}}
                        <div class="w-40">
                            <x-floating-input type="number" name="exam_count" label="Số lượt làm đề" id="exam_count" min="1"/>
                        </div>
                        
                        {{-- Nút Thêm --}}
                        <button 
                                id="btn-add-exam-to-group"
                                class="inline-flex items-center justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out h-[42px]">
                            THÊM
                        </button>
                    </form>

                    {{-- Bảng danh sách đề đã thêm --}}
                    <div class="mt-6 border rounded-lg max-h-48 overflow-y-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50 sticky top-0 z-10">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID đề</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tên đề thi</th>
                                    <!-- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Thời gian thi</th> -->
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lượt làm đề</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Thao tác</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="tbody-added-exams"></tbody>
                        </table>
                    </div>

                    {{-- Modal Footer (Buttons) --}}
                    <div class="flex justify-end space-x-3 mt-8 pt-4 border-t">
                        <button type="button"
                                class="btn-close-add-group-modal w-32 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
                            HỦY BỎ
                        </button>
                        <button id="btn-submit-add-group"
                                class="disabled:opacity-50 disabled:cursor-not-allowed w-32 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                            LƯU LẠI
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Cập nhật gói -->
    <div id="edit-group-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title-edit-group" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="edit-group-content" class="relative w-full max-w-6xl bg-white rounded-xl shadow-xl transform transition-all">

                <div class="bg-white p-6 rounded-xl shadow-xl">
                    {{-- Modal Header --}}
                    <div class="flex justify-between items-center mb-6 border-b pb-4">
                        <h3 class="text-xl font-semibold text-gray-900">
                            Cập nhật gói
                        </h3>
                        {{-- Nút Đóng --}}
                        <button type="button"
                                class="text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100 btn-close-edit-group-modal">
                            <span class="sr-only">Đóng</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    {{-- FORM CẬP NHẬT --}}
                    {{-- Thêm ID form, action và @method('PUT') --}}
                    <form id="edit-group-form" method="POST">
                        @csrf
                        
                        {{-- PHẦN 1: THÔNG TIN GÓI --}}
                        <h4 class="text-lg font-semibold text-gray-800 mb-4">Thông tin gói</h4>
                        <div class="grid grid-cols-2 gap-4">
                            
                            {{-- 1. Tên gói --}}
                            <div class="col-span-1">
                                <x-floating-input name="title" label="Tên gói *" id="edit-group-title"/>
                            </div>

                            {{-- 2. Danh mục gói --}}
                            <div class="col-span-1">
                                <x-floating-select 
                                    name="category_id"
                                    label="Danh mục gói"
                                    :options="config('oa.categories')"
                                    id="edit-group-category-id"
                                    class="w-full"
                                />
                            </div>

                            {{-- 3. Trạng thái (Toggle) & Loại gói --}}
                            <div class="col-span-2 flex items-center justify-between space-x-4">
                                <div class="flex items-center gap-3">
                                    <label for="edit-group-is-active" class="text-sm font-medium text-gray-400 cursor-pointer">Hoạt động</label>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="is_active" id="edit-group-is-active" class="sr-only peer" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>

                                <div class="flex-1">
                                    <x-floating-select 
                                        name="type"
                                        label="Loại gói"
                                        :options="config('oa.group_type')"
                                        class="w-full"
                                        id="edit-group-type"
                                    />
                                </div>
                                
                            </div>

                            {{-- 5. Chọn Ảnh (Nhỏ lại) và Mô tả --}}
                            <div class="col-span-2 flex items-center space-x-4">
                                <div 
                                    id="group-image-edit-picker"
                                    class="flex justify-center items-center w-64 h-24 border border-gray-100 shadow-md rounded cursor-pointer bg-gray-50 hover:bg-gray-100"
                                >
                                    <img 
                                        id="group-image-edit-preview"
                                        class="hidden w-full h-full object-cover rounded-lg"
                                    />

                                    <span id="group-image-edit-placeholder" class="text-gray-400 text-sm">
                                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes slide{0%{transform:translateX(0)}to{transform:translateX(5.5px) translateY(-1px)}}</style><path stroke="#0A0A30" stroke-width="1.5" d="M4 8a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H8a4 4 0 01-4-4V8z"/><path stroke="#0A0A30" stroke-width="1.5" d="M4.221 17.607c.498-.603.767-.816 1.263-1.426.944-1.169 1.58-1.507 2.287-1.21.287.123.575.308.87.503.79.523 1.888 1.24 3.334.461.994-.544 1.57-1.477 2.07-2.286.206-.329.4-.657.627-.954.235-.308 1.107-1.271 2.234-.586.719.432 1.314.915 1.96 1.54.247.24.433.614.55.905.352.88.457 1.372.457 2.488"/><path stroke="#265BFF" stroke-width="1.33" d="M8.647 11.032c.977 0 1.773-.796 1.773-1.773 0-.977-.796-1.773-1.773-1.773-.978 0-1.773.796-1.773 1.773 0 .977.795 1.773 1.773 1.773" style="transform-origin:center;animation:slide 1.5s cubic-bezier(.86,0,.07,1) infinite alternate-reverse both"/></svg>
                                    </span>
                                </div>

                                <input 
                                    type="file"
                                    id="group-image-edit-input"
                                    name="thumbnail"
                                    accept="image/*"
                                    class="hidden"
                                />
                                
                                {{-- 6. Mô tả --}}
                                <textarea rows="4" placeholder="Mô tả" name="description" id="edit-group-description"
                                    class="w-full border border-gray-300 rounded-lg outline-none shadow-sm focus:!border-blue-500 focus:!ring-blue-500 py-2.5 px-4 text-sm"></textarea>
                            </div>
                        </div>
                    </form>

                    {{-- PHẦN 2: ĐỀ THI TRONG GÓI --}}
                    <h4 class="text-lg font-semibold text-gray-800 mt-8 mb-4 border-t pt-4">Đề thi trong gói</h4>
                    
                    <form class="flex space-x-3 items-end mb-4" id="edit-group-add-exam-form">
                        {{-- Chọn Đề thi (Select/Search) --}}
                        <div class="flex-1 relative">
                            <span class="text-gray-500 pointer-events-none z-10 text-xs bg-white">
                                Đề thi
                            </span>
                            <select id="exam_search_edit" name="exam_search_edit" multiple style="width: 100%" class="border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"></select>
                        </div>

                        {{-- Số lượt làm đề --}}
                        <div class="w-40">
                            <x-floating-input type="number" name="exam_count" id="exam_count_edit" label="Số lượt làm đề"  min="1"/>
                        </div>
                        
                        {{-- Nút Thêm --}}
                        <button
                                id="btn-add-exam-to-group-edit"
                                class="inline-flex items-center justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out h-[42px]">
                            THÊM
                        </button>
                    </form>

                    {{-- Bảng danh sách đề đã thêm --}}
                    <div class="mt-4 border rounded-lg max-h-48 overflow-y-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50 sticky top-0 z-10">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID đề</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tên đề thi</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lượt làm đề</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Thao tác</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="tbody-added-exams-edit"></tbody>
                        </table>
                    </div>

                    {{-- Modal Footer (Buttons) --}}
                    <div class="flex justify-end space-x-3 mt-8 pt-4 border-t">
                        <button type="button"
                            class="btn-close-edit-group-modal w-32 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
                            HỦY BỎ
                        </button>
                        <button id="btn-submit-edit-group"
                            class="disabled:opacity-50 disabled:cursor-not-allowed w-32 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                            CẬP NHẬT
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Thêm PACKAGE -->
    <div id="add-package-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title-add-package" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="add-package-content" class="relative w-full max-w-lg bg-white rounded-xl shadow-xl transform transition-all">

                <div class="bg-white p-6 rounded-xl shadow-xl">
                    {{-- Modal Header --}}
                    <div class="flex justify-between items-center pb-4">
                        <h3 class="text-xl font-semibold text-gray-900">
                            Tạo sản phẩm
                        </h3>
                        {{-- Nút Đóng --}}
                        <button type="button"
                                class="text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100 btn-close-add-package-modal">
                            <span class="sr-only">Đóng</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <form id="add-package-form" method="POST">
                        @csrf
                        
                        {{-- 1. Tên sản phẩm --}}
                        <div class="mb-4">
                            <x-floating-input name="title" label="Tên sản phẩm *" id="package_name" />
                        </div>

                        {{-- 2. Mô tả sản phẩm --}}
                        <div class="mb-4">
                            <textarea id="package_description" name="description" rows="2" placeholder="Mô tả sản phẩm"
                                class="w-full border border-gray-300 outline-none rounded-lg shadow-sm focus:!border-blue-500 focus:!ring-blue-500 py-3 px-4 text-sm"></textarea>
                        </div>

                        {{-- 3. Loại sản phẩm (Luyện đề) --}}
                        <div class="mb-4">
                            <label for="package_type" class="text-xs font-medium text-gray-500 block">Loại sản phẩm</label>
                            <div class="relative">
                                <select id="package_type" disabled
                                        class="disabled:cursor-not-allowed pointer-events-none w-full !border-gray-300 rounded-lg shadow-sm focus:!border-blue-500 focus:!ring-blue-500 py-3 px-4 pr-10 appearance-none text-sm text-gray-500">
                                    <option value="0" selected>Luyện đề</option>
                                </select>
                                <input type="hidden" name="type" value="0">
                            </div>
                        </div>
                        
                        {{-- 4. CONTAINER NỘI DUNG TÙY THEO LOẠI SẢN PHẨM --}}
                        <div id="package-content-container">
                            {{-- Nội dung cho Loại sản phẩm: Luyện đề (Screenshot 13) --}}
                            <div id="content-luyende" class="p-4 border border-gray-300 rounded-lg space-y-4 bg-gray-50">
                                <label for="duration_days" class="text-xs font-medium text-gray-500 block">Gói</label>
                                {{-- Gói --}}
                                <div class="relative flex mt-0">
                                    <select id="package_select" name="package_id" disabled
                                            class="disabled:cursor-not-allowed pointer-events-none flex-1 border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4 pr-10 appearance-none text-sm text-gray-500">
                                    </select>
                                </div>
                                
                                {{-- Thời gian gói --}}
                                <div class="relative space-y-4">
                                    <label for="duration_days" class="text-xs font-medium text-gray-500 block">Thời gian gói</label>
                                    <div class="flex rounded-lg shadow-sm border border-gray-300">
                                        <x-floating-input type="number" name="amount" id="duration_days" min="1" />
                                        <span class="inline-flex items-center px-4 border border-transparent bg-gray-50 text-gray-500 text-sm font-medium">
                                            ngày
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {{-- 5. Ảnh minh họa --}}
                        <div class="mt-4">
                            <div 
                                id="package-image-picker"
                                class="flex justify-center items-center w-full h-32 border border-gray-100 shadow-md rounded cursor-pointer bg-gray-50 hover:bg-gray-100"
                            >
                                <img 
                                    id="package-image-preview"
                                    class="hidden w-full h-full object-cover rounded-lg"
                                />

                                <span id="package-image-placeholder" class="text-gray-400 text-sm">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes slide{0%{transform:translateX(0)}to{transform:translateX(5.5px) translateY(-1px)}}</style><path stroke="#0A0A30" stroke-width="1.5" d="M4 8a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H8a4 4 0 01-4-4V8z"/><path stroke="#0A0A30" stroke-width="1.5" d="M4.221 17.607c.498-.603.767-.816 1.263-1.426.944-1.169 1.58-1.507 2.287-1.21.287.123.575.308.87.503.79.523 1.888 1.24 3.334.461.994-.544 1.57-1.477 2.07-2.286.206-.329.4-.657.627-.954.235-.308 1.107-1.271 2.234-.586.719.432 1.314.915 1.96 1.54.247.24.433.614.55.905.352.88.457 1.372.457 2.488"/><path stroke="#265BFF" stroke-width="1.33" d="M8.647 11.032c.977 0 1.773-.796 1.773-1.773 0-.977-.796-1.773-1.773-1.773-.978 0-1.773.796-1.773 1.773 0 .977.795 1.773 1.773 1.773" style="transform-origin:center;animation:slide 1.5s cubic-bezier(.86,0,.07,1) infinite alternate-reverse both"/></svg>
                                </span>
                            </div>

                            <input 
                                type="file"
                                id="package-image-input"
                                name="thumbnail"
                                accept="image/*"
                                class="hidden"
                            />
                        </div>

                        {{-- Modal Footer (Buttons) --}}
                        <div class="flex justify-end space-x-3 mt-6 pt-4 border-t">
                            <button type="button"
                                    class="btn-close-add-package-modal w-20 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
                                HỦY
                            </button>
                            <button id="btn-submit-add-package"
                                    class="disabled:opacity-50 disabled:cursor-not-allowed w-20 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                                TẠO
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

</div>

<script>
    window.routes = {
        getOAGroups: "{{ route('oa-groups.getOAGroups') }}",
        getOAGroup: "{{ route('oa-groups.getOAGroup', ['id' => ':id']) }}",
        addOAGroup: "{{ route('oa-groups.store') }}",
        updateOAGroup: "{{ route('oa-groups.update', ['id' => ':id']) }}",
        deleteOAGroup: "{{ route('oa-groups.destroy', ['id' => ':id']) }}",
        searchOAExams: "{{ route('oa-exams.searchOAExams') }}",
        addOAPackage: "{{ route('oa-packages.store') }}"
    }
</script>

<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-group.js') }}"></script>
<script src="{{ asset('js/OA/oa-group-package.js') }}"></script>
<script>
    $(document).ready(function() {
        // HIỂN THỊ GROUPS 
        loadOAGroups();
    });
</script>
@endsection