@extends('layouts.admin')

@section('title', 'Examination Dashboard')

@push('scripts')
    @vite('resources/js/pages/examination-dashboard.js')
@endpush

@section('content')
@php
    $scheduled  = (int) ($stats['scheduled'] ?? 0);
    $registered = (int) ($stats['registered'] ?? 0);
    $marked     = (int) ($stats['marked'] ?? 0);
    $processed  = (int) ($stats['processed'] ?? 0);
    $chartLabels = json_encode(['Scheduled', 'Registered', 'Marked', 'Processed']);
    $chartValues = json_encode([$scheduled, $registered, $marked, $processed]);
@endphp

<div class="bv-page-header">
    <div>
        <x-ui.breadcrumb :items="[
            ['label' => 'Home', 'href' => route('dashboard')],
            ['label' => 'Examination'],
        ]" />
        <h1 class="bv-page-header__title">Examination Dashboard</h1>
        <p class="bv-page-header__subtitle">Schedules, marks, results, and transcripts at a glance.</p>
    </div>
    <div class="bv-page-header__actions">
        <x-ui.button variant="ghost" icon="bi-gear" :href="route('examination.settings.index')">Settings</x-ui.button>
        <x-ui.button variant="primary" icon="bi-calendar-plus" :href="route('examination.schedule.create')">New Schedule</x-ui.button>
    </div>
</div>

@include('institution.partials.flash')

<div class="row g-4 mb-2 bv-stagger">
    <div class="col-6 col-lg-3">
        <x-ui.stat-card label="Scheduled Exams" :counter="$scheduled" icon="bi-calendar-event" trend="Active schedules" trend-direction="neutral" />
    </div>
    <div class="col-6 col-lg-3">
        <x-ui.stat-card label="Registrations" :counter="$registered" icon="bi-person-check" trend="Exam registrations" trend-direction="up" variant="info" />
    </div>
    <div class="col-6 col-lg-3">
        <x-ui.stat-card label="Marks Entered" :counter="$marked" icon="bi-pencil-square" trend="Marked records" trend-direction="up" variant="success" />
    </div>
    <div class="col-6 col-lg-3">
        <x-ui.stat-card label="Results Processed" :counter="$processed" icon="bi-award" trend="Processed results" trend-direction="neutral" variant="warning" />
    </div>
</div>

<div class="row g-4 mt-1">
    <div class="col-lg-8">
        <div class="bv-chart-card">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <div>
                    <h4 class="bv-widget__title">Examination activity</h4>
                    <span class="text-muted-bv small">Schedules, registrations, marks, results</span>
                </div>
                <span class="bv-badge bv-badge--primary"><i class="bi bi-graph-up"></i> Live</span>
            </div>
            <div class="bv-chart-card__canvas bv-chart-card__canvas--320">
                <canvas id="chart-exam-activity"
                    data-labels='{{ $chartLabels }}'
                    data-values='{{ $chartValues }}'>
                </canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="bv-chart-card">
            <h4 class="bv-widget__title mb-3">Status mix</h4>
            <div class="bv-chart-card__canvas bv-chart-card__canvas--320">
                <canvas id="chart-exam-mix"
                    data-labels='{{ $chartLabels }}'
                    data-values='{{ $chartValues }}'>
                </canvas>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mt-1">
    <div class="col-lg-6">
        <x-ui.card title="Quick actions">
            <div class="d-flex flex-wrap gap-2">
                <x-ui.button variant="ghost" icon="bi-calendar-event" :href="route('examination.schedule.index')">Schedules</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-person-check" :href="route('examination.registration.index')">Registrations</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-pencil-square" :href="route('examination.mark-entry.index')">Mark Entry</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-arrow-repeat" :href="route('examination.result-processing.index')">Process Results</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-bar-chart" :href="route('examination.analytics.index')">Analytics</x-ui.button>
            </div>
        </x-ui.card>
    </div>
    <div class="col-lg-6">
        <x-ui.card title="Results &amp; transcripts">
            <div class="d-flex flex-wrap gap-2">
                <x-ui.button variant="ghost" icon="bi-file-earmark-text" :href="route('examination.result-slips.index')">Result Slips</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-file-earmark-person" :href="route('examination.transcripts.index')">Transcripts</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-shield-check" :href="route('examination.verification.index')">Verification Portal</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-clipboard-data" :href="route('reports.examination.index')">Reports</x-ui.button>
            </div>
        </x-ui.card>
    </div>
</div>
@endsection