@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>
        <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="row">
        <div class="border border-gray-100 shadow-md rounded-lg">
            <div class="p-0">
                <div class="overall-result-bar text-white p-3 rounded-t-lg">
                    <div class="flex justify-between items-center">
                        <div>
                            <strong class="h5 mb-0">Kết quả làm bài: {{ $studentInfo['overrall_score'] ?? 0 }}</strong>
                        </div>
                        <div>
                            @php
                                $writingPart = collect($parts)->firstWhere('test_format', 15);
                                $hasWriting = $writingPart !== null;
                            @endphp
                            @if($hasWriting && !$writingConfigured)
                                <span class="font-normal">Writing (Không được cấu hình): {{ $writingPart['score'] ?? 0 }}</span>
                            @endif
                        </div>
                    </div>
                </div>

                <div>
                    @foreach($parts as $index => $part)
                        <div class="p-3">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h6 class="mb-0 part-name">{{ $part['name'] }}</h6>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-muted mr-3 font-normal">
                                        Điểm: <strong>{{ $part['score'] }}</strong>
                                        @if($part['correct_answer'] !== null && $part['total_questions'] !== null)
                                            <small class="text-gray-500 ml-1">({{ $part['correct_answer'] }}/{{ $part['total_questions'] }} câu đúng)</small>
                                        @endif
                                    </span>
                                    <button 
                                        class="px-3 py-2.5 shadow-md bg-blue-500 border border-cyan-200 ring-1 ring-cyan-200 text-white text-sm font-medium rounded-md text-center inline-flex items-center mr-2"
                                        type="button"
                                        data-target="#part-{{ $index }}" 
                                        data-id-history="{{ $part['id_history'] }}"
                                        data-test-format="{{ $part['test_format'] }}"
                                        onclick="togglePart(this, '{{ $part['id_history'] }}', {{ $index }})">
                                        <i class="fas fa-chevron-up"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="hidden mt-3" id="part-{{ $index }}">
                                <div class="shadow-md border border-gray-100 rounded-lg" id="part-content-{{ $index }}"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4">
        <div class="shadow-lg rounded-lg overflow-hidden">
            <div class="border-b border-gray-200 px-6 py-3 bg-white">
                <h5 class="font-semibold"><i class="fa-solid fa-graduation-cap"></i> Thông tin học sinh</h5>
            </div>
            <div class="p-6 space-y-3">
                <div class="mb-2">
                    <p class="mb-1"><strong>Họ tên:</strong> <span class="text-gray-700">{{ $studentInfo['student_name'] }}</span></p>
                </div>
                <div class="mb-2">
                    <p class="mb-1"><strong>Email:</strong> <span class="font-semibold text-blue-500">{{ $studentInfo['student_email'] }}</span></p>
                </div>
                <div class="mb-2">
                    <p class="mb-1"><strong>Thời gian bắt đầu:</strong> 
                        <span class="text-gray-500">
                            {{ $examData['timeStart'] ? \Carbon\Carbon::parse($examData['timeStart'])->addHours(7)->format('H:i d/m/Y') : 'N/A' }}
                        </span>
                    </p>
                </div>
                <div class="mb-2">
                    <p class="mb-1"><strong>Thời gian kết thúc:</strong>
                        <span class="text-gray-500">
                            {{ $examData['timeFinish'] ? \Carbon\Carbon::parse($examData['timeFinish'])->addHours(7)->format('H:i d/m/Y') : 'N/A' }}
                        </span>
                    </p>
                </div>
                <div class="">
                    <p class="mb-1"><strong>Điểm tổng:</strong> 
                        <span class="py-2 px-3 rounded-full text-white font-semibold {{ ($examData['overall_score'] ?? 0) >= 5 ? 'bg-gradient-to-r from-[#7F7FD5] via-[#86A8E7] to-[#91EAE4]' : 'bg-gradient-to-r from-[#FF416C] to-[#FF4B2B]' }}">
                            {{ $examData['overall_score'] ?? 0 }}
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* VARIABLES & CORE STYLES */
    :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        --warning-color: #ff9800;
        --success-color: #28a745;
        --danger-color: #ff1b32;
        --info-color: #17a2b8;
    }

    .overall-result-bar {
        background-image: linear-gradient(to right, #00adff, #4dffb5); 
        padding: 1.5rem;
    }

    /* CARD STRUCTURE */
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Shadow mềm mại hơn */
    }

    .card-header {
        border-bottom: 1px solid #f0f0f0 !important;
        background-color: #fff !important;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    
    /* PARTS LIST */
    .list-group-item {
        border-left: none;
        border-right: none;
        padding: 1rem 1.5rem;
        transition: background-color 0.2s;
    }

    .list-group-item:hover {
        background-color: #f7f7f7;
    }

    .list-group-item:first-child {
        border-top: none;
    }

    .list-group-item:last-child {
        border-bottom: none;
    }
    
    .part-name {
        color: var(--primary-color);
        font-size: 1.05rem;
        font-weight: 600;
    }

    /* COLLAPSE BUTTON */
    .btn-danger.btn-collapse {
        background-color: var(--danger-color);
        border-color: var(--danger-color);
        width: 36px; /* Tăng kích thước */
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .btn-danger.btn-collapse:hover {
        background-color: #c82333;
    }
    
    .btn-collapse i {
        font-size: 14px;
    }

    .collapse.show ~ .d-flex .btn-collapse i {
        transform: rotate(180deg);
    }
    
    /* CONTENT AREA */
    .part-content-area {
        background-color: #f9f9f9 !important;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 20px;
    }
    
    /* BADGES & SCORE */
    .score-badge {
        font-size: 1.1rem;
        padding: 0.6rem 1rem;
        border-radius: 20px;
        font-weight: bold;
    }
    
    .badge-success {
        background-color: var(--success-color);
        color: white;
    }
    .badge-danger {
        background-color: var(--danger-color) !important;
        color: white;
    }

    /* CUSTOM DETAIL STYLES (Đảm bảo các styles logic vẫn dùng) */
    .reading-passage {
        line-height: 1.7;
        font-size: 16px; /* Tăng font chữ */
        color: #333;
    }
    
    .question-group {
        background: #e9ecef; /* Tông màu xám sáng hơn */
        padding: 15px;
        border-radius: 8px;
    }
    
    /* Left Border for status indication */
    .border-left {
        border-left: 5px solid; /* Tăng độ dày */
        padding-left: 15px !important;
        margin-left: -5px; /* Điều chỉnh vị trí */
        transition: border-color 0.3s;
    }
    
    /* Color mapping for borders in JS logic */
    .border-success { border-color: var(--success-color) !important; }
    .border-danger { border-color: var(--danger-color) !important; }
    .border-warning { border-color: var(--warning-color) !important; }

    /* Alert/Badge styles used in JS */
    .badge-warning { background-color: #ffc107; color: #333; }
    .badge-success { background-color: #28a745; color: white; }
    .badge-danger { background-color: #dc3545; color: white; }
    .badge-primary { background-color: var(--primary-color); color: white; }

    .alert-info { background-color: #d1ecf1; border-color: #bee5eb; color: #0c5460; }
    .alert-warning { background-color: #fff3cd; border-color: #ffeeba; color: #856404; }
    .alert-success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
    .alert-danger { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
    
    pre {
        background: #f0f0f0;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #ddd;
        white-space: pre-wrap; /* Giữ nguyên cho nội dung Writing */
        font-size: 0.9rem;
    }

    .score-table th,
    .score-table td {
        border: 1px solid #d6d7da;
        padding: 10px;
        background: #e8ecef;
    }

    .criterion-header {
        width: 200px;
        background: #e0e5ea;
        font-weight: bold;
        text-align: center;
    }

    .side-title {
        width: 160px;
        background: #e0e5ea;
        text-align: center;
        font-weight: bold;
    }

    .score-input {
        width: 100%;
        font-size: 16px;
        outline: none;
        padding: 5px 0;
        border-radius: 20px !important;
        padding: 10px !important;
        font-weight: bold !important;
        text-align: center !important;
    }

    .score-input:disabled {
        background: #f7f7f7;
    }

    .section {
        background: #f5f7f9;
        padding: 10px !important;
    }

    .section h3 {
        font-size: 18px;
        margin-top: 0;
    }

    .score-box {
        background: #f5f7f9;
        padding: 8px;
        border: 1px solid #c3c4c7;
        border-radius: 8px;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .score-table {
        width: 100%;
        border-collapse: collapse;
        background: #eef3f6;
    }

    /* ---- HEADER ---- */
    .score-table thead th {
        background: #e8ecef;
        padding: 16px 10px;
        font-size: 16px;
        font-weight: bold;
        border-right: 1px solid #b0bec5;
    }

    .score-table thead th span {
        font-size: 13px;
        font-weight: normal;
        color: #444;
    }

    /* ---- BODY ---- */
    .score-table tbody td {
        background: #e8ecef;
        padding: 15px;
        border-right: 1px solid #b0bec5;
        border-bottom: 1px solid #b0bec5;
    }

    /* Last column remove border */
    .score-table thead th:last-child,
    .score-table tbody td:last-child {
        border-right: none;
    }

    .score-table tr th{
        background: #e8ecef;
        border-bottom: 1px solid #b0bec5;
        border-right: 1px solid #b0bec5;
    }

    /* Suggestions row */
    .suggestions-row td {
        height: 60px;
        background: #e8ecef;
    }

    /* Final score row */
    .final-score-row td {
        background: #e8ecef;
        padding: 25px;
    }

    table { 
        border-collapse: collapse; 
        width: 100%; 
        font-size: 14px; /* Điều chỉnh kích thước font */
        margin-top: 10px;
    }
    th, td { 
        border: 1px solid #ddd; /* Màu đường viền nhẹ hơn */
        padding: 8px 10px; 
    }
    th { 
        background-color: #f2f2f2; /* Màu nền cho header */
        text-align: center;
        font-weight: bold;
    }
    .center { 
        text-align: center; 
        padding: 10px 5px;
    }

    /* Định dạng cho cột Tiêu chí và Comments */
    .criterion-col { width: 15%; font-weight: bold; text-align: center; }
    .comments-col { width: 50%; text-align: center; }
    .rating-header-row th.center { max-width: 60px; min-width: 60px; min-height: 60px; max-height: 60px;}

    .sticky-bottom {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 10px;
        z-index: 1000;
        border-top: 1px solid #ddd;
    }
</style>

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

<script src="{{ asset('js/OA/oa-student-exam-history.js') }}"></script>
<script src="{{ asset('js/OA/oa-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