@extends('backend.bursar.bursar_dashboard')

@section('bursar')

<style>
    .edit-bill-wrapper {
        padding: 25px;
        max-width: 1100px;
        margin: auto;
    }

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

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

    .edit-header p {
        margin: 7px 0 0;
        opacity: .85;
    }

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

    .student-card-title {
        font-weight: 700;
        font-size: 17px;
        color: #344054;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eaecf0;
    }

    .info-box {
        background: #f8fafc;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        padding: 15px;
        height: 100%;
    }

    .info-label {
        display: block;
        font-size: 12px;
        color: #667085;
        margin-bottom: 5px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .info-value {
        display: block;
        color: #344054;
        font-weight: 700;
        font-size: 15px;
    }

    .student-id {
        color: #198754;
    }

    .bill-card {
        background: #fff;
        border-radius: 16px;
        padding: 25px;
        box-shadow: 0 5px 20px rgba(0,0,0,.06);
        border: 1px solid #eaecf0;
    }

    .bill-card-title {
        font-weight: 700;
        font-size: 17px;
        color: #344054;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eaecf0;
    }

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

    .bill-input {
        min-height: 48px;
        border-radius: 10px;
        border: 1px solid #d0d5dd;
        font-size: 15px;
        font-weight: 600;
    }

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

    .total-box {
        background: #ecfdf3;
        border: 1px solid #abefc6;
        border-radius: 12px;
        padding: 18px 20px;
        margin-top: 10px;
    }

    .total-label {
        color: #027a48;
        font-size: 13px;
        font-weight: 600;
    }

    .total-value {
        color: #146c43;
        font-size: 25px;
        font-weight: 800;
        margin-top: 3px;
    }

    .action-area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 25px;
    }

    .back-btn,
    .update-btn {
        min-height: 46px;
        border-radius: 10px;
        font-weight: 600;
        padding: 0 20px;
    }

    .update-btn {
        min-width: 170px;
    }

    .spinner-border {
        width: 1rem;
        height: 1rem;
    }

    .error-message {
        color: #b42318;
        font-size: 13px;
        margin-top: 6px;
        display: none;
    }

    @media(max-width: 768px) {

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

        .edit-header {
            padding: 22px;
        }

        .student-card,
        .bill-card {
            padding: 18px;
        }

        .action-area {
            flex-direction: column-reverse;
            align-items: stretch;
        }

        .back-btn,
        .update-btn {
            width: 100%;
        }
    }
</style>

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

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

<div class="edit-header">

    <h3 style="color:white">
        <i class="fas fa-file-invoice-dollar me-2"></i>
        Edit Student Bill
    </h3>

    <p>
        Update the student's bill information for the selected term
        and academic session.
    </p>

</div>


{{-- ==========================================================
     STUDENT INFORMATION
=========================================================== --}}

<div class="student-card">

    <div class="student-card-title">

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

        Student Information

    </div>


    <div class="row g-3">

        {{-- STUDENT ID --}}

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

            <div class="info-box">

                <span class="info-label">
                    Student ID
                </span>

                <span class="info-value student-id">

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

                </span>

            </div>

        </div>


        {{-- FULL NAME --}}

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

            <div class="info-box">

                <span class="info-label">
                    Full Name
                </span>

                <span class="info-value">

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

                </span>

            </div>

        </div>


        {{-- CLASS --}}

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

            <div class="info-box">

                <span class="info-label">
                    Class
                </span>

                <span class="info-value">

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

                </span>

            </div>

        </div>


        {{-- TERM --}}

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

            <div class="info-box">

                <span class="info-label">
                    Term
                </span>

                <span class="info-value">

                    {{ $bill->term }}

                </span>

            </div>

        </div>


        {{-- SESSION --}}

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

            <div class="info-box">

                <span class="info-label">
                    Academic Session
                </span>

                <span class="info-value">

                    {{ $bill->session }}

                </span>

            </div>

        </div>

    </div>

</div>


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

