@extends('backend.bursar.bursar_dashboard')
@section('bursar')

<style>
    .bursary-page {
        padding: 25px 0 50px;
    }

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

    .bursary-header h3 {
        font-weight: 700;
        margin-bottom: 5px;
    }

    .bursary-header p {
        margin: 0;
        opacity: .85;
    }

    .bill-card {
        border: none;
        border-radius: 18px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, .07);
        overflow: hidden;
        margin-bottom: 25px;
    }

    .bill-card .card-header {
        background: #fff;
        border-bottom: 1px solid #edf0f2;
        padding: 20px 25px;
    }

    .bill-card .card-header h5 {
        margin: 0;
        font-weight: 700;
        color: #212529;
    }

    .bill-card .card-body {
        padding: 25px;
    }

    .form-label {
        font-weight: 600;
        color: #343a40;
        margin-bottom: 8px;
    }

    .form-control,
    .form-select {
        min-height: 48px;
        border-radius: 10px;
        border: 1px solid #dee2e6;
    }

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

    .bill-type-box {
        background: #f8faf9;
        border: 1px solid #e8eeeb;
        border-radius: 14px;
        padding: 18px;
        height: 100%;
    }

    .bill-type-box label {
        font-weight: 600;
    }

    .amount-input {
        font-weight: 600;
    }

    .total-box {
        background: linear-gradient(135deg, #f1faf5, #e8f7ef);
        border: 1px solid #cfe9da;
        border-radius: 15px;
        padding: 20px;
        text-align: center;
        height: 100%;
    }

    .total-box small {
        display: block;
        color: #527064;
        font-weight: 600;
        margin-bottom: 5px;
    }

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

    .student-section {
        display: none;
    }

    .student-toolbar {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
    }

    .student-search {
        min-height: 45px;
    }

    .student-count {
        font-weight: 600;
        color: #198754;
    }

    .students-table-wrapper {
        max-height: 430px;
        overflow-y: auto;
        border: 1px solid #e9ecef;
        border-radius: 12px;
    }

    .students-table {
        margin-bottom: 0;
    }

    .students-table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #198754;
        color: #fff;
        border: none;
        padding: 13px;
        white-space: nowrap;
    }

    .students-table tbody td {
        vertical-align: middle;
        padding: 12px;
    }

    .students-table tbody tr:hover {
        background: #f7fbf9;
    }

    .student-check {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .already-billed {
        background: #fff8e1 !important;
    }

    .already-billed-badge {
        font-size: 11px;
    }

    .submit-section {
        background: #f8f9fa;
        border-radius: 15px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .selected-summary strong {
        color: #198754;
    }

    .btn-add-bill {
        min-height: 48px;
        padding: 0 28px;
        border-radius: 10px;
        font-weight: 700;
    }

    .loading-box {
        text-align: center;
        padding: 45px 20px;
        color: #6c757d;
    }

    .empty-box {
        text-align: center;
        padding: 45px 20px;
        color: #6c757d;
    }

    .empty-box i,
    .loading-box i {
        font-size: 38px;
        margin-bottom: 12px;
        color: #198754;
    }

    .required-star {
        color: #dc3545;
    }

    @media(max-width: 767px) {

        .bursary-header {
            padding: 20px;
            border-radius: 14px;
        }

        .bill-card .card-body {
            padding: 18px;
        }

        .total-amount {
            font-size: 24px;
        }

        .submit-section {
            align-items: stretch;
        }

        .btn-add-bill {
            width: 100%;
        }
    }
</style>

<div class="container-fluid bursary-page">


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

<div class="bursary-header">

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

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

        <div>
            <h3 style="color:white">Add Student Bill</h3>

            <p>
                Create tuition and other charges for students
                by class, term and academic session.
            </p>
        </div>

    </div>

</div>


{{-- ==========================================================
     BILL FORM
=========================================================== --}}

<form id="addBillForm">

    @csrf

    {{-- ======================================================
         ACADEMIC INFORMATION
    ======================================================= --}}

    <div class="card bill-card">

        <div class="card-header">

            <h5>
                <i class="fas fa-graduation-cap text-success me-2"></i>
                Academic Information
            </h5>

        </div>

        <div class="card-body">

            <div class="row g-4">

                {{-- CLASS --}}

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

                    <label class="form-label">
                        Class
                        <span class="required-star">*</span>
                    </label>

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

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

                        @foreach($classes as $class)

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

                        @endforeach

                    </select>

                </div>


                {{-- TERM --}}

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

                    <label class="form-label">
                        Term
                        <span class="required-star">*</span>
                    </label>

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

                        <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-lg-4">

                    <label class="form-label">
                        Academic Session
                        <span class="required-star">*</span>
                    </label>

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

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

    </div>


    {{-- ======================================================
         BILL INFORMATION
    ======================================================= --}}

    <div class="card bill-card">

        <div class="card-header">

            <h5>
                <i class="fas fa-money-check-alt text-success me-2"></i>
                Bill Information
            </h5>

        </div>

        <div class="card-body">

            <div class="row g-3">

                {{-- TUITION --}}

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

                    <div class="bill-type-box">

                        <label class="form-label">
                            Tuition
                        </label>

                        <div class="input-group">

                            <span class="input-group-text">
                                ₦
                            </span>

                            <input
                                type="number"
                                name="tuition"
                                id="tuition"
                                class="form-control amount-input bill-amount"
                                min="0"
                                step="0.01"
                                value="0"
                                placeholder="0.00"
                            >

                        </div>

                    </div>

                </div>


                {{-- TRANSPORT --}}

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

                    <div class="bill-type-box">

                        <label class="form-label">
                            Transport
                        </label>

                        <div class="input-group">

                            <span class="input-group-text">
                                ₦
                            </span>

                            <input
                                type="number"
                                name="transport"
                                id="transport"
                                class="form-control amount-input bill-amount"
                                min="0"
                                step="0.01"
                                value="0"
                                placeholder="0.00"
                            >

                        </div>

                    </div>

                </div>


                {{-- OTHERS --}}

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

                    <div class="bill-type-box">

                        <label class="form-label">
                            Others
                        </label>

                        <div class="input-group">

                            <span class="input-group-text">
                                ₦
                            </span>

                            <input
                                type="number"
                                name="others"
                                id="others"
                                class="form-control amount-input bill-amount"
                                min="0"
                                step="0.01"
                                value="0"
                                placeholder="0.00"
                            >

                        </div>

                    </div>

                </div>


                {{-- BOARDING --}}

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

                    <div class="bill-type-box">

                        <label class="form-label">
                            Boarding
                        </label>

                        <div class="input-group">

                            <span class="input-group-text">
                                ₦
                            </span>

                            <input
                                type="number"
                                name="boarding"
                                id="boarding"
                                class="form-control amount-input bill-amount"
                                min="0"
                                step="0.01"
                                value="0"
                                placeholder="0.00"
                            >

                        </div>

                    </div>

                </div>

            </div>


            {{-- TOTAL --}}

            <div class="row mt-4">

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

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

                    <div class="total-box">

                        <small>
                            TOTAL BILL PER STUDENT
                        </small>

                        <div
                            class="total-amount"
                            id="totalBill"
                        >
                            ₦0.00
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- ======================================================
         STUDENTS
    ======================================================= --}}

    <div
        class="card bill-card student-section"
        id="studentSection"
    >

        <div class="card-header">

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

                <h5>
                    <i class="fas fa-users text-success me-2"></i>
                    Select Students
                </h5>

                <span
                    class="student-count"
                    id="studentCount"
                >
                    0 Students
                </span>

            </div>

        </div>

        <div class="card-body">


            {{-- TOOLBAR --}}

            <div class="student-toolbar">

                <div class="row align-items-center g-3">

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

                        <div class="input-group">

                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>

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

                        </div>

                    </div>


                    <div class="col-md-5 text-md-end">

                        <button
                            type="button"
                            class="btn btn-outline-success btn-sm"
                            id="selectAllStudents"
                        >
                            <i class="fas fa-check-double me-1"></i>
                            Select All
                        </button>

                        <button
                            type="button"
                            class="btn btn-outline-secondary btn-sm"
                            id="unselectAllStudents"
                        >
                            <i class="fas fa-times me-1"></i>
                            Clear All
                        </button>

                    </div>

                </div>

            </div>


            {{-- LOADING --}}

            <div
                id="studentLoading"
                class="loading-box"
            >

                <i class="fas fa-spinner fa-spin"></i>

                <div>
                    Loading students...
                </div>

            </div>


            {{-- EMPTY --}}

            <div
                id="studentEmpty"
                class="empty-box"
                style="display:none;"
            >

                <i class="fas fa-user-graduate"></i>

                <h6>
                    No students found
                </h6>

                <p class="mb-0">
                    There are no active students in this class.
                </p>

            </div>


            {{-- TABLE --}}

            <div
                class="students-table-wrapper"
                id="studentsTableWrapper"
                style="display:none;"
            >

                <table
                    class="table students-table"
                    id="studentsTable"
                >

                    <thead>

                        <tr>

                            <th width="50">
                                #
                            </th>

                            <th width="50">
                                <input
                                    type="checkbox"
                                    id="masterStudentCheckbox"
                                    class="student-check"
                                >
                            </th>

                            <th>
                                Student ID
                            </th>

                            <th>
                                Full Name
                            </th>


                            <th>
    Outstanding
