@extends('layouts.siswa')

@section('title', 'CBT - ' . session('lbb')->name)

@section('content')
<div class="page-header mb-4">
    <h4 class="mb-1">Daftar Ujian</h4>
    <p class="mb-0">Pilih ujian yang akan dikerjakan</p>
</div>

<!-- Stats Cards -->
<div class="row g-3 mb-4">
    <div class="col-xl-4 col-sm-6 col-12">
        <div class="stat-card">
            <div class="stat-icon-wrap primary">
                <i class="bi bi-file-earmark-text-fill"></i>
            </div>
            <div class="stat-text">
                <div class="stat-value">{{ $totalExams }}</div>
                <div class="stat-label">Total Ujian</div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-sm-6 col-12">
        <div class="stat-card">
            <div class="stat-icon-wrap success">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div class="stat-text">
                <div class="stat-value">{{ $completedExams }}</div>
                <div class="stat-label">Selesai</div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-sm-6 col-12">
        <div class="stat-card">
            <div class="stat-icon-wrap warning">
                <i class="bi bi-clock-fill"></i>
            </div>
            <div class="stat-text">
                <div class="stat-value">{{ $pendingExams }}</div>
                <div class="stat-label">Belum Dikerjakan</div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Bar -->
<div class="filter-bar">
    <form method="GET" action="{{ route('siswa.cbt.index') }}">
        <div class="row g-2 align-items-center">
            <div class="col-12 col-md">
                <div class="input-group input-group-sm" style="height:38px;">
                    <span class="input-group-text" style="background:#f8fafc;border:1.5px solid var(--border);border-right:0;border-radius:8px 0 0 8px;">
                        <i class="bi bi-search text-muted" style="font-size:0.85rem;"></i>
                    </span>
                    <input type="text"
                           class="form-control"
                           name="search"
                           placeholder="Cari nama ujian..."
                           value="{{ request('search') }}"
                           style="border-left:0;border-radius:0 8px 8px 0;height:38px;">
                </div>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-accent" style="height:38px;padding:0 1.25rem;">
                    Cari
                </button>
            </div>
        </div>
    </form>
</div>

<!-- Exam Cards (Mobile) -->
<div class="exam-cards d-md-none" id="examCards">
    @forelse($exams as $exam)
        @php
            $participant = $exam->examParticipants->first();
            $attempts = \App\Models\ExamAttempt::where('exam_participant_id', $participant->id)->count();
            
            // Check if there's an in-progress attempt
            $inProgressAttempt = \App\Models\ExamAttempt::where('exam_participant_id', $participant->id)
                ->where('status', 'in_progress')
                ->first();
            
            // Determine status
            if ($inProgressAttempt) {
                $status = 'in_progress';
            } elseif ($attempts == $exam->max_attempt) {
                $status = 'completed';
            } else {
                $status = 'pending';
            }
            
            $package = $exam->examPackages->first();
            $questionsCount = $package ? $package->questions_count : 0;
        @endphp
        
        <div class="card mb-3 exam-card"
             data-exam-id="{{ $exam->id }}"
             data-exam-name="{{ $exam->name }}"
             data-status="{{ $status }}">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div style="flex:1;min-width:0;">
                        <h6 class="fw-bold mb-1" style="font-size:0.9rem;line-height:1.35;word-break:break-word;">{{ $exam->name }}</h6>
                        <span class="meta-chip">
                            <i class="bi bi-people"></i>
                            {{ auth()->user()->student->where('lbb_id', session('current_lbb_id'))->first()->classModel->name ?? 'N/A' }}
                        </span>
                    </div>
                    <span class="badge {{ $status === 'completed' ? 'bg-success' : ($status === 'in_progress' ? 'bg-info' : 'bg-warning') }} ms-2">
                        {{ $status === 'completed' ? 'Selesai' : ($status === 'in_progress' ? 'Berlangsung' : 'Belum') }}
                    </span>
                </div>
                
                <div class="d-flex gap-2 mb-3">
                    <span class="meta-chip"><i class="bi bi-card-list"></i> {{ $questionsCount }} Soal</span>
                    <span class="meta-chip"><i class="bi bi-clock"></i> {{ $exam->duration }} Menit</span>
                    <span class="meta-chip"><i class="bi bi-arrow-repeat"></i> {{ $attempts }}/{{ $exam->max_attempt }}</span>
                </div>
                
                @if($status === 'in_progress' && $inProgressAttempt)
                    <a href="{{ route('siswa.cbt.show', $inProgressAttempt->id) }}" class="btn btn-info w-100" style="height:38px;">
                        <i class="bi bi-arrow-right-circle me-1"></i> Lanjutkan Ujian
                    </a>
                @else
                    <button class="btn {{ $status === 'completed' ? 'btn-secondary' : 'btn-accent' }} w-100 exam-btn"
                            @if($status != 'completed') data-bs-toggle="modal" data-bs-target="#examModal" @endif
                            data-exam-id="{{ $exam->id }}"
                            data-exam-name="{{ $exam->name }}"
                            data-class="{{ auth()->user()->student->where('lbb_id', session('current_lbb_id'))->first()->classModel->name ?? 'N/A' }}"
                            data-duration="{{ $exam->duration }} Menit"
                            data-questions="{{ $questionsCount }}"
                            data-attempts="{{ $attempts }}/{{ $exam->max_attempt }}"
                            data-description="{{ $exam->description ?? 'Tidak ada deskripsi' }}"
                            data-status="{{ $status }}"
                            style="height:38px;">
                        <i class="bi {{ $status === 'completed' ? 'bi-check-circle' : 'bi-play-fill' }} me-1"></i>
                        {{ $status === 'completed' ? 'Selesai' : 'Mulai Ujian' }}
                    </button>
                @endif
            </div>
        </div>
    @empty
        <div class="card mb-3">
            <div class="card-body text-center py-5">
                <i class="bi bi-inbox" style="font-size:2.5rem;color:#cbd5e1;display:block;margin-bottom:1rem;"></i>
                <p class="text-muted mb-0" style="font-size:0.875rem;">Tidak ada ujian ditemukan</p>
            </div>
        </div>
    @endforelse
