@extends('layouts-v2.app')

@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>Sản phẩm đã gán</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Sản phẩm đã gán</h1>

    {{-- Phần Tìm kiếm --}}
    <div class="bg-white shadow-sm rounded-xl p-6 mb-6 border border-gray-200">
        <h2 class="text-lg font-semibold text-gray-700 mb-4 tracking-tight">Tìm kiếm</h2>
        <form method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-6 gap-4">

                {{-- Hàng 1 --}}
                <div class="col-span-1 md:col-span-2 relative flex items-center gap-1">
                    <input type="text" id="start-time" placeholder="Thời gian bắt đầu" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-4 text-sm outline-none border">
                    <button type="button" id="btn-clear-start-time" class="hidden"> 
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes rotate-tr{0%{transform:rotate(0)}to{transform:rotate(20deg)}}</style><path fill="#0A0A30" d="M16.773 10.083a.75.75 0 00-1.49-.166l1.49.166zm-1.535 7.027l.745.083-.745-.083zm-6.198 0l-.745.083.745-.083zm-.045-7.193a.75.75 0 00-1.49.166l1.49-.166zm5.249 7.333h-4.21v1.5h4.21v-1.5zm1.038-7.333l-.79 7.11 1.491.166.79-7.11-1.49-.166zm-5.497 7.11l-.79-7.11-1.49.166.79 7.11 1.49-.165zm.249.223a.25.25 0 01-.249-.222l-1.49.165a1.75 1.75 0 001.739 1.557v-1.5zm4.21 1.5c.892 0 1.64-.67 1.74-1.557l-1.492-.165a.25.25 0 01-.248.222v1.5z"/><path fill="#265BFF" fill-rule="evenodd" d="M11 6a1 1 0 00-1 1v.25H7a.75.75 0 000 1.5h10a.75.75 0 000-1.5h-3V7a1 1 0 00-1-1h-2z" clip-rule="evenodd" style="animation:rotate-tr 1s cubic-bezier(1,-.28,.01,1.13) infinite alternate-reverse both;transform-origin:right center"/></svg>
                    </button>
                </div>

                <div class="col-span-1 md:col-span-2 relative flex items-center gap-1">
                    <input type="text" id="end-time" placeholder="Thời gian kết thúc" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-4 text-sm outline-none border">
                    <button type="button" id="btn-clear-end-time" class="hidden"> 
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes rotate-tr{0%{transform:rotate(0)}to{transform:rotate(20deg)}}</style><path fill="#0A0A30" d="M16.773 10.083a.75.75 0 00-1.49-.166l1.49.166zm-1.535 7.027l.745.083-.745-.083zm-6.198 0l-.745.083.745-.083zm-.045-7.193a.75.75 0 00-1.49.166l1.49-.166zm5.249 7.333h-4.21v1.5h4.21v-1.5zm1.038-7.333l-.79 7.11 1.491.166.79-7.11-1.49-.166zm-5.497 7.11l-.79-7.11-1.49.166.79 7.11 1.49-.165zm.249.223a.25.25 0 01-.249-.222l-1.49.165a1.75 1.75 0 001.739 1.557v-1.5zm4.21 1.5c.892 0 1.64-.67 1.74-1.557l-1.492-.165a.25.25 0 01-.248.222v1.5z"/><path fill="#265BFF" fill-rule="evenodd" d="M11 6a1 1 0 00-1 1v.25H7a.75.75 0 000 1.5h10a.75.75 0 000-1.5h-3V7a1 1 0 00-1-1h-2z" clip-rule="evenodd" style="animation:rotate-tr 1s cubic-bezier(1,-.28,.01,1.13) infinite alternate-reverse both;transform-origin:right center"/></svg>
                    </button>
                </div>

                <div class="col-span-1 md:col-span-2 relative">
                    <x-floating-select
                        name="status"
                        id="status"
                        label="Trạng thái hoạt động"
                        placeholder="Trạng thái hoạt động"
                        :options="[
                            '' => 'Tất cả',
                            'expired' => 'Hết hạn',
                            'unactive' => 'Chưa kích hoạt',
                            'active' => 'Đang hoạt động'
                        ]"
                    />
                </div>

                {{-- Hàng 2 --}}
                {{-- Học viên (Dropdown) --}}
                <div class="col-span-1 md:col-span-2 relative">
                    <span class="custom-placeholder absolute left-3 -top-1/5 -translate-y-1/2 text-gray-500 pointer-events-none z-10 text-xs bg-white p-1.25">
                        Học viên
                    </span>
                    <select id="student_search" multiple style="width: 100%;" class="select2-custom"></select>
                </div>

                {{-- Chọn sản phẩm --}}
                <div class="md:col-span-2 relative">
                    <span class="custom-placeholder absolute left-3 -top-1/5 -translate-y-1/2 text-gray-500 pointer-events-none z-10 text-xs bg-white p-1.25">
                        Chọn sản phẩm
                    </span>
                    <select id="package_search" multiple style="width: 100%;" class="select2-custom"></select>
                </div>
            </div>

            <div class="flex justify-end pt-2">
                <button type="button" id="btnFilter" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-16 rounded-lg transition duration-200 uppercase text-sm shadow-md tracking-wider">
                    Lọc
                </button>
            </div>
        </form>
    </div>

    <!-- Perpage -->
    <div class="flex justify-between items-center mb-4">
        {{-- Số lượng hiển thị --}}
        <x-floating-select 
            id="perpage"
            name="perpage"
            class="w-40"
            label="Số lượng hiển thị"
            :options="[
                '' => '10',
                '20' => '20',
                '30' => '30',
                '50' => '50',
                '100' => '100'
            ]"
        />
    </div>

    {{-- Bảng danh sách --}}
    <div class="bg-white shadow-sm rounded-xl border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr class="text-gray-500 uppercase tracking-wider">
                        <th class="px-6 py-4 text-sm font-semibold text-left">Mã yêu cầu</th>
                        <th class="px-6 py-4 text-sm font-semibold text-left">Sản phẩm</th>
                        <th class="px-6 py-4 text-sm font-semibold text-left">Học viên</th>
                        <th class="px-6 py-4 text-sm font-semibold text-left">Thời gian</th>
                        <th class="px-6 py-4 text-sm font-semibold text-center">Trạng thái</th>
                        <th class="px-6 py-4 text-sm font-semibold text-center">Hành động</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" id="tbody-packages-assigned-to-student">
                    <tr>
                        <td colspan="6" 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>

    <div class="mt-6 flex justify-center" id="pagination"></div>

    <!-- Modal: Hiển thị chi tiết các package của 1 ORDER -->
    <div id="order-detail-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title" role="dialog" aria-modal="true"></div>

    <!-- Modal: Sửa thời gian kích hoạt cho STUDENT PACKAGE -->
    <div id="edit-student-package-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title" role="dialog" aria-modal="true">

        <div class="flex items-center justify-center min-h-screen p-4 text-center sm:p-0">
            <div id="edit-student-package-content" class="relative bg-white rounded-xl shadow-xl text-left transform transition-all sm:my-8 sm:max-w-4xl sm:w-full overflow-hidden">
                
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-start">
                    <h4 class="text-xl font-medium text-gray-800">
                        Sửa thời gian kích hoạt
                    </h4>
                </div>

                <!-- Sản phẩm -->
                <div class="grid grid-cols-2 p-6">
                    <div class="space-y-2">
                        <h4 class="font-semibold text-gray-500">Sản phẩm</h4>
                        <div class="text-gray-700 font-medium" id="edit-student-package-title"></div>
                        <div class="text-gray-500">Thời gian: <span class="text-gray-700 font-semibold" id="edit-student-package-duration"></span> ngày</div>
                    </div>
                </div>

                <!-- Thời gian -->
                <div class="grid grid-cols-2 p-6 space-x-6">
                    <div class="space-y-2">
                        <h6 class="font-semibold text-gray-500">Bắt đầu từ: </h6>
                        <input type="text" id="edit-student-package-start-time" placeholder="Thời gian bắt đầu" class="w-full border border-gray-300 rounded-md py-2 px-3 bg-white">
                    </div>
                    <div class="space-y-2">
                        <h6 class="font-semibold text-gray-500">Sẽ kết thúc: </h6>
                        <input type="text" id="edit-student-package-end-time" placeholder="Thời gian kết thúc" class="disabled:pointer-events-none disabled:opacity-50 w-full border border-gray-300 rounded-md py-2 px-3 bg-white" disabled>
                    </div>
                </div>
                

                <div class="px-6 py-4 bg-white flex justify-end gap-2 border-t border-gray-100">
                    <button type="button"
                        class="btn-close-edit-student-package-modal bg-[#bdc3c7] hover:bg-gray-500 text-white font-semibold py-2.5 px-10 rounded text-[13px] transition duration-200 uppercase tracking-widest">
                        Đóng
                    </button>
                    <button type="button" id="btn-submit-edit-student-package"
                        class="disabled:cursor-not-allowed disabled:opacity-50 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2.5 px-10 rounded text-[13px] transition duration-200 uppercase tracking-widest">
                        Tôi đồng ý
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    window.routes = {
        getPackagesAssignedToStudent: "{{ route('oa-student-packages.getPackagesAssignedToStudent') }}",
        getOrderDetail: "{{ route('oa-student-packages.getOrderDetail', ':id') }}",
        updateStudentPackage: "{{ route('oa-student-packages.update', ':id') }}",
        deleteStudentPackage: "{{ route('oa-student-packages.destroy', ':id') }}",
        searchOAStudents: "{{ route('oa-students.searchOAStudents') }}",
        searchOAPackages: "{{ route('oa-packages.searchOAPackages') }}",
        studentIndex: "{{ route('oa-students.index') }}",
    }
</script>
<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-student-package.packages.js') }}"></script>
<script src="{{ asset('js/OA/oa-student-package.js') }}"></script>

<script>
    $(document).ready(function() {
        loadPackagesAssignedToStudent();
    });
</script>
@endsection