@extends('layouts.student')
@section('title', 'My Fees')
@section('content')
    <x-page-head title="My Fees" subtitle="Read-only balance" />
    <x-panel>
        @if (! $statement)
            <x-empty-state title="No fee data" message="Your fee statement is not available yet." />
        @else
            <div class="stat-grid" style="margin-bottom:16px;">
                <x-stat-card label="Total Invoiced" :value="number_format($statement['total_invoiced'] ?? 0, 2)" />
                <x-stat-card label="Total Paid" :value="number_format($statement['total_paid'] ?? 0, 2)" color="green" />
                <x-stat-card label="Balance Due" :value="number_format($statement['total_outstanding'] ?? 0, 2)" color="red" />
            </div>
            <p style="color:var(--text2);">Contact your parent/guardian or the bursar's office to make payments.</p>
        @endif
    </x-panel>
@endsection