@extends('backend.student_backend.student_dashboard')

@section('student')

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


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

<div class="row mb-4">

    <div class="col-12">

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

            <div>

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

                    <i class="ri-history-line text-success me-2"></i>

                    Payment History

                </h4>


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

                    View your bill, payments, advance and outstanding balance
                    for the selected term and session.

                </p>

            </div>

        </div>

    </div>

</div>



{{-- =========================================================
     FILTER
========================================================== --}}

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

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

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

            <i class="ri-filter-3-line text-success me-2"></i>

            Select Payment Period

        </h5>


        <small class="text-muted">

            Select your class, term and academic session.

        </small>

    </div>


    <div class="card-body">

        <form id="paymentHistoryForm">

            @csrf


            <div class="row g-3">


                {{-- CLASS --}}

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

                    <label class="form-label fw-semibold">

                        Class

                    </label>


                    <select
                        name="class_id"
                        id="paymentHistoryClass"
                        class="form-select"
                        required
                    >

                        <option value="">

                            Select Class

                        </option>



                        @foreach($studentClasses as $assignment)

                            <option value="{{ $assignment->student_classes_id }}">
                                {{ $assignment->class?->class_name ?? 'N/A' }}
                            </option>

                        @endforeach

                    </select>

                </div>



                {{-- TERM --}}

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

                    <label class="form-label fw-semibold">

                        Term

                    </label>


                    <select
                        name="term"
                        id="paymentHistoryTerm"
                        class="form-select"
                        required
                    >

                        <option value="">

                            Select Term

                        </option>


                        @foreach($terms as $term)

                            <option
                                value="{{ $term->name }}"
                                @selected(
                                    $currentTerm?->name === $term->name
                                )
                            >

                                {{ $term->name }}

                            </option>

                        @endforeach

                    </select>

                </div>



                {{-- SESSION --}}

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

                    <label class="form-label fw-semibold">

                        Academic Session

                    </label>


                    <select
                        name="session"
                        id="paymentHistorySession"
                        class="form-select"
                        required
                    >

                        <option value="">

                            Select Session

                        </option>


                        @foreach($sessions as $session)

                            <option
                                value="{{ $session->name }}"
                                @selected(
                                    $currentSession?->name === $session->name
                                )
                            >

                                {{ $session->name }}

                            </option>

                        @endforeach

                    </select>

                </div>



                {{-- BUTTON --}}

                <div class="col-12">

                    <button
                        type="submit"
                        id="loadPaymentHistoryBtn"
                        class="btn btn-success"
                    >

                        <i class="ri-search-line me-1"></i>

                        Load Payment History

                    </button>

                </div>

            </div>

        </form>

    </div>

</div>



{{-- =========================================================
     LOADING
========================================================== --}}

<div
    id="paymentHistoryLoading"
    class="text-center py-5 d-none"
>

    <div
        class="spinner-border text-success"
        role="status"
    ></div>


    <div class="mt-2 text-muted">

        Loading payment history...

    </div>

</div>



{{-- =========================================================
     RESULTS
========================================================== --}}

