@extends('layouts.admin')

@section('title', 'Student Finance Dashboard')

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

@section('content')
@php
    $outstanding = (float) ($stats['outstanding_balance'] ?? 0);
    $collected = (float) ($stats['total_collected'] ?? 0);
@endphp

<div class="bv-page-header">
    <div>
        <x-ui.breadcrumb :items="[
            ['label' => 'Home', 'href' => route('dashboard')],
            ['label' => 'Student Finance'],
        ]" />
        <h1 class="bv-page-header__title">Finance Dashboard</h1>
        <p class="bv-page-header__subtitle">Invoices, payments, receipts, and student balances.</p>
    </div>
    <div class="bv-page-header__actions">
        <x-ui.button variant="ghost" icon="bi-gear" :href="route('finance.settings.index')">Settings</x-ui.button>
        <x-ui.button variant="primary" icon="bi-receipt" :href="route('finance.invoices.create')">New Invoice</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="Accounts" :counter="$stats['accounts'] ?? 0" icon="bi-wallet2" trend="Student accounts" trend-direction="neutral" />
    </div>
    <div class="col-6 col-lg-3">
        <x-ui.stat-card label="Invoices" :counter="$stats['invoices'] ?? 0" icon="bi-file-earmark-text" trend="All invoices" trend-direction="up" variant="info" />
    </div>
    <div class="col-6 col-lg-3">
        <x-ui.stat-card label="Payments" :counter="$stats['payments'] ?? 0" icon="bi-cash-coin" trend="Recorded payments" trend-direction="up" variant="success" />
    </div>
    <div class="col-6 col-lg-3">
        <x-ui.stat-card label="Receipts" :counter="$stats['receipts'] ?? 0" icon="bi-receipt" trend="Issued receipts" 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">Collections overview</h4>
                    <span class="text-muted-bv small">Outstanding vs collected</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-finance-collections"
                    data-labels='@json(["Outstanding", "Collected"])'
                    data-values='@json([$outstanding, $collected])'>
                </canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="bv-chart-card">
            <h4 class="bv-widget__title mb-3">Volume mix</h4>
            <div class="bv-chart-card__canvas bv-chart-card__canvas--320">
                <canvas id="chart-finance-volume"
                    data-labels='@json(["Invoices", "Payments", "Receipts"])'
                    data-values='@json([(int) ($stats["invoices"] ?? 0), (int) ($stats["payments"] ?? 0), (int) ($stats["receipts"] ?? 0)])'>
                </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-receipt" :href="route('finance.invoices.index')">Invoices</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-cash" :href="route('finance.payments.index')">Payments</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-receipt-cutoff" :href="route('finance.receipts.index')">Receipts</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-sliders" :href="route('finance.fee-setup.index')">Fee setup</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-bar-chart" :href="route('finance.analytics.index')">Analytics</x-ui.button>
            </div>
            <p class="text-muted-bv small mt-3 mb-0">
                Outstanding balance: {{ number_format($outstanding, 2) }}
            </p>
        </x-ui.card>
    </div>
    <div class="col-lg-6">
        <x-ui.card title="Clearance &amp; results">
            <div class="d-flex flex-wrap gap-2">
                <x-ui.button variant="ghost" icon="bi-shield-check" :href="route('finance.student-clearance.index')">Student clearance</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-person-check" :href="route('finance.release-student-results.index')">Release student results</x-ui.button>
                <x-ui.button variant="ghost" icon="bi-calendar-check" :href="route('finance.release-session-results.index')">Release session results</x-ui.button>
            </div>
        </x-ui.card>
    </div>
</div>
@endsection