@extends('backend.bursar.bursar_dashboard')

@section('bursar')

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


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

<div class="mb-4">

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

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

        Payment History

    </h3>

    <p class="text-muted mb-0">
        View all payments made by students for a selected bill.
    </p>

</div>


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

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

    <div class="card-body p-4">

        <div class="row g-3">

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

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

                <select
                    id="historyClass"
                    class="form-select"
                >

                    <option value="">
                        Select Class
                    </option>

                    @foreach($classes as $class)

                        <option value="{{ $class->id }}">
                            {{ $class->class_name }}
                        </option>

                    @endforeach

                </select>

            </div>


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

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

                <select
                    id="historyTerm"
                    class="form-select"
                >

                    <option value="">
                        Select Term
                    </option>

                    @foreach($terms as $term)

                        <option value="{{ $term->name }}">
                            {{ $term->name }}
                        </option>

                    @endforeach

                </select>

            </div>


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

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

                <select
                    id="historySession"
                    class="form-select"
                >

                    <option value="">
                        Select Session
                    </option>

                    @foreach($sessions as $session)

                        <option value="{{ $session->name }}">
                            {{ $session->name }}
                        </option>

                    @endforeach

                </select>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     STUDENT SEARCH
========================================================== --}}

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

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

        <div class="card-body">

            <div class="input-group">

                <span class="input-group-text bg-white">

                    <i class="fas fa-search text-primary"></i>

                </span>

                <input
                    type="text"
                    id="historySearch"
                    class="form-control"
                    placeholder="Search student ID or name..."
                >

            </div>

        </div>

    </div>


    {{-- =====================================================
         STUDENT BILLS
    ====================================================== --}}

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

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

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

        </div>

        <div class="table-responsive">

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

                <thead class="table-primary">

                    <tr>

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

                        <th>
                            Student ID
                        </th>

                        <th>
                            Full Name
                        </th>

                        <th>
                            Class
                        </th>

                        <th>
                            Bill
                        </th>

                        <th>
                            Paid
                        </th>

                        {{-- ADVANCE COLUMN --}}

                        <th>
                            Advance
                        </th>

                        <th>
                            Balance
                        </th>

                        <th>
                            Action
                        </th>

                    </tr>

                </thead>

                <tbody id="historyStudentsBody">

                </tbody>

            </table>

        </div>

    </div>

</div>


{{-- =========================================================
     DEFAULT STATE
========================================================== --}}

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

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

    <h5 class="fw-bold">
        Select Class, Term and Session
    </h5>

    <p class="text-muted">
        Students with payment records will appear here.
    </p>

</div>


</div>

{{-- =============================================================
PAYMENT TRANSACTION BREAKDOWN MODAL
============================================================== --}}

<div
    class="modal fade"
    id="paymentHistoryModal"
    tabindex="-1"
    aria-hidden="true"
>


<div class="modal-dialog modal-lg modal-dialog-centered">

    <div class="modal-content border-0 shadow">

        <div class="modal-header bg-primary text-white">

            <h5 class="modal-title">

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

                Payment Transaction Breakdown

            </h5>

            <button
                type="button"
                class="btn-close btn-close-white"
                data-bs-dismiss="modal"
            ></button>

        </div>


        <div class="modal-body">

            <div
                id="historyStudentInfo"
                class="mb-4"
            ></div>


            <div class="table-responsive">

                <table
                    class="table table-bordered table-hover align-middle"
                >

                    <thead class="table-primary">

                        <tr>

                            <th>
                                S/N
                            </th>

                            <th>
                                Payment Date
                            </th>

                            <th>
                                Receipt No.
                            </th>

                            <th>
                                Amount
                            </th>

                            <th class="text-center">
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody id="paymentHistoryBody">

                        <tr>

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

                                No transactions loaded.

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>


        <div class="modal-footer">

            <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
            >

                Close

            </button>

        </div>

    </div>

</div>


</div>