</div>

<!-- Exam Table (Desktop) -->
<div class="card d-none d-md-block">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="examTable">
                <thead>
                    <tr>
                        <th style="width:48px;">#</th>
                        <th>Nama Ujian</th>
                        <th style="width:140px;">Kelas</th>
                        <th style="width:120px;">Durasi</th>
                        <th style="width:110px;">Percobaan</th>
                        <th style="width:100px;">Status</th>
                        <th style="width:110px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($exams as $index => $exam)
                        @php
                            $participant = $exam->examParticipants->first();
                            $attempts = \App\Models\ExamAttempt::where('exam_participant_id', $participant->id)->count();
                            
                            // Check if there's an in-progress attempt
                            $inProgressAttempt = \App\Models\ExamAttempt::where('exam_participant_id', $participant->id)
                                ->where('status', 'in_progress')
                                ->first();
                            
                            // Determine status
                            if ($inProgressAttempt) {
                                $status = 'in_progress';
                                $attemptId = $inProgressAttempt->id;
                            } elseif ($attempts == $exam->max_attempt) {
                                $status = 'completed';
                                $attemptId = null;
                            } else {
                                $status = 'pending';
                                $attemptId = null;
                            }
                            
                            $package = $exam->examPackages->first();
                            $questionsCount = $package ? $package->questions_count : 0;
                            $className = auth()->user()->student->where('lbb_id', session('current_lbb_id'))->first()->classModel->name ?? 'N/A';
                        @endphp
                        <tr data-exam-id="{{ $exam->id }}"
                            data-exam-name="{{ $exam->name }}"
                            data-status="{{ $status }}"
                            data-class="{{ $className }}"
                            data-duration="{{ $exam->duration }} Menit"
                            data-questions="{{ $questionsCount }}"
                            data-attempts="{{ $attempts }}/{{ $exam->max_attempt }}"
                            data-description="{{ $exam->description ?? 'Tidak ada deskripsi' }}">
                            <td style="color:var(--gray);font-weight:500;">{{ $index + 1 }}</td>
                            <td>
                                <span class="fw-semibold" style="font-size:0.875rem;">{{ $exam->name }}</span>
                            </td>
                            <td><span class="meta-chip">{{ $className }}</span></td>
                            <td>
                                <span class="meta-chip"><i class="bi bi-clock"></i> {{ $exam->duration }} mnt</span>
                            </td>
                            <td>
                                <span class="meta-chip"><i class="bi bi-arrow-repeat"></i> {{ $attempts }}/{{ $exam->max_attempt }}</span>
                            </td>
                            <td>
                                <span class="badge {{ $status === 'completed' ? 'bg-success' : ($status === 'in_progress' ? 'bg-info' : 'bg-warning') }}">
                                    {{ $status === 'completed' ? 'Selesai' : ($status === 'in_progress' ? 'Berlangsung' : 'Belum') }}
                                </span>
                            </td>
                            <td>
                                @if($status === 'in_progress' && $attemptId)
                                    <a href="{{ route('siswa.cbt.show', $attemptId) }}" class="btn btn-info btn-sm">
                                        <i class="bi bi-arrow-right-circle me-1"></i> Lanjutkan
                                    </a>
                                @else
                                    <button class="btn {{ $status === 'completed' ? 'btn-secondary' : 'btn-accent' }} btn-sm exam-btn"
                                            @if($status != 'completed') data-bs-toggle="modal" data-bs-target="#examModal" @endif
                                            data-exam-id="{{ $exam->id }}"
                                            data-exam-name="{{ $exam->name }}"
                                            data-class="{{ $className }}"
                                            data-duration="{{ $exam->duration }} Menit"
                                            data-questions="{{ $questionsCount }}"
                                            data-attempts="{{ $attempts }}/{{ $exam->max_attempt }}"
                                            data-description="{{ $exam->description ?? 'Tidak ada deskripsi' }}"
                                            data-status="{{ $status }}">
                                        <i class="bi {{ $status === 'completed' ? 'bi-check-circle' : 'bi-play-fill' }} me-1"></i>
                                        {{ $status === 'completed' ? 'Selesai' : 'Mulai' }}
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <i class="bi bi-inbox" style="font-size:2.5rem;color:#cbd5e1;display:block;margin-bottom:1rem;"></i>
                            <p class="text-muted mb-0" style="font-size:0.875rem;">Tidak ada ujian ditemukan</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="card-footer d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
            <span class="text-muted" style="font-size:0.8rem;">Tampilkan</span>
            <select class="form-select form-select-sm" style="width:68px;" onchange="changePerPage(this.value)">
                <option value="5"  {{ request('per_page') == 5  ? 'selected' : '' }}>5</option>
                <option value="10" {{ request('per_page') == 10 || !request('per_page') ? 'selected' : '' }}>10</option>
                <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
            </select>
            <span class="text-muted" style="font-size:0.8rem;">per halaman</span>
        </div>
        <nav aria-label="Pagination">
            <ul class="pagination pagination-sm mb-0">
                @if($exams->onFirstPage())
                    <li class="page-item disabled"><span class="page-link"><i class="bi bi-chevron-left"></i></span></li>
                @else
                    <li class="page-item"><a class="page-link" href="{{ $exams->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a></li>
                @endif

                @foreach($exams->getUrlRange(1, $exams->lastPage()) as $page => $url)
                    @if($page == $exams->currentPage())
                        <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                    @elseif($page == 1 || $page == $exams->lastPage() || ($page >= $exams->currentPage() - 1 && $page <= $exams->currentPage() + 1))
                        <li class="page-item"><a class="page-link" href="{{ $exams->appends(request()->query())->url($page) }}">{{ $page }}</a></li>
                    @elseif($page == $exams->currentPage() - 2 || $page == $exams->currentPage() + 2)
                        <li class="page-item disabled"><span class="page-link">…</span></li>
                    @endif
                @endforeach

                @if($exams->hasMorePages())
                    <li class="page-item"><a class="page-link" href="{{ $exams->appends(request()->query())->nextPageUrl() }}"><i class="bi bi-chevron-right"></i></a></li>
                @else
                    <li class="page-item disabled"><span class="page-link"><i class="bi bi-chevron-right"></i></span></li>
                @endif
            </ul>
        </nav>
    </div>