<div id="paymentHistoryResult" class="d-none">


    {{-- =====================================================
         STUDENT / ACADEMIC INFORMATION
    ====================================================== --}}

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

        <div class="card-body">

            <div class="row">


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

                    <small class="text-muted">

                        Student

                    </small>


                    <div
                        id="historyStudentName"
                        class="fw-bold"
                    ></div>

                </div>



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

                    <small class="text-muted">

                        Student ID

                    </small>


                    <div
                        id="historyStudentId"
                        class="fw-bold"
                    ></div>

                </div>



                <div class="col-md-2">

                    <small class="text-muted">

                        Class

                    </small>


                    <div
                        id="historyClass"
                        class="fw-bold"
                    ></div>

                </div>



                <div class="col-md-2">

                    <small class="text-muted">

                        Term

                    </small>


                    <div
                        id="historyTerm"
                        class="fw-bold"
                    ></div>

                </div>



                <div class="col-md-2">

                    <small class="text-muted">

                        Session

                    </small>


                    <div
                        id="historySession"
                        class="fw-bold"
                    ></div>

                </div>

            </div>

        </div>

    </div>



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

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


        {{-- TOTAL DUE --}}

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

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

                <div class="card-body">

                    <small class="text-muted">

                        Total Amount Due

                    </small>


                    <h3 class="fw-bold text-primary mt-2">

                        ₦<span id="historyTotalDue">0.00</span>

                    </h3>

                    <small class="text-muted">

                        Current term/session only

                    </small>

                </div>

            </div>

        </div>



        {{-- TOTAL PAID --}}

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

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

                <div class="card-body">

                    <small class="text-muted">

                        Total Payment Made

                    </small>


                    <h3 class="fw-bold text-success mt-2">

                        ₦<span id="historyTotalPaid">0.00</span>

                    </h3>

                    <small class="text-muted">

                        Current term/session only

                    </small>

                </div>

            </div>

        </div>



        {{-- ADVANCE --}}

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

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

                <div class="card-body">

                    <small class="text-muted">

                        Advance Payment

                    </small>


                    <h3 class="fw-bold text-success mt-2">

                        ₦<span id="historyAdvance">0.00</span>

                    </h3>

                    <small class="text-muted">

                        Excess payment for this term

                    </small>

                </div>

            </div>

        </div>



        {{-- BALANCE --}}

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

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

                <div class="card-body">

                    <small class="text-muted">

                        Outstanding Balance

                    </small>


                    <h3 class="fw-bold text-danger mt-2">

                        ₦<span id="historyBalance">0.00</span>

                    </h3>

                    <small class="text-muted">

                        Remaining balance for this term

                    </small>

                </div>

            </div>

        </div>

    </div>



    {{-- =====================================================
         CURRENT OUTSTANDING INFORMATION
    ====================================================== --}}

    <div
        id="currentOutstandingBox"
        class="alert alert-warning border-0 shadow-sm d-none mb-4"
    >

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

            <i class="ri-error-warning-line fs-3 me-3"></i>


            <div>

                <div class="fw-bold">

                    Outstanding Balance

                </div>


                <div>

                    You still have an outstanding balance of

                    <strong>

                        ₦<span id="currentOutstandingAmount">
                            0.00
                        </span>

                    </strong>

                    for the selected term and session.

                </div>

            </div>

        </div>

    </div>



    {{-- =====================================================
         CURRENT ADVANCE INFORMATION
    ====================================================== --}}

    <div
        id="currentAdvanceBox"
        class="alert alert-success border-0 shadow-sm d-none mb-4"
    >

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

            <i class="ri-wallet-3-line fs-3 me-3"></i>


            <div>

                <div class="fw-bold">

                    Advance Payment

                </div>


                <div>

                    You have an advance payment of

                    <strong>

                        ₦<span id="currentAdvanceAmount">
                            0.00
                        </span>

                    </strong>

                    for the selected term and session.

                </div>

            </div>

        </div>

    </div>



    {{-- =====================================================
         BILL BREAKDOWN
    ====================================================== --}}

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


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

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

                <i class="ri-file-list-3-line text-success me-2"></i>

                Bill Breakdown

            </h5>

        </div>


        <div class="table-responsive">

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


                <tbody>


                    {{-- TUITION --}}

                    <tr>

                        <td>

                            Tuition

                        </td>


                        <td class="text-end fw-semibold">

                            ₦<span id="billTuition">
                                0.00
                            </span>

                        </td>

                    </tr>



                    {{-- TRANSPORT --}}

                    <tr>

                        <td>

                            Transport

                        </td>


                        <td class="text-end fw-semibold">

                            ₦<span id="billTransport">
                                0.00
                            </span>

                        </td>

                    </tr>



                    {{-- OTHERS --}}

                    <tr>

                        <td>

                            Others

                        </td>


                        <td class="text-end fw-semibold">

                            ₦<span id="billOthers">
                                0.00
                            </span>

                        </td>

                    </tr>



                    {{-- BOARDING --}}

                    <tr>

                        <td>

                            Boarding

                        </td>


                        <td class="text-end fw-semibold">

                            ₦<span id="billBoarding">
                                0.00
                            </span>

                        </td>

                    </tr>



                    {{-- CURRENT TERM TOTAL --}}

                    <tr class="table-light">

                        <th>

                            Current Term Bill

                        </th>


                        <th class="text-end">

                            ₦<span id="mainCurrentBillTotal">
                                0.00
                            </span>

                        </th>

                    </tr>


                </tbody>

            </table>

        </div>

    </div>



    {{-- =====================================================
         TRANSACTION HISTORY
    ====================================================== --}}

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


        <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="ri-money-dollar-circle-line text-success me-2"></i>

                        Payment Transactions

                    </h5>


                    <small class="text-muted">

                        All payments made for the selected term and session.

                    </small>

                </div>

            </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>

                            Payment Date

                        </th>


                        <th class="text-end">

                            Amount

                        </th>

                    </tr>

                </thead>


                <tbody id="paymentTransactionsBody">

                </tbody>

            </table>

        </div>

    </div>

