@extends('layouts.siswa')

@section('title', 'Detail Ujian')
@section('page_title', 'Detail Ujian')

@section('content')
<!-- Back Link -->
<div style="margin-bottom: 20px;">
    <a href="{{ route('siswa.ujian.index') }}" class="btn btn-outline" style="text-decoration: none; display: inline-flex; align-items: center; gap: 8px;">
        <i class="fa-solid fa-arrow-left"></i> Kembali ke Daftar Ujian
    </a>
</div>

<div class="main-grid">
    <!-- LEFT: INFORMASI UTAMA & PETUNJUK -->
    <div class="column-left">
        <div class="card" style="margin-bottom: 24px;">
            <div class="card-header">
                <h3>Petunjuk Pengerjaan</h3>
            </div>
            <div class="card-body">
                <div style="background-color: var(--bg-color); border-left: 4px solid var(--primary-color); padding: 16px; border-radius: 8px; font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; color: var(--text-dark);">
                    <strong style="display: block; margin-bottom: 8px;"><i class="fa-solid fa-circle-info" style="color: var(--primary-color);"></i> Harap dibaca sebelum memulai ujian:</strong>
                    <ul style="padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 6px;">
                        <li>Pastikan koneksi internet Anda stabil selama ujian berlangsung.</li>
                        <li>Waktu pengerjaan mengikuti rentang ujian yang sudah ditentukan guru.</li>
                        <li>Jangan menutup browser atau berpindah tab halaman karena ujian Anda dapat terkumpul secara otomatis.</li>
                        <li>Kerjakan secara jujur dan mandiri. Selamat mengerjakan!</li>
                    </ul>
                </div>

                <ul class="activity-list">
                    <li>
                        <div class="activity-icon bg-light-blue text-blue">
                            <i class="fa-solid fa-book"></i>
                        </div>
                        <div class="activity-info" style="flex-grow: 1;">
                            <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-gray); margin-bottom: 2px;">Mata Pelajaran</h4>
                            <p style="font-weight: 700; color: var(--text-dark); margin: 0;">{{ $ujian->mataPelajaran->nama_mapel }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="activity-icon bg-light-purple text-purple">
                            <i class="fa-solid fa-file-signature"></i>
                        </div>
                        <div class="activity-info" style="flex-grow: 1;">
                            <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-gray); margin-bottom: 2px;">Nama Ujian</h4>
                            <p style="font-weight: 700; color: var(--text-dark); margin: 0;">{{ $ujian->judul }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="activity-icon bg-light-green text-green">
                            <i class="fa-solid fa-chalkboard-user"></i>
                        </div>
                        <div class="activity-info" style="flex-grow: 1;">
                            <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-gray); margin-bottom: 2px;">Guru Pengampu</h4>
                            <p style="font-weight: 700; color: var(--text-dark); margin: 0;">{{ $ujian->guru->name }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="activity-icon bg-light-orange text-orange">
                            <i class="fa-solid fa-clock"></i>
                        </div>
                        <div class="activity-info" style="flex-grow: 1;">
                            <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-gray); margin-bottom: 2px;">Durasi Waktu</h4>
                            <p style="font-weight: 700; color: var(--text-dark); margin: 0;">{{ $ujian->durasi }} Menit</p>
                        </div>
                    </li>
                    <li>
                        <div class="activity-icon bg-light-blue text-blue">
                            <i class="fa-solid fa-calendar-day"></i>
                        </div>
                        <div class="activity-info" style="flex-grow: 1;">
                            <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-gray); margin-bottom: 2px;">Mulai Ujian</h4>
                            <p style="font-weight: 700; color: var(--text-dark); margin: 0;">{{ $ujian->waktu_mulai_ujian->translatedFormat('d M Y, H:i') }} WIB</p>
                        </div>
                    </li>
                    <li>
                        <div class="activity-icon bg-light-orange text-orange">
                            <i class="fa-solid fa-calendar-xmark"></i>
                        </div>
                        <div class="activity-info" style="flex-grow: 1;">
                            <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-gray); margin-bottom: 2px;">Selesai Otomatis</h4>
                            <p style="font-weight: 700; color: var(--text-dark); margin: 0;">{{ $waktuSelesai->translatedFormat('d M Y, H:i') }} WIB</p>
                        </div>
                    </li>
                    <li>
                        <div class="activity-icon bg-light-purple text-purple">
                            <i class="fa-solid fa-list-ol"></i>
                        </div>
                        <div class="activity-info" style="flex-grow: 1;">
                            <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-gray); margin-bottom: 2px;">Jumlah Soal</h4>
                            <p style="font-weight: 700; color: var(--text-dark); margin: 0;">{{ $ujian->soalUjian->count() }} Butir</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- RIGHT: STATUS AKSI ATAU SKOR -->
    <div class="column-right">
        @if($submission)
            <!-- SUDAH DIKERJAKAN -->
            <div class="card" style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid #bfdbfe; color: #1e3a8a; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px;">
                <i class="fa-solid fa-medal" style="font-size: 3rem; color: #f59e0b; margin-bottom: 12px;"></i>
                <h4 style="margin: 0 0 10px 0; color: #1e3a8a; font-size: 1.1rem; font-weight: 700;">Hasil Ujian Anda:</h4>
                <div style="font-size: 4rem; font-weight: 800; margin: 10px 0; line-height: 1; color: var(--primary-color);">{{ $submission->nilai }}</div>
                <div style="display: flex; gap: 16px; margin-top: 10px; font-weight: 700;">
                    <span style="color: #16a34a;"><i class="fa-solid fa-circle-check"></i> {{ $submission->benar }} Benar</span>
                    <span style="color: #ef4444;"><i class="fa-solid fa-circle-xmark"></i> {{ $submission->salah }} Salah</span>
                </div>
                <p style="margin-top: 20px; font-size: 0.85rem; opacity: 0.8; margin-bottom: 0;">Ujian diselesaikan pada:<br><strong>{{ $submission->created_at->translatedFormat('d M Y, H:i') }} WIB</strong></p>
            </div>
            <a href="{{ route('siswa.ujian.index') }}" class="btn btn-outline" style="width: 100%; text-align: center; justify-content: center;">Kembali ke Daftar</a>
        @else
            <!-- BELUM DIKERJAKAN -->
            <div class="card" style="background: var(--bg-color); border: 1px solid #e2e8f0; color: var(--text-dark); text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px;">
                <i class="fa-solid fa-clock-rotate-left" style="font-size: 3rem; color: var(--text-gray); margin-bottom: 12px;"></i>
                <h4 style="margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 700;">Status Pengerjaan:</h4>
                <p style="font-size: 1.1rem; font-weight: 700; color: var(--primary-color); margin: 8px 0;">{{ strtoupper($availability['status']) }}</p>
                <p style="font-size: 0.85rem; margin: 8px 0 0 0; color: var(--text-gray);">{{ $availability['message'] }}</p>
                <p style="font-size: 0.85rem; margin: 8px 0 0 0; color: var(--text-gray);">Rentang ujian: <strong>{{ $ujian->waktu_mulai_ujian->translatedFormat('d M Y, H:i') }} WIB</strong> s.d <strong>{{ $waktuSelesai->translatedFormat('d M Y, H:i') }} WIB</strong>.</p>
            </div>

            @if($availability['can_start'])
                <a href="{{ route('siswa.ujian.kerjakan', $ujian) }}" class="btn btn-primary" style="width: 100%; text-align: center; justify-content: center; height: 48px; display: flex; align-items: center; font-size: 1.05rem;" onclick="return confirm('Apakah Anda yakin ingin mulai mengerjakan ujian ini? Waktu pengerjaan akan langsung berjalan mundur.')">Mulai Ujian</a>
            @else
                <button class="btn btn-outline" style="width: 100%; height: 48px; cursor: not-allowed; justify-content: center;" disabled>{{ $availability['status'] }}</button>
            @endif
        @endif
    </div>
</div>
@endsection
