@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;
    }

    .ld_right {
        text-align: right;
        margin-top: 40px;
    }
</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;
        }

        .auto_due_date_msg {
            background-color: #e4e4ff;
            color: black !important;
            padding: 2px 7px;
            border-left: 3px solid #696cff;
            font-size: 14px;
        }
    </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">Classes</label>
                                    <select name="class_id" id="class_id"
                                        class="form-control form-select form-control-line" onchange="getFees(this.value)">
                                        <option value="" selected disabled>Select Class</option>
                                        @foreach ($classes as $class)
                                            <option value="{{ $class->id }}">
                                                {{ $class->class_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="show_hide_invoice_div" style="display: none">
                                <div class="mb-3">
                                    <div class="">
                                        <h5 class="">Class Details</h5>
                                    </div>
                                    <div class="col-12 mb-3" id="student_id_div">

                                    </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="#one_time_fees"
                                                    aria-expanded="false" aria-controls="one_time_fees" disabled>
                                                    One Time Fees
                                                </button>
                                            </h2>
                                            <div id="one_time_fees" 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}" />
                                                                <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"
                                                                    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="#recurring_fees"
                                                    aria-expanded="false" aria-controls="recurring_fees" disabled>
                                                    Recurring Fees
                                                </button>
                                            </h2>
                                            <div id="recurring_fees" 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"> Tuition Fee
                                                                (Tuition) </label>
                                                            <p class="mt-2 fee hide_this_class">₹ <span
                                                                    id="monthly_fee"></span></p>
                                                            <div id="semi_half_wrapper" class="mt-2 mb-2"
                                                                style="display: none;">
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input fee_option"
                                                                        type="checkbox" id="full_fee_checkbox"
                                                                        value="full">
                                                                    {{-- <input type="checkbox" class="fee_option"
                                                                    id="full_fee_checkbox" value="full">  --}}
                                                                    <label class="form-check-label"
                                                                        for="full_fee_checkbox">Complete</label>
                                                                </div>

                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input fee_option"
                                                                        type="checkbox" id="half_fee_checkbox"
                                                                        value="half">

                                                                    {{-- <input type="checkbox" class="fee_option"
                                                                    id="half_fee_checkbox" value="half">  --}}
                                                                    <label class="form-check-label"
                                                                        for="half_fee_checkbox">Half Yearly</label>
                                                                </div>

                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input fee_option"
                                                                        type="checkbox" id="semi_fee_checkbox"
                                                                        value="semi">
                                                                    {{-- <input type="checkbox" class="fee_option"
                                                                    id="semi_fee_checkbox" value="semi">  --}}
                                                                    <label class="form-check-label"
                                                                        for="semi_fee_checkbox">Quarterly</label>
                                                                </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="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>
                                                                    <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>
                                                                </select>
                                                                <span class="down_arrow"><i
                                                                        class="fa-solid fa-angle-down"></i></span>
                                                            </div>
                                                            <div id="tution_fee_discount_div" class="d-none">
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <!-- Discount Input -->
                                                                    <div>
                                                                        <label class="form-check-label small">Discount(if
                                                                            any):</label>
                                                                        <input type="text"
                                                                            class="form-control form-control-sm"
                                                                            id="tution_fee_discount_input"
                                                                            onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                                            style="width: 100px;" />
                                                                    </div>
                                                                    <!-- Month Select -->
                                                                    <div id="half_semi_month_wrapper"
                                                                        style="display: none;">
                                                                        <label
                                                                            class="form-check-label small">Month:</label>
                                                                        <select id="tuition_fee_single_month"
                                                                            class="form-select form-select-sm form-control"
                                                                            style="width: 120px;">
                                                                            <option value="">-- Month --</option>
                                                                            <option value="April">Apr</option>
                                                                            <option value="May">May</option>
                                                                            <option value="June">Jun</option>
                                                                            <option value="July">Jul</option>
                                                                            <option value="August">Aug</option>
                                                                            <option value="September">Sep</option>
                                                                            <option value="October">Oct</option>
                                                                            <option value="November">Nov</option>
                                                                            <option value="December">Dec</option>
                                                                            <option value="January">Jan</option>
                                                                            <option value="February">Feb</option>
                                                                            <option value="March">Mar</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <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">Tuition 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="due_date_info_msg" class="auto_due_date_msg mt-3"
                                                                style="display: none;">
                                                                Due date will be the <strong>10th of each selected invoice
                                                                    start month.</strong>.
                                                            </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_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="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>
                                                                <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>
                                                            </select>
                                                            <span class="down_arrow"><i
                                                                    class="fa-solid fa-angle-down"></i></span>
                                                        </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 class="form-check mt-3" style="display: none;">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="generate_invoice_per_month">
                                                            <label class="form-check-label"
                                                                for="generate_invoice_per_month">
                                                                Generate Transport Invoice Per Month
                                                            </label>
                                                        </div>
                                                        <div class="text-muted small mt-1" id="transport_checkbox_note"
                                                            style="display: none;">
                                                            • Select this checkbox to generate a separate transport invoice
                                                            for each selected month. <br>
                                                            • Please disable all other fee options to include only transport
                                                            charges in the invoice.
                                                        </div>
                                                        <!-- This line will show only when checkbox is checked -->
                                                        <div id="auto_due_date_msg" class="auto_due_date_msg mt-3"
                                                            style="display: none; font-style: italic; color: #6c757d;">
                                                            Due date will be the <strong>10th of each selected invoice start
                                                                month.</strong>.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                </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">Total 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>
                        </div>
                    </div>

                    <hr>
                    <div class="show_hide_table_div" style="display: none">
                        <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="numer_of_month_transport_charges">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>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 class="form-group loaderbtn_div ld_right">
                            <button type="button" class="btn btn-success text-white" onclick="generateInvoice()"
                                id="update_btn">Generate Fee Request</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>
                </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>
        document.addEventListener('DOMContentLoaded', function() {
            const academicMonths = [
                "April", "May", "June", "July", "August", "September",
                "October", "November", "December", "January", "February", "March"
            ];

            const monthShortNames = {
                "April": "Apr",
                "May": "May",
                "June": "Jun",
                "July": "Jul",
                "August": "Aug",
                "September": "Sep",
                "October": "Oct",
                "November": "Nov",
                "December": "Dec",
                "January": "Jan",
                "February": "Feb",
                "March": "Mar"
            };

            const currentDate = new Date();
            const currentMonthName = currentDate.toLocaleString('default', {
                month: 'long'
            });
            const currentIndex = academicMonths.indexOf(currentMonthName);

            if (currentIndex === -1) return; // If month not found, exit

            const filteredMonths = academicMonths.slice(currentIndex);

            // Apply logic to multi-selects
            function updateMultiSelect(selectId, optionClass) {
                const selectEl = document.getElementById(selectId);
                if (!selectEl) return;

                selectEl.innerHTML = ''; // Clear all

                filteredMonths.forEach(month => {
                    const option = document.createElement('option');
                    option.className = optionClass;
                    option.value = month;
                    option.setAttribute('data-item-value', month);
                    option.textContent = month;
                    selectEl.appendChild(option);
                });
            }

            // Apply logic to single-select with short month names
            function updateSingleSelect(selectId) {
                const selectEl = document.getElementById(selectId);
                if (!selectEl) return;

                selectEl.innerHTML = ''; // Clear all

                // Add placeholder first
                const placeholder = document.createElement('option');
                placeholder.value = '';
                placeholder.textContent = '-- Month --';
                selectEl.appendChild(placeholder);

                filteredMonths.forEach(month => {
                    const option = document.createElement('option');
                    option.value = month;
                    option.textContent = monthShortNames[month] || month;
                    selectEl.appendChild(option);
                });
            }

            // Apply to all dropdowns
            updateMultiSelect('select_my_work', 'option2'); // For tuition fee multi-select
            updateMultiSelect('select_my_work1', 'option1'); // For transport fee multi-select
            updateSingleSelect('tuition_fee_single_month'); // For half/semi-month single select
        });
    </script>
    {{-- <script>
        $(document).ready(function() {
            $('#generate_invoice_per_month').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#transport_charges_due_date_div').hide();
                    $('#auto_due_date_msg').show();
                } else {
                    $('#transport_charges_due_date_div').show();
                    $('#auto_due_date_msg').hide();
                }
            });
            // Trigger change on page load in case checkbox is already checked
            $('#generate_invoice_per_month').trigger('change');
        });
    </script> --}}


    <script>
        $(document).ready(function() {
            // When Monthly Fee checkbox is toggled
            $('#tution_fee').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#semi_half_wrapper').show();
                    // Auto-select Full and uncheck others
                    $('#full_fee_checkbox').prop('checked', true);
                    $('#semi_fee_checkbox, #half_fee_checkbox').prop('checked', false);
                } else {
                    $('#semi_half_wrapper').hide();
                    $('.fee_option').prop('checked', false);
                }
            });
            // Allow only one out of full/semi/half at a time
            $('.fee_option').on('change', function() {
                if ($(this).is(':checked')) {
                    $('.fee_option').not(this).prop('checked', false);
                }
            });
        });
    </script>
    <script>
        $('.fee_option').on('change', function() {
            $('.fee_option').not(this).prop('checked', false);

            const isHalfChecked = $('#half_fee_checkbox').is(':checked');
            const isSemiChecked = $('#semi_fee_checkbox').is(':checked');
            const isFullChecked = $('#full_fee_checkbox').is(':checked');

            if (isHalfChecked || isSemiChecked) {
                $('#half_semi_month_wrapper').show();
                $('#tuition_Fee_due_date_div').hide();
                $('#due_date_info_msg').show(); // 👈 Show message
            } else {
                $('#half_semi_month_wrapper').hide();
                $('#tuition_fee_single_month').val('');
                $('#tuition_Fee_due_date_div').show();
                $('#due_date_info_msg').hide(); // 👈 Hide message
            }
        });
    </script>



    <script>
        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 ValueArray2 = [];
        var other_charges_value = 0;
        var total_discount_value = 0;
        var total_discount_value = 0;
        var totalAmountValue = 0;
        var due_date = 0;
        let today = new Date();
        $(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) {
            const chargeVal = parseFloat($(this).val()) || 0;

            if (chargeVal === 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();
                $('#generate_invoice_per_month').closest('.form-check').hide();
                $('#transport_checkbox_note').hide();
                $('#auto_due_date_msg').hide();
            } else {
                $('#transport_charges_table_tr').show();
                $('#transport_charges_num_of_month').show();
                $('#transport_charge_final_amount_table_data').addClass('finalAmountClassForTotal');
                $('#generate_invoice_per_month').closest('.form-check').show();
                $('#transport_checkbox_note').show();

                // show/hide due date based on checkbox
                if ($('#generate_invoice_per_month').is(':checked')) {
                    $('#transport_charges_due_date_div').hide();
                    $('#auto_due_date_msg').show();
                } else {
                    if ($('#discount').val() == 0) {
                        $('#transport_charges_due_date_div').show();
                    }
                    $('#auto_due_date_msg').hide();
                }
            }
            transport_charges_value = chargeVal * ValueArray1.length;
            $('#transport_charge_table_data').text(chargeVal);
            $('#transport_charge_final_amount_table_data').text(chargeVal);
            calculateTotalAmount();
        });
        // Handle checkbox toggle
        $('#generate_invoice_per_month').change(function() {
            if ($(this).is(':checked')) {
                $('#transport_charges_due_date_div').hide();
                $('#auto_due_date_msg').show();
            } else {
                if ($('#transport_charge').val() > 0 && $('#discount').val() == 0) {
                    $('#transport_charges_due_date_div').show();
                }
                $('#auto_due_date_msg').hide();
            }
        });

        $('#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_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 = ValueArray.length;
            if (num_of_month == 0) {
                num_of_month = 1;
            }
            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) {
            $('.show_hide_invoice_div').hide();
            $('.show_hide_table_div').hide();
            $('.select_fee_div').addClass('d-none');
            $('#fee_details_container').html(' ');
            var formData = new FormData();
            formData.append('class_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) {
                        if (data.view) {
                            $('#student_id_div').html(data.view);
                        } else {
                            console.error('No valid user data found');
                        }
                        $('.show_hide_invoice_div').show();
                        $('.show_hide_table_div').show();
                        $('#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');
                    }
                },
                error: function(xhr) {
                    // Handle any errors
                    alert('Error fetching fees: ' + xhr.responseJSON.error);
                }
            });
        }

        function generateInvoice() {
            var updateBtn = document.getElementById('update_btn');
            updateBtn.disabled = true;
            var transport_charges = $('#transport_charge').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) {
                updateBtn.disabled = false;
                alert('Choose alteast one month for Monthly Fee');
                return;
            }
            if (transport_charges > 0 && ValueArray1.length === 0) {
                updateBtn.disabled = false;
                alert('Choose alteast one month for transport fee');
                return;
            }
            var selectAllStudents = $('#selectAllStudents').is(':checked');
            if (!selectAllStudents && ValueArray2.length == 0) {
                updateBtn.disabled = false;
                alert('Choose alteast one of the student');
                return;
            }
            var generateInvoicePerMonth = $('#generate_invoice_per_month').is(':checked');

            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 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 student_id = $('#student_id').val();
            var due_data = $('#due_data').val();
            var class_id = $('#class_id').val();
            var formData = new FormData();
            let monthly_fee_type = '';
            $('.fee_option').each(function() {
                if ($(this).is(':checked')) {
                    monthly_fee_type = $(this).val();
                }
            });
            var tuition_fee_single_month = $('#tuition_fee_single_month').val();
            formData.append('tuition_fee_single_month', tuition_fee_single_month);


            formData.append('selectAllStudents', selectAllStudents);
            formData.append('class_id', class_id);
            formData.append('student_id', ValueArray2);
            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('tuition_Fee_due_date', tuition_Fee_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('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('annual_fee_discount_value', annual_fee_discount_value);
            formData.append('Portal Registration Fee Status', reg_fees_status);
            formData.append('Kit Fee Status', kit_fees_status);
            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('Monthly Fee Status', tution_fee_status);
            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);
            formData.append('reg_fees_discount_value', reg_fees_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('monthly_fee_type', monthly_fee_type);

            formData.append('generate_invoice_per_month', generateInvoicePerMonth ? '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) {
                    updateBtn.disabled = false;
                    $('.errorSpan').html(' ');
                    if ($.isEmptyObject(data.error)) {
                        if (data.warning) {
                            JSON.stringify(data.warning);
                            return;
                        }
                        window.location.href = data.success;
                    } else {
                        alert(JSON.stringify(data.error));
                    }
                },
                error: function(xhr) {
                    updateBtn.disabled = false;
                    // Show custom server error
                    if (xhr.status === 422 || xhr.status === 400) {
                        const errorMessage = xhr.responseJSON?.message || 'Validation error occurred.';
                        alert(errorMessage); // Or use a modal/toast/DOM element instead
                    } else {
                        alert('An unexpected error occurred.');
                    }
                }
            });
        }
    </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