@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Fee Request</title>
<!-- Your custom export logic -->
<script src="{{ asset('assets/js/export-table.js') }}"></script>
@section('main-content')
    <style>
        .edit:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .delete:hover {
            color: #fff !important;
            background-color: #E3242Bs !important;
            border-color: #E3242B !important;
            border-radius: 5px !important;
        }

        .dtbl_dropdown .dataTables_length {
            width: 65px;
        }

        .dtbl_dropdown .dataTables_length label {
            width: 100%;
        }

        .content {
            /* display: flex; */
            flex-wrap: wrap;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }

        #services_wrapper .row:nth-child(2) {
            overflow-x: scroll;
        }
    </style>

    <style>
        /* Popup container */
        .popup {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1100;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
        }

        /* Popup content */
        .popup-content {
            background-color: #fefefe;
            margin: 5% 20%;
            padding: 20px;
            border: 1px solid #888;
            width: auto;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        /* Close button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            margin-top: -30px;
            margin-right: -18px;
        }

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


        @media (min-width: 576px) {
            .latefee_dialog {
                max-width: 25rem;
            }
        }
    </style>


    
    <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:15%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Event deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="lateFeeModal" tabindex="-1" aria-labelledby="lateFeeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered latefee_dialog">
            <form id="lateFeeForm" method="POST" action="/latefee-update" style="width: 100%">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Update Late Fee</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="invoice_id" id="modal_invoice_id" />

                        <div class="mb-3">
                            <label for="modal_old_late_fee" class="form-label">Old Late Fee</label>
                            <input type="number" class="form-control" name="old_late_fee" id="modal_old_late_fee" readonly>
                        </div>

                        <div class="mb-3">
                            <label for="new_late_fee" class="form-label">New Late Fee</label>
                            <input type="number" class="form-control" name="new_late_fee" id="new_late_fee" min="0"
                                oninput="validateLateFee(this)" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Update Fee</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- The popup container -->
    <div id="popup" class="popup">
        <!-- Popup content -->
        <div class="popup-content text-center">
            <span class="close" onclick="closePopup()">&times;</span>
            <h5 class="announcement_head_popup"></h5>
            <h6 class="announcement_head_date"></h6>
            <h6 class="announcement_head_teacher_name"></h6>
            {{-- <h6 class="announcement_head_time"></h6> --}}
            <a target="_blank" href="{{ asset('assets/img/avatars/avatar.jpg') }}" class="announcement_img">
                <img src="{{ asset('assets/img/avatars/avatar.jpg') }}" width="250px" height="250px"
                    class="announcement_img" />
            </a>
            <p class="announcement_content_popup mt-2 mb-2"></p>
        </div>
    </div>
    <div id="popup2" class="popup">
        <!-- Popup content -->
        <div class="popup-content text-center">
            <span class="close" onclick="closePopup()">&times;</span>

            <div class="table  text-nowrap dtbl_dropdown ">
                <table class="table" id="">
                    <thead>
                        <tr>
                            <th>Fee Name</th>
                            <th>Original Amount</th>
                            <th>Number of month</th>
                            <th>Discount</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="">One Time Fee</td>
                            <td id="registration_fee_discount_table_data">0</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 Fee</td>
                            <td id="admission_form_fee_table_data">0</td>
                            <td id="">One Time Fee</td>
                            <td id="admission_form_fee_discount_table_data">0</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="">One Time Fee</td>
                            <td id="miscellaneous_fee_discount_table_data">0</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="">One Time Fee</td>
                            <td id="annual_fee_discount_table_data">0</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="">One Time Fee</td>
                            <td id="kit_fee_discount_table_data">0</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_number_of_month_table_data"></td>
                            <td id="tution_fee_discount_table_data">0</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_number_of_month_table_data"></td>
                            <td id="transport_charge_discount_table_data">Not Applicable</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="">Fixed Fee</td>
                            <td id="other_charges_discount_table_data">Not Applicable</td>
                            <td id="other_charges_final_amount_table_data">0</td>
                        </tr>
                        <tr id="late_fee_table_tr" style="display: none">
                            <td colspan="4"><b>Late Fee</b></td>
                            <td id=""><b><span id="late_fee_table_data">0</span></b></td>
                        </tr>
                        <tr id="all_over_discount_table_tr" style="display: none">
                            <td colspan="4"><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="4"><b>Total Charges</b></td>
                            <td id=""><b><span id="total_charges_final_amount_table_data">0</span></b></td>
                        </tr>
                        <tr id="total_charges_table_tr">
                            <td colspan="4"><b>Due Date </b></td>
                            <td id=""><b><span id="due_date">0</span></b></td>
                        </tr>
                        <div class="row" style="margin-top: 10px;">
                            <div class="col-md-3"><strong>Notes:</strong></div>
                            <div class="col-md-9" id="invoice_notes"></div>
                        </div>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl container-p-y row">
            <div class="col-6">
                <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Records /</span> Fee Request </h4>
            </div>
            @php
                $yearRange = session('year_range'); // Example: "2023-2024"
                $currentDate = now();
                [$startYear, $endYear] = explode('-', $yearRange);

                $startDate = \Carbon\Carbon::create($startYear, 4, 1, 0, 0, 0); // April 1st
                $endDate = \Carbon\Carbon::create($endYear, 3, 31, 23, 59, 59); // March 31st
            @endphp
            @if (isset($invoices) && count($invoices) > 0 && $invoices->where('payment_status', 'Pending')->count() > 0)
                <div class="col-6">
                    <div class="text-end upgrade-btn">
                        <button type="button" id="sendReminderBtn" class="btn btn-primary text-white">Send Reminder
                            Fees</button>
                    </div>
                </div>
            @endif
            <!-- Basic Bootstrap Table -->
            @if (isset($invoices) && count($invoices) > 0 && $invoices->where('payment_status', 'Completed')->count() > 0)
                <div class="col-6">
                    <div class="text-end upgrade-btn">
                        <button type="button" id="downloadReceiptsBtn" class="btn btn-primary text-white">Receipt
                            Download</button>
                    </div>
                </div>
            @endif
            <!-- Basic Bootstrap Table -->
            <div class="card pb-3 ms-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mt-2">{{ $request }} Request</h5>
                    <!-- Export dropdown (default visible) -->
                    <div id="exportDropdownWrapper">
                        <x-export-dropdown table-id="services" filename="{{ $filename }}" />
                    </div>
                    {{-- Bulk ZIP download button (hidden until user clicks your filter button) --}}
                    <button type="button" id="downloadZipBtn" class="btn btn-success text-white mt-2"
                        style="display:none;"> <i class="bi bi-download"></i>
                        Download Selected Receipts (ZIP)
                    </button>
                </div>
                @include('components.datefilter')
                <div class="table dataTable text-nowrap dtbl_dropdown table_scroll">
                    <table class="table" id="services">
                        <thead class="text-nowrap">
                            <tr>
                                <th class="ps-1">
                                    <input type="checkbox" id="selectAll">
                                </th>
                                <th class="ps-1">S.No</th>
                                <th class="ps-1">Student Name</th>
                                <th class="ps-1">Session</th>
                                <th class="ps-1">Class</th>
                                <th class="ps-1">Total Fee</th>
                                <th class="ps-1">Fee Paid</th>
                                <th class="ps-1">Pending Fee</th>
                                <th class="ps-1">Late Fee</th>
                                <th class="ps-1 text-nowrap">Status</th>
                                <th class="ps-1" style="min-width: 130px;">Created Date</th>
                                <th class="ps-1" style="min-width: 130px;">Due Date</th>
                                <th class="text-center no-export">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (isset($invoices) && count($invoices) > 0)
                                @foreach ($invoices as $key => $invoice)
                                    <tr id="row_{{ $invoice->id }}">
                                        <td>
                                            @if ($request == 'Complete')
                                                {{-- Completed page: apply strict condition --}}
                                                @if ($invoice->payment_status == 'Completed' && !empty($invoice->fee_receipt))
                                                    <input type="checkbox" class="row-checkbox"
                                                        value="{{ $invoice->id }}">
                                                @else
                                                    <input type="checkbox" disabled>
                                                @endif
                                            @else
                                                {{-- Partial & Pending page: always enable --}}
                                                <input type="checkbox" class="row-checkbox" value="{{ $invoice->id }}">
                                            @endif
                                        </td>
                                        <td class="ps-1">{{ $key + 1 }}</td>
                                        <td class="ps-1">{{ $invoice->first_name }} {{ $invoice->last_name }}</td>
                                        <td class="ps-1 text-nowrap">{{ $invoice->session }}</td>
                                        <td class="ps-1 text-nowrap">{{ $invoice->class_name }}</td>
                                        <td class="ps-1">{{ $invoice->total_fee }}</td>
                                        <td class="ps-1">{{ $invoice->amountpaid }}</td>
                                        <td class="ps-1">{{ $invoice->remaining_fee }}</td>
                                        <td class="ps-1">{{ $invoice->late_fee }}</td>
                                        <td class="ps-1 text-nowrap">{{ $invoice->payment_status }}</td>
                                        <td class="ps-1">
                                            {{ \Carbon\Carbon::parse($invoice->created_at)->format('d-m-Y') }}</td>
                                        <td class="ps-1">
                                            @if ($invoice->due_date)
                                                {{ \Carbon\Carbon::parse($invoice->due_date)->format('d-m-Y') }}
                                            @else
                                                No due date
                                            @endif
                                        </td>
                                        <td class="ps-1 no-export">
                                            <div class="dropdown text-center">
                                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                                    data-bs-toggle="dropdown">
                                                    <i class="bx bx-dots-vertical-rounded"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    @if ($currentDate->between($startDate, $endDate))
                                                        @if ($invoice->payment_status != 'Completed')
                                                            <a href="#" class="dropdown-item late-fee-btn"
                                                                data-invoice-id="{{ $invoice->id }}"
                                                                data-late-fee="{{ $invoice->late_fee }}"
                                                                data-bs-toggle="modal" data-bs-target="#lateFeeModal">
                                                                Update Late Fee
                                                            </a>
                                                        @endif
                                                    @endif
                                                    <a href="javaScript:void(0);" class="dropdown-item "
                                                        onclick="ShowInvoiceDeatil('{{ $invoice->number_of_month_of_tution_fee }}','{{ $invoice->number_of_month_of_transportation_fee }}','{{ $invoice->registration_fee }}','{{ $invoice->registration_fee_discount }}','{{ $invoice->admission_form_fee }}','{{ $invoice->admission_form_fee_discount }}','{{ $invoice->miscellaneous_fee }}','{{ $invoice->miscellaneous_fee_discount }}','{{ $invoice->annual_fee }}','{{ $invoice->annual_fee_discount }}','{{ $invoice->kit_fee }}','{{ $invoice->kit_fee_discount }}','{{ $invoice->monthly_fee }}','{{ $invoice->monthly_fee_discount }}','{{ $invoice->transport_charges }}','{{ $invoice->other_charges }}','{{ $invoice->due_date }}','{{ $invoice->discount }}','{{ $invoice->late_fee }}')">View
                                                        Invoice Detail</a>
                                                    @if ($currentDate->between($startDate, $endDate))
                                                        <a href="/delete-invoice/{{ $invoice->uuid }}"
                                                            class="dropdown-item">
                                                            Delete
                                                        </a>
                                                    @endif
                                                    @if ($invoice->payment_status != 'Pending')
                                                        <a href="/view-transaction/{{ $invoice->id }}"
                                                            class="dropdown-item">
                                                            View Transaction
                                                        </a>
                                                    @endif
                                                    @php
                                                        $schoolSettings = DB::table('receipt_infos')
                                                            ->where('school_id', $invoice->school_id)
                                                            ->first();
                                                    @endphp
                                                    @if ($invoice->payment_status == 'Completed')
                                                        @if (!empty($invoice->fee_receipt))
                                                            <a href="{{ $cdn }}{{ $invoice->fee_receipt }}"
                                                                target="_blank" class="dropdown-item">
                                                                View Receipt
                                                            </a>
                                                        @else
                                                            <a href="javascript:void(0);"
                                                                class="dropdown-item save-receipt"
                                                                data-id="{{ $invoice->id }}">
                                                                Save Receipt
                                                            </a>
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="13" class="text-center">No Record found</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <!-- / Content -->
    </div>
    <div id="ajaxLoader"
        style="display:none; position:fixed; top:0; left:0; width:100%; height:100%;
     background:rgba(255,255,255,0.7); z-index:9999; text-align:center;">
        <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
            <div class="spinner-border text-success" role="status" style="width:3rem; height:3rem;">
                <span class="sr-only">Loading...</span>
            </div>
            <p class="mt-2">Generating receipt...</p>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const exportWrapper = document.getElementById("exportDropdownWrapper");
            const downloadZipBtn = document.getElementById("downloadZipBtn");
            const selectAll = document.getElementById("selectAll");

            // Optional: keep your "show rows with receipts" button
            const filterBtn = document.getElementById("downloadReceiptsBtn");
            if (filterBtn) {
                filterBtn.addEventListener("click", function() {
                    let rows = document.querySelectorAll("#services tbody tr");
                    rows.forEach(row => {
                        let cb = row.querySelector(".row-checkbox");
                        if (cb && !cb.disabled) {
                            row.style.display = ""; // show rows that have a downloadable receipt
                        } else {
                            row.style.display = "none";
                        }
                    });

                    // Toggle UI
                    if (exportWrapper) exportWrapper.style.display = "none";
                    downloadZipBtn.style.display = "inline-block";
                });
            }

            // Select all
            if (selectAll) {
                selectAll.addEventListener("change", function() {
                    let cbs = document.querySelectorAll(".row-checkbox:not(:disabled)");
                    cbs.forEach(cb => cb.checked = selectAll.checked);
                });
            }

            // ZIP download via AJAX (fetch)
            downloadZipBtn.addEventListener("click", async function() {
                const checked = Array.from(document.querySelectorAll(".row-checkbox:checked"));
                if (checked.length === 0) {
                    alert("Please select at least one receipt.");
                    return;
                }
                const ids = checked.map(cb => cb.value);

                const tokenMeta = document.querySelector('meta[name="csrf-token"]');
                const csrfToken = tokenMeta ? tokenMeta.getAttribute('content') : '';

                try {
                    const res = await fetch("{{ route('receipts.downloadZip') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": csrfToken,
                            "Accept": "application/zip"
                        },
                        body: JSON.stringify({
                            invoice_ids: ids
                        })
                    });

                    if (!res.ok) {
                        const text = await res.text();
                        throw new Error(text || "ZIP generation failed");
                    }

                    const blob = await res.blob();
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement("a");
                    a.href = url;
                    a.download = "receipts.zip";
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    URL.revokeObjectURL(url);
                } catch (e) {
                    console.error(e);
                    alert("Error: Could not download ZIP.");
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const dateFilterDropdown = document.getElementById("dateFilterDropdown");
            const applyDateFilterBtn = document.getElementById("applyDateFilterBtn");
            const startDateInput = document.getElementById("startDate");
            const endDateInput = document.getElementById("endDate");

            // Initialize DataTable with 50 rows per page
            let table = $('#services').DataTable({
                pageLength: 50,
                lengthMenu: [10, 25, 50, 100]
            });

            // Custom search filter for date range
            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                let startDate = startDateInput.value;
                let endDate = endDateInput.value;
                let createdDateStr = data[10]; // 11th column (index 10)

                if (!startDate || !endDate) return true;

                let start = new Date(startDate);
                let end = new Date(endDate);

                let parts = createdDateStr.split("-");
                if (parts.length !== 3) return true;

                let formattedDate = new Date(parts[2], parts[1] - 1, parts[0]);

                return formattedDate >= start && formattedDate <= end;
            });

            // Apply filter when button clicked
            applyDateFilterBtn.addEventListener("click", function() {
                let startDate = startDateInput.value;
                let endDate = endDateInput.value;

                if (!startDate || !endDate) {
                    alert("Please select both start and end dates.");
                    return;
                }

                table.draw();

                document.getElementById("displayDateRange").innerText = `${startDate} → ${endDate}`;

                const dropdown = bootstrap.Dropdown.getInstance(dateFilterDropdown);
                if (dropdown) dropdown.hide();
            });
        });
    </script>
    <script>
        $(document).on('click', '.save-receipt', function() {
            var invoiceId = $(this).data('id');

            $.ajax({
                url: '/save-receipt',
                type: 'POST',
                data: {
                    invoice_id: invoiceId,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $("#ajaxLoader").show(); // show loader
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success("Receipt saved successfully!");
                        window.location.reload();
                    } else {
                        toastr.error(response.message || "Something went wrong!");
                    }
                },
                error: function() {
                    toastr.error("Server error while saving receipt.");
                },
                complete: function() {
                    $("#ajaxLoader").hide(); // always hide loader
                }
            });
        });
    </script>
    <script>
        document.getElementById('selectAll').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.row-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    </script>

    <script>
        $('#sendReminderBtn').on('click', function() {
            var selectedIds = [];

            $('.row-checkbox:checked').each(function() {
                selectedIds.push($(this).val());
            });

            if (selectedIds.length === 0) {
                alert('Please select at least one student.');
                return;
            }

            $.ajax({
                url: '/send-reminder',
                method: 'POST',
                data: {
                    student_ids: selectedIds,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        alert('Reminder sent successfully!');
                        location.reload(); // Optional: Reload the page
                    } else {
                        alert(response.message || 'Something went wrong.');
                    }
                },
                error: function(xhr) {
                    alert('An error occurred while sending reminders.');
                    console.error(xhr.responseText);
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const buttons = document.querySelectorAll('.late-fee-btn');
            buttons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const invoiceId = this.getAttribute('data-invoice-id');
                    const lateFee = this.getAttribute('data-late-fee');

                    document.getElementById('modal_invoice_id').value = invoiceId;
                    document.getElementById('modal_old_late_fee').value = lateFee;

                    const newLateFeeInput = document.getElementById('new_late_fee');
                    newLateFeeInput.setAttribute('max', lateFee);
                    newLateFeeInput.value = '';
                });
            });
        });

        function validateLateFee(input) {
            const max = parseFloat(input.getAttribute('max'));
            const val = parseFloat(input.value);

            if (isNaN(val) || val < 0 || val > max) {
                input.value = '';
            }
        }
    </script>

    <script>
        function openPopup() {
            document.getElementById("popup").style.display = "block";
        }
        // Function to close the popup
        function closePopup() {
            document.getElementById("popup").style.display = "none";
            document.getElementById("popup2").style.display = "none";
        }
        $(".view_class").on("click", function(e) {
            e.preventDefault();
            openPopup();
            $(".announcement_head_teacher_name").text($(this).data('class_name') + ' ( ' + $(this).data(
                'teacher_name') + ' )');
            $('.announcement_head_popup').text($(this).data('title'));
            $('.announcement_content_popup').text($(this).data('content'));
            $('.announcement_head_date').text($(this).data('time') + ' ( ' + $(this).data('date') + ' )');
            if ($(this).data('image')) {
                $('.announcement_img').attr('src', $(this).data('image'));
                $('.announcement_img').attr('href', $(this).data('image'));
            }
        });

        function ShowInvoiceDeatil(num_of_month_tution, num_of_month_transport, registration_fee_table_data,
            registration_fee_discount_table_data, admission_form_fee_table_data,
            admission_form_fee_discount_table_data, miscellaneous_fee_table_data,
            miscellaneous_fee_discount_table_data, annual_fee_table_data,
            annual_fee_discount_table_data,
            kit_fee_table_data,
            kit_fee_discount_table_data,
            tution_fee_table_data,
            tution_fee_discount_table_data,
            transport_charge_table_data,
            other_charges_table_data,
            due_date,
            all_over_discount_final_amount_table_data,
            late_fee) {
            document.getElementById("popup2").style.display = "block";
            var registration_fee_final_amount_table_data =
                (parseInt(registration_fee_table_data) || 0) -
                (parseInt(registration_fee_discount_table_data) || 0);
            var admission_form_fee_final_amount_table_data =
                (parseInt(admission_form_fee_table_data) || 0) -
                (parseInt(admission_form_fee_discount_table_data) || 0);
            var miscellaneous_fee_final_amount_table_data =
                (parseInt(miscellaneous_fee_table_data) || 0) -
                (parseInt(miscellaneous_fee_discount_table_data) || 0);
            var annual_fee_final_amount_table_data =
                (parseInt(annual_fee_table_data) || 0) -
                (parseInt(annual_fee_discount_table_data) || 0);
            var kit_fee_final_amount_table_data =
                (parseInt(kit_fee_table_data) || 0) -
                (parseInt(kit_fee_discount_table_data) || 0);
            var tution_fee_final_amount_table_data =
                (parseInt(tution_fee_table_data) || 0) -
                (parseInt(tution_fee_discount_table_data) || 0);
            var late_fee_charges = parseInt(late_fee);
            var transport_charge_final_amount_table_data = parseInt(transport_charge_table_data);
            var other_charges_final_amount_table_data = parseInt(other_charges_table_data);
            var total_charges_final_amount_table_data = (registration_fee_final_amount_table_data +
                    kit_fee_final_amount_table_data + tution_fee_final_amount_table_data +
                    transport_charge_final_amount_table_data + other_charges_final_amount_table_data) -
                all_over_discount_final_amount_table_data + late_fee_charges + admission_form_fee_final_amount_table_data +
                miscellaneous_fee_final_amount_table_data + annual_fee_final_amount_table_data;
            if (late_fee_charges > 0) {
                $('#late_fee_table_tr').show();
                $('#late_fee_table_data').html(late_fee_charges);
            } else {
                $('#late_fee_table_tr').hide();
            }
            if (registration_fee_final_amount_table_data > 0) {
                $('#registration_fee_table_tr').show();
                $('#registration_fee_table_data').html(registration_fee_table_data);
                $('#registration_fee_discount_table_data').html(registration_fee_discount_table_data);
                $('#registration_fee_final_amount_table_data').html(registration_fee_final_amount_table_data);
            } else {
                $('#registration_fee_table_tr').hide();
            }
            if (annual_fee_final_amount_table_data > 0) {
                $('#annual_fee_table_tr').show();
                $('#annual_fee_table_data').html(annual_fee_table_data);
                $('#annual_fee_discount_table_data').html(annual_fee_discount_table_data);
                $('#annual_fee_final_amount_table_data').html(annual_fee_final_amount_table_data);
            } else {
                $('#annual_fee_table_tr').hide();
            }
            if (admission_form_fee_final_amount_table_data > 0) {
                $('#admission_form_fee_table_tr').show();
                $('#admission_form_fee_table_data').html(admission_form_fee_table_data);
                $('#admission_form_fee_discount_table_data').html(admission_form_fee_discount_table_data);
                $('#admission_form_fee_final_amount_table_data').html(admission_form_fee_final_amount_table_data);
            } else {
                $('#admission_form_fee_table_tr').hide();
            }
            if (miscellaneous_fee_final_amount_table_data > 0) {
                $('#miscellaneous_fee_table_tr').show();
                $('#miscellaneous_fee_table_data').html(miscellaneous_fee_table_data);
                $('#miscellaneous_fee_discount_table_data').html(miscellaneous_fee_discount_table_data);
                $('#miscellaneous_fee_final_amount_table_data').html(miscellaneous_fee_final_amount_table_data);
            } else {
                $('#miscellaneous_fee_table_tr').hide();
            }
            if (kit_fee_final_amount_table_data > 0) {
                $('#kit_fee_table_tr').show();
                $('#kit_fee_table_data').html(kit_fee_table_data);
                $('#kit_fee_discount_table_data').html(kit_fee_discount_table_data);
                $('#kit_fee_final_amount_table_data').html(kit_fee_final_amount_table_data);
            } else {
                $('#kit_fee_table_tr').hide();
            }
            if (tution_fee_final_amount_table_data > 0) {
                $('#tution_fee_table_tr').show();
                if (num_of_month_tution) {
                    num_of_month_tution = JSON.parse(num_of_month_tution);
                }
                if (!Array.isArray(num_of_month_tution)) {
                    num_of_month_tution = 0;
                }
                if (num_of_month_tution == 0) {
                    var actual_tution_Fee = 1;
                } else {
                    var actual_tution_Fee = tution_fee_table_data / num_of_month_tution;
                }
                $('#tution_fee_number_of_month_table_data').html(Array.isArray(num_of_month_tution) ? num_of_month_tution
                    .join(', ') : num_of_month_tution);
                $('#tution_fee_number_of_month_table_data').html(Array.isArray(num_of_month_tution) ? num_of_month_tution
                    .join(', ') : num_of_month_tution);
                $('#tution_fee_table_data').html(actual_tution_Fee);
                $('#tution_fee_discount_table_data').html(tution_fee_discount_table_data);
                $('#tution_fee_final_amount_table_data').html(tution_fee_final_amount_table_data);
            } else {
                $('#tution_fee_table_tr').hide();
            }
            if (transport_charge_final_amount_table_data > 0) {
                $('#transport_charges_table_tr').show();
                if (num_of_month_transport) {
                    num_of_month_transport = JSON.parse(num_of_month_transport);
                }
                if (!Array.isArray(num_of_month_transport)) {
                    num_of_month_transport = 0;
                }
                if (num_of_month_transport == 0) {
                    var actual_transport = 1;
                } else {
                    var actual_transport = transport_charge_final_amount_table_data / num_of_month_transport;
                }
                $('#transport_charge_table_data').html(actual_transport);
                $('#transport_charge_number_of_month_table_data').html(Array.isArray(num_of_month_transport) ?
                    num_of_month_transport.join(', ') : num_of_month_transport);
                $('#transport_charge_number_of_month_table_data').html(Array.isArray(num_of_month_transport) ?
                    num_of_month_transport.join(', ') : num_of_month_transport);
                $('#transport_charge_final_amount_table_data').html(transport_charge_final_amount_table_data);
            } else {
                $('#transport_charges_table_tr').hide();
            }
            if (other_charges_final_amount_table_data > 0) {
                $('#other_charges_table_tr').show();
                $('#other_charges_table_data').html(other_charges_table_data);
                $('#other_charges_final_amount_table_data').html(other_charges_final_amount_table_data);
            } else {
                $('#other_charges_table_tr').hide();
            }
            if (all_over_discount_final_amount_table_data > 0) {
                $('#all_over_discount_table_tr').show();
            } else {
                $('#all_over_discount_table_tr').hide();
            }
            $('#all_over_discount_final_amount_table_data').html(all_over_discount_final_amount_table_data);
            if (due_date) {
                // Parse the date string from the database
                var dbDue = new Date(due_date);
                var day = dbDue.getDate().toString().padStart(2, '0');
                var month = (dbDue.getMonth() + 1).toString().padStart(2, '0');
                var year = dbDue.getFullYear();
                $('#due_date').html(day + '-' + month + '-' + year);
            }
            $('#total_charges_final_amount_table_data').html(total_charges_final_amount_table_data);
        }
        $(".dlt_btn").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            const msg = confirm('Are you sure you want to remove this event?');
            if (!msg) {
                return;
            }
            let formData = new FormData();
            const id = $(this).data("id");
            formData.append('id', id);
            $.ajax({
                url: "deleteEvent",
                type: "post",
                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) {
                    const status = data['status'];
                    if (status == 200 && data.success) {
                        window.location.href = data.success;
                    } else {
                        // Handle errors
                        $.each(data.error, function(field_name, error) {
                            // Check if the error message for the field already exists
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error +
                                    '</span>');
                            }
                        });
                    }
                },
                error: function() {},
                complete: function() {}
            });
        });
    </script>
@endsection