@extends('admin-layouts.vertical', ['title' => 'Dashboard'])

@section('css')
    {{-- Extra CSS if needed --}}
@endsection

@section('content')
<div class="row">
    <!-- Total Students -->
    <div class="col-md-3">
        <div class="card text-white bg-info mb-3">
            <div class="card-body">
                <h3 class="fw-bold mb-1">{{ $totalStudents ?? 0 }}</h3>
                <p class="mb-0">Total Students</p>
            </div>
        </div>
    </div>
    <!-- Received Payment -->
    <div class="col-md-3">
        <div class="card text-white bg-success mb-3">
            <div class="card-body">
                <h3 class="fw-bold mb-1">₹ {{ number_format($receivedPayment ?? 0, 2) }}</h3>
                <p class="mb-0">Received Payment</p>
            </div>
        </div>
    </div>
    <!-- Pending Payment -->
    <div class="col-md-3">
        <div class="card text-white bg-danger mb-3">
            <div class="card-body">
                <h3 class="fw-bold mb-1">₹ {{ number_format($pendingPayment ?? 0, 2) }}</h3>
                <p class="mb-0">Pending Payment</p>
            </div>
        </div>
    </div>
    <!-- Total Arrears -->
    <div class="col-md-3">
        <div class="card text-white bg-primary mb-3">
            <div class="card-body">
                <h3 class="fw-bold mb-1">₹ {{ number_format($totalArrears ?? 0, 2) }}</h3>
                <p class="mb-0">Total Arrears</p>
                {{-- <small class="d-block">Received: ₹ {{ number_format($arrearsReceived ?? 0, 2) }}</small>
                <small class="d-block">Pending: ₹ {{ number_format($arrearsPending ?? 0, 2) }}</small> --}}
            </div>
        </div>
    </div>
</div>

<!-- Payment Details Table -->
<div class="row">
    <div class="col-md-12">
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0">Payment Details</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Terms</th>
                                <th>Total</th>
                                <th>Received</th>
                                <th>Pending</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($terms ?? [] as $term)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $term->name }}</td>
                                    <td>₹ {{ number_format($term->total, 2) }}</td>
                                    <td>₹ {{ number_format($term->received, 2) }}</td>
                                    <td>₹ {{ number_format($term->pending, 2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted">No payment data available.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection