@extends('layouts.adminLayout.dashboardLayout')

@section('content')
    <style>
        /* Style for small square tiles */
        .square-tile {
            width: 100%;
            position: relative;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* Base shadow */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 120px;
            background: linear-gradient(135deg, #ffffff, #f4f4f4);
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            cursor: pointer;
        }

        .square-tile:hover {
            transform: scale(1.1);
            /* Slight scaling for hover */
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
            /* Glowing shadow effect */
            background: linear-gradient(135deg, #e0e0e0, #ffffff);
            /* Subtle gradient change */
        }

        .tile-content h4 {
            margin: 10;
            font-size: 16px;
            color: #333;
            font-weight: bold;
            transition: color 0.4s ease;
        }

        .tile-content p {
            margin: 0;
            font-size: 24px;
            color: #000;
            font-weight: bold;
            transition: color 0.4s ease;
        }

        .square-tile:hover .tile-content h4,
        .square-tile:hover .tile-content p {
            color: #555;
            /* Slight color change on hover */
        }

        /* Gradient backgrounds for each tile */
        .tcbg1 {
            background: linear-gradient(135deg, #81C784, #A5D6A7);
        }

        .tcbg2 {
            background: linear-gradient(135deg, #E57373, #EF9A9A);
        }

        .tcbg3 {
            background: linear-gradient(135deg, #FFB74D, #FFCC80);
        }

        .tcbg4 {
            background: linear-gradient(135deg, #4DD0E1, #80DEEA);
        }

        .tcbg5 {
            background: linear-gradient(135deg, #B39DDB, #D1C4E9);
        }

        .tcbg6 {
            background: linear-gradient(135deg, #D4E157, #E6EE9C);
        }

        .modal-dialog {
            max-width: 80%;
            width: auto;
            margin: 30px auto;
        }

        .modal-content {
            height: 90vh;
            overflow: auto;
            border-radius: 8px;
        }

        .table-wrapper {
            position: relative;
            overflow-x: auto;
            max-height: 90vh;
        }

        #resultTable {
            width: 100%;
            border-collapse: collapse;
        }

        #resultTable th {
            position: sticky;
            top: -2px;
            background-color: #f8f9fa;
            /* Set a background color for the header */
            z-index: 1;
            /* Ensure the header stays above the table body */
        }

        #resultTable th,
        #resultTable td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
            white-space: nowrap;
        }

        /* Make the table header sticky */
        #resultTableList thead th {
            position: sticky;
            top: -1;
            background-color: #fff;
            /* Ensure the header has a background to cover any content under it */
            z-index: 10;
            /* Ensure the header stays above the table rows */
        }

        /* Remove scrollbar from modal */
        .modal-dialog {
            overflow: hidden;
            /* This hides the modal's overflow */
        }

        /* Optional: If you want to ensure no horizontal scrolling, add this */
        .modal-body {
            overflow-x: hidden;
            /* Hide horizontal scrollbar */
        }

        /* Optional: Adjust table overflow */
        .table-wrapper {
            overflow-y: auto;
            /* Allow vertical scrolling if the table exceeds height */
            max-height: 600px;
            /* Limit the table height to show scrollbar only when necessary */
        }

        .getbillDetails:hover {
            cursor: pointer;
        }

        .modal-dialog {
            z-index: 99999999999999999999 !important;
        }

        /*
            .modal-content {
                position: relative !important;
            } */

        .modal input,
        .modal textarea,
        .modal select {
            pointer-events: auto !important;
        }

        #loadfields .form-control-sm,
        #loadfields .form-control {
            padding: 4px !important;
            font-size: 13px !important;
        }

        #loadfields textarea {
            resize: none
        }

        #listingModalView .modal-header {
            align-items: flex-start !important;
        }

        tr,
        td,
        th {
            font-size: 14px;
        }

        tr td p {
            margin-bottom: 0px !important;
            margin: 0px !important;
        }

        .carousel-control-next {
            position: fixed !important;
            width: 3% !important;
            top: 50% !important;
            height: 62px !important;
            right: 8%
        }

        .carousel-control-prev {
            position: fixed !important;
            width: 3% !important;
            top: 50% !important;
            height: 62px !important;
            left: 7%
        }

        .carousel-control-next-icon,
        .carousel-control-prev-icon {
            width: 5rem !important;
            height: 5rem !important;
        }

        hr {
            margin: 5px 0 !important;
        }

        #accordionPanelsStayOpenExample .accordion-button {
            padding: 7px !important;
            background: #f7f7f7 !important;
            font-weight: bold !important;
        }

        #listingModalView .modal-header .btn-close {
            margin: 0px !important;
            padding: 0px !important;
        }

        .disabled-link {
            pointer-events: none;
            opacity: 0.6;
            cursor: not-allowed;
        }

        input:disabled,
        textarea:disabled,
        select:disabled,
        input[readonly],
        textarea[readonly] {
            background-color: #eee;
            /* Light gray background */
            color: rgb(61, 61, 61);
            ;
            /* Gray text */
            cursor: not-allowed;
            border: 1px solid #ccc;
        }

        /* Remove focus styles */
        input:disabled:focus,
        textarea:disabled:focus,
        select:disabled:focus,
        input[readonly]:focus,
        textarea[readonly]:focus {
            outline: none;
            box-shadow: none;
            border-color: #ccc;
            background-color: #eee;
            /* Keep the same border */
        }

        .no-wrap td {
            white-space: nowrap;
            /* Prevents text from wrapping */
            overflow: hidden;
            /* Hides overflowing content */
            text-overflow: ellipsis;
            /* Adds "..." if the content is too long */
        }

        .no-wrap {
            word-break: keep-all;
            /* Prevents breaking words */
        }
    </style>


    <main role="main" class="flex-shrink-0">
        <div class="container custom-container">
            <div class="login-5 mt-50 mb-50">
                <div class="container-fluid">
                    <div class="row no-gutters">
                        {{-- @include('layouts.partials.left_navbar') --}}
                        <div class="col-sm-12">
                            <div class="container-fluid">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="mb-0 p-2 fw-bold fs-3">Exam Filter </h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="container">
                                            <div class="row">
                                                <!-- Exam Mode -->
                                                <label for="ExamModeSelect" class="form-label fw-bold fs-5 me-3"
                                                    style="white-space: nowrap;">Exam Mode</label>
                                                <div class="col-md-12 d-flex align-items-center mb-3">

                                                    <select class="form-select form-select-lg" id="ExamModeSelect"
                                                        name="ExamType">
                                                        <option value=''>Please Select Exam Mode</option>
                                                        @foreach ($examMode as $key => $val)
                                                            <option value="{{ $key }}">{{ $val }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <!-- Exam Name -->
                                                <label for="ExamNameSelect" class="form-label fw-bold fs-5 me-3"
                                                    style="white-space: nowrap;">Exam Name</label>
                                                <div class="col-md-12 d-flex align-items-center mb-3">

                                                    <select class="form-select form-select-lg selectBox" id="ExamNameSelect"
                                                        name="ExamName">
                                                        <option value=''>Please Select Exam Name</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row mb-5">
                                                <!-- Search Functionality -->
                                                <label for="searchFunctionality" class="form-label fw-bold fs-5 me-3"
                                                    style="white-space: nowrap;">Search Functionaries</label>
                                                <div class="col-md-12 ">
                                                    <!-- Label -->

                                                    <!-- Input and Icon -->
                                                    <div class="">
                                                        <a href="javascript:void(0);" class="d-flex align-items-center">
                                                            <input placeholder="Search..."
                                                                class="form-control form-control-lg me-2" type="text"
                                                                id="searchFunctionality" readonly>
                                                            <i class="fa fa-filter fs-3 text-success"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-md-12 d-flex align-items-center mt-5">
                                                    <div class="container" id="tilesContainer">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Search Functionality Modal -->
            <div class="modal fade" id="SearchFunctionalityModal" tabindex="-1"
                aria-labelledby="SearchFunctionalityModalLabel" aria-hidden="true" data-bs-backdrop="static"
                data-bs-keyboard="true">
                <div class="modal-dialog modal-lg">
                    <form action="{{ route('generate-bulk-pdf') }}" method="POST" id="search_generatePdfForm">
                        @csrf
                        <input type="hidden" id="search_selectedBills" name="search_selectedBills">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="SearchFunctionalityModalLabel">Search Functionaries</h5>
                                <div class="ms-auto d-flex gap-2">
                                    <button class="btn btn-info text-white ">Report / Batch Report</button>
                                    <button type="button" class="btn btn-success exportExcelBtn"
                                        data-flag="resultTable">Export</button>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                            <div class="modal-body">
                                <!-- Search Bar -->
                                <div class="mb-5">
                                    <label for="searchInput" class="form-label">Search:</label>
                                    <input type="text" id="searchInput" class="form-control" placeholder="Search here..."
                                        onblur="filterResults()" onchange="filterResults()" autocomplete="off">
                                </div>

                                <!-- Table -->
                                <div class="table-wrapper">
                                    <table class="table table-bordered table-hover" id="resultTable">
                                        <thead class="">
                                            <tr>
                                                <th>SNo.</th>
                                                <th></th>
                                                <th>Reference No.</th>
                                                <th>Functionary ID</th>
                                                <th>Functionary Name</th>
                                                <th>Exam Name</th>
                                                <th>Bill Status</th>
                                                <th>Functionary Role</th>
                                                <th>Emai ID</th>
                                                <th>Mobile No.</th>
                                                <th>Bill Submit Date</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableBody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Search Functionality Modal -->

            <div class="modal fade" id="listingModal" tabindex="-1" aria-labelledby="listingModalLabel" aria-hidden="true"
                data-bs-backdrop="static" data-bs-keyboard="true">
                <div class="modal-dialog modal-lg">
                    <form action="{{ route('generate-bulk-pdf') }}" method="POST" id="generatePdfForm">
                        @csrf
                        <input type="hidden" id="selectedBills" name="selectedBills">

                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="listingModalLabel">Listing Details</h5>
                                <div class="ms-auto d-flex gap-2">
                                    <button class="btn btn-info text-white" id="batchReport">Report / Batch Report</button>
                                    <button type="button" class="btn btn-success exportExcelBtn"
                                        data-flag="resultTableList">Export</button>
                                    <button type="button" class="btn btn-warning text-white"
                                        id="exportDetailExcelBtn">Observer / Deputy Observer Detail Report</button>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                            <div class="modal-body">
                                <div class="table-wrapper">
                                    <input type="text" id="searchInputData" class="form-control my-3"
                                        placeholder="Search...">

                                    <table class="table table-bordered table-hover" id="resultTableList">
                                        <thead class="">
                                            <tr>
                                                <th>SNo.</th>
                                                <th></th>
                                                <th>Reference No.</th>
                                                <th>Functionary ID</th>
                                                <th>Functionary Name</th>
                                                <th>Exam Name</th>
                                                <th>Bill Status</th>
                                                <th>Functionary Role</th>
                                                <th>Emai ID</th>
                                                <th>Mobile No.</th>
                                                <th>Bill Submit Date</th>
                                            </tr>

                                        </thead>
                                        <tbody id="tableBodyList" class="no-wrap">
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- edit / approve / complete -->
            <div class="modal" id="listingModalView" tabindex="-1" aria-labelledby="listingModalLabelView"
                aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        {{-- <div class="modal-header">
                        <h4 class="modal-title" id="listingModalLabelView"></h4>
                        <div class="mx-auto">
                            <!-- This centers the button -->
                            <button class="btn btn-secondary " id="forEdit" title="Open the page in read-only mode.">
                                <i class="fa fa-pencil" aria-hidden="true"></i>
                            </button>
                        </div>
                        <p id="saveStatus" class="text-success me-2" style="width:50px"></p>
                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> --}}

                        <div class="modal-header d-flex justify-content-between align-items-center">
                            <h4 class="modal-title" id="listingModalLabelView">
                                <span>City Coordinator Bill </span><br>
                                <span class="text-success">REF224370644</span>
                            </h4>

                            <p id="saveStatus" class="text-success me-2" style="width:350px"></p>

                            <div class="d-flex align-items-center">
                                <button class="btn btn-secondary editR me-5" id="forEdit"
                                    title="Open the page in read-only mode.">
                                    <i class="fa fa-pencil" aria-hidden="true"></i>
                                </button>
                                <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                        </div>

                        <div class="modal-body" id="loadfields">
                            <!-- start -->

                            <!-- end -->
                        </div>
                    </div>
                </div>
            </div>
    </main>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.4/dist/sweetalert2.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.4/dist/sweetalert2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $('#ExamNameSelect').select2({
            placeholder: "Please Select Exam Name", // Set the placeholder using Select2
            allowClear: true // Allows clearing the selection (optional)
        });

        $('#generatePdfForm, #search_generatePdfForm').on('submit', function(event) {
           // alert(123);
            event.preventDefault();
            var selectedBills = [];
            // Loop through checked checkboxes
            $('input[type="checkbox"]:checked').each(function() {
               // alert(123);
                selectedBills.push({
                    referenceNo: $(this).data('reference-no'),
                    examType: $(this).data('type'),
                    billtype: $(this).data('billtype'),
                    centno: $(this).data('centno'),
                    role: $(this).data('role'),
                    status: $(this).data('status'),
                    examtable: $(this).data('examtable'),
                    observerId: $(this).data('observer-id')
                });
            });
            // Check if no checkboxes are selected
            if (selectedBills.length === 0) {
                alert('Please select at least one item ');
                return;
            }
            $('#selectedBills').val(JSON.stringify(selectedBills));
            this.submit();
        });



        $(document).on('click', '.editR', function() {
            $(".readonlyR").each(function() {
                $(this).prop("readonly", !$(this).prop("readonly"));
            });
        });
        //number only input
        $(document).on('input', 'input.onlyInt', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
        // number with 2 decimal places
        $(document).on('input', '.onlyNumberDecimal', function() {
            this.value = this.value
                .replace(/[^0-9.-]/g, '') // Allow only numbers, decimal, and minus sign
                .replace(/(?!^)-/g, '') // Allow only one leading minus sign
                .replace(/(\..*)\./g, '$1') // Prevent multiple decimals
                .replace(/^(-?)0+(\d)/, '$1$2') // Prevent leading zeros before numbers
                .replace(/^(-?\d+\.?\d{0,2}).*$/, '$1'); // Allow only 2 decimal places
        });
        // export table
        $(".exportExcelBtn").click(function() {
            // Get the table data
            var tableId = $(this).data('flag');
            var wb = XLSX.utils.table_to_book(document.getElementById(tableId), {
                sheet: "Sheet 1"
            });

            // Access the sheet from the workbook (first sheet)
            var ws = wb.Sheets["Sheet 1"];

            // Convert sheet to JSON (array of rows)
            var sheetData = XLSX.utils.sheet_to_json(ws, {
                header: 1
            });

            // Remove the first column from each row (starting from the second row)
            sheetData.forEach((row, index) => {
                row.shift(); // Removes the first column in each row
            });

            // Convert the modified data back to the worksheet
            var newWs = XLSX.utils.aoa_to_sheet(sheetData);

            // Assign the new sheet to the workbook
            wb.Sheets["Sheet 1"] = newWs;

            // Create and download the Excel file with the first column removed
            XLSX.writeFile(wb, "data.xlsx");
        });
        //checked box
        $("#selectAll").click(function() {
            $(".checkboxItem").prop("checked", this.checked);
        });
        // Update #selectAll checkbox state when individual checkboxes change
        $(document).on('change', '.checkboxItem', function() {
            if ($(".checkboxItem:checked").length === $(".checkboxItem").length) {
                $("#selectAll").prop("checked", true);
            } else {
                $("#selectAll").prop("checked", false);
            }
        });
        // end

        $('#SearchFunctionalityModal').on('shown.bs.modal', function() {
            $('#searchInput').val('');
            const tableBody = document.getElementById('resultTable').getElementsByTagName('tbody')[0];
            tableBody.innerHTML = ''; // Clear previous results
        });
        $("#ExamModeSelect").on('change', function() {

            var examMode = $(this).val();
            var examName = $('#ExamNameSelect').val();
            $('.overlay').show();
            $.ajax({
                url: "{{ route('searchExam') }}",
                method: 'POST',
                data: {
                    examMode: examMode,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    // console.log(response.success);
                    if (response.success == 1) {
                        $('.overlay').hide();
                        var examNameSelect = $('#ExamNameSelect');
                        examNameSelect.empty(); // Clear existing options
                        examNameSelect.append('<option value="">---Select Exam---</option>')
                        $.each(response.data, function(index, exam) {
                            examNameSelect.append($('<option>', {
                                value: exam.ExamType,
                                text: exam.Exam_Name
                            }));
                        });
                        $('#tilesContainer').empty();
                    }
                },
                error: function(data) {
                    $('.overlay').hide();
                }
            });
        });



        $('#ExamNameSelect').on('change', function() {
            let examType = $(this).val();
            if (examType == '') {
                $('#tilesContainer').empty();
                return false;
            }
            $('.overlay').show();
            $.ajax({
                url: "{{ route('countTotalBill') }}",
                method: 'POST',
                data: {
                    examType: examType,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    // console.log(response.data);
                    if (response.success == 1) {
                        $('.overlay').hide();
                        // Access the tiles container
                        let tilesContainer = $('#tilesContainer');
                        // Clear existing tiles
                        tilesContainer.empty();
                        // Append tiles dynamically
                        response.data.forEach((item, index) => {
                            let tileHTML = `
                            <fieldset class="fieldset-border">
                                <legend class="text-center"><i class="fa fa-files-o"></i> ${item.type.toUpperCase()}</legend>
                                <div class="row mb-3">
                                <div class="col-md-2 mb-3">
                                        <div class="square-tile tcbg1" data-examtype="${item.examType}" data-status="${item.statusKey.open}" data-label="${item.labelName.open}" data-type="${item.type}" data-table="${item.table}">
                                        <div class="tile-content">
                                            <h4>${item.labelName.open}</h4>
                                            <p class="count-value">${item.status.open}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2 mb-3">
                                    <div class="square-tile tcbg3"  data-examtype="${item.examType}" data-status="${item.statusKey.processing}" data-label="${item.labelName.processing}" data-type="${item.type}" data-table="${item.table}">
                                        <div class="tile-content">
                                            <h4>${item.labelName.processing}</h4>
                                            <p class="count-value">${item.status.processing}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2 mb-3">
                                    <div class="square-tile tcbg2" data-examtype="${item.examType}" data-status="${item.statusKey.rejected}" data-label="${item.labelName.rejected}" data-type="${item.type}" data-table="${item.table}">
                                        <div class="tile-content">
                                            <h4>${item.labelName.rejected}</h4>
                                            <p class="count-value">${item.status.rejected}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2 mb-3">
                                    <div class="square-tile tcbg4" data-examtype="${item.examType}" data-status="${item.statusKey.completed}" data-label="${item.labelName.completed}" data-type="${item.type}" data-table="${item.table}">
                                        <div class="tile-content">
                                            <h4>${item.labelName.completed}</h4>
                                            <p class="count-value">${item.status.completed}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="square-tile tcbg6" data-examtype="${item.examType}" data-status="${item.statusKey.unsubmitted}" data-label="${item.labelName.unsubmitted}" data-type="${item.type}" data-table="${item.table}">
                                        <div class="tile-content">
                                            <h4>${item.labelName.unsubmitted}</h4>
                                            <p class="count-value">${item.status.unsubmitted}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <div class="square-tile tcbg5" data-examtype="${item.examType}" data-status="${item.statusKey.totalbill}" data-label="${item.labelName.totalbill}" data-type="${item.type}" data-table="${item.table}">
                                        <div class="tile-content">
                                            <h4>${item.labelName.totalbill}</h4>
                                            <p class="count-value">${item.status.totalbill}</p>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>`;
                            tilesContainer.append(tileHTML);


                        });
                    }

                },
                error: function(data) {
                    $('.overlay').hide();
                }
            });

        });

        // Add click event listener to dynamically load and display modal content
        $(document).on('keyup', '#searchInputData', function() {
            const searchQuery = $(this).val().toLowerCase(); // Get search value
            filterTableData(searchQuery);
        });

        function filterTableData(searchQuery) {
            $('#tableBodyList tr').each(function() {
                let rowText = $(this).text().toLowerCase();
                if (rowText.includes(searchQuery)) {
                    $(this).show(); // Show matching rows
                } else {
                    $(this).hide(); // Hide non-matching rows
                }
            });
        }

        $(document).on('click', '.square-tile', function() {
            const label = $(this).data('label');
            const type = $(this).data('type');
            const status = $(this).data('status');
            const examType = $(this).data('examtype');
            const tableName = $(this).data('table');
            console.log(label + '==' + type + '==' + status + '==' + tableName);
            // Set modal title dynamically
            $('#listingModalLabel').text(` ${label} (${type})`);
            $('.actionBtn').attr('data-examtype', examType);
            $('.actionBtn').attr('data-type', type);
            // alert(label);
            if (label == 'Open') {
                $('.forOpen').show();
                $('.forOpenCommonforProcess').show();
                $('.forProcess').hide();

            } else if (label == 'In Process Bill') {
                $('.forOpen').hide();
                $('.forProcess').show();
                $('.forOpenCommonforProcess').show();
            } else {
                $('.forOpenCommonforProcess').hide();
                $('.forOpen').hide();
                $('.forProcess').hide();
            }
            // Show loading text while fetching data
            //$('#listingModal .modal-body').html('');
            $('.overlay').show();
            // Fetch listing data (replace with actual API call or logic)
            $.ajax({
                url: "{{ route('billList') }}", // Adjust with the correct route
                method: 'GET',
                data: {
                    label: label,
                    type: type,
                    status: status,
                    examType: examType
                },
                success: function(response) {
                    // Clear the previous table data
                    $('#tableBodyList').html('');
                    if(label !='Unsubmitted' && label !='Total Bill'){
                        $('#batchReport').show();
                    }else {
                        $('#batchReport').hide();
                    }
                    if (tableName == 'CITY' && label !='Unsubmitted' && label !='Total Bill') {
                        $('#exportDetailExcelBtn').show();
                    } else {
                        $('#exportDetailExcelBtn').hide();
                    }

                    if (response.length === 0) {
                        $('#selectAll').prop('checked', false);
                        // If no data is available, show a message in the table
                        $('#tableBodyList').html(
                            '<tr><td colspan="10" class="text-center">No Data Available</td></tr>'
                        );
                        $('#exportDetailExcelBtn').hide();
                        $('.overlay').hide();
                    } else {

                        $('#selectAll').prop('checked', false);
                        var i = 0;
                        // Loop through each item in the response and append a table row
                        response.forEach(function(item) {
                            i++;
                            let dateString = item.billsubmitdate; // Example: "2025-04-03 00:00:00.000"
                            // Convert to Date Object
                            let dateObj = new Date(dateString);
                                if (isNaN(dateObj.getTime())) {
                                    formattedDate = "N/A"; // Handle invalid date
                                } else {
                                    formattedDate = new Intl.DateTimeFormat('en-GB')
                                        .format(dateObj)
                                        .replace(/\//g, '-'); // Format as DD-MM-YYYY
                                }
                            // Create a table row for each data item
                            var row = '<tr>' +
                                '<td>' + i + '.</td>' +
                                '<td><input type="checkbox" class="getbillDetailsPdf" data-reference-no="' +
                                item.ReferenceNo +
                                '" data-type="' + examType +
                                '" data-billtype="' + item.BillType +
                                '" data-centno="' + item.Centno +
                                '" data-role="' + item.role +
                                '" data-status="' + status +
                                '" data-examtable="' + tableName +
                                '" data-observer-id="' + item.ObserverID +
                                '" name="selectedBills[]" value="' + item
                                .ReferenceNo + '=' + item.role + '=' + item
                                .BillType + '=' + item.ObserverID + '=' + examType +
                                '=' + item.Centno + '"></td>' +
                                '<td><p class="getbillDetails" data-reference-no=' +
                                item.ReferenceNo +
                                ' data-type=' + examType +
                                ' data-status=' + status +
                                ' data-examtable=' + tableName +
                                ' data-observer-id=' + item.ObserverID +
                                ' style="color: green; text-decoration: underline;">' +
                                item.ReferenceNo + '</p></td>' +
                                '<td>' + item.ObserverID + '</td>' +
                                '<td>' + item.ObserverName + '</td>' +
                                '<td>' + item.ExamID + '</td>' +
                                '<td>' + label + '</td>' +
                                '<td>' + type.replace(/\bBILL\b/g, "").trim() +
                                '</td>' +
                                '<td>' + item.Email + '</td>' +
                                '<td>' + item.Mobile + '</td>' +
                                '<td>' + formattedDate + '</td>' +
                                '</tr>';

                            // Append the row to the table body
                            $('#tableBodyList').append(row);

                        });
                        $('.overlay').hide();
                    }
                },
                error: function() {
                    // If an error occurs, display a fallback message
                    $('#tableBodyList').html(
                        '<tr><td class="text-center" colspan="8">Error fetching data. Please try again later.</td></tr>'
                    );
                    $('.overlay').hide();
                }
            });


            // Show the modal
            $('#listingModal').modal('show');
        });
    });
    $(document).ready(function() {
        //Search show popup
        $('#searchFunctionality').click(function() {
            $('#SearchFunctionalityModal').modal('show');
        });
        // view bill details
        $(document).on("focus", ".getContents", function() {
            $(this).data("prevValue", $(this).val()); // Store initial value
        });
        $(document).on('blur', '.getContents', function() {
            var prevValue = $(this).data("prevValue");
            var currentValue = $(this).val();
            if (prevValue !== currentValue) {
                if (!$(this).prop('readonly')) {
                    $('.overlay').show();

                    const referenceNo = $('#billDetail').data('reference-no');
                    const observerId = $('#billDetail').data('observer-id');
                    const examtable = $('#billDetail').data('examtable');
                    const status = $('#billDetail').data('status');
                    const type = $('#billDetail').data('type');
                    const updateId = $(this).attr('id'); // Get input ID
                    const getupdate = $(this).val();
                    const restriction = $(this).data('restriction') || 'no';

                    $.ajax({
                        url: "{{ route('updateBillDeatils') }}",
                        method: 'get',
                        data: {
                            referenceNo: referenceNo,
                            observerId: observerId,
                            examtable: examtable,
                            status: status,
                            type: type,
                            updateId: updateId,
                            getupdate: getupdate,
                            restriction: restriction


                        },
                        // dataType: 'json',
                        success: function(response) {
                            $('#listingModalLabelView').html(
                                `<span>${response.role} Bill ${response.Mode}</span><br>${response.referenceNo}`
                            );
                            $('#saveStatus').text(`${response.updateStatus}`);
                            $('#loadfields').html(response.html);
                            $('.overlay').hide();
                            setTimeout(function() {
                                $("#saveStatus").text('');
                            }, 3000);
                            $(".readonlyR").each(function() {
                                $(this).prop("readonly", false);
                            });
                        },

                    });
                    $('#listingModalView').modal('show');
                    // Ensure focus on the first input when modal is shown
                    $('#listingModalView').on('shown.bs.modal', function() {
                        // alert();
                        $(this).find('input:first').focus(); // Focus on the first input field
                    });
                }
            }

        });

        $(document).on('click', '.getbillDetails', function() {
            $('.overlay').show();
            // alert('123');

            const referenceNo = $(this).data('reference-no');
            const observerId = $(this).data('observer-id');
            const nextval = $(this).data('nextval') || 'no';
            const examtable = $(this).data('examtable');
            const status = $(this).data('status');
            const type = $(this).data('type');
            const verify = $(this).data('verify') || 'no';
            const restriction = $(this).data('restriction') || 'no';

            if (verify != 'no') {
                if (verify == 'rejected') {
                    if ($('.RejectionRemark').val().trim().length === 0) {
                        {
                            Swal.fire({
                                icon: 'warning',
                                text: 'Please add rejection remarks !',
                            });
                            $('.overlay').hide();
                            return false;
                        }
                    }

                }
            }
            $.ajax({
                url: "{{ route('billDetails') }}",
                method: 'GET',
                data: {
                    referenceNo: referenceNo,
                    nextval: nextval,
                    examtable: examtable,
                    status: status,
                    type: type,
                    observerId: observerId,
                    verify: verify,
                    restriction: restriction
                },
                // dataType: 'json',
                success: function(response) {
                    $('#listingModalLabelView').html(
                        `<span>${response.role} Bill </span><br><span class="text-success">${response.referenceNo}</span>`
                    )
                    if ((response.Role_ID) == 24 && (response.BillStatus == 0) ||
                        (response.Role_ID) == 25 && (response.BillStatus == 1) ||
                        (response.Role_ID) == 26 && (response.BillStatus == 4) && ((response
                            .BillStatus != 3) || (response.BillStatus == 5))) {
                        $('#forEdit').addClass('editR');
                    } else {
                        $('#forEdit').removeClass('editR');
                    }
                    $('#loadfields').html(response.html);
                    $('.overlay').hide();
                    if (response.updateStatus == 1) {
                        Swal.fire({
                            icon: 'success',
                            text: 'Successfully update bill status.',
                        });
                    }
                },
            });
            $('#listingModalView').modal('show');
            // Ensure focus on the first input when modal is shown
            $('#listingModalView').on('shown.bs.modal', function() {
                // alert();
                $(this).find('input:first').focus(); // Focus on the first input field
            });
        });

        $("#exportDetailExcelBtn").click(function() {
            var ExamType = $('.getbillDetailsPdf').attr('data-type');
            var Status = $('.getbillDetailsPdf').attr('data-status');
            if (ExamType && Status) {
                $.ajax({
                    url: "{{ route('detailReport') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ExamType: ExamType,
                        Status: Status
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.file) {
                            window.location.href = response.file; // Trigger file download
                        }
                    },
                    error: function(data) {
                        alert("Error fetching data");
                    }
                });
            } else {
                alert('Data Not Found!');
            }
        })

    });

    // end
    let BillData = [];
    let searchIndex = {};

    function fetchData() {
        $.ajax({
            url: "{{ route('allBill') }}",
            method: 'GET',
            data: {
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: function(response) {
                BillData = response;
                buildIndex(); // Build index after fetching data
                //filterResults(); // Display all data initially

            },
            error: function(data) {
                console.error("Error fetching data");
            }
        });
    }

    // Build an optimized search index
    function buildIndex() {
        searchIndex = {};
        BillData.forEach((item, index) => {
            for (let key in item) {
                let value = item[key].toLowerCase();
                if (!searchIndex[value]) {
                    searchIndex[value] = [];
                }
                searchIndex[value].push(index);
            }
        });
    }

    // Function to filter results
    function filterResults() {
        $('.overlay').show();
        const input = document.getElementById('searchInput').value.trim().toLowerCase();
        const tableBody = document.getElementById('resultTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = ''; // Clear table before inserting rows

        if (input === '') {
            // If input is empty, show blank data
            BillData.forEach(item => tableBody.innerHTML = '');
            $('.overlay').hide();
            return;
            setTimeout(() => $('.overlay').hide(), 300); // Delay hiding loader
            return;

        }
        let matchedIndexes = new Set();

        // Fast lookup using the search index
        if (searchIndex[input]) {
            searchIndex[input].forEach(index => matchedIndexes.add(index));
        } else {
            // Partial matching for inputs not found directly
            Object.keys(searchIndex).forEach(key => {
                if (key.includes(input)) {
                    searchIndex[key].forEach(index => matchedIndexes.add(index));
                }
            });
        }
        // Display filtered results
        matchedIndexes.forEach(index => addTableRow(BillData[index], tableBody));
        // Hide loader with a slight delay to ensure all rows are added
        setTimeout(() => $('.overlay').hide(), 300);

    }

    // Function to add a row to the table
    function addTableRow(item, tableBody) {
        const row = tableBody.insertRow();

        // Create the first cell
        const serialNo = tableBody.rows.length;

        // Create Serial Number Cell
        const serialCell = row.insertCell(0);
        serialCell.textContent = serialNo;
        // Create Checkbox Cell
        const checkboxCell = row.insertCell(1);
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.className = 'rowCheckbox getbillDetailsPdf'; // Optional class for styling
        checkbox.name='selectedBills[]';
        checkbox.value = `${item.ReferenceNo}=${item.RoleValue}=${item.BillType}=${item.ObserverID}=${item.ExamType}=${item.Centno}`;
        checkbox.dataset.referenceNo = item.ReferenceNo;
        checkbox.dataset.observerId = item.ObserverID;
        checkbox.dataset.status = item.BillStatus;
        checkbox.dataset.type = item.ExamType;
        checkbox.dataset.examtable = item.examtable;
        checkbox.dataset.billtype = item.BillType;
        checkbox.dataset.centno = item.Centno;
        checkbox.dataset.role = item.RoleValue;
        
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                document.querySelectorAll('.rowCheckbox').forEach(cb => {
                    if (cb !== this) cb.checked = false;
                });
            }
        });


        let dateString = item.billsubmitdate; // Example: "2025-04-03 00:00:00.000"
        // Convert to Date Object