</div>

<!-- Exam Code Modal -->
<div class="modal fade" id="examModal" tabindex="-1" aria-labelledby="examModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:440px;">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="examModalLabel">Detail Ujian</h5>
                    <p class="text-muted mb-0 mt-1" style="font-size:0.8rem;" id="modalExamName">-</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Status Badge -->
                <div class="mb-4 text-center">
                    <span class="badge fs-6 px-4 py-2" id="modalStatusBadge">Belum Dikerjakan</span>
                </div>

                <!-- Description -->
                <p class="text-muted text-center mb-4" id="modalDescription" style="font-size:0.875rem;">-</p>

                <!-- Info Grid -->
                <div class="exam-info-grid mb-4">
                    <div class="exam-info-item">
                        <span class="info-icon" style="color:var(--primary-custom);">
                            <i class="bi bi-card-list"></i>
                        </span>
                        <span class="info-value" id="modalQuestions">-</span>
                        <span class="info-label">Soal</span>
                    </div>
                    <div class="exam-info-item">
                        <span class="info-icon" style="color:var(--warning);">
                            <i class="bi bi-clock"></i>
                        </span>
                        <span class="info-value" id="modalDuration">-</span>
                        <span class="info-label">Durasi</span>
                    </div>
                    <div class="exam-info-item">
                        <span class="info-icon" style="color:var(--secondary);">
                            <i class="bi bi-people"></i>
                        </span>
                        <span class="info-value" id="modalClass">-</span>
                        <span class="info-label">Kelas</span>
                    </div>
                    <div class="exam-info-item">
                        <span class="info-icon" style="color:var(--accent);">
                            <i class="bi bi-arrow-repeat"></i>
                        </span>
                        <span class="info-value" id="modalAttempts">-</span>
                        <span class="info-label">Percobaan</span>
                    </div>
                </div>

                <!-- Exam Code Input -->
                <div style="background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:1.125rem;">
                    <div class="alert alert-info mb-3 py-2 px-3" style="font-size:0.82rem;">
                        <i class="bi bi-info-circle me-1"></i>
                        Masukkan kode ujian yang diberikan oleh pengajar
                    </div>
                    
                    <form id="examCodeForm">
                        <div class="mb-3">
                            <label for="examCode" class="form-label fw-semibold" style="font-size:0.83rem;">Kode Ujian</label>
                            <input type="text"
                                   class="form-control text-center fw-bold text-uppercase"
                                   id="examCode"
                                   placeholder="EXAM12"
                                   style="letter-spacing:0.2rem;font-size:1.15rem;font-family:'DM Mono',monospace;"
                                   required>
                        </div>
                        
                        <div class="alert alert-warning d-none py-2 px-3 mb-3" id="codeError" role="alert" style="font-size:0.82rem;">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            <span>Kode ujian tidak valid, silakan cek kembali.</span>
                        </div>
                        
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="flex:1;height:40px;font-size:0.875rem;">
                                Batal
                            </button>
                            <button type="submit" class="btn btn-accent" style="flex:2;height:40px;font-size:0.875rem;">
                                <i class="bi bi-play-circle me-1"></i>Mulai Ujian
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function changePerPage(perPage) {
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.set('per_page', perPage);
    if (urlParams.has('page')) urlParams.delete('page');
    window.location.href = window.location.pathname + '?' + urlParams.toString();
}
</script>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let selectedExamId = null;

    document.querySelectorAll('.exam-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            selectedExamId = this.getAttribute('data-exam-id');
        });
    });

    const examModal = document.getElementById('examModal');
    examModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        if (!button) return;

        selectedExamId = button.getAttribute('data-exam-id');
        document.getElementById('modalExamName').textContent = button.getAttribute('data-exam-name');
        document.getElementById('modalQuestions').textContent = button.getAttribute('data-questions');
        document.getElementById('modalDuration').textContent = button.getAttribute('data-duration');
        document.getElementById('modalClass').textContent = button.getAttribute('data-class');
        document.getElementById('modalAttempts').textContent = button.getAttribute('data-attempts');
        
        const status = button.getAttribute('data-status');
        const statusBadge = document.getElementById('modalStatusBadge');
        if (status === 'completed') {
            statusBadge.textContent = 'Selesai Dikerjakan';
            statusBadge.className = 'badge fs-6 px-4 py-2 bg-success';
        } else {
            statusBadge.textContent = 'Belum Dikerjakan';
            statusBadge.className = 'badge fs-6 px-4 py-2 bg-warning';
        }
        
        document.getElementById('modalDescription').textContent = button.getAttribute('data-description');
        document.getElementById('examCode').value = '';
        document.getElementById('codeError').classList.add('d-none');
    });
    
    document.getElementById('examCodeForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const code = document.getElementById('examCode').value.toUpperCase();

        if (!selectedExamId) {
            AppAlert.error('Gagal mendapatkan ID ujian');
            return;
        }

        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>Memeriksa...';

        fetch(`/siswa/cbt/${selectedExamId}/start`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ exam_code: code })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                AppAlert.success('Kode ujian valid! Memulai ujian...');
                setTimeout(() => { window.location.href = data.redirect_url; }, 1500);
            } else {
                document.getElementById('codeError').innerHTML = `<i class="bi bi-exclamation-triangle me-1"></i><span>${data.message}</span>`;
                document.getElementById('codeError').classList.remove('d-none');
                setTimeout(() => { document.getElementById('codeError').classList.add('d-none'); }, 3000);
            }
        })
        .catch(error => { AppAlert.error('Terjadi kesalahan. Silakan coba lagi.'); })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-play-circle me-1"></i>Mulai Ujian';
        });
    });
});
</script>
@endpush
@endsection