<div class="bill-card">

    <div class="bill-card-title">

        <i class="fas fa-money-check-dollar text-success me-2"></i>

        Bill Details

    </div>


    <form id="updateBillForm">

        @csrf

        @method('PUT')


        <div class="row g-4">

            {{-- TUITION --}}

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

                <label class="bill-label">

                    <i class="fas fa-graduation-cap me-1 text-success"></i>

                    Tuition

                </label>

                <input
                    type="number"
                    name="tuition"
                    id="tuition"
                    class="form-control bill-input"
                    value="{{ $bill->tuition }}"
                    min="0"
                    step="0.01"
                   
                >

                <div
                    class="error-message"
                    id="tuitionError"
                ></div>

            </div>


            {{-- TRANSPORT --}}

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

                <label class="bill-label">

                    <i class="fas fa-bus me-1 text-success"></i>

                    Transport

                </label>

                <input
                    type="number"
                    name="transport"
                    id="transport"
                    class="form-control bill-input"
                    value="{{ $bill->transport }}"
                    min="0"
                    step="0.01"
                    
                >

                <div
                    class="error-message"
                    id="transportError"
                ></div>

            </div>


            {{-- OTHERS --}}

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

                <label class="bill-label">

                    <i class="fas fa-receipt me-1 text-success"></i>

                    Others

                </label>

                <input
                    type="number"
                    name="others"
                    id="others"
                    class="form-control bill-input"
                    value="{{ $bill->others }}"
                    min="0"
                    step="0.01"
                    
                >

                <div
                    class="error-message"
                    id="othersError"
                ></div>

            </div>


            {{-- BOARDING --}}

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

                <label class="bill-label">

                    <i class="fas fa-bed me-1 text-success"></i>

                    Boarding

                </label>

                <input
                    type="number"
                    name="boarding"
                    id="boarding"
                    class="form-control bill-input"
                    value="{{ $bill->boarding }}"
                    min="0"
                    step="0.01"
                    
                >

                <div
                    class="error-message"
                    id="boardingError"
                ></div>

            </div>


            {{-- TOTAL --}}

            <div class="col-12">

                <div class="total-box">

                    <div class="total-label">
                        TOTAL BILL
                    </div>

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

                </div>

            </div>

        </div>


        {{-- ==================================================
             ACTION BUTTONS
        =================================================== --}}

        <div class="action-area">

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

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

                Back to Manage Bills

            </a>


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

                <span id="updateButtonText">

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

                    Update Bill

                </span>

                <span
                    id="updateSpinner"
                    class="d-none"
                >

                    <span
                        class="spinner-border spinner-border-sm me-2"
                        role="status"
                    ></span>

                    Updating...

                </span>

            </button>

        </div>

    </form>

</div>

</div>

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

<script>

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

    const form =
        document.getElementById('updateBillForm');

    const updateButton =
        document.getElementById('updateBillButton');

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

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


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

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

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

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

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


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

    function formatMoney(value) {

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

    }


    /*
    |--------------------------------------------------------------------------
    | CALCULATE TOTAL
    |--------------------------------------------------------------------------
    */

    function calculateTotal() {

        const tuitionAmount =
            Number(tuition.value) || 0;

        const transportAmount =
            Number(transport.value) || 0;

        const othersAmount =
            Number(others.value) || 0;

        const boardingAmount =
            Number(boarding.value) || 0;


        const total =
            tuitionAmount +
            transportAmount +
            othersAmount +
            boardingAmount;


        totalBill.textContent =
            '₦' + formatMoney(total);

    }


    /*
    |--------------------------------------------------------------------------
    | UPDATE TOTAL WHEN INPUT CHANGES
    |--------------------------------------------------------------------------
    */

    [
        tuition,
        transport,
        others,
        boarding
    ].forEach(function (input) {

        input.addEventListener(
            'input',
            calculateTotal
        );

    });


    /*
    |--------------------------------------------------------------------------
    | INITIAL TOTAL
    |--------------------------------------------------------------------------
    */

    calculateTotal();


    /*
    |--------------------------------------------------------------------------
    | UPDATE BILL
    |--------------------------------------------------------------------------
    */

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

            event.preventDefault();


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

            updateButton.disabled = true;

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

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


            /*
            |--------------------------------------------------------------------------
            | CLEAR OLD ERRORS
            |--------------------------------------------------------------------------
            */

            document
                .querySelectorAll('.error-message')
                .forEach(function (element) {

                    element.style.display = 'none';

                    element.textContent = '';

                });


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

            fetch(
                "{{ route('bursar.manage.bill.update', $bill->id) }}",
                {

                    method: 'POST',

                    headers: {

                        'Accept':
                            'application/json',

                        'X-Requested-With':
                            'XMLHttpRequest',

                        'X-CSRF-TOKEN':
                            document.querySelector(
                                'input[name="_token"]'
                            ).value,

                        'Content-Type':
                            'application/json'

                    },

                    body: JSON.stringify({

                        _method: 'PUT',

                        tuition:
                            tuition.value,

                        transport:
                            transport.value,

                        others:
                            others.value,

                        boarding:
                            boarding.value

                    })

                }
            )

            .then(function (response) {

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

                        return {

                            status:
                                response.status,

                            ok:
                                response.ok,

                            data:
                                data

                        };

                    });

            })

            .then(function (result) {

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

                if (
                    result.status === 422 &&
                    result.data.errors
                ) {

                    Object.keys(
                        result.data.errors
                    ).forEach(function (field) {

                        const errorElement =
                            document.getElementById(
                                field + 'Error'
                            );

                        if (errorElement) {

                            errorElement.textContent =
                                result.data.errors[field][0];

                            errorElement.style.display =
                                'block';

                        }

                    });

                    return;

                }


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

                if (
                    !result.ok ||
                    !result.data.success
                ) {

                    throw new Error(
                        result.data.message ||
                        'Unable to update student bill.'
                    );

                }


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

                alert(
                    result.data.message ||
                    'Student bill updated successfully.'
                );


                /*
                |--------------------------------------------------------------------------
                | RETURN TO MANAGE BILL
                |--------------------------------------------------------------------------
                */

               

            })

            .catch(function (error) {

                console.error(error);

                alert(
                    error.message ||
                    'Something went wrong while updating the bill.'
                );

            })

            .finally(function () {

                updateButton.disabled = false;

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

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

            });

        }
    );

});

</script>

@endsection