@extends('backend.bursar.bursar_dashboard')

@section('bursar')

<style>

    .manage-bill-wrapper {
        padding: 25px;
    }

    .bill-header {
        background: linear-gradient(135deg, #198754, #146c43);
        border-radius: 16px;
        padding: 25px;
        color: #fff;
        margin-bottom: 25px;
        box-shadow: 0 8px 25px rgba(0,0,0,.08);
    }

    .bill-header h3 {
        margin: 0;
        font-weight: 700;
    }

    .bill-header p {
        margin: 5px 0 0;
        opacity: .85;
    }

    .filter-card {
        background: #fff;
        border-radius: 16px;
        padding: 25px;
        box-shadow: 0 5px 20px rgba(0,0,0,.06);
        margin-bottom: 25px;
    }

    .filter-label {
        font-weight: 600;
        color: #344054;
        margin-bottom: 8px;
    }

    .form-select {
        min-height: 46px;
        border-radius: 10px;
        border: 1px solid #d0d5dd;
    }

    .form-select:focus {
        border-color: #198754;
        box-shadow: 0 0 0 3px rgba(25,135,84,.12);
    }

    .summary-card {
        background: #f8fafc;
        border: 1px solid #e4e7ec;
        border-radius: 12px;
        padding: 15px 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .summary-title {
        color: #667085;
        font-size: 14px;
    }

    .summary-number {
        font-size: 24px;
        font-weight: 700;
        color: #198754;
    }

    .table-card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 5px 20px rgba(0,0,0,.06);
        overflow: hidden;
    }

    .table-card-header {
        padding: 20px 25px;
        border-bottom: 1px solid #eaecf0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .table-card-header h5 {
        margin: 0;
        font-weight: 700;
    }

    .table-responsive {
        overflow-x: auto;
    }

    #billTable {
        min-width: 1350px;
        margin: 0;
    }

    #billTable thead th {
        background: #198754;
        color: #fff;
        white-space: nowrap;
        padding: 14px 12px;
        font-size: 13px;
        border: none;
        vertical-align: middle;
    }

    #billTable tbody td {
        padding: 13px 12px;
        vertical-align: middle;
        white-space: nowrap;
        border-bottom: 1px solid #f0f2f5;
    }

    #billTable tbody tr:hover {
        background: #f8fafc;
    }

    .student-id {
        font-weight: 700;
        color: #198754;
    }

    .student-name {
        font-weight: 600;
        color: #344054;
    }

    .amount {
        font-weight: 600;
        color: #344054;
    }

    .total-amount {
        font-weight: 800;
        color: #198754;
    }

    /*
    |--------------------------------------------------------------------------
    | OUTSTANDING
    |--------------------------------------------------------------------------
    */

    .outstanding-amount {
        font-weight: 800;
        color: #dc3545;
    }

    .outstanding-zero {
        font-weight: 700;
        color: #198754;
    }

    .badge-term {
        background: #ecfdf3;
        color: #027a48;
        padding: 6px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .badge-session {
        background: #eff8ff;
        color: #175cd3;
        padding: 6px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .edit-btn {
        border-radius: 8px;
        font-weight: 600;
    }

    .empty-state {
        padding: 60px 20px;
        text-align: center;
        color: #667085;
    }

    .empty-state i {
        font-size: 45px;
        margin-bottom: 15px;
        color: #98a2b3;
    }

    .loading-state {
        padding: 60px;
        text-align: center;
    }

    .spinner-border {
        color: #198754;
    }

    @media(max-width: 768px) {

        .manage-bill-wrapper {
            padding: 15px;
        }

        .bill-header {
            padding: 20px;
        }

        .filter-card {
            padding: 18px;
        }

        .table-card-header {
            padding: 18px;
        }

    }

</style>


<div class="manage-bill-wrapper">

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

    <div class="bill-header">

        <h3 style="color:white">

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

            Manage Student Bills

        </h3>

        <p>
            View, review and edit student bills by class, term and session.
        </p>

    </div>


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

    <div class="filter-card">

        <div class="row g-4">

            {{-- CLASS --}}

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

                <label class="filter-label">

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

                    Select Class

                </label>

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

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

                    @foreach($classes as $class)

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

                            {{ $class->class_name }}

                        </option>

                    @endforeach

                </select>

            </div>


            {{-- TERM --}}

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

                <label class="filter-label">

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

                    Select Term

                </label>

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

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

                    @foreach($terms as $term)

                        @php

                            $termValue =
                                $term->name
                                ?? $term->term_name
                                ?? $term->term
                                ?? '';

                        @endphp

                        <option value="{{ $termValue }}">

                            {{ $termValue }}

                        </option>

                    @endforeach

                </select>

            </div>


            {{-- SESSION --}}

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

                <label class="filter-label">

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

                    Select Session

                </label>

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

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

                    @foreach($sessions as $session)

                        @php

                            $sessionValue =
                                $session->name
                                ?? $session->session_name
                                ?? $session->session
                                ?? '';

                        @endphp

                        <option value="{{ $sessionValue }}">

                            {{ $sessionValue }}

                        </option>

                    @endforeach

                </select>

            </div>

        </div>

    </div>


    {{-- ==========================================================
         SUMMARY
    =========================================================== --}}

    <div
        class="summary-card"
        id="billSummary"
        style="display:none;"
    >

        <div>

            <div class="summary-title">
                Total Students With Bills
            </div>

            <div
                class="summary-number"
                id="totalBillStudents"
            >
                0
            </div>

        </div>


        <div>

            <span
                class="badge bg-success"
                id="selectedBillInfo"
            >
                Ready
            </span>

        </div>

    </div>


    {{-- ==========================================================
         TABLE CARD
    =========================================================== --}}

    <div class="table-card">

        <div class="table-card-header">

            <div>

                <h5>

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

                    Student Bills

                </h5>

            </div>

        </div>


        <div class="table-responsive">

            <table
                class="table"
                id="billTable"
            >

                <thead>

                    <tr>

                        <th>S/N</th>

                        <th>Student ID</th>

                        <th>Full Name</th>

                        <th>Class</th>

                        {{-- NEW COLUMN --}}

                        <th>Outstanding</th>

                        <th>
                            Advance Payment
                        </th>

                        <th>Tuition</th>

                        <th>Transport</th>

                        <th>Others</th>

                        <th>Boarding</th>

                        <th>Total</th>

                        <th>Term</th>

                        <th>Session</th>

                        <th>Action</th>

                    </tr>

                </thead>


                <tbody id="billTableBody">

                    <tr>

                        <td
                            colspan="13"
                            class="empty-state"
                        >

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

                            <div>

                                Select a class, term and session
                                to view student bills.

                            </div>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>


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

<script>

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


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


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


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


        const tableBody =
            document.getElementById(
                'billTableBody'
            );


        const summary =
            document.getElementById(
                'billSummary'
            );


        const totalStudents =
            document.getElementById(
                'totalBillStudents'
            );


        const selectedInfo =
            document.getElementById(
                'selectedBillInfo'
            );


        /*
        |--------------------------------------------------------------------------
        | LOAD BILLS
        |--------------------------------------------------------------------------
        */

        function loadBills() {


            const classId =
                classSelect.value;


            const term =
                termSelect.value;


            const session =
                sessionSelect.value;


            /*
            |--------------------------------------------------------------------------
            | VALIDATION
            |--------------------------------------------------------------------------
            */

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

                summary.style.display =
                    'none';


                tableBody.innerHTML = `

                    <tr>

                        <td
                            colspan="13"
                            class="empty-state"
                        >

                            <i class="fas fa-filter"></i>

                            <div>

                                Select class, term and session
                                to view student bills.

                            </div>

                        </td>

                    </tr>

                `;

                return;

            }


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

            tableBody.innerHTML = `

                <tr>

                    <td
                        colspan="13"
                        class="loading-state"
                    >

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

                        <div class="mt-3">

                            Loading student bills...

                        </div>

                    </td>

                </tr>

            `;


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

            fetch(

                "{{ route('bursar.manage.bill.data') }}"
                +
                "?class_id="
                +
                encodeURIComponent(classId)
                +
                "&term="
                +
                encodeURIComponent(term)
                +
                "&session="
                +
                encodeURIComponent(session),

                {

                    method: 'GET',

                    headers: {

                        'Accept':
                            'application/json',

                        'X-Requested-With':
                            'XMLHttpRequest'

                    }

                }

            )

            .then(response => {

                if (!response.ok) {

                    throw new Error(
                        'Unable to load student bills.'
                    );

                }

                return response.json();

            })

            .then(data => {


                if (!data.success) {

                    throw new Error(
                        'Unable to retrieve bills.'
                    );

                }


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

                summary.style.display =
                    'flex';


                totalStudents.textContent =
                    data.total_students;


                selectedInfo.textContent =
                    term
                    +
                    ' • '
                    +
                    session;


                /*
                |--------------------------------------------------------------------------
                | EMPTY
                |--------------------------------------------------------------------------
                */

                if (!data.bills.length) {

                    tableBody.innerHTML = `

                        <tr>

                            <td
                                colspan="13"
                                class="empty-state"
                            >

                                <i
                                    class="fas fa-file-circle-xmark"
                                ></i>

                                <div>

                                    No bills found for the
                                    selected class, term and session.

                                </div>

                            </td>

                        </tr>

                    `;

                    return;

                }


                /*
                |--------------------------------------------------------------------------
                | BUILD TABLE
                |--------------------------------------------------------------------------
                */

                let html = '';


                data.bills.forEach(
                    function (
                        bill,
                        index
                    ) {


                        const outstanding =
                            Number(
                                bill.outstanding
                            )
                            || 0;


                        let outstandingHtml;


                        if (
                            outstanding > 0
                        ) {

                            outstandingHtml = `

                                <span
                                    class="outstanding-amount"
                                >

                                    ₦${formatMoney(
                                        outstanding
                                    )}

                                </span>

                            `;

                        } else {

                            outstandingHtml = `

                                <span
                                    class="outstanding-zero"
                                >

                                    ₦0.00

                                </span>

                            `;

                        }


                        html += `

                            <tr>


                                <td>

                                    <strong>

                                        ${index + 1}

                                    </strong>

                                </td>


                                <td>

                                    <span
                                        class="student-id"
                                    >

                                        ${bill.student_id ?? 'N/A'}

                                    </span>

                                </td>


                                <td>

                                    <span
                                        class="student-name"
                                    >

                                        ${bill.name ?? 'N/A'}

                                    </span>

                                </td>


                                <td>

                                    ${bill.class ?? 'N/A'}

                                </td>


                                {{-- OUTSTANDING BROUGHT FORWARD --}}

                                <td>

                                    ${outstandingHtml}

                                </td>

                       {{-- ADVANCE BROUGHT FORWARD --}}

                                <td class="amount">
                                
                                    ${
                                        Number(
                                            bill.advance_payment || 0
                                        ) > 0
                                
                                        ? `
                                            <span class="text-success fw-bold">
                                
                                                ₦${formatMoney(
                                                    bill.advance_payment
                                                )}
                                
                                            </span>
                                        `
                                
                                        : `
                                            <span class="text-muted">
                                
                                                ₦0.00
                                
                                            </span>
                                        `
                                    }
                                
                                </td>

                                <td class="amount">

                                    ₦${formatMoney(
                                        bill.tuition
                                    )}

                                </td>


                                <td class="amount">

                                    ₦${formatMoney(
                                        bill.transport
                                    )}

                                </td>


                                <td class="amount">

                                    ₦${formatMoney(
                                        bill.others
                                    )}

                                </td>


                                <td class="amount">

                                    ₦${formatMoney(
                                        bill.boarding
                                    )}

                                </td>


                                <td class="total-amount">

                                    ₦${formatMoney(
                                        bill.total
                                    )}

                                </td>


                                <td>

                                    <span
                                        class="badge-term"
                                    >

                                        ${bill.term}

                                    </span>

                                </td>


                                <td>

                                    <span
                                        class="badge-session"
                                    >

                                        ${bill.session}

                                    </span>

                                </td>


                                <td>


                                    <a
                                        href="/CbtApp/public/bursar/manage-bill/${bill.id}/edit"
                                        class="btn btn-sm btn-success edit-btn"
                                    >

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

                                        Edit

                                    </a>


                                </td>


                            </tr>

                        `;

                    }
                );


                tableBody.innerHTML =
                    html;


            })


            .catch(error => {


                console.error(error);


                tableBody.innerHTML = `

                    <tr>

                        <td
                            colspan="13"
                            class="empty-state text-danger"
                        >

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

                            <div>

                                ${error.message}

                            </div>

                        </td>

                    </tr>

                `;

            });

        }


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

        function formatMoney(value) {

            const number =
                Number(value)
                || 0;


            return number.toLocaleString(

                'en-NG',

                {

                    minimumFractionDigits: 2,

                    maximumFractionDigits: 2

                }

            );

        }


        /*
        |--------------------------------------------------------------------------
        | CHANGE EVENTS
        |--------------------------------------------------------------------------
        */

        classSelect.addEventListener(
            'change',
            loadBills
        );


        termSelect.addEventListener(
            'change',
            loadBills
        );


        sessionSelect.addEventListener(
            'change',
            loadBills
        );


    }
);

</script>

@endsection