@extends('layouts-v2.app')

@section('title', 'Danh sách học viên')

@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>Danh sách học viên</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Danh sách học viên</h1>

    {{-- Bộ lọ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-800 mb-4">Tìm kiếm</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <x-floating-input id="student-id" name="student-id" label="Mã học viên" clearable />
            <x-floating-input id="student-name" name="student-name" label="Tên học viên" clearable />
            <x-floating-input id="student-username" name="student-username" label="Username" clearable />
            <x-floating-input id="student-phone" name="student-phone" label="Số điện thoại" clearable />
        </div>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 my-4">
            <x-floating-input id="student-email" name="student-email" label="Email" clearable />

            {{-- Trạng thái tài khoản --}}
            <x-floating-select 
                name="student_status"
                id="student-status"
                label="Trạng thái tài khoản"
                :options="[
                    '1' => 'Đã đăng nhập',
                    '0' => 'Chưa đăng nhập'
                ]"
            />

            {{-- 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">
            <button id="btnFilter" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-12 rounded-lg transition duration-150 uppercase text-sm tracking-wider">
                Lọc
            </button>
        </div>
    </div>

    {{-- Toolbar & Buttons --}}
    <div class="flex flex-wrap justify-between items-center mb-4 gap-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 class="flex space-x-3">
            <button id="btn-create-student-package" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center text-sm font-semibold shadow-sm transition">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                GÁN SẢN PHẨM
            </button>
        </div>
    </div>

    {{-- Bảng danh sách --}}
    <div class="bg-white rounded-xl shadow-sm 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-left text-sm font-semibold">ID</th>
                        <th class="px-6 py-4 text-left text-sm font-semibold">HỌC VIÊN</th>
                        <th class="px-6 py-4 text-left text-sm font-semibold">SĐT </th>
                        <th class="px-6 py-4 text-left text-sm font-semibold">EMAIL</th>
                        <th class="px-6 py-4 text-left text-sm font-semibold">SẢN PHẨM</th>
                        <th class="px-6 py-4 text-left text-sm font-semibold">TRẠNG THÁI ĐĂNG NHẬP</th>
                        <th class="px-6 py-4 text-center text-sm font-semibold">HÀNH ĐỘNG</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200 text-sm" id="tbody-oa-student-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: THÊM SẢN PHẨM CHO HỌC VIÊN -->
    <div id="add-student-package-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-500 bg-opacity-75 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    
        <div id="add-student-package-content" class="relative w-full max-w-2xl bg-white rounded-xl shadow-xl max-h-[90vh] overflow-y-auto">
            
            <div class="px-6 py-3 border-b border-gray-100">
                <h3 class="text-xl font-semibold text-gray-700" id="modal-title">Thêm sản phẩm cho học viên</h3>
            </div>

            <form method="POST" id="add-student-package-form">
                @csrf
                <div class="p-6 space-y-6">
                    <div class="bg-[#00dae6] text-white p-4 rounded-md text-sm font-medium">
                        Điền vào ô bên dưới email của người dùng cần thêm mới.<br>
                        Trường hợp có nhiều, mỗi email trên 1 dòng
                    </div>

                    <div>
                        <textarea name="emails" id="add-student-package-emails" rows="5" placeholder="Email học viên"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4 text-sm outline-none border"></textarea>
                    </div>
                    <p class="mt-1 text-[13px] font-semibold text-gray-500 uppercase" id="add-student-package-valid-emails">0 Email hợp lệ</p>

                    <hr class="border-gray-100">

                    <div>
                        <h4 class="text-lg font-semibold text-gray-800 mb-2">Tạo đơn hàng</h4>
                        <div class="flex space-x-3 items-end">
                            <div class="flex-1">
                                <label class="text-xs text-gray-500 mb-1 block">Sản phẩm</label>
                                <select id="add-student-package-package-search" multiple style="width: 100%;" class="select2-custom"></select>
                            </div>
                            <button type="button" id="add-student-package-add-package" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2.5 px-8 rounded-lg text-sm transition duration-200">
                                THÊM
                            </button>
                        </div>
                    </div>

                    <div class="border-t border-b border-gray-100">
                        <div class="grid grid-cols-1 py-2 text-xs font-bold text-gray-500 uppercase">
                            <span class="px-2 font-semibold text-sm">Sản phẩm</span>
                        </div>
                        <div class="text-center text-md text-gray-800 font-medium space-y-1 px-2 mb-1 max-h-40 overflow-y-auto" id="add-student-package-package-list">
                            Hãy thêm sản phẩm
                        </div>
                    </div>
                    
                    <!-- Type -->
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">Đơn hàng này sẽ được kích hoạt</label>
                            <x-floating-select 
                                name="activation_type"
                                id="activation_type"
                                :options="[
                                    'now' => 'Ngay khi tạo',
                                    'later' => 'Khi tới thời gian'
                                ]"
                                class="w-full"
                            />
                    </div>

                    <div class="hidden" id="content_activation_time">
                        <label class="text-xs text-gray-500 mb-1 block">Thời gian kích hoạt</label>
                        <input type="text" id="activation_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-3 px-4 text-sm outline-none border">
                    </div>
                </div>

                <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
                    <button type="button" class="btn-close-add-student-package-modal bg-gray-400 hover:bg-gray-600 text-white font-semibold py-2.5 px-8 rounded-lg text-sm transition duration-200 uppercase">
                        Hủy
                    </button>
                    <button id="btn-submit-add-student-package" disabled class="disabled:opacity-50 disabled:cursor-not-allowed bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2.5 px-8 rounded-lg text-sm transition duration-200 uppercase">
                        Tôi đồng ý
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal: DANH SÁCH CÁC PACKAGE CỦA HỌC VIÊN -->
    <div id="student-package-info-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-500 bg-opacity-75 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div id="student-package-info-content" class="relative w-full max-w-3xl bg-white rounded-xl shadow-xl max-h-[90vh] overflow-y-auto">
            <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-xl text-gray-600" id="modal-title">
                    Thông tin học viên: <span class="font-bold text-gray-800" id="student-package-student-name">Nguyễn Anh Tú</span>
                </h3>
                <button type="button" class="btn-close-student-package-modal text-gray-400 hover:text-gray-500">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <div class="p-6 space-y-8">
                <div>
                    <h4 class="text-sm font-semibold text-gray-500 mb-4">Danh sách sản phẩm có hiệu lực:</h4>
                    <div class="flex flex-wrap gap-2" id="student-package-active-list"></div>
                </div>

                <hr class="border-t border-gray-200">

                <div>
                    <h4 class="text-sm font-semibold text-gray-500 mb-4">Danh sách sản phẩm chưa tới thời gian mở:</h4>
                    <div class="min-h-[20px]" id="student-package-not-actived-list"></div>
                </div>

                <hr class="border-t border-gray-200">

                <div class="pb-4">
                    <h4 class="text-sm font-semibold text-gray-500 mb-4">Danh sách sản phẩm hết hạn:</h4>
                    <div class="flex flex-wrap gap-2" id="student-package-inactive-list"></div>
                </div>

            </div>

            <div class="px-6 py-4 bg-white flex justify-end">
                <button type="button"
                    class="btn-close-student-package-modal bg-[#bdc3c7] hover:bg-gray-500 text-white font-bold py-2 px-8 rounded text-sm transition duration-200 uppercase">
                    Đóng
                </button>
            </div>
        </div>
    </div>

    <!-- Modal: KẾT QUẢ THÊM STUDENT PACKAGE -->
    <div id="result-add-student-package-modal" class="fixed inset-0 z-[60] overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

        <div class="flex items-center justify-center min-h-screen p-4 text-center sm:p-0">
            <div class="relative bg-white text-left rounded-xl shadow-xl transform transition-all sm:my-8 sm:max-w-xl sm:w-full overflow-hidden">
                
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                    <h3 class="text-xl font-medium text-gray-700">
                        <span class="result-add-student-package-new-student-count"></span> học viên đã được thêm
                    </h3>
                    <button type="button" class="btn-close-result-add-student-package-modal text-gray-400 hover:text-gray-500">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div class="p-0">
                    
                    <div class="px-6 py-4 border-b border-gray-100">
                        <h4 class="text-lg text-gray-700 font-medium">
                            Danh sách HV đã thêm (<span class="result-add-student-package-new-student-count"></span>)
                        </h4>
                        <div class="mt-2 text-sm text-gray-500 italic font-semibold" id="result-add-student-package-new-student-emails">
                        </div>
                    </div>

                    <div class="px-6 py-4 bg-white min-h-[150px]">
                        <h4 class="text-lg text-gray-700 font-medium">
                            Danh sách HV đã có (<span class="result-add-student-package-existed-student-count"></span>)
                        </h4>
                        <p class="text-xs text-gray-400 mt-1">
                            Các HV trong danh sách này chưa được gán sản phẩm
                        </p>
                        
                        <div class="mt-4 space-y-2">
                            <div class="text-sm text-gray-500 italic font-semibold" id="result-add-student-package-existed-student-emails">
                                tuna@ican.vn
                            </div>
                        </div>
                    </div>

                </div>

                <div class="px-6 py-4 bg-white flex justify-end">
                    <button type="button"
                        class="btn-close-result-add-student-package-modal bg-[#a5aab0] hover:bg-gray-500 text-white font-bold py-2 px-8 rounded shadow-sm transition duration-200 uppercase text-sm">
                        Đóng
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    window.routes = {
        studentIndex: "{{ route('oa-students.index') }}",
        getStudentPackages: "{{ route('oa-student-packages.getStudentPackages') }}",
        addStudentPackage:"{{ route('oa-student-packages.store') }}",
        searchOAPackages: "{{ route('oa-packages.searchOAPackages') }}",
    }
</script>
<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-student-package.index.js') }}"></script>

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