@extends('layouts.siswa')

@section('title', 'Riwayat Ujian - CBT Online')

@section('content')
<div class="page-header mb-4">
    <h4 class="mb-1">Riwayat Ujian</h4>
    <p class="mb-0">Lihat hasil ujian yang sudah dikerjakan</p>
</div>

<!-- Stats Cards -->
<div class="row g-3 mb-4">
    <div class="col-6 col-xl-3">
        <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-6 col-xl-3">
        <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">{{ $passedExams }}</div>
                <div class="stat-label">Lulus</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon-wrap danger">
                <i class="bi bi-x-circle-fill"></i>
            </div>
            <div class="stat-text">
                <div class="stat-value">{{ $failedExams }}</div>
                <div class="stat-label">Gagal</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon-wrap teal">
                <i class="bi bi-bar-chart-fill"></i>
            </div>
            <div class="stat-text">
                <div class="stat-value">{{ $averageScore }}</div>
                <div class="stat-label">Rata-rata</div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Bar -->
<div class="filter-bar">
    <form method="GET" action="{{ route('siswa.history.index') }}">
        <div class="row g-2 align-items-center">
            <div class="col-12 col-sm">
                <div class="input-group" style="height:38px;">
                    <span class="input-group-text" style="border-right:0;border-radius:8px 0 0 8px;height:38px;">
                        <i class="bi bi-search" style="font-size:0.85rem;"></i>
                    </span>
                    <input type="text"
                           class="form-control"
                           name="search"
                           placeholder="Cari riwayat ujian..."
                           value="{{ request('search') }}"
                           style="border-left:0;border-radius:0 8px 8px 0;height:38px;">
                </div>
            </div>
            <div class="col-12 col-sm-auto">
                <select class="form-select" name="status" style="height:38px;min-width:155px;">
                    <option value="">Semua Status</option>
                    <option value="passed" {{ request('status') === 'passed' ? 'selected' : '' }}>Lulus</option>
                    <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Gagal</option>
                </select>
            </div>
            <div class="col-12 col-sm-auto">
                <button type="submit" class="btn btn-accent w-100" style="height:38px;padding:0 1.25rem;">
                    <i class="bi bi-search me-1"></i>Cari
                </button>
            </div>
        </div>
    </form>
</div>

<!-- ===================== HISTORY CARDS (Mobile < md) ===================== -->
<div class="d-md-none" id="historyCards">
    @forelse($attempts as $attempt)
        
        <div class="history-card mb-3"
             data-attempt-id="{{ $attempt->id }}"
             data-exam-name="{{ $exam->name }}"
             data-status="{{ $status }}">

            {{-- Card top strip: coloured by status --}}
            <div style="height:4px;background:{{ $statusColor }};border-radius:var(--radius-lg) var(--radius-lg) 0 0;"></div>

            <div style="padding:1rem 1.125rem;">

                {{-- Header row: name + badge --}}
                <div class="d-flex align-items-start justify-content-between gap-2 mb-2">
                    <div style="min-width:0;flex:1;">
                        <h6 class="fw-bold mb-1" style="font-size:0.9rem;line-height:1.35;word-break:break-word;margin:0;">
                            {{ $exam->name }}
                        </h6>
                        <div class="meta-chip mt-1" style="font-size:0.75rem;">
                            <i class="bi bi-calendar3"></i>
                            {{ $attempt->start_time->format('d M Y') }}
                        </div>
                    </div>
                    <span class="badge" style="white-space:nowrap;flex-shrink:0;background:{{ $statusBg }};color:{{ $statusColor }};border:1px solid {{ $statusBorder }};">
                        {{ $statusLabel }}
                    </span>
                </div>

                @if($showStats)
                {{-- Stats row - only show for completed exams --}}
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;margin-bottom:0.875rem;">

                    <div style="background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:0.625rem 0.5rem;text-align:center;">
                        <div style="font-size:0.68rem;color:var(--gray);font-weight:500;margin-bottom:0.2rem;text-transform:uppercase;letter-spacing:0.04em;">Waktu</div>
                        <div style="font-size:0.875rem;font-weight:600;color:var(--dark);font-family:'DM Mono',monospace;">{{ $timeSpent }} Menit</div>
                    </div>

                    <div style="background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:0.625rem 0.5rem;text-align:center;">
                        <div style="font-size:0.68rem;color:var(--gray);font-weight:500;margin-bottom:0.2rem;text-transform:uppercase;letter-spacing:0.04em;">Benar</div>
                        <div style="font-size:0.875rem;font-weight:600;color:var(--dark);">{{ $attempt->correct_answers }}/{{ $attempt->total_questions }}</div>
                    </div>

                    <div style="background:{{ $statusBg }};border:1px solid {{ $statusBorder }};border-radius:8px;padding:0.625rem 0.5rem;text-align:center;">
                        <div style="font-size:0.68rem;color:var(--gray);font-weight:500;margin-bottom:0.2rem;text-transform:uppercase;letter-spacing:0.04em;">Nilai</div>
                        <div style="font-size:1.35rem;font-weight:700;color:{{ $statusColor }};font-family:'DM Mono',monospace;line-height:1;">
                            {{ round($attempt->score, 0) }}
                        </div>
                    </div>

                </div>
                @endif

                {{-- Action button --}}
                @if($isInProgress)
                {{-- Resume button for in-progress exams --}}
                <a href="{{ route('siswa.cbt.show', $attempt->id) }}" 
                   class="btn btn-primary w-100"
                   style="height:38px;font-size:0.875rem;background:#3b82f6;border-color:#3b82f6;">
                    <i class="bi bi-play-fill me-1"></i>Lanjutkan Ujian
                </a>
                @else
                {{-- Detail button for completed exams --}}
                <button class="btn btn-accent w-100 detail-btn"
                        style="height:38px;font-size:0.875rem;"
                        data-bs-toggle="modal"
                        data-bs-target="#detailModal"
                        data-attempt-id="{{ $attempt->id }}"
                        data-student-name="{{ auth()->user()->name }}"
                        data-class-name="{{ session('student')->classModel->name ?? '-' }}"
                        data-exam-name="{{ $exam->name }}"
                        data-score="{{ round($attempt->score, 0) }}"
                        data-correct="{{ $attempt->correct_answers }}"
                        data-total="{{ $attempt->total_questions }}"
                        data-time="{{ $timeSpent }}"
                        data-status="{{ $status }}"
                        data-exam-date="{{ $attempt->start_time->format('d M Y') }}"
                        data-passing-grade="{{ $exam->passing_grade }}">
                    <i class="bi bi-eye me-1"></i>Lihat Detail
                </button>
                @endif
            </div>
        </div>

    @empty
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="bi bi-inbox" style="font-size:2.5rem;color:#cbd5e1;display:block;margin-bottom:0.875rem;"></i>
                <p class="text-muted mb-0" style="font-size:0.875rem;">Tidak ada riwayat ujian ditemukan</p>
            </div>
        </div>
    @endforelse
