@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Exams')
@section('page-title', 'Exams')

@push('styles')
<style>
    .exam-stat .stat-text strong { font-size: 1.15rem; }
    .bs-jump { display: flex; align-items: center; gap: .5rem; }
    .bs-jump select { flex: 1 1 auto; min-width: 160px; }
    @media (max-width: 575px) { .bs-jump { flex-wrap: wrap; } .bs-jump select { flex-basis: 100%; } }
    .exam-name { font-weight: 600; color: #1f2937; }
    a.exam-name:hover { color: #1a56db; }
    .exam-grade { font-size: .74rem; color: #6b7280; }
</style>
@endpush

@section('content')
@php $canManageExams = $canManageExams ?? ((auth()->user()->role ?? '') === 'admin'); @endphp
@if(!$canManageExams)
<div class="alert alert-info"><i class="fas fa-eye mr-1"></i> Exams are created by the admin. You can open exams for <strong>your own class</strong> to enter marks, check the broadsheet and download performance reports.</div>
@endif

{{-- Compact stat strip --}}
<div class="row stat-strip">
    <div class="col-lg-4 col-6">
        <div class="stat-mini exam-stat">
            <span class="stat-icon bg-primary"><i class="fas fa-file-alt"></i></span>
            <div class="stat-text">
                <strong>{{ number_format($exams->total()) }}</strong>
                <span>@if($canManageExams)Total exams @else My class exams @endif</span>
            </div>
            @if($canManageExams)
            <a href="{{ route('exams.create') }}" class="stat-link" title="New exam"><i class="fas fa-plus"></i></a>
            @endif
        </div>
    </div>
    <div class="col-lg-4 col-6">
        <div class="stat-mini exam-stat">
            <span class="stat-icon bg-info"><i class="fas fa-list"></i></span>
            <div class="stat-text">
                <strong>{{ $exams->count() }}</strong>
                <span>On this page · p.{{ $exams->currentPage() }}/{{ $exams->lastPage() }}</span>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-6">
        <div class="stat-mini exam-stat">
            <span class="stat-icon bg-success"><i class="fas fa-clipboard-check"></i></span>
            <div class="stat-text">
                <strong>CBE</strong>
                <span>Opener · Mid-term · End-term · KPSEA</span>
            </div>
        </div>
    </div>
</div>

{{-- Check broadsheet quick-select --}}
<div class="card card-outline card-success shadow-sm learner-card mb-3">
    <div class="card-body py-2">
        <div class="bs-jump">
            <label class="mb-0 font-weight-600 text-nowrap" for="broadsheetExam"><i class="fas fa-table text-success mr-1"></i> Check broadsheet</label>
            <select id="broadsheetExam" class="form-control form-control-sm">
                <option value="">Select any exam…</option>
                @foreach($broadsheetExams ?? [] as $be)
                    <option value="{{ $be->id }}">{{ $be->name }}@if(!empty($gradeNames[$be->grade_level_id] ?? null)) · {{ $gradeNames[$be->grade_level_id] }}@endif ({{ ucfirst($be->status) }})</option>
                @endforeach
            </select>
            <button type="button" id="broadsheetGo" class="btn btn-sm btn-success text-nowrap" disabled><i class="fas fa-arrow-right mr-1"></i> Open</button>
        </div>
        @if(!$canManageExams)<small class="text-muted">Only exams for your own class are listed.</small>@endif
    </div>
</div>

{{-- Table card --}}
<div class="card card-outline card-primary shadow-sm learner-card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-file-alt mr-1"></i> Exams
            <small class="text-muted ml-1">Showing {{ $exams->firstItem() ?? 0 }}–{{ $exams->lastItem() ?? 0 }} of {{ number_format($exams->total()) }}</small>
        </h3>
        <div class="card-tools">
            @if($canManageExams)
            <a href="{{ route('exams.create') }}" class="btn btn-sm btn-primary"><i class="fas fa-plus mr-1"></i> New Exam</a>
            @endif
        </div>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table learner-table table-hover text-nowrap mb-0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Grade</th>
                    <th>Status</th>
                    <th>Dates</th>
                    @include('layouts.partials.school-th')
                    <th class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($exams as $e)
                    @php
                        $pill = $e->status === 'published' ? 'ok' : ($e->status === 'ongoing' ? 'warn' : 'muted');
                    @endphp
                    <tr>
                        <td>
                            <a href="{{ route('exams.show', $e) }}" class="exam-name">{{ $e->name }}</a>
                        </td>
                        <td>@if(!empty($gradeNames[$e->grade_level_id] ?? null))<span class="class-pill">{{ $gradeNames[$e->grade_level_id] }}</span>@else<span class="text-muted">—</span>@endif</td>
                        <td><span class="status-pill {{ $pill }}"><span class="dot"></span>{{ ucfirst($e->status) }}</span></td>
                        <td class="small text-muted">{{ $e->starts_at }} – {{ $e->ends_at }}</td>
                        @include('layouts.partials.school-td', ['schoolId' => $e->school_id ?? null])
                        <td class="text-right">
                            <div class="btn-group btn-group-sm" role="group">
                                <a href="{{ route('exams.show', $e) }}" class="btn btn-outline-info" title="Open"><i class="fas fa-eye"></i></a>
                                <a href="{{ route('exams.broadsheet', $e) }}" class="btn btn-outline-success" title="Check broadsheet"><i class="fas fa-table"></i></a>
                                @if($canManageExams)
                                    <a href="{{ route('exams.edit', $e) }}" class="btn btn-outline-primary" title="Edit"><i class="fas fa-pen"></i></a>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                            <p class="font-weight-bold mb-1">No exams yet</p>
                            <p class="text-muted small mb-3">@if($canManageExams)Create your first exam (Opener, Mid-term, End-term or KPSEA rehearsal).@else Exams are created by the admin. Open an exam to enter marks.@endif</p>
                            @if($canManageExams)
                                <a href="{{ route('exams.create') }}" class="btn btn-sm btn-primary"><i class="fas fa-plus mr-1"></i> New Exam</a>
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center flex-wrap">
        <small class="text-muted">Page {{ $exams->currentPage() }} of {{ $exams->lastPage() }} · {{ number_format($exams->total()) }} total</small>
        <div class="mb-0">{{ $exams->links() }}</div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    var sel = document.getElementById('broadsheetExam');
    var go = document.getElementById('broadsheetGo');
    if (!sel || !go) return;
    var base = '{{ url('exams') }}';
    sel.addEventListener('change', function () { go.disabled = !sel.value; });
    go.addEventListener('click', function () {
        if (sel.value) window.location.href = base + '/' + encodeURIComponent(sel.value) + '/broadsheet';
    });
})();
</script>
@endpush