@extends('layouts-v2.app')

@section('head')
    <link rel="stylesheet" href="{{ asset('css/student-exam-history.css') }}">
@endsection

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

@section('content')
<div class="flex-1 space-y-6">
    <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>
    
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('exam-histories.index') }}" class="inline-flex p-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
            <i data-lucide="arrow-left" class="w-5 h-5"></i>
        </a>
        <h1 class="text-3xl font-bold text-slate-900 flex items-center gap-2">
            <i data-lucide="file-text" class="w-8 h-8 text-blue-600"></i>
            Chi tiết bài thi
        </h1>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200 bg-slate-50/50">
            <h2 class="text-lg font-semibold text-slate-900 flex items-center gap-2">
                <i data-lucide="info" class="w-5 h-5 text-blue-600"></i> Chi tiết bài thi
            </h2>
        </div>
        <div>
            <div class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white px-6 py-3 flex flex-wrap justify-between items-center gap-2">
                <span class="font-semibold text-lg">Kết quả làm bài: {{ $studentInfo['overrall_score'] ?? 0 }}</span>
                @php
                    $writingPart = collect($parts)->firstWhere('test_format', 15);
                    $hasWriting = $writingPart !== null;
                @endphp
                @if($hasWriting && !$writingConfigured)
                    <span class="text-sm bg-white/20 px-3 py-1 rounded-full backdrop-blur-sm">
                        Writing (Không được cấu hình): {{ $writingPart['score'] ?? 0 }}
                    </span>
                @endif
            </div>

            <div class="divide-y divide-slate-200">
                @foreach($parts as $index => $part)
                    <div class="px-6 py-4 transition-colors hover:bg-slate-50/30">
                        <div class="flex flex-wrap justify-between items-center gap-2">
                            <h3 class="text-md font-medium bg-gradient-to-r from-blue-600 to-indigo-400 text-transparent bg-clip-text tracking-wide">{{ $part['name'] }}</h3>
                            <div class="flex items-center gap-4">
                                <span class="text-sm text-slate-600">
                                    Điểm: <span class="font-bold text-slate-900 text-base">{{ $part['score'] }}</span>
                                    @if($part['correct_answer'] !== null && $part['total_questions'] !== null)
                                        <span class="text-slate-500 ml-1">({{ $part['correct_answer'] }}/{{ $part['total_questions'] }} câu đúng)</span>
                                    @endif
                                </span>
                                <button type="button" 
                                    class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-slate-100 text-slate-600 hover:bg-blue-600 hover:text-white transition-all part-toggle shadow-sm"
                                    data-id-history="{{ $part['id_history'] }}"
                                    data-test-format="{{ $part['test_format'] }}"
                                    onclick="togglePart(this, '{{ $part['id_history'] }}', {{ $index }})"
                                    aria-expanded="false">
                                    <i data-lucide="chevron-down" class="w-5 h-5 part-toggle-icon"></i>
                                </button>
                            </div>
                        </div>
                        <div id="part-{{ $index }}" 
                            class="grid grid-rows-[0fr] transition-all duration-300 ease-in-out opacity-0"
                            style="visibility: hidden;"> <div class="overflow-hidden"> <div class="bg-slate-50 rounded-xl border border-slate-200 p-5 shadow-inner mt-4" id="part-content-{{ $index }}">
                                    <div class="flex flex-col items-center py-10 text-slate-400">
                                        <div class="animate-spin rounded-full h-10 w-10 border-4 border-slate-200 border-b-blue-600 mb-3"></div>
                                        <p class="text-sm font-medium">Đang tải chi tiết bài làm...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200 bg-slate-50/50 flex items-center gap-2">
            <i data-lucide="user" class="w-5 h-5 text-slate-400"></i>
            <h2 class="text-lg font-semibold text-slate-900">Thông tin học sinh</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-sm">
                <div class="p-3 bg-slate-50 rounded-lg border border-slate-100">
                    <p class="text-slate-500 mb-1 font-medium">Họ tên</p>
                    <p class="text-slate-900 font-bold text-base">{{ $studentInfo['student_name'] }}</p>
                </div>
                <div class="p-3 bg-slate-50 rounded-lg border border-slate-100">
                    <p class="text-slate-500 mb-1 font-medium">Email</p>
                    <p class="text-slate-900 font-bold text-base">{{ $studentInfo['student_email'] }}</p>
                </div>
                <div class="p-3 bg-slate-50 rounded-lg border border-slate-100">
                    <p class="text-slate-500 mb-1 font-medium text-xs uppercase tracking-wider">Điểm tổng</p>
                    <span class="inline-flex px-3 py-1 rounded-full text-sm font-bold {{ ($studentInfo['score_status'] == 1) ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                        {{ $examData['overall_score'] ?? 0 }} điểm
                    </span>
                </div>
                <div class="md:col-span-2 flex gap-10 p-3">
                    <div>
                        <p class="text-slate-500 text-xs font-bold uppercase mb-1">Thời gian bắt đầu</p>
                        <p class="text-slate-700">{{ $examData['timeStart'] ? \Carbon\Carbon::parse($examData['timeStart'])->addHours(7)->format('H:i d/m/Y') : 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-slate-500 text-xs font-bold uppercase mb-1">Thời gian kết thúc</p>
                        <p class="text-slate-700">{{ $examData['timeFinish'] ? \Carbon\Carbon::parse($examData['timeFinish'])->addHours(7)->format('H:i d/m/Y') : 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    window.routes = {
        calculateWritingTaskFinalScore: "{{ route('student-exam-histories.calculateWritingTaskFinalScore') }}",
        calculateSpeakingTaskFinalScore: "{{ route('student-exam-histories.calculateSpeakingTaskFinalScore') }}"
    }
</script>

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

<script>
    // Tenant connection từ controller
    const tenantConnection = '{{ $tenantConnection }}';

    // Debug: Log idHistory khi click
    window.debugPartClick = function(idHistory) {
        console.log('idHistory:', idHistory);
    }
</script>
@endsection