@extends('layouts-v2.app')

@section('title', 'Chi tiết học viên')

@section('content')
<div>
    <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>Chi tiết học viên</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Chi tiết học viên</h1>

    
    <div class="grid grid-cols-12 gap-6">
        
        <div class="col-span-12 lg:col-span-4 space-y-6">
            <!-- Student info -->
            <div class="bg-white rounded-xl shadow-md p-6 text-center" id="oa-student-info">
                <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>
            </div>
        </div>

        <div class="col-span-12 lg:col-span-8 space-y-6">
            <!-- My packages -->
            <div class="bg-white rounded-xl shadow-md">
                <div class="p-4 border-b flex justify-between items-center">
                    <h3 class="font-semibold text-gray-700 uppercase text-sm">Sản phẩm đã mua</h3>
                    {{-- Số lượng hiển thị --}}
                    <x-floating-select 
                        id="perpage-my-packages"
                        name="perpage"
                        class="w-40"
                        label="Số lượng hiển thị"
                        :options="[
                            '' => '10',
                            '20' => '20',
                            '30' => '30',
                            '50' => '50',
                            '100' => '100'
                        ]"
                    />
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-gray-50 border-b">
                            <tr>
                                <th class="p-3 text-sm font-semibold text-gray-500">STT</th>
                                <th class="p-3 text-sm font-semibold text-gray-500">MÃ YÊU CẦU</th>
                                <th class="p-3 text-sm font-semibold text-gray-500">SẢN PHẨM</th>
                                <th class="p-3 text-sm font-semibold text-gray-500">THỜI GIAN</th>
                                <th class="p-3 text-sm font-semibold text-gray-500 text-center">TRẠNG THÁI</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y" id="tbody-my-packages">
                            <tr>
                                <td colspan="5" 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 class="mt-6 pb-4 flex justify-center" id="pagination-my-packages"></div>
            </div>
        </div>

        <!-- My groups -->
        <div class="col-span-12 lg:col-span-6 bg-white rounded-xl shadow-md">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 class="font-semibold text-gray-700 uppercase text-sm">Gói đề</h3>
                {{-- Số lượng hiển thị --}}
                <x-floating-select 
                    id="perpage-my-group-exams"
                    name="perpage"
                    class="w-40"
                    label="Số lượng hiển thị"
                    :options="[
                        '' => '10',
                        '20' => '20',
                        '30' => '30',
                        '50' => '50',
                        '100' => '100'
                    ]"
                />
            </div>
            <div class="p-4" id="my-group-exams">
                <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>            
            </div>

            <div class="mt-6 pb-4 flex justify-center" id="pagination-my-group-exams"></div>
        </div>

        <!-- My exams -->
        <div class="col-span-12 lg:col-span-6 bg-white rounded-xl shadow-md">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 class="font-semibold text-gray-700 uppercase text-sm">Đề thi theo gói</h3>
                {{-- Số lượng hiển thị --}}
                <x-floating-select 
                    id="perpage-my-exams"
                    name="perpage"
                    class="w-40"
                    label="Số lượng hiển thị"
                    :options="[
                        '' => '10',
                        '20' => '20',
                        '30' => '30',
                        '50' => '50',
                        '100' => '100'
                    ]"
                />
            </div>
            <table class="w-full text-left">
                <thead class="bg-gray-50 border-b">
                    <tr>
                        <th class="p-3 text-sm font-semibold text-gray-500">Đề thi</th>
                        <th class="p-3 text-sm font-semibold text-gray-500 text-center">Gói</th>
                    </tr>
                </thead>
                <tbody class="divide-y" id='tbody-my-exams'>
                    <tr>
                        <td colspan="2" 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 class="mt-6 pb-4 flex justify-center" id="pagination-my-exams"></div>
        </div>

        <!-- My exam histories -->
        <div class="col-span-12">
            <div class="bg-white rounded-xl shadow-md">
                <div class="p-4 border-b flex justify-between items-center">
                    <h3 class="font-bold text-gray-700 uppercase text-sm">Lịch sử làm đề</h3>
                    {{-- Số lượng hiển thị --}}
                    <x-floating-select 
                        id="perpage-my-exam-histories"
                        name="perpage"
                        class="w-40"
                        label="Số lượng hiển thị"
                        :options="[
                            '' => '10',
                            '20' => '20',
                            '30' => '30',
                            '50' => '50',
                            '100' => '100'
                        ]"
                    />
                </div>
                <div class="text-center text-gray-400 text-sm">
                    <table class="w-full text-left">
                        <thead class="bg-gray-50 border-b">
                            <tr>
                                <th class="p-3 text-sm font-semibold text-gray-500">Đề thi</th>
                                <th class="p-3 text-sm font-semibold text-gray-500 text-center">Trạng thái</th>
                                <th class="p-3 text-sm font-semibold text-gray-500">Thời gian</th>
                                <th class="p-3 text-sm font-semibold text-gray-500 text-center">Hành động</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y" id='tbody-my-exam-histories'>
                            <tr>
                                <td colspan="4" 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 class="mt-6 pb-4 flex justify-center" id="pagination-my-exam-histories"></div>
            </div>
        </div>
    </div>
</div>

<script>
    window.routes = {
        getOAStudent: "{{ route('oa-students.getOAStudent', ':id') }}",
        getMyPackages: "{{ route('oa-student-packages.getMyPackages', ':id') }}",
        getMyGroupExams: "{{ route('oa-groups.getMyGroups', ':id') }}",
        getMyExams: "{{ route('oa-exams.getMyExams') }}",
        getMyExamHistories: "{{ route('oa-exam-histories.getMyExamHistories' , ':id') }}",
        getOAExamDetail: "{{ route('oa-exam-histories.detail', ['id' => 'ID']) }}"
    }
</script>
<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-student.js') }}"></script>
<script>
    $(document).ready(function() {
        loadOAStudent();
        loadMyPackages();
        loadMyGroupExams();
        loadMyExamHistories();
    })
</script>
@endsection