@extends('backend.bursar.bursar_dashboard')

@section('bursar')

<div class="container-fluid py-4">

{{-- =========================================================
     PAGE HEADER
========================================================== --}}

<div class="d-flex flex-wrap justify-content-between align-items-center mb-4">

    <div>

        <h3 class="fw-bold mb-1">

            <i class="fas fa-chart-line text-success me-2"></i>

            Bursar Dashboard

        </h3>

        <p class="text-muted mb-0">

            Overview of student bills, payments and outstanding balances.

        </p>

    </div>


    <div class="d-flex gap-2 mt-3 mt-md-0">


            <a
            href="{{ route('bursar.daily.payment') }}"
            class="btn btn-primary"
        >

            <i class="fas fa-file-invoice-dollar me-2"></i>

            Daily Payment
        </a>

        <a
            href="{{ route('bursar.bills.create') }}"
            class="btn btn-success"
        >

            <i class="fas fa-file-invoice-dollar me-2"></i>

            Add Bill

        </a>


        <a
            href="{{ route('bursar.manage.bill') }}"
            class="btn btn-danger"
        >

            <i class="fas fa-file-invoice-dollar me-2"></i>

            Manage Bill

        </a>

    </div>

</div>


{{-- =========================================================
     FINANCIAL SUMMARY CARDS
========================================================== --}}

<div class="row g-4 mb-4">


    {{-- TOTAL BILL --}}

    <div class="col-xl-3 col-md-6">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-start">

                    <div>

                        <p class="text-muted mb-2">
                            Total Bills
                        </p>

                        <h3 class="fw-bold mb-0">

                            ₦{{ number_format($totalBill, 2) }}

                        </h3>

                    </div>


                    <div
                        class="rounded-circle bg-primary bg-opacity-10
                               text-primary p-3"
                    >

                        <i class="fas fa-file-invoice-dollar fa-lg"></i>

                    </div>

                </div>

                <small class="text-muted">
                    Total amount billed
                </small>

            </div>

        </div>

    </div>


    {{-- TOTAL PAID --}}

    <div class="col-xl-3 col-md-6">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-start">

                    <div>

                        <p class="text-muted mb-2">
                            Payment Made
                        </p>

                        <h3 class="fw-bold text-success mb-0">

                            ₦{{ number_format($totalPaid, 2) }}

                        </h3>

                    </div>


                    <div
                        class="rounded-circle bg-success bg-opacity-10
                               text-success p-3"
                    >

                        <i class="fas fa-money-bill-wave fa-lg"></i>

                    </div>

                </div>

                <small class="text-muted">
                    Total money received
                </small>

            </div>

        </div>

    </div>


    {{-- OUTSTANDING --}}

    <div class="col-xl-3 col-md-6">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-start">

                    <div>

                        <p class="text-muted mb-2">
                            Outstanding
                        </p>

                        <h3 class="fw-bold text-danger mb-0">

                            ₦{{ number_format($totalOutstanding, 2) }}

                        </h3>

                    </div>


                    <div
                        class="rounded-circle bg-danger bg-opacity-10
                               text-danger p-3"
                    >

                        <i class="fas fa-exclamation-circle fa-lg"></i>

                    </div>

                </div>

                <small class="text-muted">
                    Amount yet to be paid
                </small>

            </div>

        </div>

    </div>


    {{-- STUDENTS --}}

    <div class="col-xl-3 col-md-6">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-start">

                    <div>

                        <p class="text-muted mb-2">
                            Students Billed
                        </p>

                        <h3 class="fw-bold mb-0">

                            {{ number_format($studentsWithBills) }}

                        </h3>

                    </div>


                    <div
                        class="rounded-circle bg-warning bg-opacity-10
                               text-warning p-3"
                    >

                        <i class="fas fa-users fa-lg"></i>

                    </div>

                </div>

                <small class="text-muted">
                    Students with active bills
                </small>

            </div>

        </div>

    </div>

</div>



{{-- =========================================================
     SECONDARY ANALYSIS
========================================================== --}}