</div>

<!-- ===================== HISTORY TABLE (Desktop ≥ md) ===================== -->
<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="historyTable">
                <thead>
                    <tr>
                        <th style="width:48px;">#</th>
                        <th>Nama Ujian</th>
                        <th style="width:120px;">Tanggal</th>
                        <th style="width:110px;">Durasi</th>
                        <th style="width:110px;">Benar</th>
                        <th style="width:90px;">Nilai</th>
                        <th style="width:100px;">Status</th>
                        <th style="width:90px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($attempts as $index => $attempt)
                                                <tr>
                            <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" style="font-size:0.78rem;">
                                    {{ $attempt->start_time->format('d M Y') }}
                                </span>
                            </td>
                            @if($showStats)
                            <td>
                                <span class="meta-chip">
                                    <i class="bi bi-clock"></i> {{ $timeSpent }} mnt
                                </span>
                            </td>
                            <td>
                                <span class="meta-chip">
                                    <i class="bi bi-check2"></i> {{ $attempt->correct_answers }}/{{ $attempt->total_questions }}
                                </span>
                            </td>
                            <td>
                                <span class="fw-bold {{ $isPassed ? 'text-success' : 'text-danger' }}"
                                      style="font-size:1rem;font-family:'DM Mono',monospace;">
                                    {{ round($attempt->score, 0) }}
                                </span>
                            </td>
                            @else
                            <td colspan="3" class="text-center">
                                <span class="text-muted" style="font-size:0.875rem;font-style:italic;">
                                    <i class="bi bi-lock me-1"></i>Ujian sedang berlangsung
                                </span>
                            </td>
                            @endif
                            <td>
                                <span class="badge {{ $statusClass }}">
                                    {{ $statusLabel }}
                                </span>
                            </td>
                            <td>
                                @if($isInProgress)
                                {{-- Resume button for in-progress exams --}}
                                <a href="{{ route('siswa.cbt.show', $attempt->id) }}" 
                                   class="btn btn-primary btn-sm"
                                   style="background:#3b82f6;border-color:#3b82f6;">
                                    <i class="bi bi-play-fill me-1"></i>Lanjutkan
                                </a>
                                @else
                                {{-- Detail button for completed exams --}}
                                <button class="btn btn-accent btn-sm detail-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#detailModal"
                                        data-attempt-id="{{ $attempt->id }}"
                                        data-student-name="{{ auth()->user()->name }}"
                                        data-class-name="{{ session('student')->classModel->name ?? '-' }}"
                                        data-exam-name="{{ $exam->name }}"
                                        data-score="{{ round($attempt->score, 0) }}"
                                        data-correct="{{ $attempt->correct_answers }}"
                                        data-total="{{ $attempt->total_questions }}"
                                        data-time="{{ $timeSpent }} menit"
                                        data-status="{{ $status }}"
                                        data-exam-date="{{ $attempt->start_time->format('d M Y') }}"
                                        data-passing-grade="{{ $exam->passing_grade }}">
                                    <i class="bi bi-eye me-1"></i>Detail
                                </button>
                                @endif
                            </td>
                        </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <i class="bi bi-inbox" style="font-size:2.5rem;color:#cbd5e1;display:block;margin-bottom:0.875rem;"></i>
                            <p class="text-muted mb-0" style="font-size:0.875rem;">Tidak ada riwayat 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>
            <ul class="pagination pagination-sm mb-0">
                @if($attempts->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="{{ $attempts->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a></li>
                @endif

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

                @if($attempts->hasMorePages())
                    <li class="page-item"><a class="page-link" href="{{ $attempts->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>

{{-- Mobile pagination --}}
<div class="d-md-none mt-3 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>
        <ul class="pagination pagination-sm mb-0">
            @if($attempts->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="{{ $attempts->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a></li>
            @endif

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

            @if($attempts->hasMorePages())
                <li class="page-item"><a class="page-link" href="{{ $attempts->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>

@include('siswa.modal.history.detail')

@endsection