// Check if the date is valid
        let dateObj = new Date(dateString);
        if (isNaN(dateObj.getTime())) {
            formattedDate = "N/A"; // Handle invalid date
        } else {
            formattedDate = new Intl.DateTimeFormat('en-GB')
                .format(dateObj)
                .replace(/\//g, '-'); // Format as DD-MM-YYYY
        }

        checkboxCell.appendChild(checkbox);

        const cell1 = row.insertCell(2);
        // Create <span> tag
        const spanTag = document.createElement('span');
        spanTag.className = 'getbillDetails';
        spanTag.dataset.referenceNo = item.ReferenceNo;
        spanTag.dataset.observerId = item.ObserverID;
        spanTag.dataset.status = item.BillStatus;
        spanTag.dataset.type = item.ExamType;
        spanTag.dataset.examtable = item.examtable;
        spanTag.dataset.restriction = 'yes';
        spanTag.style.color = 'green';
        spanTag.style.textDecoration = 'underline';
        spanTag.textContent = item.ReferenceNo;

        // Append <span> to cell
            if (item.ReferenceNo !== null && item.ReferenceNo !== undefined && item.ReferenceNo !== '') {
                cell1.appendChild(spanTag);
            }
        // Add remaining cells
        row.insertCell(3).textContent = item.ObserverID;
        row.insertCell(4).textContent = item.ObserverName;
        row.insertCell(5).textContent = item.ExamID;
        row.insertCell(6).textContent = item.BillStatus;
        row.insertCell(7).textContent = item.Role;
        row.insertCell(8).textContent = item.Email.toLowerCase();
        row.insertCell(9).textContent = item.Mobile;
        row.insertCell(10).textContent = formattedDate;
    }

    // Call fetchData when the page loads
    window.onload = fetchData;
</script>