@extends('layouts.master')

@section('content')
<div class="page-heading">
    <h3>Hostel Fees Dashboard</h3>
<div class="row">
    <div class="col-md-4">
    <div class="card text-white p-3">
        <h5>Total Fees</h5>
        <h3>{{ $hosteltotal }}</h3>
    </div>
</div>

<div class="col-md-4">
    <div class="card text-white p-3">
        <h5>Payment Received</h5>
        <h3>{{ $hostelpaid }}</h3>
    </div>
</div>



<div class="col-md-4">
    <div class="card text-white p-3">
        <h5>Discount</h5>
        <h3>{{ $hostelpartial }}</h3>
    </div>
</div>


    <div class="row">

        <div class="col-md-3">
            <div class="card text-white p-3">
                <h5>Total Fees</h5>
                <h3>{{ $total }}</h3>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card text-white p-3">
                <h5>Full Paid</h5>
                <h3>{{ $paid }}</h3>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card text-white p-3">
                <h5>Unpaid</h5>
                <h3>{{ $unpaid }}</h3>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card text-white p-3">
                <h5>Discount</h5>
                <h3>{{ $partial }}</h3>
            </div>
        </div>

        <div class="col-md-12 mt-3">
            <div class="card p-3">
                <h4>Total Collection: ₹{{ $totalCollection }}</h4>
            </div>
        </div>

    </div>
</div>
<style>
    .card{
        background-color:rgb(136 204 241);
    }
</style>
@endsection