</div>



{{-- =========================================================
     INITIAL MESSAGE
========================================================== --}}

<div
    id="paymentHistoryEmpty"
    class="text-center py-5"
>

    <i
        class="ri-wallet-3-line text-muted"
        style="font-size:55px;"
    ></i>


    <h5 class="mt-3 text-muted">

        Select a class, term and session

    </h5>


    <p class="text-muted">

        Your payment history will appear here.

    </p>

</div>



</div>



{{-- =============================================================
AJAX JAVASCRIPT
============================================================== --}}

<script>

$(document).ready(function () {


    /*
    |--------------------------------------------------------------------------
    | ELEMENTS
    |--------------------------------------------------------------------------
    */

    const form =
        $('#paymentHistoryForm');


    const loading =
        $('#paymentHistoryLoading');


    const result =
        $('#paymentHistoryResult');


    const empty =
        $('#paymentHistoryEmpty');


    const button =
        $('#loadPaymentHistoryBtn');



    /*
    |--------------------------------------------------------------------------
    | FORM SUBMIT
    |--------------------------------------------------------------------------
    */

    form.on(
        'submit',
        function (event) {

            event.preventDefault();


            /*
            |--------------------------------------------------------------------------
            | GET VALUES
            |--------------------------------------------------------------------------
            */

            const classId =
                $('#paymentHistoryClass').val();


            const term =
                $('#paymentHistoryTerm').val();


            const session =
                $('#paymentHistorySession').val();



            /*
            |--------------------------------------------------------------------------
            | VALIDATE
            |--------------------------------------------------------------------------
            */

            if (
                !classId ||
                !term ||
                !session
            ) {

                alert(
                    'Please select class, term and session.'
                );

                return;

            }



            /*
            |--------------------------------------------------------------------------
            | SHOW LOADING
            |--------------------------------------------------------------------------
            */

            loading.removeClass(
                'd-none'
            );


            result.addClass(
                'd-none'
            );


            empty.addClass(
                'd-none'
            );



            /*
            |--------------------------------------------------------------------------
            | DISABLE BUTTON
            |--------------------------------------------------------------------------
            */

            button.prop(
                'disabled',
                true
            );


            button.html(`

                <span
                    class="spinner-border spinner-border-sm me-1"
                ></span>

                Loading...

            `);



            /*
            |--------------------------------------------------------------------------
            | AJAX
            |--------------------------------------------------------------------------
            */

            $.ajax({

                url:
                    "{{ route('student.payment.history.load') }}",

                type:
                    "POST",

                data: {

                    _token:
                        "{{ csrf_token() }}",

                    class_id:
                        classId,

                    term:
                        term,

                    session:
                        session

                },


                /*
                |--------------------------------------------------------------------------
                | SUCCESS
                |--------------------------------------------------------------------------
                */

                success:
                    function (response) {


                        if (
                            !response.success
                        ) {

                            alert(
                                'Unable to load payment history.'
                            );

                            return;

                        }



                        /*
                        |--------------------------------------------------------------------------
                        | STUDENT INFORMATION
                        |--------------------------------------------------------------------------
                        */

                        $('#historyStudentName')
                            .text(
                                response.student.name
                            );


                        $('#historyStudentId')
                            .text(
                                response.student.student_id
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | ACADEMIC INFORMATION
                        |--------------------------------------------------------------------------
                        */

                        $('#historyClass')
                            .text(
                                response.academic.class
                            );


                        $('#historyTerm')
                            .text(
                                response.academic.term
                            );


                        $('#historySession')
                            .text(
                                response.academic.session
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | CURRENT BILL
                        |--------------------------------------------------------------------------
                        */

                        const currentBill =
                            parseFloat(
                                response.bill.current_total || 0
                            );


                        $('#mainCurrentBillTotal')
                            .text(
                                formatMoney(
                                    currentBill
                                )
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | BILL BREAKDOWN
                        |--------------------------------------------------------------------------
                        */

                        $('#billTuition')
                            .text(
                                formatMoney(
                                    response.bill.tuition || 0
                                )
                            );


                        $('#billTransport')
                            .text(
                                formatMoney(
                                    response.bill.transport || 0
                                )
                            );


                        $('#billOthers')
                            .text(
                                formatMoney(
                                    response.bill.others || 0
                                )
                            );


                        $('#billBoarding')
                            .text(
                                formatMoney(
                                    response.bill.boarding || 0
                                )
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | FINANCIAL SUMMARY
                        |--------------------------------------------------------------------------
                        */

                        const totalDue =
                            parseFloat(
                                response.summary.total_due || 0
                            );


                        const totalPaid =
                            parseFloat(
                                response.summary.total_paid || 0
                            );


                        const balance =
                            parseFloat(
                                response.summary.balance || 0
                            );


                        const advancePayment =
                            parseFloat(
                                response.summary.advance_payment || 0
                            );


                        const currentAdvance =
                            parseFloat(
                                response.summary.current_advance || 0
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | TOTAL AMOUNT DUE
                        |--------------------------------------------------------------------------
                        |
                        | ONLY the selected term/session bill.
                        |
                        */

                        $('#historyTotalDue')
                            .text(
                                formatMoney(
                                    totalDue
                                )
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | TOTAL PAYMENT MADE
                        |--------------------------------------------------------------------------
                        */

                        $('#historyTotalPaid')
                            .text(
                                formatMoney(
                                    totalPaid
                                )
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | ADVANCE
                        |--------------------------------------------------------------------------
                        */

                        $('#historyAdvance')
                            .text(
                                formatMoney(
                                    advancePayment
                                )
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | BALANCE
                        |--------------------------------------------------------------------------
                        */

                        $('#historyBalance')
                            .text(
                                formatMoney(
                                    balance
                                )
                            );



                        /*
                        |--------------------------------------------------------------------------
                        | CURRENT OUTSTANDING BOX
                        |--------------------------------------------------------------------------
                        */

                        if (
                            balance > 0
                        ) {

                            $('#currentOutstandingBox')
                                .removeClass(
                                    'd-none'
                                );


                            $('#currentOutstandingAmount')
                                .text(
                                    formatMoney(
                                        balance
                                    )
                                );

                        }

                        else {

                            $('#currentOutstandingBox')
                                .addClass(
                                    'd-none'
                                );

                        }



                        /*
                        |--------------------------------------------------------------------------
                        | CURRENT ADVANCE BOX
                        |--------------------------------------------------------------------------
                        */

                        if (
                            currentAdvance > 0
                        ) {

                            $('#currentAdvanceBox')
                                .removeClass(
                                    'd-none'
                                );


                            $('#currentAdvanceAmount')
                                .text(
                                    formatMoney(
                                        currentAdvance
                                    )
                                );

                        }

                        else {

                            $('#currentAdvanceBox')
                                .addClass(
                                    'd-none'
                                );

                        }



                        /*
                        |--------------------------------------------------------------------------
                        | TRANSACTIONS
                        |--------------------------------------------------------------------------
                        */

                        const tbody =
                            $('#paymentTransactionsBody');


                        tbody.empty();



                        /*
                        |--------------------------------------------------------------------------
                        | NO TRANSACTIONS
                        |--------------------------------------------------------------------------
                        */

                        if (
                            !response.transactions ||
                            response.transactions.length === 0
                        ) {

                            tbody.html(`

                                <tr>

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

                                        <i
                                            class="ri-receipt-line"
                                            style="font-size:40px;"
                                        ></i>


                                        <div class="mt-2">

                                            No payment transactions
                                            found for this term and session.

                                        </div>

                                    </td>

                                </tr>

                            `);

                        }



                        /*
                        |--------------------------------------------------------------------------
                        | DISPLAY TRANSACTIONS
                        |--------------------------------------------------------------------------
                        */

                        else {

                            $.each(

                                response.transactions,

                                function (
                                    index,
                                    transaction
                                ) {


                                    const row = `

                                        <tr>

                                            <td class="px-3 fw-semibold">

                                                ${index + 1}

                                            </td>


                                            <td>

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

                                                    ${escapeHtml(
                                                        transaction.receipt_number
                                                    )}

                                                </span>

                                            </td>


                                            <td>

                                                ${escapeHtml(
                                                    transaction.payment_date
                                                )}

                                            </td>


                                            <td class="text-end">

                                                <span
                                                    class="fw-bold text-success"
                                                style="font-size:15px;">

                                                    ₦${formatMoney(
                                                        transaction.amount
                                                    )}

                                                </span>

                                            </td>

                                        </tr>

                                    `;


                                    tbody.append(
                                        row
                                    );

                                }

                            );

                        }



                        /*
                        |--------------------------------------------------------------------------
                        | HIDE LOADING
                        |--------------------------------------------------------------------------
                        */

                        loading.addClass(
                            'd-none'
                        );


                        /*
                        |--------------------------------------------------------------------------
                        | SHOW RESULTS
                        |--------------------------------------------------------------------------
                        */

                        result.removeClass(
                            'd-none'
                        );

                    },


                /*
                |--------------------------------------------------------------------------
                | ERROR
                |--------------------------------------------------------------------------
                */

                error:
                    function (xhr) {

                        console.error(
                            xhr
                        );


                        loading.addClass(
                            'd-none'
                        );


                        result.addClass(
                            'd-none'
                        );


                        empty.removeClass(
                            'd-none'
                        );


                        let message =
                            'Unable to load payment history.';


                        if (
                            xhr.responseJSON &&
                            xhr.responseJSON.errors
                        ) {

                            const errors =
                                xhr.responseJSON.errors;


                            const firstError =
                                Object.values(
                                    errors
                                )[0];


                            if (
                                firstError &&
                                firstError.length > 0
                            ) {

                                message =
                                    firstError[0];

                            }

                        }

                        else if (
                            xhr.responseJSON &&
                            xhr.responseJSON.message
                        ) {

                            message =
                                xhr.responseJSON.message;

                        }


                        alert(
                            message
                        );

                    },


                /*
                |--------------------------------------------------------------------------
                | COMPLETE
                |--------------------------------------------------------------------------
                */

                complete:
                    function () {


                        button.prop(
                            'disabled',
                            false
                        );


                        button.html(`

                            <i
                                class="ri-search-line me-1"
                            ></i>

                            Load Payment History

                        `);

                    }

            });

        }

    );



    /*
    |--------------------------------------------------------------------------
    | FORMAT MONEY
    |--------------------------------------------------------------------------
    */

    function formatMoney(
        amount
    ) {

        return Number(
            amount || 0
        ).toLocaleString(
            'en-NG',
            {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }
        );

    }



    /*
    |--------------------------------------------------------------------------
    | ESCAPE HTML
    |--------------------------------------------------------------------------
    */

    function escapeHtml(
        value
    ) {

        const div =
            document.createElement(
                'div'
            );


        div.textContent =
            value ?? '';


        return div.innerHTML;

    }


});




</script>

@endsection