</th>

<th>
    Advance Payment
</th>

<th>
    Status
</th>

                        </tr>

                    </thead>

                    <tbody id="studentsBody">

                    </tbody>

                </table>

            </div>


            {{-- SUBMIT --}}

            <div
                class="submit-section mt-4"
                id="submitSection"
                style="display:none;"
            >

                <div class="selected-summary">

                    <div>
                        Selected Students:
                        <strong id="selectedStudentsCount">
                            0
                        </strong>
                    </div>

                    <small class="text-muted">
                        The bill above will be applied to every selected student.
                    </small>

                </div>


                <button
                    type="submit"
                    class="btn btn-success btn-add-bill"
                    id="saveBillButton"
                >

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

                    Add Bill

                </button>

            </div>

        </div>

    </div>

</form>


</div>

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

<script>

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

    const classSelect = document.getElementById('class_id');
    const termSelect = document.getElementById('term');
    const sessionSelect = document.getElementById('session');

    const studentSection =
        document.getElementById('studentSection');

    const studentLoading =
        document.getElementById('studentLoading');

    const studentEmpty =
        document.getElementById('studentEmpty');

    const studentsTableWrapper =
        document.getElementById('studentsTableWrapper');

    const studentsBody =
        document.getElementById('studentsBody');

    const studentCount =
        document.getElementById('studentCount');

    const studentSearch =
        document.getElementById('studentSearch');

    const masterCheckbox =
        document.getElementById('masterStudentCheckbox');

    const selectedStudentsCount =
        document.getElementById('selectedStudentsCount');

    const submitSection =
        document.getElementById('submitSection');

    const addBillForm =
        document.getElementById('addBillForm');

    const saveBillButton =
        document.getElementById('saveBillButton');


    let students = [];


    /* ==========================================================
       FORMAT MONEY
    =========================================================== */

    function formatMoney(amount) {

        return new Intl.NumberFormat(
            'en-NG',
            {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }
        ).format(amount);

    }


    /* ==========================================================
       CALCULATE TOTAL
    =========================================================== */

    function calculateTotal() {

        let tuition =
            parseFloat(
                document.getElementById('tuition').value
            ) || 0;

        let transport =
            parseFloat(
                document.getElementById('transport').value
            ) || 0;

        let others =
            parseFloat(
                document.getElementById('others').value
            ) || 0;

        let boarding =
            parseFloat(
                document.getElementById('boarding').value
            ) || 0;


        let total =
            tuition +
            transport +
            others +
            boarding;


        document.getElementById('totalBill').innerHTML =
            '₦' + formatMoney(total);

    }


    document
        .querySelectorAll('.bill-amount')
        .forEach(function (input) {

            input.addEventListener(
                'input',
                calculateTotal
            );

        });


    /* ==========================================================
       LOAD STUDENTS
    =========================================================== */

    function loadStudents() {

        const classId = classSelect.value;
        const term = termSelect.value;
        const session = sessionSelect.value;


        studentsBody.innerHTML = '';

        students = [];

        masterCheckbox.checked = false;


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

            studentSection.style.display = 'none';

            return;
        }


        studentSection.style.display = 'block';

        studentLoading.style.display = 'block';

        studentEmpty.style.display = 'none';

        studentsTableWrapper.style.display = 'none';

        submitSection.style.display = 'none';


        fetch(
            "{{ route('bursar.bills.students') }}"
            + '?class_id=' + encodeURIComponent(classId)
            + '&term=' + encodeURIComponent(term)
            + '&session=' + encodeURIComponent(session),
            {
                method: 'GET',

                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            }
        )
        .then(function (response) {

            if (!response.ok) {
                throw new Error(
                    'No students have been assigned to this class for the selected term and academic session yet.'
                );
            }

            return response.json();

        })
        .then(function (data) {

            studentLoading.style.display = 'none';


            if (
                !data.success ||
                !data.students ||
                data.students.length === 0
            ) {

                studentEmpty.style.display = 'block';

                studentCount.innerText =
                    '0 Students';

                return;
            }


            students = data.students;


            studentCount.innerText =
                data.total_students
                + (
                    data.total_students === 1
                    ? ' Student'
                    : ' Students'
                );


            renderStudents(students);

        })
        .catch(function (error) {

            studentLoading.style.display = 'none';

            studentEmpty.style.display = 'block';

            studentEmpty.innerHTML = `

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

                <h6>
                    Unable to load students
                </h6>

                <p class="mb-0 text-danger">
                    ${error.message}
                </p>

            `;

        });

    }


    /* ==========================================================
       RENDER STUDENTS
    =========================================================== */

    function renderStudents(list) {

        studentsBody.innerHTML = '';


        if (list.length === 0) {

            studentsTableWrapper.style.display = 'none';

            studentEmpty.style.display = 'block';

            submitSection.style.display = 'none';

            return;
        }


        studentEmpty.style.display = 'none';

        studentsTableWrapper.style.display = 'block';

        submitSection.style.display = 'flex';


        list.forEach(function (student, index) {

            const row =
                document.createElement('tr');


            if (student.already_billed) {

                row.classList.add(
                    'already-billed'
                );

            }


            row.innerHTML = `

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

                <td>

                    ${
                        student.already_billed

                        ? ''

                        : `
                            <input
                                type="checkbox"
                                class="student-check student-checkbox"
                                name="students[]"
                                value="${student.id}"
                            >
                        `
                    }

                </td>

                <td>
                    <strong>
                         ${student.student_id ?? 'N/A'}
                    </strong>
                </td>

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

                <td>

    ${
        Number(student.outstanding || 0) > 0

        ? `
            <span class="text-danger fw-bold">
                ₦${formatMoney(student.outstanding)}
            </span>
        `

        : `
            <span class="text-success fw-bold">
                ₦0.00
            </span>
        `
    }

</td>

<td>

    ${
        Number(
            student.advance_payment || 0
        ) > 0

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

                ₦${formatMoney(
                    student.advance_payment
                )}

            </span>

            <br>

            <small class="text-success">

                Available Advance

            </small>
        `

        : `
            <span class="text-muted">

                ₦0.00

            </span>
        `
    }

</td>



                <td>

                    ${
                        student.already_billed

                        ? `
                            <span class="badge bg-warning text-dark already-billed-badge">
                                Already Billed
                            </span>
                        `

                        : `
                            <span class="badge bg-success-subtle text-success">
                                Available
                            </span>
                        `
                    }

                </td>

            `;


            studentsBody.appendChild(row);

        });


        updateSelectedCount();

    }


    /* ==========================================================
       SELECT ALL
    =========================================================== */

    document
        .getElementById('selectAllStudents')
        .addEventListener(
            'click',
            function () {

                document
                    .querySelectorAll('.student-checkbox')
                    .forEach(function (checkbox) {

                        checkbox.checked = true;

                    });


                masterCheckbox.checked = true;

                updateSelectedCount();

            }
        );


    /* ==========================================================
       CLEAR ALL
    =========================================================== */

    document
        .getElementById('unselectAllStudents')
        .addEventListener(
            'click',
            function () {

                document
                    .querySelectorAll('.student-checkbox')
                    .forEach(function (checkbox) {

                        checkbox.checked = false;

                    });


                masterCheckbox.checked = false;

                updateSelectedCount();

            }
        );


    /* ==========================================================
       MASTER CHECKBOX
    =========================================================== */

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

            document
                .querySelectorAll('.student-checkbox')
                .forEach(function (checkbox) {

                    checkbox.checked =
                        masterCheckbox.checked;

                });


            updateSelectedCount();

        }
    );


    /* ==========================================================
       STUDENT CHECKBOX CHANGE
    =========================================================== */

    studentsBody.addEventListener(
        'change',
        function (event) {

            if (
                event.target.classList.contains(
                    'student-checkbox'
                )
            ) {

                updateSelectedCount();

            }

        }
    );


    /* ==========================================================
       UPDATE SELECTED COUNT
    =========================================================== */

    function updateSelectedCount() {

        const checked =
            document.querySelectorAll(
                '.student-checkbox:checked'
            ).length;


        selectedStudentsCount.innerText =
            checked;


        const all =
            document.querySelectorAll(
                '.student-checkbox'
            );


        masterCheckbox.checked =
            all.length > 0 &&
            checked === all.length;

    }


    /* ==========================================================
       SEARCH STUDENTS
    =========================================================== */

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

            const search =
                this.value
                    .toLowerCase()
                    .trim();


            if (!search) {

                renderStudents(students);

                return;
            }


            const filtered =
                students.filter(function (student) {

                    return (

                        student.name
                            .toLowerCase()
                            .includes(search)

                        ||

                        String(student.student_id)
                            .toLowerCase()
                            .includes(search)

                    );

                });


            renderStudents(filtered);

        }
    );


    /* ==========================================================
       LOAD WHEN ACADEMIC INFORMATION CHANGES
    =========================================================== */

    classSelect.addEventListener(
        'change',
        loadStudents
    );

    termSelect.addEventListener(
        'change',
        loadStudents
    );

    sessionSelect.addEventListener(
        'change',
        loadStudents
    );


    /* ==========================================================
       SUBMIT BILL
    =========================================================== */

    addBillForm.addEventListener(
        'submit',
        function (event) {

            event.preventDefault();


            const checkedStudents =
                document.querySelectorAll(
                    '.student-checkbox:checked'
                );


            if (checkedStudents.length === 0) {

                alert(
                    'Please select at least one student.'
                );

                return;
            }


            const total =
                (
                    parseFloat(
                        document.getElementById('tuition').value
                    ) || 0
                )
                +
                (
                    parseFloat(
                        document.getElementById('transport').value
                    ) || 0
                )
                +
                (
                    parseFloat(
                        document.getElementById('others').value
                    ) || 0
                )
                +
                (
                    parseFloat(
                        document.getElementById('boarding').value
                    ) || 0
                );


            if (total <= 0) {

                alert(
                    'Please enter at least one bill amount.'
                );

                return;
            }


            saveBillButton.disabled = true;


            saveBillButton.innerHTML = `

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

                Saving...

            `;


            const formData =
                new FormData(addBillForm);


            fetch(
                "{{ route('bursar.bills.store') }}",
                {
                    method: 'POST',

                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },

                    body: formData
                }
            )
            .then(function (response) {

                return response.json()
                    .then(function (data) {

                        return {
                            status: response.status,
                            data: data
                        };

                    });

            })
            .then(function (result) {

                saveBillButton.disabled = false;

                saveBillButton.innerHTML = `

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

                    Add Bill

                `;


                if (
                    result.status >= 200 &&
                    result.status < 300 &&
                    result.data.success
                ) {

                    alert(
                        result.data.message
                    );


                    /*
                    |--------------------------------------------------------------------------
                    | Reload students
                    |--------------------------------------------------------------------------
                    */

                    loadStudents();

                    /*
                    |--------------------------------------------------------------------------
                    | Reset amount fields
                    |--------------------------------------------------------------------------
                    */

                    document.getElementById(
                        'tuition'
                    ).value = 0;

                    document.getElementById(
                        'transport'
                    ).value = 0;

                    document.getElementById(
                        'others'
                    ).value = 0;

                    document.getElementById(
                        'boarding'
                    ).value = 0;


                    calculateTotal();

                } else {

                    let message =
                        'Unable to save bill.';


                    if (
                        result.data.errors
                    ) {

                        message =
                            Object.values(
                                result.data.errors
                            )
                            .flat()
                            .join('\n');

                    }


                    alert(message);

                }

            })
            .catch(function (error) {

                console.error(error);

                saveBillButton.disabled = false;

                saveBillButton.innerHTML = `

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

                    Add Bill

                `;

                alert(
                    'An unexpected error occurred while saving the bill.'
                );

            });

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Initial calculation
    |--------------------------------------------------------------------------
    */

    calculateTotal();

});

</script>

@endsection