@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Add Class</title>

<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .multiSelect .bootstrap-select {
        width: 100% !important;
    }

    .multiSelect .dropdown-toggle {
        width: 100%;
        padding: 0.4375rem 0.875rem;
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.53;
        color: #697a8d;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #d9dee3;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0.375rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .btn-light:hover {
        transform: none;
    }

    .multiSelect button.dropdown-toggle:focus {
        outline: none !important;
        box-shadow: none;
    }

    .multiSelect .as-searchbox {
        padding: 6px 10px 11px;
    }

    .multiSelect .inner .dropdown-menu {
        transform: none !important;
    }
</style>

@section('main-content')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="{{ URL::asset('assets/multi_select/multiselect_style.css') }}">

    <style>
        .input {
            color: #697a8d;
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #loader img {
            width: 30px;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }
    </style>
    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Generate Fee Request</h4>
            <!-- Basic Layout -->
            <div class="row" id="person_1">
                <div class="col-xl">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="">
                                    <h5 class="">Class Details</h5>
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Student Name</label>
                                    <select name="student_id" id="student_id"
                                        class="form-control form-select form-control-line" onchange="getFees(this.value)">
                                        <option value="" selected disabled>Select Class</option>
                                        @foreach ($students as $student)
                                            <option id="studet_id_{{ $student->id }}" value="{{ $student->uuid }}">
                                                {{ $student->first_name }} {{ $student->last_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>



                            <div class="mb-3">
                                <label class="form-label remove_req_class_msg" for="basic-icon-default-email"><b>* Student
                                        is
                                        required to unlock following fields *</b></label><br />
                                <label class="form-label" for="basic-icon-default-email"><b>Attach Fees Plan</b></label>
                                <div class="accordion mt-3" id="accordionExample">
                                    <div class="card accordion-item">
                                        <h2 class="accordion-header" id="headingThree">
                                            <button type="button"
                                                class="disabledColor accordion-button collapsed my-accordian-button"
                                                data-bs-toggle="collapse" data-bs-target="#accordionThree"
                                                aria-expanded="false" aria-controls="accordionThree" disabled>
                                                One Type Fees
                                            </button>
                                        </h2>
                                        <div id="accordionThree" class="accordion-collapse collapse"
                                            aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                            <div class="accordion-body row">
                                                <div class="input-group col">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value=""
                                                            id="reg_fees" />
                                                        <label class="form-check-label" for="reg_fees"> Portal Registration
                                                            Fee
                                                        </label>
                                                        <p class="mt-2 fee hide_this_class">₹ <span id="reg_fee"></span>
                                                        </p>
                                                        <div id="reg_fees_discount_div" class="d-none">
                                                            <label class="form-check-label">Discount:</label>
                                                            <input type="text" class="form-control input"
                                                                id="reg_fees_discount_input"
                                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                                pattern="[0-9]{1}[0-9]{9}" value="0" />
                                                            <div class="mt-2 mb-2" id="new_reg_fees"></div>
                                                        </div>
                                                        <div id="reg_fees_due_date_div" style="display: none">
                                                            <label class="form-check-label">Portal Registration Fee Due
                                                                Date:</label>
                                                            <input type="text" name="reg_fees_due_date_div"
                                                                id="reg_fees_due_date"
                                                                class="form-control input form-control-line bg-white"
                                                                placeholder="Select Due Date" readonly autocomplete="off">
                                                            <div class="mt-2 mb-2" id="new_reg_fees"></div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="input-group col">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value=""
                                                            id="admission_form_fees" />
                                                        <label class="form-check-label" for="admission_form_fees"> Admission
                                                            Form Fee
                                                        </label>
                                                        <p class="mt-2 fee hide_this_class">₹ <span
                                                                id="admission_form_fee"></span>
                                                        </p>
                                                        <div id="admission_form_fees_discount_div" class="d-none">
                                                            <label class="form-check-label">Discount:</label>
                                                            <input type="text" class="form-control input"
                                                                id="admission_form_fees_discount_input"
                                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                                pattern="[0-9]{1}[0-9]{9}" />
                                                            <div class="mt-2 mb-2" id="new_admission_form_fees"></div>
                                                        </div>
                                                        <div id="admission_form_fees_due_date_div" style="display: none">
                                                            <label class="form-check-label">Admission Form Fee Due
                                                                Date:</label>
                                                            <input type="text" name="admission_form_fees_due_date_div"
                                                                id="admission_form_fees_due_date"
                                                                class="form-control input form-control-line bg-white"
                                                                placeholder="Select Due Date" readonly autocomplete="off">
                                                            <div class="mt-2 mb-2" id="new_admission_form_fees"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="input-group col">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value=""
                                                            id="miscellaneous_fees" />
                                                        <label class="form-check-label" for="miscellaneous_fees">
                                                            Miscellaneous Fee
                                                        </label>
                                                        <p class="mt-2 fee hide_this_class">₹ <span
                                                                id="miscellaneous_fee"></span>
                                                        </p>
                                                        <div id="miscellaneous_fees_discount_div" class="d-none">
                                                            <label class="form-check-label">Discount:</label>
                                                            <input type="text" class="form-control input"
                                                                id="miscellaneous_fees_discount_input"
                                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                                pattern="[0-9]{1}[0-9]{9}" />
                                                            <div class="mt-2 mb-2" id="new_miscellaneous_fees"></div>
                                                        </div>
                                                        <div id="miscellaneous_fees_due_date_div" style="display: none">
                                                            <label class="form-check-label">Miscellaneous Fee Due
                                                                Date:</label>
                                                            <input type="text" name="miscellaneous_fees_due_date_div"
                                                                id="miscellaneous_fees_due_date"
                                                                class="form-control input form-control-line bg-white"
                                                                placeholder="Select Due Date" readonly autocomplete="off">
                                                            <div class="mt-2 mb-2" id="new_miscellaneous_fees"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="input-group col">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value=""
                                                            id="annual_fees" />
                                                        <label class="form-check-label" for="annual_fees"> Annual Fee
                                                        </label>
                                                        <p class="mt-2 fee hide_this_class">₹ <span
                                                                id="annual_fee"></span>
                                                        </p>
                                                        <div id="annual_fees_discount_div" class="d-none">
                                                            <label class="form-check-label">Discount:</label>
                                                            <input type="text" class="form-control input"
                                                                id="annual_fees_discount_input"
                                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                                pattern="[0-9]{1}[0-9]{9}" />
                                                            <div class="mt-2 mb-2" id="new_annual_fees"></div>
                                                        </div>
                                                        <div id="annual_fees_due_date_div" style="display: none">
                                                            <label class="form-check-label">Annual Fee Due
                                                                Date:</label>
                                                            <input type="text" name="annual_fees_due_date_div"
                                                                id="annual_fees_due_date"
                                                                class="form-control input form-control-line bg-white"
                                                                placeholder="Select Due Date" readonly autocomplete="off">
                                                            <div class="mt-2 mb-2" id="new_annual_fees"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="input-group col">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value=""
                                                            id="kit_fees" />
                                                        <label class="form-check-label" for="kit_fees"> Kit Fee </label>
                                                        <p class="mt-2 fee hide_this_class">₹ <span id="kit_fee"></span>
                                                        </p>
                                                        <div id="kit_fees_discount_div" class="d-none">
                                                            <label class="form-check-label">Discount:</label>
                                                            <input type="text" class="form-control input"
                                                                id="kit_fees_discount_input" value="0"
                                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                                class="form-control input form-control-line"
                                                                minlength="10" maxlength="10"
                                                                pattern="[0-9]{1}[0-9]{9}" />
                                                            <div class="mt-2 mb-2" id="new_kit_fees"></div>
                                                        </div>
                                                        <div id="kit_fee_due_date_div" style="display: none">
                                                            <label class="form-check-label">Kit Fee Due Date:</label>
                                                            <input type="text" name="kit_fee_due_date_div"
                                                                id="kit_fee_due_date"
                                                                class="form-control input form-control-line bg-white"
                                                                placeholder="Select Due Date" readonly autocomplete="off">
                                                            <div class="mt-2 mb-2" id="new_reg_fees"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion mt-3" id="accordionExample">
                                    <div class="card accordion-item">
                                        <h2 class="accordion-header" id="headingThree">
                                            <button type="button"
                                                class="disabledColor accordion-button collapsed my-accordian-button"
                                                data-bs-toggle="collapse" data-bs-target="#accordionThree"
                                                aria-expanded="false" aria-controls="accordionThree" disabled>
                                                Recurring Fees
                                            </button>
                                        </h2>
                                        <div id="accordionThree" class="accordion-collapse collapse"
                                            aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                            <div class="accordion-body row">
                                                <div class="input-group col">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value=""
                                                            id="tution_fee" />
                                                        <label class="form-check-label" for="tution_fee"> Monthly Fee
                                                            (monthly) </label>
                                                        <p class="mt-2 fee hide_this_class">₹ <span
                                                                id="monthly_fee"></span></p>
                                                        <div id="tution_fee_discount_div" class="d-none">
                                                            <label class="form-check-label">Discount:</label>
                                                            <input type="text" class="form-control input"
                                                                id="tution_fee_discount_input" value="0"
                                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                                class="form-control input form-control-line"
                                                                minlength="10" maxlength="10"
                                                                pattern="[0-9]{1}[0-9]{9}" />
                                                            <div class="mt-2 mb-2" id="new_tution_fees"></div>
                                                        </div>
                                                        <div id="tuition_Fee_due_date_div" style="display: none">
                                                            <label class="form-check-label">Monthly Fee Due Date:</label>
                                                            <input type="text" name="tuition_Fee_due_date_div"
                                                                id="tuition_Fee_due_date"
                                                                class="form-control input form-control-line bg-white"
                                                                placeholder="Select Due Date" readonly autocomplete="off">
                                                            <div class="mt-2 mb-2" id="new_reg_fees"></div>
                                                        </div>
                                                        <div id="tuition_Fee_num_of_month" style="display: none"
                                                            class="input-group input-group-merge yourWork multiSelect">
                                                            <label for="">Choose Month for this fee</label>
                                                            <select multiple
                                                                class="organisation_name multiSelect_field custom_multi_select custom_fc"
                                                                data-placeholder="" id="select_my_work"
                                                                name="organisation_name"multiple>
                                                                <option class='option2' value="January"
                                                                    data-item-value="January">January
                                                                </option>
                                                                <option class='option2' value="February"
                                                                    data-item-value="February">
                                                                    February</option>
                                                                <option class='option2' value="March"
                                                                    data-item-value="March">March
                                                                </option>
                                                                <option class='option2' value="April"
                                                                    data-item-value="April">April
                                                                </option>
                                                                <option class='option2' value="May"
                                                                    data-item-value="May">May</option>
                                                                <option class='option2' value="June"
                                                                    data-item-value="June">June
                                                                </option>
                                                                <option class='option2' value="July"
                                                                    data-item-value="July">July
                                                                </option>
                                                                <option class='option2' value="August"
                                                                    data-item-value="August">August
                                                                </option>
                                                                <option class='option2' value="September"
                                                                    data-item-value="September">
                                                                    September</option>
                                                                <option class='option2' value="October"
                                                                    data-item-value="October">October
                                                                </option>
                                                                <option class='option2' value="November"
                                                                    data-item-value="November">
                                                                    November</option>
                                                                <option class='option2' value="December"
                                                                    data-item-value="December">
                                                                    December</option>
                                                            </select>
                                                            <span class="down_arrow"><i
                                                                    class="fa-solid fa-angle-down"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="input-group col">
                                                    <label class="form-label" for="basic-icon-default-fullname">Tansport
                                                        Charges ( Monthly
                                                        Charges if any )</label>
                                                    <div class="input-group">
                                                        <span id="basic-icon-default-dob" class="input-group-text"><i
                                                                class='bx bxs-bus'></i></span>
                                                        <input type="text" class="form-control input form-control-line"
                                                            id="transport_charge" placeholder="1000" autocomplete="off"
                                                            maxlength="6" min=0 value="0" disabled
                                                            onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
                                                    </div>
                                                    <div id="transport_charges_due_date_div"
                                                        style="display: none;width:100%">
                                                        <label class="form-check-label">Transport Charges Due Date:</label>
                                                        <input type="text" name="transport_charges_due_date_div"
                                                            id="transport_charges_due_date"
                                                            class="form-control input form-control-line bg-white"
                                                            placeholder="Select Due Date" readonly autocomplete="off">
                                                        <div class="mt-2 mb-2" id="new_reg_fees"></div>
                                                    </div>
                                                    <div id="transport_charges_num_of_month" style="display: none"
                                                        class="input-group input-group-merge yourWork1 multiSelect">
                                                        <label for="">Choose Month for Transport fee</label>
                                                        <select multiple
                                                            class="organisation_name multiSelect_field custom_multi_select custom_fc"
                                                            data-placeholder="" id="select_my_work1"
                                                            name="organisation_name" multiple>
                                                            <option class="option1" value="January"
                                                                data-item-value="January">January
                                                            </option>
                                                            <option class="option1" value="February"
                                                                data-item-value="February">
                                                                February</option>
                                                            <option class="option1" value="March"
                                                                data-item-value="March">March
                                                            </option>
                                                            <option class="option1" value="April"
                                                                data-item-value="April">April
                                                            </option>
                                                            <option class="option1" value="May" data-item-value="May">
                                                                May</option>
                                                            <option class="option1" value="June"
                                                                data-item-value="June">June
                                                            </option>
                                                            <option class="option1" value="July"
                                                                data-item-value="July">July
                                                            </option>
                                                            <option class="option1" value="August"
                                                                data-item-value="August">August
                                                            </option>
                                                            <option class="option1" value="September"
                                                                data-item-value="September">
                                                                September</option>
                                                            <option class="option1" value="October"
                                                                data-item-value="October">October
                                                            </option>
                                                            <option class="option1" value="November"
                                                                data-item-value="November">
                                                                November</option>
                                                            <option class="option1" value="December"
                                                                data-item-value="December">
                                                                December</option>
                                                        </select>
                                                        <span class="down_arrow"><i
                                                                class="fa-solid fa-angle-down"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="mb-3">
                                {{-- <p class="mt-2"><b>Total Fee: ₹ <span id="total_fee">0</span></b></p> --}}
                            </div>

                            <div class="row">
                                <div class="mb-3 col-12 col-md-6" style="border-right: 2px solid #cccccc8c">
                                    <div class="mb-3">
                                        <label class="form-label" for="basic-icon-default-fullname">Other Discount ( if
                                            any
                                            )</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class='bx bxs-discount'></i></span>
                                            <input type="text" class="form-control input form-control-line"
                                                id="discount" placeholder="1000" autocomplete="off" maxlength="6"
                                                min=0 value="0" disabled
                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
                                        </div>
                                    </div>
                                    <div class="mb-3" id="main_due_date_div" style="display:none">
                                        <label class="form-label" for="basic-icon-default-fullname">Due Date</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class="bx bxs-calendar-event"></i></span>
                                            <input type="text" name="dob" id="due_data"
                                                class="form-control input form-control-line bg-white"
                                                placeholder="Select Due Date" readonly autocomplete="off">
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 col-12 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="basic-icon-default-fullname">Other Charges ( if any
                                            )</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class='bx bx-money'></i></span>
                                            <input type="text" class="form-control input form-control-line"
                                                id="other_charges" placeholder="1000" autocomplete="off" maxlength="6"
                                                min=0 value="0" disabled
                                                onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
                                        </div>
                                    </div>
                                    <div class="mb-3" id="other_charge_due_date_div" style="display: none">
                                        <label class="form-label" for="basic-icon-default-fullname">Other Charges Due
                                            Date</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-dob" class="input-group-text"><i
                                                    class="bx bxs-calendar-event"></i></span>
                                            <input type="text" name="other_charge_due_date" id="other_charge_due_date"
                                                class="form-control input form-control-line bg-white"
                                                placeholder="Select Due Date" readonly autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group loaderbtn_div">
                                <button type="button" class="btn btn-success text-white"
                                    onclick="generateInvoice('{{ $invoice->id }}','{{$class_id}}','{{ $student->id }}')" id="update_btn">Generate</button>
                                <div class="loaderDiv" id="loader" style="display: none;">
                                    <!-- Your loader HTML or spinner goes here -->
                                    <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                </div>
                            </div>
                        </div>

                        <hr>
                        <div style="text-align: center">
                            <h3><u>Fee Request Detail</u></h3>
                        </div>
                        <br>
                        <div class="table  text-nowrap dtbl_dropdown">
                            <table class="table" id="">
                                <thead>
                                    <tr>
                                        <th>Fee Name</th>
                                        <th>Original Amount</th>
                                        <th>Discount</th>
                                        <th>Due Date</th>
                                        <th>No. of month</th>
                                        <th>Final Amount</th>
                                    </tr>
                                </thead>
                                <tbody class="table-border-bottom-0">
                                    <tr id="registration_fee_table_tr" style="display: none">
                                        <td>Portal Registration Fee</td>
                                        <td id="registration_fee_table_data">0</td>
                                        <td id="registration_fee_discount_table_data">0</td>
                                        <td id="registration_fee_due_date_table_data"> </td>
                                        <td id="">One time Fee</td>
                                        <td id="registration_fee_final_amount_table_data">0</td>
                                    </tr>
                                    <tr id="admission_form_fee_table_tr" style="display: none">
                                        <td>Admission Form Fee</td>
                                        <td id="admission_form_fee_table_data">0</td>
                                        <td id="admission_form_fee_discount_table_data">0</td>
                                        <td id="admission_form_fee_due_date_table_data"> </td>
                                        <td id="">One time Fee</td>
                                        <td id="admission_form_fee_final_amount_table_data">0</td>
                                    </tr>
                                    <tr id="miscellaneous_fee_table_tr" style="display: none">
                                        <td>Miscellaneous Fee</td>
                                        <td id="miscellaneous_fee_table_data">0</td>
                                        <td id="miscellaneous_fee_discount_table_data">0</td>
                                        <td id="miscellaneous_fee_due_date_table_data"> </td>
                                        <td id="">One time Fee</td>
                                        <td id="miscellaneous_fee_final_amount_table_data">0</td>
                                    </tr>
                                    <tr id="annual_fee_table_tr" style="display: none">
                                        <td>Annual Fee</td>
                                        <td id="annual_fee_table_data">0</td>
                                        <td id="annual_fee_discount_table_data">0</td>
                                        <td id="annual_fee_due_date_table_data"> </td>
                                        <td id="">One time Fee</td>
                                        <td id="annual_fee_final_amount_table_data">0</td>
                                    </tr>
                                    <tr id="kit_fee_table_tr" style="display: none">
                                        <td>Kit Fee</td>
                                        <td id="kit_fee_table_data">0</td>
                                        <td id="kit_fee_discount_table_data">0</td>
                                        <td id="kit_fee_due_date_table_data"></td>
                                        <td id="">One time Fee</td>
                                        <td id="kit_fee_final_amount_table_data">0</td>
                                    </tr>
                                    <tr id="tution_fee_table_tr" style="display: none">
                                        <td>Monthly Fee</td>
                                        <td id="tution_fee_table_data">0</td>
                                        <td id="tution_fee_discount_table_data">0</td>
                                        <td id="tution_fee_due_date_table_data"></td>
                                        <td id="numer_of_month_tution_Fee">1</td>
                                        <td id="tution_fee_final_amount_table_data">0</td>
                                    </tr>
                                    <tr id="transport_charges_table_tr" style="display: none">
                                        <td>Transport Charges</td>
                                        <td id="transport_charge_table_data">0</td>
                                        <td id="transport_charge_discount_table_data">Not Applicable</td>
                                        <td id="transport_charge_due_date_table_data">--</td>
                                        <td id="numer_of_month_transport_charges">1</td>
                                        <td id="transport_charge_final_amount_table_data">0</td>
                                    </tr>
                                    <tr id="other_charges_table_tr" style="display: none">
                                        <td>Other Charges</td>
                                        <td id="other_charges_table_data">0</td>
                                        <td id="other_charges_discount_table_data">Not Applicable</td>
                                        <td id="other_charges_due_date_table_data"></td>
                                        <td id="">One Time Fee</td>
                                        <td id="other_charges_final_amount_table_data">0</td>
                                    </tr>
                                    <tr id="all_over_discount_table_tr">
                                        <td colspan="5"><b>Other Discount</b></td>
                                        <td id=""><b><span
                                                    id="all_over_discount_final_amount_table_data">0</span></b></td>
                                    </tr>
                                    <tr id="total_charges_table_tr">
                                        <td colspan="5"><b>Total Charges</b></td>
                                        <td id=""><b><span
                                                    id="total_charges_final_amount_table_data">0</span></b></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <script src="{{ URL::asset('assets/multi_select/multi_select_myWork.js') }}"></script>
    <script src="{{ URL::asset('assets/multi_select/multi_select_myWork1.js') }}"></script>

    <script>
        setTimeout(alreadyData, 2000);

        function alreadyData() {
            var SelectedarrayId = JSON.parse(@json($invoice->number_of_month_of_tution_fee));
            if (SelectedarrayId) {
                SelectedarrayId.forEach(function(itemId) {

                    var selector = '.yourWork .multiSelect_myWork1.sel1 .multiSelect_option[data-value="' + itemId
                        .trim() +
                        '"]';

                    var element = document.querySelector(selector);
                    console.log(element);
                    if (element) {
                        element.click();
                    } else {
                        console.error('Element with data-value="' + itemId + '" not found.');
                    }
                });
            }
            var SelectedarrayId1 = JSON.parse(@json($invoice->number_of_month_of_transportation_fee));
            if (SelectedarrayId1) {
                SelectedarrayId1.forEach(function(itemId) {

                    var selector = '.yourWork1 .multiSelect_myWork.sel2 .multiSelect_option[data-value="' + itemId
                        .trim() +
                        '"]';

                    var element = document.querySelector(selector);
                    console.log(element);
                    if (element) {
                        element.click();
                    } else {
                        console.error('Element with ' + selector + ' not found.');
                    }
                });
                // .yourWork1 .multiSelect_myWork.sel2 .multiSelect_option[data-value="January"] not found
            }
        }
        var reg_fees_status = false;
        var kit_fees_status = false;
        var tution_fee_status = false;
        var admission_form_fee_status = false;
        var miscellaneous_fee_status = false;
        var annual_fee_status = false;
        var transport_charges_status=false;
        var other_charges_status=false;
        var reg_fees_discount_value = 0;
        var admission_form_fee_discount_value = 0;
        var miscellaneous_fee_discount_value = 0;
        var annual_fee_discount_value = 0;
        var kit_fees_discount_value = 0;
        var tution_fee_discount_value = 0;
        var transport_charges_value = 0;
        var other_charges_value = 0;
        var total_discount_value = 0;
        var total_discount_value = 0;
        var totalAmountValue = 0;
        var student_id = 0;
        var due_date = 0;
        let today = new Date();
        document.addEventListener('DOMContentLoaded', function() {
            var invoice_student_id = parseInt('{{ $invoice->student_id }}');
            var selectElement = document.getElementById('student_id');
            var selectElementval = $('#studet_id_' + invoice_student_id).val();

            if (invoice_student_id) {
                selectElement.value = selectElementval;
                selectElement.dispatchEvent(new Event('change'));
                selectElement.disabled = true;
            }
        });

        $(document).ready(function() {
            let formattedDate = today.toLocaleDateString('en-GB').split('/').join('-');
            // Set today's date as the default for all due_date fields
            $('#registration_fee_due_date_table_data').text(formattedDate);
            $('#kit_fee_due_date_table_data').text(formattedDate);
            $('#tution_fee_due_date_table_data').text(formattedDate);
            $('#transport_charge_due_date_table_data').text(formattedDate);
            $('#other_charges_due_date_table_data').text(formattedDate);
            $('#admission_form_fee_due_date_table_data').text(formattedDate);
            $('#miscellaneous_fee_due_date_table_data').text(formattedDate);
            $('#annual_fee_due_date_table_data').text(formattedDate);
        });
        $('#due_data').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#due_data').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();
            $('#reg_fees_due_date').val(due_date);
            $('#kit_fee_due_date').val(due_date);
            $('#tuition_Fee_due_date').val(due_date);
            $('#transport_charges_due_date').val(due_date);
            $('#other_charge_due_date').val(due_date);
            $('#registration_fee_due_date_table_data').text(due_date);
            $('#kit_fee_due_date_table_data').text(due_date);
            $('#other_charges_due_date_table_data').text(due_date);
            $('#tution_fee_due_date_table_data').text(due_date);
            $('#transport_charge_due_date_table_data').text(due_date);
            $('#admission_form_fee_due_date_table_data').text(due_date);
            $('#miscellaneous_fee_due_date_table_data').text(due_date);
            $('#annual_fee_due_date_table_data').text(due_date);
        });
        $('#due_data').datepicker('setDate', today);
        $('#reg_fees_due_date').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#reg_fees_due_date').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();

            $('#registration_fee_due_date_table_data').text(due_date);
        });

        $('#reg_fees_due_date').datepicker('setDate', today);

        //strating 


        $('#admission_form_fees_due_date').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#admission_form_fees_due_date').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();
            $('#admission_form_fee_due_date_table_data').text(due_date);
        });

        $('#admission_form_fees_due_date').datepicker('setDate', today);
        $('#miscellaneous_fees_due_date').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#miscellaneous_fees_due_date').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();
            $('#miscellaneous_fee_due_date_table_data').text(due_date);
        });

        $('#miscellaneous_fees_due_date').datepicker('setDate', today);
        $('#annual_fees_due_date').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#annual_fees_due_date').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();
            $('#annual_fee_due_date_table_data').text(due_date);
        });

        $('#annual_fees_due_date').datepicker('setDate', today);
        //ending
        $('#kit_fee_due_date').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#kit_fee_due_date').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();
            $('#kit_fee_due_date_table_data').text(due_date);
        });

        $('#kit_fee_due_date').datepicker('setDate', today);
        $('#other_charge_due_date').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#other_charge_due_date').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();
            $('#other_charges_due_date_table_data').text(due_date);

        });

        $('#other_charge_due_date').datepicker('setDate', today);
        $('#tuition_Fee_due_date').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#tuition_Fee_due_date').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();
            $('#tution_fee_due_date_table_data').text(due_date);
        });

        $('#tuition_Fee_due_date').datepicker('setDate', today);
        $('#transport_charges_due_date').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            minDate: today, // Restrict past dates
            maxDate: '+2Y', // Set the desired year range, e.g., up to 2 years in the future
            defaultDate: today, // Set default date to today
        }).on('change', function() {
            $('#transport_charges_due_date').closest('div').next('span.text-danger').remove();
            due_date = $(this).val();
            $('#transport_charge_due_date_table_data').text(due_date);
        });

        $('#transport_charges_due_date').datepicker('setDate', today);
        $('#discount').keyup(function(e) {
            if ($(this).val() >= totalAmountValue) {
                alert('Discount Cannot be greater than or equal to Total Fees');
                $('#discount').val(0);
                $('#all_over_discount_final_amount_table_data').text(0);
                calculateTotalAmount();
                return;
            }
            total_discount_value = $(this).val();
            if ($(this).val() == 0) {
                $('#main_due_date_div').hide();
                if ($('#reg_fees').is(':checked')) {
                    $('#reg_fees_due_date_div').show();
                }
                if ($('#kit_fees').is(':checked')) {
                    $('#kit_fee_due_date_div').show();
                }
                if ($('#admission_form_fees').is(':checked')) {
                    $('#admission_form_fees_due_date_div').show();
                }
                if ($('#miscellaneous_fees').is(':checked')) {
                    $('#miscellaneous_fees_due_date_div').show();
                }
                if ($('#annual_fees').is(':checked')) {
                    $('#annual_fees_due_date_div').show();
                }
                if ($('#tution_fee').is(':checked')) {
                    $('#tuition_Fee_due_date_div').show();
                }
                if ($('#transport_charge').val() > 0) {
                    $('#transport_charges_due_date_div').show();
                }
                if ($('#other_charges').val() > 0) {
                    $('#other_charge_due_date_div').show();
                }
                $('#reg_fees_due_date_div').show();
                $('#tuition_Fee_due_date_div').show();
                $('#kit_fee_due_date_div').show();
                due_date = $('#due_data').val();
                $('#reg_fees_due_date').val(due_date);
                $('#admission_form_fee_due_date').val(due_date);
                $('#miscellaneous_fee_due_date').val(due_date);
                $('#annual_fee_due_date').val(due_date);
                $('#kit_fee_due_date').val(due_date);
                $('#tuition_Fee_due_date').val(due_date);
                $('#transport_charges_due_date').val(due_date);
                $('#other_charge_due_date').val(due_date);
                $('#registration_fee_due_date_table_data').text(due_date);
                $('#kit_fee_due_date_table_data').text(due_date);
                $('#other_charges_due_date_table_data').text(due_date);
                $('#tution_fee_due_date_table_data').text(due_date);
                $('#transport_charge_due_date_table_data').text(due_date);
            } else {
                $('#main_due_date_div').show();
                $('#reg_fees_due_date_div').hide();
                $('#admission_form_fees_due_date_div').hide();
                $('#miscellaneous_fees_due_date_div').hide();
                $('#annual_fees_due_date_div').hide();
                $('#tuition_Fee_due_date_div').hide();
                $('#kit_fee_due_date_div').hide();
            }
            $('#all_over_discount_final_amount_table_data').text($(this).val());
            calculateTotalAmount();
        });
        $('#transport_charge').keyup(function(e) {
            if ($(this).val() == 0) {
                $('#transport_charges_table_tr').hide();
                $('#transport_charge_final_amount_table_data').removeClass('finalAmountClassForTotal');

                $('#transport_charges_due_date_div').hide();
                $('#transport_charges_num_of_month').hide();
            } else {
                if ($('#discount').val() == 0) {
                    $('#transport_charges_due_date_div').show();
                }
                $('#transport_charges_table_tr').show();
                $('#transport_charges_num_of_month').show();
                $('#transport_charge_final_amount_table_data').addClass('finalAmountClassForTotal');
            }
            var num_of_month = $('#number_of_month_transport_fee').val();
            if (num_of_month == 0) {
                num_of_month = 1;
            }
            transport_charges_value = $(this).val() * num_of_month;
            $('#transport_charge_table_data').text($(this).val());
            $('#transport_charge_final_amount_table_data').text($(this).val());
            calculateTotalAmount();
        });
        $('#number_of_month_tution_fee').keyup(function(e) {
            var num_of_month = 1;
            if ($(this).val() > 0) {
                var num_of_month = $(this).val();
            }
            var discount_value_tution = $('#tution_fee_discount_input').val();

            var value = (num_of_month * parseInt($('#monthly_fee').text())) - discount_value_tution;
            $('#tution_fee_final_amount_table_data').text(value);
            $('#numer_of_month_tution_Fee').text(num_of_month);
            calculateTotalAmount();
        });
        $('#number_of_month_transport_fee').keyup(function(e) {
            var num_of_month = 1;
            if ($(this).val() > 0) {
                var num_of_month = $(this).val();
            }
            var value = num_of_month * parseInt($('#transport_charge').val());
            $('#transport_charge_final_amount_table_data').text(value);
            $('#numer_of_month_transport_charges').text(num_of_month);
            calculateTotalAmount();
        });
        $('#other_charges').keyup(function(e) {
            if ($(this).val() == 0) {
                $('#other_charges_table_tr').hide();
                $('#other_charges_final_amount_table_data').removeClass('finalAmountClassForTotal');
                $('#other_charge_due_date_div').hide();
            } else {
                if ($('#discount').val() == 0) {
                    $('#other_charge_due_date_div').show();
                }
                $('#other_charges_table_tr').show();
                $('#other_charges_final_amount_table_data').addClass('finalAmountClassForTotal');
            }
            other_charges_value = $(this).val();
            $('#other_charges_table_data').text($(this).val());
            $('#other_charges_final_amount_table_data').text($(this).val());
            calculateTotalAmount();
        });
        $('#reg_fees_discount_input').keyup(function(e) {
            var reg_discount = parseFloat($(this).val()) || 0;
            $('#registration_fee_discount_table_data').text(reg_discount);
            var reg_fee = parseFloat($('#reg_fee').text()) || 0;
            var final_amount = reg_fee - reg_discount;
            if (final_amount <= 0) {
                alert('Discount cannot be less than or equal to Actual fee');
                $('#reg_fees_discount_input').val(0);
                $('#registration_fee_discount_table_data').text(0);
                $('#registration_fee_final_amount_table_data').text(reg_fee);
                calculateTotalAmount();
                return;
            }
            reg_fees_discount_value = $(this).val();
            calculateTotalAmount();
            $('#registration_fee_final_amount_table_data').text(final_amount);
        });
        $('#admission_form_fees_discount_input').keyup(function(e) {
            var reg_discount = parseFloat($(this).val()) || 0;
            $('#admission_form_fee_discount_table_data').text(reg_discount);
            var reg_fee = parseFloat($('#admission_form_fee').text()) || 0;
            var final_amount = reg_fee - reg_discount;
            if (final_amount <= 0) {
                alert('Discount cannot be less than or equal to Actual fee');
                $('#admission_form_fee_discount_input').val(0);
                $('#admission_form_fee_discount_table_data').text(0);
                $('#admission_form_fee_final_amount_table_data').text(reg_fee);
                calculateTotalAmount();
                return;
            }
            admission_form_fee_discount_value = $(this).val();
            calculateTotalAmount();
            $('#admission_form_fee_final_amount_table_data').text(final_amount);
        });
        $('#miscellaneous_fees_discount_input').keyup(function(e) {
            var reg_discount = parseFloat($(this).val()) || 0;
            $('#miscellaneous_fee_discount_table_data').text(reg_discount);
            var reg_fee = parseFloat($('#miscellaneous_fee').text()) || 0;
            var final_amount = reg_fee - reg_discount;
            if (final_amount <= 0) {
                alert('Discount cannot be less than or equal to Actual fee');
                $('#miscellaneous_fee_discount_input').val(0);
                $('#miscellaneous_fee_discount_table_data').text(0);
                $('#miscellaneous_fee_final_amount_table_data').text(reg_fee);
                calculateTotalAmount();
                return;
            }
            miscellaneous_fee_discount_value = $(this).val();
            calculateTotalAmount();
            $('#miscellaneous_fee_final_amount_table_data').text(final_amount);
        });
        $('#annual_fees_discount_input').keyup(function(e) {
            var reg_discount = parseFloat($(this).val()) || 0;
            $('#annual_fee_discount_table_data').text(reg_discount);
            var reg_fee = parseFloat($('#annual_fee').text()) || 0;
            var final_amount = reg_fee - reg_discount;
            if (final_amount <= 0) {
                alert('Discount cannot be less than or equal to Actual fee');
                $('#annual_fee_discount_input').val(0);
                $('#annual_fee_discount_table_data').text(0);
                $('#annual_fee_final_amount_table_data').text(reg_fee);
                calculateTotalAmount();
                return;
            }
            annual_fee_discount_value = $(this).val();
            calculateTotalAmount();
            $('#annual_fee_final_amount_table_data').text(final_amount);
        });
        //
        $('#kit_fees_discount_input').keyup(function(e) {
            var kit_discount = parseFloat($(this).val()) || 0;
            $('#kit_fee_discount_table_data').text(kit_discount);
            var tution_Feee = parseFloat($('#kit_fee').text()) || 0;
            var final_amount = tution_Feee - kit_discount;
            if (final_amount <= 0) {
                alert('Discount cannot be less than or equal to Actual fee');
                $('#kit_fees_discount_input').val(0);
                $('#kit_fee_discount_table_data').text(0);
                $('#kit_fee_final_amount_table_data').text(tution_Feee);
                calculateTotalAmount();
                return;
            }
            kit_fees_discount_value = $(this).val();
            calculateTotalAmount();
            $('#kit_fee_final_amount_table_data').text(final_amount);
        });
        $('#tution_fee_discount_input').keyup(function(e) {
            var tution_discount = parseFloat($(this).val()) || 0;
            $('#tution_fee_discount_table_data').text(tution_discount);
            var num_of_month = $('#number_of_month_tution_fee').val();
            var tution_Fee = parseFloat($('#monthly_fee').text()) * num_of_month || 0;
            var final_amount = tution_Fee - tution_discount;
            if (final_amount <= 0) {
                alert('Discount cannot be less than or equal to Actual fee');
                $('#tution_fee_discount_table_data').text(0);
                $('#tution_fee_final_amount_table_data').text(tution_Fee);
                $('#tution_fee_discount_input').val(0);
                calculateTotalAmount();
                return;
            }
            tution_fee_discount_value = $(this).val();
            calculateTotalAmount();
            $('#tution_fee_final_amount_table_data').text(final_amount);
        });

        function getFees(id) {
            $('.select_fee_div').addClass('d-none');
            $('#fee_details_container').html(' ');
            var formData = new FormData();
            formData.append('student_id', id);
            $.ajax({
                type: "post",
                url: "{{ url('/get-fees-details') }}",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    // Check if data contains fees
                    if (data) {
                        student_id = id;
                        $('#reg_fee').text(data.registeration_fee);
                        $('#admission_form_fee').text(data.admission_form_fee);
                        $('#miscellaneous_fee').text(data.miscellaneous_fee);
                        $('#annual_fee').text(data.annual_fee);
                        $('#kit_fee').text(data.kit_fee);
                        $('#monthly_fee').text(data.tution_fee);
                        $('#registration_fee_table_data').text(data.registeration_fee);
                        $('#kit_fee_table_data').text(data.kit_fee);
                        $('#admission_form_fee_table_data').text(data.admission_form_fee);
                        $('#miscellaneous_fee_table_data').text(data.miscellaneous_fee);
                        $('#annual_fee_table_data').text(data.annual_fee);
                        $('#tution_fee_table_data').text(data.tution_fee);
                        $('#registration_fee_final_amount_table_data').text(data.registeration_fee);
                        $('#kit_fee_final_amount_table_data').text(data.kit_fee);
                        $('#admission_form_fee_final_amount_table_data').text(data.admission_form_fee);
                        $('#miscellaneous_fee_final_amount_table_data').text(data.miscellaneous_fee);
                        $('#annual_fee_final_amount_table_data').text(data.annual_fee);
                        $('#tution_fee_final_amount_table_data').text(data.tution_fee);
                        $('.my-accordian-button').removeAttr("disabled");
                        $('.my-accordian-button').removeClass("disabledColor");
                        $('#transport_charge').removeAttr("disabled");
                        $('#discount').removeAttr("disabled");
                        $('#other_charges').removeAttr("disabled");
                        $('#monthly').removeAttr("disabled");
                        $('#quarterly').removeAttr("disabled");
                        $('#semi-annually').removeAttr("disabled");
                        $('#calculate').removeAttr("disabled");
                        $('.remove_req_class_msg').remove();
                        $('#discount').removeAttr('disabled');
                        var invoice_registration_fee = parseInt('{{ $invoice->registration_fee }}') || 0;
                        var invoice_admission_form_fee = parseInt('{{ $invoice->admission_form_fee }}') || 0;
                        var invoice_miscellaneous_fee = parseInt('{{ $invoice->miscellaneous_fee }}') || 0;
                        var invoice_annual_fee = parseInt('{{ $invoice->annual_fee }}') || 0;
                        var invoice_kit_fee = parseInt('{{ $invoice->kit_fee }}') || 0;
                        var invoice_monthly_fee = parseInt('{{ $invoice->monthly_fee }}') || 0;
                        var invoice_registration_fee_discount = parseInt(
                            '{{ $invoice->registration_fee_discount }}') || 0;
                        var invoice_admission_form_fee_discount = parseInt(
                            '{{ $invoice->admission_form_fee_discount }}') || 0;
                        var invoice_miscellaneous_fee_discount = parseInt(
                            '{{ $invoice->miscellaneous_fee_discount }}') || 0;
                        var invoice_annual_fee_discount = parseInt(
                            '{{ $invoice->annual_fee_discount }}') || 0;
                        var invoice_monthly_fee_discount = parseInt('{{ $invoice->monthly_fee_discount }}') ||
                            0;
                        var invoice_other_charges = parseInt('{{ $invoice->other_charges }}') || 0;
                        var invoice_discount = parseInt('{{ $invoice->discount }}') || 0;
                        var invoice_number_of_month_of_tution_fee = @json($invoice->number_of_month_of_tution_fee) ?
                            (JSON.parse(@json($invoice->number_of_month_of_tution_fee)).length || 0) :
                            0;
                        var invoice_number_of_month_of_transportation_fee = @json($invoice->number_of_month_of_transportation_fee) ?
                            (JSON.parse(@json($invoice->number_of_month_of_transportation_fee)).length || 0) :
                            0;

                        var invoice_transport_charges = (parseInt('{{ $invoice->transport_charges }}') || 0) /
                            invoice_number_of_month_of_transportation_fee;

                        var invoice_kit_fee_discount = (parseInt('{{ $invoice->kit_fee_discount }}') || 0);
                        var invoice_payment_type = parseInt('{{ $invoice->payment_type }}') || 0;
                        var invoice_total_fee = parseInt('{{ $invoice->total_fee }}') || 0;
                        var invoice_remaining_fee = parseInt('{{ $invoice->remaining_fee }}') || 0;
                        var invoice_amountpaid = parseInt('{{ $invoice->amountpaid }}') || 0;
                        var invoice_due_date = '{{ $invoice->due_date }}';
                        // Set the selected option
                        if (invoice_registration_fee > 0) {
                            $('#reg_fees').click();
                            $('#reg_fee').text(invoice_registration_fee);
                            $('#reg_fees_discount_div').removeClass('d-none');
                            $('#reg_fees_discount_input').val(invoice_registration_fee_discount);
                            if (invoice_discount == 0) {
                                $('#reg_fees_due_date_div').show();
                                $('#reg_fees_due_date').val(invoice_due_date);
                            }
                            setTimeout(() => {
                                $('#registration_fee_table_tr').show();
                                $('#registration_fee_table_data').text(invoice_registration_fee);
                                $('#registration_fee_discount_table_data').text(
                                    invoice_registration_fee_discount);
                                $('#registration_fee_due_date_table_data').text(invoice_due_date);
                                $('#registration_fee_final_amount_table_data').text(
                                    invoice_registration_fee -
                                    invoice_registration_fee_discount);
                                $('#registration_fee_final_amount_table_data').addClass(
                                    'finalAmountClassForTotal');
                                reg_fees_status = true;
                            }, 500);
                        }
                        //
                        if (invoice_admission_form_fee > 0) {
                            $('#admission_form_fees').click();
                            $('#admission_form_fee').text(invoice_admission_form_fee);
                            $('#admission_form_fees_discount_div').removeClass('d-none');
                            $('#admission_form_fees_discount_input').val(invoice_admission_form_fee_discount);
                            if (invoice_discount == 0) {
                                $('#admission_form_fees_due_date_div').show();
                                $('#admission_form_fees_due_date').val(invoice_due_date);
                            }
                            setTimeout(() => {
                                $('#admission_form_fee_table_tr').show();
                                $('#admission_form_fee_table_data').text(invoice_admission_form_fee);
                                $('#admission_form_fee_discount_table_data').text(
                                    invoice_admission_form_fee_discount);
                                $('#admission_form_fee_due_date_table_data').text(invoice_due_date);
                                $('#admission_form_fee_final_amount_table_data').text(
                                    invoice_admission_form_fee -
                                    invoice_admission_form_fee_discount);
                                $('#admission_form_fee_final_amount_table_data').addClass(
                                    'finalAmountClassForTotal');
                                admission_form_fee_status = true;
                            }, 500);
                        }
                        if (invoice_miscellaneous_fee > 0) {
                            $('#miscellaneous_fees').click();
                            $('#reg_fee').text(invoice_miscellaneous_fee);
                            $('#miscellaneous_fees_discount_div').removeClass('d-none');
                            $('#miscellaneous_fees_discount_input').val(invoice_miscellaneous_fee_discount);
                            if (invoice_discount == 0) {
                                $('#miscellaneous_fees_due_date_div').show();
                                $('#miscellaneous_fees_due_date').val(invoice_due_date);
                            }
                            setTimeout(() => {
                                $('#miscellaneous_fee_table_tr').show();
                                $('#miscellaneous_fee_table_data').text(invoice_miscellaneous_fee);
                                $('#miscellaneous_fee_discount_table_data').text(
                                    invoice_miscellaneous_fee_discount);
                                $('#miscellaneous_fee_due_date_table_data').text(invoice_due_date);
                                $('#miscellaneous_fee_final_amount_table_data').text(
                                    invoice_miscellaneous_fee -
                                    invoice_miscellaneous_fee_discount);
                                $('#miscellaneous_fee_final_amount_table_data').addClass(
                                    'finalAmountClassForTotal');
                                miscellaneous_fee_status = true;
                            }, 500);
                        }
                        if (invoice_annual_fee > 0) {
                            $('#annual_fees').click();
                            $('#annual_fees').text(invoice_annual_fee);
                            $('#annual_fees_discount_div').removeClass('d-none');
                            $('#annual_fees_discount_input').val(invoice_annual_fee_discount);
                            if (invoice_discount == 0) {
                                $('#annual_fees_due_date_div').show();
                                $('#annual_fees_due_date').val(invoice_due_date);
                            }
                            setTimeout(() => {
                                $('#annual_fee_table_tr').show();
                                $('#annual_fee_table_data').text(invoice_annual_fee);
                                $('#annual_fee_discount_table_data').text(
                                    invoice_annual_fee_discount);
                                $('#annual_fee_due_date_table_data').text(invoice_due_date);
                                $('#annual_fee_final_amount_table_data').text(
                                    invoice_annual_fee -
                                    invoice_annual_fee_discount);
                                $('#annual_fee_final_amount_table_data').addClass(
                                    'finalAmountClassForTotal');
                                annual_fee_status = true;
                            }, 500);
                        }
                        //
                        if (invoice_kit_fee > 0) {
                            $('#kit_fees').click();
                            $('#kit_fee').text(invoice_kit_fee);
                            $('#kit_fees_discount_div').removeClass('d-none');
                            if (invoice_discount == 0) {
                                $('#kit_fee_due_date_div').show();
                                $('#kit_fee_due_date').val(invoice_due_date);
                            }
                            $('#kit_fees_discount_input').val(invoice_kit_fee_discount);
                            setTimeout(() => {
                                $('#kit_fee_table_tr').show();
                                $('#kit_fee_table_data').text(invoice_kit_fee);
                                $('#kit_fee_discount_table_data').text(invoice_kit_fee_discount);
                                $('#kit_fee_due_date_table_data').text(invoice_due_date);
                                $('#kit_fee_final_amount_table_data').text(invoice_kit_fee -
                                    invoice_kit_fee_discount);
                                $('#kit_fee_final_amount_table_data').addClass(
                                    'finalAmountClassForTotal');
                                kit_fees_status = true;
                            }, 500);

                        }
                        if (invoice_monthly_fee > 0) {
                            $('#tution_fee').click();
                            $('#monthly_fee').text(invoice_monthly_fee /
                                invoice_number_of_month_of_tution_fee);
                            $('#tution_fee_discount_div').removeClass('d-none');
                            $('#tution_fee_discount_input').val(invoice_monthly_fee_discount);
                            $('#tuition_Fee_num_of_month').show();
                            if (invoice_discount == 0) {
                                $('#tuition_Fee_due_date_div').show();
                                $('#tuition_Fee_due_date').val(invoice_due_date);
                            }
                            $('#number_of_month_tution_fee').val(invoice_number_of_month_of_tution_fee);
                            setTimeout(() => {
                                $('#tution_fee_table_tr').show();
                                $('#tution_fee_table_data').text(invoice_monthly_fee);
                                $('#tution_fee_discount_table_data').text(invoice_monthly_fee_discount);
                                $('#tution_fee_due_date_table_data').text(invoice_due_date);
                                $('#numer_of_month_tution_Fee').text(
                                    invoice_number_of_month_of_tution_fee);
                                $('#tution_fee_final_amount_table_data').text((invoice_monthly_fee *
                                        invoice_number_of_month_of_tution_fee) -
                                    invoice_monthly_fee_discount);
                                $('#tution_fee_final_amount_table_data').addClass(
                                    'finalAmountClassForTotal');
                                tution_fee_status = true;
                            }, 500);
                        }
                        if (invoice_transport_charges > 0) {
                            $('#transport_charge').val(invoice_transport_charges);
                            $('#transport_charges_num_of_month').show();

                            if (invoice_discount == 0) {
                                $('#transport_charges_due_date_div').show();
                                $('#transport_charges_due_date').val(invoice_due_date);
                            }
                            $('#number_of_month_transport_fee').val(
                                invoice_number_of_month_of_transportation_fee);

                            setTimeout(() => {
                                $('#transport_charges_table_tr').show();
                                $('#transport_charge_table_data').text(invoice_transport_charges);
                                $('#transport_charge_due_date_table_data').text(invoice_due_date);
                                $('#numer_of_month_transport_charges').text(
                                    invoice_number_of_month_of_transportation_fee);
                                $('#transport_charge_final_amount_table_data').text((
                                    invoice_transport_charges *
                                    invoice_number_of_month_of_transportation_fee));
                                $('#transport_charge_final_amount_table_data').addClass(
                                    'finalAmountClassForTotal');
                            }, 500);
                        }
                        if (invoice_discount > 0) {
                            $('#discount').val(invoice_discount);
                            $('#main_due_date_div').show();
                            setTimeout(() => {
                                $('#all_over_discount_final_amount_table_data').text(invoice_discount);
                            }, 500);
                        }
                        if (invoice_other_charges > 0) {
                            $('#other_charges').val(invoice_other_charges);
                            if (invoice_discount == 0) {
                                $('#other_charge_due_date_div').show();
                            }
                            setTimeout(() => {
                                $('#other_charges_table_tr').show();
                                $('#other_charges_table_data').text(invoice_other_charges);
                                $('#other_charges_due_date_table_data').text(invoice_due_date);
                                $('#other_charges_final_amount_table_data').text(
                                    invoice_other_charges);
                                $('#other_charges_final_amount_table_data').addClass(
                                    'finalAmountClassForTotal');
                            }, 500);
                        }
                        setTimeout(() => {
                            calculateTotalAmount();
                        }, 500);
                    }
                },
                error: function(xhr) {
                    // Handle any errors
                    alert('Error fetching fees: ' + xhr.responseJSON.error);
                }
            });
        }

        function generateInvoice(id, class_id, student_id) {
            var transport_charges = $('#transport_charge').val();
            other_charges_value = $('#other_charges').val();
            if (!reg_fees_status && !kit_fees_status && !tution_fee_status && transport_charges == 0 &&
                other_charges_value == 0 && !admission_form_fee_status &&
                !miscellaneous_fee_status &&
                !annual_fee_status) {
                updateBtn.disabled = false;
                alert('Please choose one of the fee');
                return;
            }
            if (tution_fee_status && ValueArray.length === 0) {
                alert('Choose alteast one month for Monthly fee');
                return;
            }
            if (transport_charges > 0 && ValueArray1.length === 0) {
                alert('Choose alteast one month for transport fee');
                return;
            }
            var number_of_month_tution_fee = $('#number_of_month_tution_fee').val();//
            var number_of_month_transport_fee = $('#number_of_month_transport_fee').val();//
            var reg_fees_due_date = $('#reg_fees_due_date').val();//
            var admission_form_fees_due_date = $('#admission_form_fees_due_date').val();//
            var miscellaneous_fees_due_date = $('#miscellaneous_fees_due_date').val();//
            var annual_fees_due_date = $('#annual_fees_due_date').val();//
            var kit_fee_due_date = $('#kit_fee_due_date').val();//
            var tuition_Fee_due_date = $('#tuition_Fee_due_date').val();
            var transport_charges_due_date = $('#transport_charges_due_date').val();//
            var other_charge_due_date = $('#other_charge_due_date').val();//
            var total_discount_value = $('#discount').val();
            var reg_fees_discount_value = $('#reg_fees_discount_input').val();
            var kit_fees_discount_value = $('#kit_fees_discount_input').val();
            var tution_fee_discount_value = $('#tution_fee_discount_input').val();
            var transport_charges = $('#transport_charge').val();
            // var student_id = $('#student_id').val();//
            var due_data = $('#due_data').val();//
            
            var formData = new FormData();
            
            formData.append('student_id', student_id);//
            formData.append('class_id', class_id);
            formData.append('invoice_id', id);//
            formData.append('Portal Registration Fee Status', reg_fees_status);//
            formData.append('number_of_month_tution_fee', ValueArray);//
            formData.append('number_of_month_transport_fee', ValueArray1);//
            formData.append('reg_fees_due_date', reg_fees_due_date);//
            formData.append('kit_fee_due_date', kit_fee_due_date);//
            formData.append('admission_form_fee_due_date', admission_form_fees_due_date);//
            formData.append('miscellaneous_fee_due_date', miscellaneous_fees_due_date);//
            formData.append('annual_fee_due_date', annual_fees_due_date);//
            formData.append('tuition_Fee_due_date', tuition_Fee_due_date);//
            formData.append('Kit Fee Status', kit_fees_status);//
            formData.append('Monthly Fee Status', tution_fee_status);//
            formData.append('reg_fees_discount_value', reg_fees_discount_value);//
            formData.append('kit_fees_discount_value', kit_fees_discount_value);//
            formData.append('admission_form_fee_discount_value', admission_form_fee_discount_value);//
            formData.append('miscellaneous_fee_discount_value', miscellaneous_fee_discount_value);//
            formData.append('Admission Form Fee Status', admission_form_fee_status);//
            formData.append('Miscellaneous Fee Status', miscellaneous_fee_status);//
            formData.append('Annual Fee Status', annual_fee_status);//
            formData.append('annual_fee_discount_value', annual_fee_discount_value);//
            formData.append('tution_fee_discount_value', tution_fee_discount_value);//
            formData.append('transport_charges_value', transport_charges);//
            formData.append('other_charges_value', other_charges_value);//
            formData.append('total_discount_value', total_discount_value);//
            formData.append('due_date', due_data);//
            formData.append('transport_charges_due_date', transport_charges_due_date);//
            formData.append('other_charge_due_date', other_charge_due_date);//
            formData.append('Transport Charges Status', (transport_charges && Number(transport_charges)>0)?true:false);
            formData.append('Other Charges Status', (other_charges_value && Number(other_charges_value)>0)?true:false);
            $.ajax({
                type: "post",
                url: "{{ url('/generate-invoice') }}",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    $('.errorSpan').html(' ');
                    if ($.isEmptyObject(data.error)) {
                        if (data.warning) {
                            alert(data.warning);
                            return;
                        }
                        window.location.href = data.success;
                    } else {
                        alert(data.error);
                    }
                }
            });
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            totalFee = 0;
            // const totalFeeElement = document.getElementById('total_fee');

            const showHideDiscountDiv = (checkbox, event_id) => {
                if (checkbox.checked) {
                    $(`#${event_id}_discount_div`).removeClass("d-none");
                } else {
                    $(`#${event_id}_discount_div`).addClass("d-none");
                    $(`#${event_id}_discount_div input`).val('');
                    $(`#new_${event_id}`).text('');
                }
            }

            // Function to toggle the visibility of fee paragraphs and update total fee
            function toggleFeeParagraph(checkboxId, feeId, tableRowId, finalAmountId, due_date) {

                const checkbox = document.getElementById(checkboxId);
                const feeParagraph = document.getElementById(feeId).parentElement;
                const tableRow = document.getElementById(tableRowId);
                const dueDate = document.getElementById(due_date);

                checkbox.addEventListener('change', function(event) {
                    let feeValue = parseInt(checkbox.value);

                    // Check if the checkbox is for the monthly tuition fee and multiply by 12
                    if (checkboxId === 'tution_fee') {
                        feeValue *= 12;
                    }

                    if (checkbox.checked) {
                        feeParagraph.style.display = 'block';
                        if ($('#discount').val() == 0) {
                            dueDate.style.display = 'block';
                        }
                        tableRow.style.display = 'table-row';
                        totalFee += feeValue;
                        $('#' + finalAmountId).addClass('finalAmountClassForTotal');
                        var status = true;
                        if (checkboxId === 'tution_fee') {
                            $('#tuition_Fee_num_of_month').show();
                        }
                    } else {
                        tableRow.style.display = 'none';
                        dueDate.style.display = 'none';
                        feeParagraph.style.display = 'none';
                        totalFee -= feeValue;
                        $('#' + finalAmountId).removeClass('finalAmountClassForTotal');
                        $('#save_btn').attr('disabled', 'disabled');
                        var status = false;
                        if (checkboxId === 'tution_fee') {
                            $('#tuition_Fee_num_of_month').hide();
                        }
                    }
                    switch (checkboxId) {
                        case 'reg_fees':
                            reg_fees_status = status;
                            break;

                        case 'kit_fees':
                            kit_fees_status = status;
                            break;

                        case 'tution_fee':
                            tution_fee_status = status;
                            break;
                        case 'admission_form_fees':
                            admission_form_fee_status = status;
                            break;
                        case 'miscellaneous_fees':
                            miscellaneous_fee_status = status;
                            break;
                        case 'annual_fees':
                            annual_fee_status = status;
                            break;

                        default:
                            break;
                    }
                    calculateTotalAmount();
                    showHideDiscountDiv(checkbox, event.target.id);
                });
            }

            // Initialize the toggle functionality
            // for each checkbox and fee paragraph pair
            toggleFeeParagraph('reg_fees', 'reg_fee',
                'registration_fee_table_tr', 'registration_fee_final_amount_table_data', 'reg_fees_due_date_div'
            );
            toggleFeeParagraph('admission_form_fees', 'admission_form_fee',
                'admission_form_fee_table_tr', 'admission_form_fee_final_amount_table_data',
                'admission_form_fees_due_date_div'
            );
            toggleFeeParagraph('miscellaneous_fees', 'miscellaneous_fee',
                'miscellaneous_fee_table_tr', 'miscellaneous_fee_final_amount_table_data',
                'miscellaneous_fees_due_date_div'
            );
            toggleFeeParagraph('annual_fees', 'annual_fee',
                'annual_fee_table_tr', 'annual_fee_final_amount_table_data', 'annual_fees_due_date_div'
            );
            toggleFeeParagraph('kit_fees', 'kit_fee', 'kit_fee_table_tr', 'kit_fee_final_amount_table_data',
                'kit_fee_due_date_div');
            toggleFeeParagraph('tution_fee', 'monthly_fee',
                'tution_fee_table_tr', 'tution_fee_final_amount_table_data', 'tuition_Fee_due_date_div');
        });

        function calculateTotalAmount() {
            var totalSum = 0;
            setTimeout(() => {
                $('.finalAmountClassForTotal').each(function() {
                    var value = parseInt($(this).text().trim()) || 0;
                    totalSum += value;
                });
                var discount = parseInt($('#discount').val()) || 0;
                var finalAmount = totalSum - discount;
                totalAmountValue = totalSum;
                $('#total_charges_final_amount_table_data').text(finalAmount);
            }, 1000);
        }
    </script>
@endsection