@extends('layouts-v2.app')

@section('title', 'Chi tiết bài thi')

@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>
        <a href="{{ route('exam-histories.index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách bài thi</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Chi tiết bài thi</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Chi tiết bài thi</h1>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- CỘT 1 & 2: THÔNG TIN BÀI THI & HỌC VIÊN --}}
        <div class="lg:col-span-3 space-y-6">
            <div id="student-exam-info" class="space-y-5"></div>
            {{-- 3. THÔNG TIN CHẤM BÀI (BẢNG) --}}
            <div class="bg-white shadow-md rounded-lg p-6">
                <div class="flex items-center justify-between mb-4 border-b pb-2">
                    <span class="text-xl font-semibold text-gray-800">Thông tin chấm bài</span>
                    <a id="btn-view-exam" href="#" class="bg-blue-600 hover:bg-blue-700 hover:!text-white text-white font-medium py-1 px-3 rounded-md text-sm transition duration-150">
                        BÀI THI
                    </a>
                </div>
                
                <div>
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <!-- <th class="px-3 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">ID</th> -->
                                <th class="px-3 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">DẠNG BÀI</th>
                                <th class="px-3 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">GIÁO VIÊN CHẤM</th>
                                <th class="px-3 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">THỜI GIAN</th>
                                <th class="px-3 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">TRẠNG THÁI CHẤM</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200 text-base" id="tbody-student-exam-detail">
                            <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>
        </div>
    </div>
</div>

<script>
    window.routes = {
        getExamHistoryDetail : "{{ route('exam-histories.getExamHistoryDetail', ['student_score_id' => 'ID']) }}",
        getStudentExamHistoryDetail: "{{ route('student-exam-histories.getStudentExamHistoryDetail', ['student_score_id' => 'ID']) }}",
        detail: "{{ route('student-exam-histories.detail', ['student_score_id' => 'ID']) }}",
    }
</script>

<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/exam-history/exam-history.detail.js') }}"></script>

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