@extends('layouts.app')

@section('title', 'Financial Summary | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> / 
    <span><a href="{{ route('schooladmin.reports.index') }}">Reports</a></span> / 
    <span class="active-page">Financial Summary</span>
@endsection

@section('content')
<div class="container-fluid p-0">
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card shadow-sm border-0 rounded-4 p-4 text-center bg-white">
                <h6 class="text-muted text-uppercase small fw-bold">Total Revenue Collected</h6>
                <h2 class="fw-bold text-success">KES {{ number_format($revenue->sum('total')) }}</h2>
                <div class="progress mt-3" style="height: 8px;">
                    <div class="progress-bar bg-success" style="width: 100%"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0 rounded-4 p-4 text-center bg-white">
                <h6 class="text-muted text-uppercase small fw-bold">Total Expenses</h6>
                <h2 class="fw-bold text-danger">KES {{ number_format($expenses->sum('total')) }}</h2>
                <div class="progress mt-3" style="height: 8px;">
                    <div class="progress-bar bg-danger" style="width: 100%"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0 rounded-4 p-4 text-center bg-white">
                <h6 class="text-muted text-uppercase small fw-bold">Estimated Net Position</h6>
                @php $net = $revenue->sum('total') - $expenses->sum('total'); @php
                <h2 class="fw-bold {{ $net >= 0 ? 'text-primary' : 'text-warning' }}">KES {{ number_format($net) }}</h2>
                <div class="progress mt-3" style="height: 8px;">
                    <div class="progress-bar bg-primary" style="width: {{ $net >= 0 ? 100 : 0 }}%"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between">
                    <h5 class="mb-0 fw-bold">Monthly Collection Trend</h5>
                    <span class="badge bg-light text-dark">Last 12 Months</span>
                </div>
                <div class="card-body">
                    <canvas id="revenueTrendChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card shadow-sm border-0 rounded-4 h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 fw-bold">Outstanding Balances</h5>
                </div>
                <div class="card-body d-flex flex-column justify-content-center text-center">
                    <div class="mb-4">
                        <i class="fas fa-exclamation-circle fa-4x text-warning mb-3"></i>
                        <h3 class="fw-bold text-warning">KES {{ number_format($outstandingInvoices) }}</h3>
                        <p class="text-muted">Total uncollected fee balances from all active invoices.</p>
                    </div>
                    <a href="{{ route('schooladmin.finance.invoices.index') }}" class="btn btn-warning rounded- pill shadow-sm">
                        View Detailed Arrears
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 fw-bold">Collection Breakdown by Month</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($revenue as $item)
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span>{{ $item->month }}</span>
                            <span class="fw-bold">KES {{ number_format($item->total) }}</span>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 fw-bold">Expense Breakdown by Month</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($expenses as $item)
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span>{{ $item->month }}</span>
                            <span class="fw-bold">KES {{ number_format($item->total) }}</span>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-scripts')
<script>
    const ctx = document.getElementById('revenueTrendChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($revenue->pluck('month')),
            datasets: [{
                label: 'Revenue',
                data: @json($revenue->pluck('total')),
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                borderWidth: 3,
                tension: 0.4,
                fill: true
            }, {
                label: 'Expenses',
                data: @json($expenses->pluck('total')),
                borderColor: '#dc3545',
                backgroundColor: 'rgba(220, 53, 69, 0.1)',
                borderWidth: 3,
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) { return 'K' + value / 1000 + 'k'; }
                    }
                }
            }
        }
    });
</script>
@endsection