<script>

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

        const classSelect =
            document.getElementById(
                'historyClass'
            );

        const termSelect =
            document.getElementById(
                'historyTerm'
            );

        const sessionSelect =
            document.getElementById(
                'historySession'
            );

        const searchInput =
            document.getElementById(
                'historySearch'
            );

        const area =
            document.getElementById(
                'historyStudentArea'
            );

        const empty =
            document.getElementById(
                'historyEmpty'
            );

        const tbody =
            document.getElementById(
                'historyStudentsBody'
            );


        let students = [];


        /*
        |--------------------------------------------------------------------------
        | LOAD STUDENTS
        |--------------------------------------------------------------------------
        */

        function loadStudents(
            search = ''
        ) {

            if (
                !classSelect.value ||
                !termSelect.value ||
                !sessionSelect.value
            ) {

                area.classList.add(
                    'd-none'
                );

                empty.classList.remove(
                    'd-none'
                );

                return;

            }


            tbody.innerHTML = `

                <tr>

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

                        <div class="spinner-border text-primary"></div>

                        <div class="mt-2">
                            Loading...
                        </div>

                    </td>

                </tr>

            `;


            const params =
                new URLSearchParams({

                    class_id:
                        classSelect.value,

                    term:
                        termSelect.value,

                    session:
                        sessionSelect.value,

                    search:
                        search

                });


            fetch(
                "{{ route('bursar.daily.payment.search') }}"
                + '?'
                + params.toString(),

                {

                    headers: {

                        'Accept':
                            'application/json',

                        'X-Requested-With':
                            'XMLHttpRequest'

                    }

                }
            )

            .then(response =>
                response.json()
            )

            .then(data => {

                students =
                    data.students || [];


                area.classList.remove(
                    'd-none'
                );

                empty.classList.add(
                    'd-none'
                );


                renderStudents();

            });

        }


        /*
        |--------------------------------------------------------------------------
        | RENDER STUDENTS
        |--------------------------------------------------------------------------
        */

        function renderStudents() {

            if (!students.length) {

                tbody.innerHTML = `

                    <tr>

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

                            No student found.

                        </td>

                    </tr>

                `;

                return;

            }


            tbody.innerHTML =
                students.map(
                    (student, index) => {


                    /*
                    |--------------------------------------------------------------------------
                    | CALCULATE ADVANCE
                    |--------------------------------------------------------------------------
                    |
                    | Advance only exists when total paid is greater
                    | than the total bill.
                    |
                    | Example:
                    |
                    | Bill = 65,000
                    | Paid = 85,000
                    |
                    | Advance = 85,000 - 65,000
                    |         = 20,000
                    |
                    */

                    const totalBill =
                        Number(student.total_bill) || 0;

                    const totalPaid =
                        Number(student.paid) || 0;

                    const advance =
                        totalPaid > totalBill
                            ? totalPaid - totalBill
                            : 0;


                    return `

                    <tr>

                        <td class="px-3">
                            ${index + 1}
                        </td>

                        <td>
                            <strong>
                                ${student.student_id}
                            </strong>
                        </td>

                        <td>
                            ${student.name}
                        </td>

                        <td>
                            ${student.class}
                        </td>

                        <td>
                            ₦${money(totalBill)}
                        </td>

                        <td class="text-success fw-semibold">
                            ₦${money(totalPaid)}
                        </td>


                        {{-- ADVANCE --}}

                        <td class="text-warning fw-bold">

                            ₦${money(advance)}

                        </td>


                        {{-- BALANCE --}}

                        <td class="text-danger fw-semibold">
                            ₦${money(student.balance)}
                        </td>


                        <td>

                            <button
                                type="button"
                                class="btn btn-sm btn-primary history-btn"
                                data-index="${index}"
                            >

                                <i class="fas fa-history me-1"></i>

                                Payment History

                            </button>

                        </td>

                    </tr>

                    `;

                }
                ).join('');

        }


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

        function money(value) {

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

        }


        /*
        |--------------------------------------------------------------------------
        | FILTER CHANGE
        |--------------------------------------------------------------------------
        */

        [
            classSelect,
            termSelect,
            sessionSelect

        ].forEach(
            select => {

                select.addEventListener(
                    'change',
                    function () {

                        searchInput.value = '';

                        loadStudents();

                    }
                );

            }
        );


        /*
        |--------------------------------------------------------------------------
        | SEARCH
        |--------------------------------------------------------------------------
        */

        let timer;

        searchInput.addEventListener(
            'input',
            function () {

                clearTimeout(timer);

                timer =
                    setTimeout(
                        () => {

                            loadStudents(
                                searchInput.value
                            );

                        },
                        300
                    );

            }
        );


        /*
        |--------------------------------------------------------------------------
        | PAYMENT HISTORY BUTTON
        |--------------------------------------------------------------------------
        */

        tbody.addEventListener(
            'click',
            function (event) {

                const button =
                    event.target.closest(
                        '.history-btn'
                    );


                if (!button) {
                    return;
                }


                const student =
                    students[
                        button.dataset.index
                    ];


                if (!student || !student.bill_id) {

                    alert(
                        'Unable to find this student payment bill.'
                    );

                    return;

                }


                /*
                |--------------------------------------------------------------------------
                | CALCULATE ADVANCE FOR MODAL
                |--------------------------------------------------------------------------
                */

                const totalBill =
                    Number(student.total_bill) || 0;

                const totalPaid =
                    Number(student.paid) || 0;


                const advance =
                    totalPaid > totalBill
                        ? totalPaid - totalBill
                        : 0;


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

                document.getElementById(
                    'historyStudentInfo'
                ).innerHTML = `

                    <div class="bg-light rounded p-3">

                        <div class="row">

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

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

                                <div class="fw-bold">
                                    ${student.name}
                                </div>

                            </div>


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

                                <div class="text-muted small">
                                    Student ID
                                </div>

                                <div class="fw-semibold">
                                    ${student.student_id}
                                </div>

                            </div>


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

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

                                <div class="fw-semibold">
                                    ${student.class}
                                </div>

                            </div>

                        </div>


                        <hr>


                        <div class="row text-center">

                            {{-- TOTAL BILL --}}

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

                                <div class="text-muted small">
                                    Total Bill
                                </div>

                                <div class="fw-bold">
                                    ₦${money(totalBill)}
                                </div>

                            </div>


                            {{-- TOTAL PAID --}}

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

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

                                <div class="fw-bold text-success">
                                    ₦${money(totalPaid)}
                                </div>

                            </div>


                            {{-- ADVANCE PAYMENT --}}

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

                                <div class="text-muted small">
                                    Advance Payment
                                </div>

                                <div class="fw-bold text-warning">

                                    ₦${money(advance)}

                                </div>

                            </div>


                            {{-- BALANCE --}}

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

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

                                <div class="fw-bold text-danger">
                                    ₦${money(student.balance)}
                                </div>

                            </div>

                        </div>

                    </div>

                `;


                /*
                |--------------------------------------------------------------------------
                | HISTORY BODY
                |--------------------------------------------------------------------------
                */

                const historyBody =
                    document.getElementById(
                        'paymentHistoryBody'
                    );


                historyBody.innerHTML = `

                    <tr>

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

                            <div class="spinner-border text-primary"></div>

                            <div class="mt-2 text-muted">
                                Loading transactions...
                            </div>

                        </td>

                    </tr>

                `;


                /*
                |--------------------------------------------------------------------------
                | OPEN MODAL
                |--------------------------------------------------------------------------
                */

                const historyModal =
                    new bootstrap.Modal(
                        document.getElementById(
                            'paymentHistoryModal'
                        )
                    );


                historyModal.show();


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

                const params =
                    new URLSearchParams({

                        student_bill_id:
                            student.bill_id

                    });


                fetch(
                    "{{ route('bursar.payment.history.data') }}"
                    + '?'
                    + params.toString(),

                    {

                        headers: {

                            'Accept':
                                'application/json',

                            'X-Requested-With':
                                'XMLHttpRequest'

                        }

                    }

                )

                .then(async response => {

                    const data =
                        await response.json();


                    if (!response.ok) {

                        throw new Error(
                            data.message
                            ||
                            'Unable to load payment history.'
                        );

                    }


                    return data;

                })

                .then(data => {

                    if (
                        !data.success ||
                        !data.payments ||
                        !data.payments.length
                    ) {

                        historyBody.innerHTML = `

                            <tr>

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

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

                                    <div>
                                        No payment transactions found.
                                    </div>

                                </td>

                            </tr>

                        `;

                        return;

                    }


                    historyBody.innerHTML =
                        data.payments.map(
                            (payment, index) => {

                                const receiptUrl =
                                    "{{ url('/bursar/payment') }}"
                                    + "/"
                                    + payment.id
                                    + "/receipt";


                                return `

                                    <tr>

                                        <td>
                                            ${index + 1}
                                        </td>

                                        <td>
                                            ${payment.payment_date}
                                        </td>

                                        <td>

                                            <span class="fw-semibold">
                                                ${payment.receipt_number}
                                            </span>

                                        </td>

                                        <td>

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

                                                ₦${money(payment.amount)}

                                            </span>

                                        </td>

                                        <td class="text-center">

                                            <div class="btn-group">

                                                <a
                                                    href="${receiptUrl}"
                                                    target="_blank"
                                                    class="btn btn-sm btn-outline-primary"
                                                >

                                                    <i class="fas fa-eye me-1"></i>

                                                    Preview

                                                </a>


                                                <a
                                                    href="${receiptUrl}"
                                                    target="_blank"
                                                    class="btn btn-sm btn-primary"
                                                >

                                                    <i class="fas fa-print me-1"></i>

                                                    Print

                                                </a>

                                            </div>

                                        </td>

                                    </tr>

                                `;

                            }
                        ).join('');

                })

                .catch(error => {

                    console.error(error);


                    historyBody.innerHTML = `

                        <tr>

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

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

                                Failed to load payment transactions.

                            </td>

                        </tr>

                    `;

                });

            }
        );


        /*
        |--------------------------------------------------------------------------
        | INITIAL LOAD
        |--------------------------------------------------------------------------
        */

        loadStudents();

    }
);

</script>

@endsection