<div class="row g-4 mb-4">


    {{-- PAYMENT STATUS --}}

    <div class="col-lg-8">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-header bg-white border-0 py-3">

                <div class="d-flex justify-content-between align-items-center">

                    <div>

                        <h5 class="fw-bold mb-1">
                            Payment Analysis
                        </h5>

                        <small class="text-muted">
                            Overall bill collection status
                        </small>

                    </div>

                    <i class="fas fa-chart-pie text-success"></i>

                </div>

            </div>


            <div class="card-body">

                <div
                    style="
                        position:relative;
                        height:300px;
                        width:100%;
                    "
                >

                    <canvas id="paymentChart"></canvas>

                </div>

            </div>

        </div>

    </div>


    {{-- STUDENT PAYMENT STATUS --}}

    <div class="col-lg-4">

        <div class="card border-0 shadow-sm h-100">

            <div class="card-header bg-white border-0 py-3">

                <h5 class="fw-bold mb-1">
                    Student Payment Status
                </h5>

                <small class="text-muted">
                    Current payment situation
                </small>

            </div>


            <div class="card-body">


                {{-- FULLY PAID --}}

                <div class="d-flex align-items-center mb-4">

                    <div
                        class="rounded-circle bg-success
                               bg-opacity-10 text-success p-3 me-3"
                    >

                        <i class="fas fa-check-circle"></i>

                    </div>


                    <div class="flex-grow-1">

                        <div class="text-muted small">
                            Fully Paid
                        </div>

                        <h4 class="fw-bold mb-0">

                            {{ number_format($fullyPaidStudents) }}

                        </h4>

                    </div>

                </div>


                {{-- OUTSTANDING STUDENTS --}}

                <div class="d-flex align-items-center mb-4">

                    <div
                        class="rounded-circle bg-danger
                               bg-opacity-10 text-danger p-3 me-3"
                    >

                        <i class="fas fa-exclamation-triangle"></i>

                    </div>


                    <div class="flex-grow-1">

                        <div class="text-muted small">
                            Outstanding
                        </div>

                        <h4 class="fw-bold mb-0">

                            {{ number_format($studentsWithOutstanding) }}

                        </h4>

                    </div>

                </div>


                {{-- COLLECTION RATE --}}

                @php

                    $collectionRate =
                        $totalBill > 0
                            ? ($totalPaid / $totalBill) * 100
                            : 0;

                @endphp


                <div>

                    <div class="d-flex justify-content-between mb-2">

                        <span class="text-muted">
                            Collection Rate
                        </span>

                        <strong>
                            {{ number_format($collectionRate, 1) }}%
                        </strong>

                    </div>


                    <div
                        class="progress"
                        style="height:10px;"
                    >

                        <div
                            class="progress-bar bg-success"
                            role="progressbar"
                            style="width: {{ min($collectionRate, 100) }}%;"
                        ></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- =========================================================
     RECENT PAYMENTS
========================================================== --}}

<div class="card border-0 shadow-sm">

    <div class="card-header bg-white border-0 py-3">

        <div class="d-flex justify-content-between align-items-center">

            <div>

                <h5 class="fw-bold mb-1">

                    <i class="fas fa-history text-success me-2"></i>

                    Recent Payments

                </h5>

                <small class="text-muted">
                    Latest payments received from students
                </small>

            </div>


            <a
                href="{{ route('bursar.payment.history') }}"
                class="btn btn-sm btn-outline-success"
            >

                View History

                <i class="fas fa-arrow-right ms-1"></i>

            </a>

        </div>

    </div>


    <div class="table-responsive">

        <table class="table table-hover align-middle mb-0">

            <thead class="table-light">

                <tr>

                    <th class="px-3">
                        S/N
                    </th>

                    <th>
                        Receipt No.
                    </th>

                    <th>
                        Student
                    </th>

                    <th>
                        Class
                    </th>

                    <th>
                        Payment Date
                    </th>

                    <th class="text-end">
                        Amount
                    </th>

                </tr>

            </thead>


            <tbody>

                @forelse($recentPayments as $payment)

                    <tr>

                        <td class="px-3 fw-semibold">
                            {{ $loop->iteration }}
                        </td>


                        <td>

                            <span class="fw-semibold text-primary">

                                {{ $payment->receipt_number }}

                            </span>

                        </td>


                        <td>

                            <div class="fw-semibold">

                                {{ $payment->student?->name ?? 'N/A' }}

                            </div>

                            <small class="text-muted">

                                {{ $payment->student?->user?->user_name ?? 'N/A' }}

                            </small>

                        </td>


                        <td>

                            {{ $payment->studentClass?->class_name ?? 'N/A' }}

                        </td>


                        <td>

                            {{ $payment->payment_date
                                ? $payment->payment_date->format('d M Y')
                                : 'N/A'
                            }}

                        </td>


                        <td class="text-end">

                            <span class="fw-bold text-success">

                                ₦{{ number_format($payment->amount, 2) }}

                            </span>

                        </td>

                    </tr>

                @empty

                    <tr>

                        <td
                            colspan="6"
                            class="text-center py-5 text-muted"
                        >

                            <i
                                class="fas fa-receipt mb-2"
                                style="font-size:35px; opacity:.3;"
                            ></i>

                            <div>
                                No payments have been recorded yet.
                            </div>

                        </td>

                    </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

</div>

{{-- =============================================================
CHART.JS
============================================================== --}}

<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {

        const canvas =
            document.getElementById(
                'paymentChart'
            );


        if (!canvas) return;


        const paid =
            {{ $paymentChart['paid'] }};


        const outstanding =
            {{ $paymentChart['outstanding'] }};


        new Chart(
            canvas,
            {

                type: 'doughnut',

                data: {

                    labels: [
                        'Payment Made',
                        'Outstanding'
                    ],

                    datasets: [

                        {

                            data: [
                                paid,
                                outstanding
                            ],

                            backgroundColor: [
                                '#198754',
                                '#dc3545'
                            ],

                            borderWidth: 0

                        }

                    ]

                },


                options: {

                    responsive: true,

                    maintainAspectRatio: false,

                    cutout: '68%',

                    plugins: {

                        legend: {

                            position: 'bottom',

                            labels: {

                                padding: 20,

                                usePointStyle: true

                            }

                        }

                    }

                }

            }
        );

    }
);

</script>

@endsection