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

    {{-- Khu vực 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">Tìm kiếm</h2>
        <form method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <x-floating-input id="order-id" name="order-id" label="Mã yêu cầu" clearable />

                {{-- Trạng thái yêu cầu --}}
                <x-floating-select 
                    name="status"
                    id="status"
                    label="Trạng thái yêu cầu"
                    :options="[
                        '' => 'Tất cả',
                        'pending' => 'Pending',
                        'success' => 'Success',
                    ]"
                />

                {{-- Thời gian tạo yêu cầu --}}
                <div class="col-span-1 md:col-span-1 relative flex items-center gap-1">
                    <input type="text" id="created-time" placeholder="Thời gian tạo yêu cầ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-created-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>

                {{-- Thời gian kích hoạt --}}
                <div class="col-span-1 md:col-span-1 relative flex items-center gap-1">
                    <input type="text" id="active-time" placeholder="Thời gian kích hoạt" 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-active-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>

                {{-- Học viên --}}
                <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>
            </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>

    <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 text-sm">
                <thead class="bg-gray-50 text-gray-500 uppercase tracking-wider">
                    <tr>
                        <th class="px-6 py-4 text-sm font-semibold text-left">ID</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-center">Số lượng SP</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">Kích hoạt</th>
                        <th class="px-6 py-4 text-sm font-semibold text-center">Thời gian tạo</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-history-assigned-packages">
                    <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>
    
    <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>
</div>

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

<script>
    $(document).ready(function() {
        loadHistoryAssignedPackages();
    });
</script>

@endsection