@extends('layouts.app')

@section('content')
    <style type="text/css">
        :root {
            --primary-color: #34548A;
            --secondary-color: #ebe7e7;
            --border-color: #d7d7d7;
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: 1px solid #aaa;
            border-radius: 18px;
            height: 38px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #444;
            line-height: 36px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 35px;
        }

        .select2.select2-container {
            width: 350px !important;
        }

        #metaTable_filter input,
        #mapperCreditTable_filter input {
            border-radius: 35px !important;
            padding: 10px;
            outline: none;
        }

        /* Pagination button styles */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border: 2px solid var(--border-color) !important;
            color: var(--primary-color) !important;
            font-weight: bold;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            color: var(--secondary-color) !important;
            background: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            font-weight: bold !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            border: 2px solid var(--primary-color) !important;
            background: var(--primary-color) !important;
            color: var(--secondary-color) !important;
            font-weight: bold !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
            color: var(--secondary-color) !important;
        }

        .dataTables_info {
            color: var(--primary-color) !important;
            font-size: 16px;
            font-weight: bold;
        }

        table.dataTable {
            border: none !important;
        }

        .dataTables_length {
            display: none;
        }

        .dataTables_processing {
            position: absolute;
            top: 40%;
            left: 50%;
            text-align: center;
            background: rgba(0, 0, 0, 0.71);
            z-index: 99;
            transform: translate(-50%, -50%);
            color: #fff;
            padding: 10px 20px;
        }

        table.dataTable thead {
            background-color: var(--primary-color) !important;
            border: 0 !important;
            padding: 5px !important;
            color: var(--secondary-color) !important;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        table.dataTable thead th,
        table.dataTable tbody td {
            border: none !important;
        }

        table.dataTable tbody th,
        table.dataTable tbody td {
            padding: 16px 6px;
        }

        table.dataTable.stripe tbody tr.odd,
        table.dataTable.display tbody tr.odd {
            background-color: #f9f9f9;
        }

        .action-cont-test-user {
            display: flex;
            align-items: flex-end;
            justify-content: start;
            margin-left: 1%;
            position: relative;
            gap: 5%;
            width: 75%;
            margin-bottom: -2.3%;
            z-index: 10;
        }

        .dataTables_filter {
            margin-bottom: 35px !important;
        }

        #mapperCreditHistoryTable_filter,
        #reconCreditHistoryTable_filter {
            margin-bottom: 20px !important;
            margin: 0px 17px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        #mapperCreditHistoryTable_filter input[type="search"],
        #reconCreditHistoryTable_filter input[type="search"] {
            padding: 9px 40px 9px 20px !important;
            letter-spacing: normal;
            border: 1px solid rgba(0, 0, 0, 0.2) !important;
            background-color: #fff;
            font-size: 15px !important;
            color: #4e4e4e;
            font-family: "Montserrat";
            border-radius: 30px;
            width: 75%;
            outline: none;
        }

        .search-icon,
        .spin-icon {
            position: absolute;
            z-index: 2;
            right: 15px !important;
            font-size: 16px;
            width: 20px;
            margin-left: -2.5px;
            text-align: center;
            opacity: 0.7;
            padding: 10px 0;
            top: 0px;
            color: #c2c2c2;
        }

        .spin-icon {
            display: none;
        }

        .daily-calling-status-table-container {
            position: relative;
        }

        .include-test-user-label,
        .include-test-user-label-mapper-credit,
        .include-test-user-label-recon-credit {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-left: -35%;
            margin-top: 10px;
            padding: .375rem .75rem;
            margin-bottom: 0px !important;
            font-size: .9rem;
            font-weight: 400;
            margin-right: -18px;
            color: #495057;
            background-color: #e9ecef;
            border: 1px solid #ced4da;
            border-radius: .25rem;
        }

        .fs-wrap,
        .fs-dropdown {
            width: 300px !important;
        }

        .fs-label-wrap .fs-label {
            padding: 10px 22px 10px 8px !important;
        }

        .daterangepicker .calendar-table th,
        .daterangepicker .calendar-table td {
            min-width: 18px;
            width: 18px;
            height: 15px;
            line-height: 15px;
            font-size: 12px;
            font-family: "Montserrat";
        }

        .user-date-div {
            display: flex;
            align-items: center;
            justify-content: end;
            gap: 10%;
        }

        input[type="text"] {
            padding: 8px 16px !important;
            width: 14rem !important;
        }

        .select-date-div {
            margin-bottom: 0px;
        }

        .datepicker-div {
            padding: 0px !important;
        }

        .userlist-div,
        .entity-div,
        .select-date-div {
            display: flex;
            flex-direction: column;
            align-items: baseline;
            justify-content: flex-start;
        }

        .user-label {
            font-weight: 600;
        }

        .select-all {
            width: 20%;
        }

        .userlist-all-div,
        .entity-all-div {
            display: flex;
            align-items: end;
        }

        .numbertype-submenu .role-permission-list {
            display: flex;
            width: 50%;
            flex-direction: row;
            justify-content: center;
            margin: auto;
            margin-top: -25px;
            margin-bottom: 30px;
        }

        .numbertype-submenu .role-permission-list li {
            width: 50%;
            text-align: center;
            border-bottom: 3px solid #918c8c;
            background-color: #e3e3e3;
        }

        .role-permission-list li.menu-item-selected a {
            color: #F9A035;
        }

        .numbertype-submenu .role-permission-list li a {
            text-align: center;
            float: initial;
            margin: auto;
            white-space: nowrap;
            width: 100%;
            outline: none;
        }

        .role-permission-list li.menu-item-selected {
            border-bottom: 4px solid #F9A035;
            color: #F9A035;
        }

        .modal {
            z-index: 999 !important;
        }

        .credit-usage-detail,
        .recon-credit-usage-detail {
            display: none;
            position: absolute;
            top: 81px;
            left: 16px;
        }

        .recon-credit-usage-detail {
            top: 74px !important;
        }

        .blue-bold {
            color: #34548a;
            font-weight: 600;
            font-size: 18px;
        }

        .submenu {
            display: flex;
            justify-content: center;
            gap: 26%;
            /* border-bottom: 2px solid #34548a; */
            width: 30%;
            margin: 0px auto 40px auto;
            font-size: 16px;
            font-weight: 600;
        }

        .submenu input[type="checkbox"]:checked+span {
            border-bottom: 2px solid #34548a;
            color: #34548a;
            padding-bottom: 7px;
        }

        .first-div,
        .second-div,
        .third-div {
            display: flex;
            align-items: baseline;
            margin-bottom: 40px;
        }

        .third-div {
            align-items: center !important;
        }

        #credit_input,
        #recon_credit_input,
        #organizationReconCreditsAdjustment {
            width: 80%;
            padding: 10px !important;
            font-size: 14px !important;
            border: 1px solid #aaa !important;
            border-radius: 4px !important;
        }

        #organizationReconCreditsAdjustment {
            width: 22rem !important;
        }

        .radio-btn-div {
            font-size: 16px;
            display: flex;
            gap: 25px;
            align-items: center;
        }

        #reason,
        #comment,
        #recon_comment {
            width: 80%;
        }

        #creditAdjustmentSection,
        #reconCreditAdjustmentSection {
            margin-left: 14%;
        }

        .error-text {
            color: red;
            font-size: 14px;
            margin-top: 4px;
        }

        .history-btn-div,
        .recon-history-btn-div {
            margin-left: 57%;
            margin-bottom: 3%;
        }

        .back-btn-div,
        .recon-back-btn-div {
            margin-left: -88%;
            margin-bottom: 2%;
        }

        .fa-arrow-right {
            margin-left: 5px;
        }

        .fa-arrow-left {
            margin-right: 5px;
        }

        #mapperCreditHistoryTable_filter input,
        #reconCreditHistoryTable_filter input {
            border-radius: 50px !important;
            padding: 10px 25px !important;
        }

        .common-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
            border: 1px solid #e2e2e2;
            text-align: center;
            background-color: #f8f8f8;
            box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
            z-index: 999;
            -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
        }

        .simple-success-modal,
        .simple-error-modal,
        .simple-action-modal {
            width: 420px;
            display: none;
        }

        . .simple-action-modal {
            width: 500px !important;
        }

        .simple-success-modal-close,
        .simple-error-modal-close,
        .simple-action-modal-close {
            cursor: pointer;
            font-size: 20px;
            line-height: 25px;
            margin-left: 98%;
            color: #64677a;
            font-weight: 100;
            z-index: 2;
        }

        .msg-header {
            color: #008000;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .error-msg-header {
            color: red !important;
        }

        .success-msg-header {
            color: green !important;
        }

        .msg-text {
            font-size: 16px;
        }

        input:focus,
        textarea:focus,
        button:focus,
        select:focus,
        .select2-container--default .select2-selection:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        #reconUserFilter,
        #mapperUserFilter {
            margin-left: 5%;
        }

        .description-icon {
            cursor: pointer;
            position: absolute;
            left: 9.5%;
            top: 1%;
            color: #34548A;
            font-size: 16px;
        }

        .monthly-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .history-toolbar {
            display: flex;
            align-items: center;
            gap: 20px;
            width: 100%;
            margin-bottom: 20px;
        }

        .history-date,
        .history-search {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .history-search {
            margin-left: auto;
        }
        .common-modal {
            z-index: 999;
        }
        .simple-confirm-modal {
            position: relative; /* important */
        }

        .simple-confirm-modal-close {
            position: absolute;
            top: 10px;
            right: 12px;
            cursor: pointer;
            font-size: 18px;
            color: #64677a;
        }
        .simple-confirm-modal {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 10000 !important;
        }
        .confirm-btn-wrapper {
            display: flex;
            justify-content: center;   /* 🔥 center horizontally */
            align-items: center;
            gap: 16px;                 /* space between buttons */
            margin-top: 20px;
        }
        .confirm-btn-wrapper button {
            min-width: 120px;
            text-align: center;
        }

        .credit-toggle-row {
            display: flex;
            align-items: center;
            gap: 40px;
            margin-bottom: 15px;
        }

        .credit-toggle-row label {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            white-space: nowrap;
        }

        .credit-toggle-row {
            justify-content: center;
        }

        @media (max-width: 768px) {
            .credit-toggle-row {
                gap: 20px;
                flex-wrap: wrap;   /* wrap only on mobile */
            }
        }

    </style>
    <div class="pagetextlabel">
        <div class="numbertype-submenu" id="numbertype">
            <ul class="navbar-nav ml-auto role-permission-list">
                @can('mapper credits management')
                    <li class="nav-item dropdown">
                        <a class="menu-item mapper-item" data-target="#mapperCreditManager">
                            <span>Mapper Credit Manager</span>
                        </a>
                    </li>
                @endcan
                @can('recon credits management')
                    <li class="nav-item dropdown">
                        <a class="menu-item mapper-item" data-target="#reconCreditManager">
                            <span>Recon Credit Manager</span>
                        </a>
                    </li>
                @endcan
                @can('mapper meta data')
                    <li class="nav-item dropdown menu-item-selected">
                        <a class="menu-item mapper-item" data-target="#mapperMetaData">
                            <span>Mapper Meta Data</span>
                        </a>
                    </li>
                @endcan
            </ul>
        </div>
    </div>

    @can('mapper meta data')
        <div id="mapperMetaData" class="content-section">
            <div class="select-customer-details-div">
                <div>
                    <div class="action-cont-test-user">
                        <div class="userlist-all-div">
                            <div class="userlist-div">
                                <label for="userList" class="user-label">Select User:</label>
                                <select class="mapper-users" id="userList" name="mapper_user[]" multiple="multiple"
                                    onChange="handleSelectAll()">
                                </select>
                            </div>
                            <span class="input-group-text select-all" onclick="HandleUsersSelected()">
                                <b>All</b>&nbsp;
                                <input type="checkbox" id="selectAll" value="yes" checked="true"
                                    aria-label="Checkbox for following text input" style="accent-color: #34548A !important" ;
                                    name="selectAll">
                            </span>
                        </div>
                        <div>
                            <label class="include-test-user-label"><input type="checkbox" id="includeTestUser"
                                    class="checkbox-include-test-user"> Include Test Users</label>
                        </div>
                        <div class="select-date-div">
                            <label class=""><b>Select Date:</b></label>
                            <div class="col-md-8 datepicker-div">
                                <input type="text" class="datepicker" id="date-input" name="datetimes"
                                    placeholder="yyyy/mm/dd" style="width:100%" />
                            </div>
                        </div>
                        <div>
                            <button class="customer-btn" id="submitButton">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container daily-calling-status-table-container">
                <table id="metaTable" class="stripe">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>File Name</th>
                            <th>Batch</th>
                            <th>User Name</th>
                            <th>Created On</th>
                            <th>Action</th>
                    </thead>
                    <tbody id="metaTableBody">
                        <!-- Filled dynamically -->
                    </tbody>
                </table>
            </div>
        </div>
    @endcan

    <!-- MAPPER CREDIT SECTION -->
    @can('mapper credits management')
        <div id="mapperCreditManager" class="content-section" style="display: none; height:600px">

            <!-- Toggle checkboxes -->
            <div class="credit-toggle-row">
                <label>
                    <input type="checkbox" id="recentCreditUsageCheckbox" checked>
                    <span> Recent Credit Usage </span>
                </label>
                <label style="margin-left: 15px;">
                    <input type="checkbox" id="creditAdjustmentCheckbox">
                    <span> Credit Adjustment </span>
                </label>
                <label style="margin-left: 15px;">
                    <input type="checkbox" id="adjustMonthlyCreditLimitCheckbox">
                    <span> Adjust Monthly Credit Limit </span>
                </label>
            </div>

            <!-- Recent Credit Usage Section -->
            <div id="recentCreditUsageSection">
                <div class="select-customer-details-div">
                    <div style="position:relative;">
                        <div class="action-cont-test-user">
                            <div class="userlist-all-div">
                                <div class="userlist-div">
                                    <label for="userListMapperCredits" class="user-label">Select User:</label>
                                    <select class="mapper-credit-users select2" id="userListMapperCredits">
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label class="include-test-user-label-mapper-credit">
                                    <input type="checkbox" id="includeMapperCreditTestUser" class="checkbox-include-test-user">
                                    Include Test Users
                                </label>
                            </div>
                            <div class="select-date-div">
                                <label class=""><b>Select Date:</b></label>
                                <div class="col-md-8 datepicker-div">
                                    <input type="text" class="datepicker-mapper-credits" id="date-input-mapper-credit"
                                        name="datetimes-mapper-credit" placeholder="yyyy/mm/dd" style="width:100%" />
                                </div>
                            </div>
                            <div>
                                <button class="customer-btn" id="mapperCreditSubmitButton">Submit</button>
                            </div>
                        </div>
                        <span class="credit-usage-detail"></span>
                    </div>
                </div>
                <div class="container daily-calling-status-table-container">
                    <table id="mapperCreditTable" class="stripe">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Partner</th>
                                <th>Account</th>
                                <th>Service Instance</th>
                                <th>Entity</th>
                                <th>Date</th>
                                <th>Credit Usage</th>
                                <th>Credit Adjustments</th>
                            </tr>
                        </thead>
                        <tbody id="mapperCreditTableBody">
                            <!-- Filled dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Credit Adjustment Section -->
            <div id="creditAdjustmentSection" style="display: none;">
                <div class="history-btn-div">
                    <button>History <i class="fa fa-arrow-right"></i></button>
                </div>
                <div class="first-div">
                    <div class="userlist-all-div" style="width: 33.3%;">
                        <div class="userlist-div mapper-users">
                            <label for="userListMapperCreditsAdjustment" class="user-label">Select User:</label>
                            <select class="mapper-credit-users select2" id="userListMapperCreditsAdjustment">
                            </select>
                        </div>
                    </div>
                    <div class="entity-all-div" style="width: 33.3%;">
                        <div class="adjustment-entity-div mapper-entity entity-div">
                            <label for="userListMapperCreditsAdjustment" class="entity-label user-label">Select
                                Entity:</label>
                            <select class="mapper-credit-entities select2" id="entityListMapperCreditsAdjustment">
                            </select>
                        </div>
                    </div>
                    <div class="select-date-div" style="width: 33.3%;">
                        <label class=""><b>Select Date:</b></label>
                        <div class="datepicker-div">
                            <input type="text" class="datepicker-mapper-entities" id="date-input-mapper-entity"
                                name="datetimes-mapper-entity" placeholder="yyyy/mm/dd" style="width:100%" />
                        </div>
                    </div>
                </div>

                <div class="second-div">
                    <div class="entity-div" style="width: 33.3%;">
                        <label for="credit_input" class="user-label">Credit Input Field:</label>
                        <input type="number" id="credit_input" name="credit_input" step="1" min="0"
                            placeholder="Enter credits">
                    </div>
                    <div class="entity-div" style="position: relative; width: 33.3%;">
                        <label class="user-label">Action:</label>
                        <div class="radio-btn-div">
                            <label>
                                <input type="radio" name="action" value="1" checked>
                                Give Credits
                            </label>
                            <label>
                                <input type="radio" name="action" value="0">
                                Deduct Credits
                            </label>
                        </div>
                        <span id="detail-icon" class="description-icon" title="View Details">
                            <i class="fas fa-info-circle"></i>
                        </span>
                    </div>
                    <div style="width: 33.3%;">

                    </div>
                </div>

                <div class="third-div">
                    <div class="entity-div" style="width: 33.3%;">
                        <label for="reason" class="user-label">Reason:</label>
                        <select id="reason" name="reason">
                            <option value="testing">Testing</option>
                            <option value="service_interruption">Service Interruption</option>
                            <option value="billing_adjustment">Billing Adjustment</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="entity-div" style="width: 33.3%;">
                        <label for="comment" class="user-label">Comment:</label>
                        <textarea id="comment" name="comment" rows="4" placeholder="Enter your comment here"></textarea>
                    </div>
                    <div>
                        <button class="customer-btn" id="mapperCreditAdjustSubmitButton">Submit</button>
                    </div>
                </div>
            </div>

            <!-- Mapper Adjust Monthly Credit Limit Section -->
            <div id="adjustMonthlyCreditLimitSection" style="display:none">

                <div class="select-customer-details-div">
                    <div class="action-cont-test-user">

                        <div class="userlist-div">
                            <label class="user-label">Select Account:</label>
                            <select class="mapper-credit-users select2" id="userListMonthlyLimit"></select>
                        </div>

                        <div>
                            <label class="include-test-user-label-mapper-credit">
                                <input type="checkbox" id="includeMonthlyLimitTestUser" class="checkbox-include-test-user">
                                Include Test Users
                            </label>
                        </div>

                        <div class="monthly-actions">
                            <button class="customer-btn" id="monthlyLimitSubmitBtn">Submit</button>
                            <button class="customer-btn" id="monthlyHistoryBtn">History</button>
                        </div>
                    </div>
                </div>

                <div class="container daily-calling-status-table-container">



                    <table id="monthlyLimitTable" class="stripe">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Partner</th>
                                <th>Account</th>
                                <th>Service Instance</th>
                                <th>Business Name</th>
                                <th>Current Month Usage</th>
                                <th>Monthly Credit Cap</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>

                </div>
            </div>
            <!--MApper Adjust Montly credit history-->
            <div id="monthlyHistorySection" style="display:none">

                <div class="history-toolbar">

                    <button class="customer-btn" id="backToMonthly">← Back</button>

                    <div class="history-date">
                        <label><b>Select Date:</b></label>
                        <input type="text" id="monthlyHistoryDate" class="form-control">
                    </div>

                    <div class="history-search">
                        <label><b>Search:</b></label>
                        <input type="text" id="monthlyHistorySearch" class="form-control">
                    </div>

                </div>

                <table id="monthlyHistoryTable" class="stripe">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Business Name</th>
                            <th>Old Credit Cap</th>
                            <th>Modified Credit Cap</th>
                            <th>Date</th>
                            <th>Modified By</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

            </div>


            <!-- Credit History Section -->
            <div id="creditHistorySection" style="display: none;">
                <div class="back-btn-div">
                    <button>
                        <i class="fa fa-arrow-left"></i> Back
                    </button>
                </div>
                <div id="mapperCreditHistoryTable_filter" class="dataTables_filter icon-addon" style="position: relative;">
                    <div class="userlist-all-div" style="width: 33.3%;">
                        <div class="userlist-div">
                            <select class="mapper-credit-users select2" id="userListMapperCreditsAdjustmentHistory">
                            </select>
                        </div>
                        <div>
                            <button class="customer-btn" id="mapperUserFilter">Apply</button>
                        </div>
                    </div>
                    <label class="contact-no-detail-label">
                        <form autocomplete="off">
                            <span class="search-input">
                                <input type="search" class="mapperCreditHistoryTable_search"
                                    id="mapperCreditHistoryTable_search" placeholder="Search"
                                    aria-controls="mapperCreditHistoryTable" autocomplete="off" />
                                <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search"></i>
                                <i class="fas spin-icon fa-spinner fa-pulse"></i>
                            </span>
                        </form>
                    </label>
                </div>
                <div class="container daily-calling-status-table-container">
                    <div id="mapperCreditHistoryTable_processing" class="dataTables_processing" style="display: none;">
                        Loading...</div>
                    <table id="mapperCreditHistoryTable" class="stripe">
                        <thead>
                            <tr>
                                <th>Business Name</th>
                                <th>Entity</th>
                                <th>Date</th>
                                <th>Action</th>
                                <th>Credits</th>
                                <th>Reason</th>
                                <th>Comment</th>
                                <th>Modified By</th>
                                <th>Modified At</th>
                            </tr>
                        </thead>
                    </table>
                    <div class="jump-to-page-wrapper" style="display:none;">
                        <label>Jump to page: </label>
                        <input type="number" onkeyup="if(/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
                            name="jump_to_page" id="jump_to_page_num">
                        <a href="javascript:void(0);" id="go_to_page">GO</a>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <!--  RECON CREDITS SECTION  -->
    @can('recon credits management')
        <div id="reconCreditManager" class="content-section" style="display: none; height: 600px;">
            <!-- Toggle checkboxes -->
            <div class="credit-toggle-row">
                <label>
                    <input type="checkbox" id="recentReconCreditUsageCheckbox" checked>
                    <span> Recent Credit Usage </span>
                </label>
                <label style="margin-left: 15px;">
                    <input type="checkbox" id="reconCreditAdjustmentCheckbox">
                    <span> Credit Adjustment </span>
                </label>
                 <label style="margin-left: 15px;">
                    <input type="checkbox" id="adjustMonthlyCreditLimitCheckboxRecon">
                    <span> Adjust Monthly Credit Limit </span>
                </label>
            </div>

            <!-- Recent Recon Credit Usage Section -->
            <div id="recentReconCreditUsageSection">
                <div class="select-customer-details-div">
                    <div style="position:relative;">
                        <div class="action-cont-test-user">
                            <div class="userlist-all-div">
                                <div class="userlist-div">
                                    <label for="userListReconCredits" class="user-label">Select User:</label>
                                    <select class="recon-credit-users select2" id="userListReconCredits">
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label class="include-test-user-label-recon-credit">
                                    <input type="checkbox" id="includeReconCreditTestUser"
                                        class="checkbox-include-test-user">
                                    Include Test Users
                                </label>
                            </div>
                            <div class="select-date-div">
                                <label class="recon-credit-date"><b>Select Date:</b></label>
                                <div class="col-md-8 datepicker-div">
                                    <input type="text" class="datepicker-recon-credits" id="date-input-recon-credit"
                                        name="datetimes-recon-credit" placeholder="yyyy/mm/dd" style="width:100%" />
                                </div>
                            </div>
                            <div>
                                <button class="customer-btn" id="reconCreditSubmitButton">Submit</button>
                            </div>
                        </div>
                        <span class="recon-credit-usage-detail"></span>
                    </div>
                </div>
                <div class="container daily-calling-status-table-container">
                    <table id="reconCreditTable" class="stripe">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Partner</th>
                                <th>Account</th>
                                <th>Service Instance</th>
                                <th>Organization</th>
                                <th>Date</th>
                                <th>Credit Usage</th>
                                <th>Credit Adjustments</th>
                            </tr>
                        </thead>
                        <tbody id="reconCreditTableBody">
                            <!-- Filled dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!--Recon Credit Adjustment Section -->
            <div id="reconCreditAdjustmentSection" style="display: none;">
                <div class="recon-history-btn-div">
                    <button>History <i class="fa fa-arrow-right"></i></button>
                </div>
                <div class="first-div">
                    <div class="userlist-all-div" style="width: 33.3%;">
                        <div class="userlist-div recon-users">
                            <label for="userListReconCreditsAdjustment" class="user-label">Select User:</label>
                            <select class="recon-credit-users select2" id="userListReconCreditsAdjustment">
                            </select>
                        </div>
                    </div>
                    <div class="entity-all-div" style="width: 33.3%;">
                        <div class="adjustment-entity-div entity-div">
                            <label for="organizationReconCreditsAdjustment" class="entity-label user-label">Select
                                Organization:</label>
                            <select class="recon-credit-organization select2" id="organizationReconCreditsAdjustment">
                            </select>
                        </div>
                    </div>
                    <div class="select-date-div" style="width: 33.3%;">
                        <label class=""><b>Select Date:</b></label>
                        <div class="datepicker-div">
                            <input type="text" class="datepicker-recon-entities" id="date-input-recon-entity"
                                name="datetimes-recon-entity" placeholder="yyyy/mm/dd" style="width:100%" />
                        </div>
                    </div>
                </div>

                <div class="second-div">
                    <div class="entity-div" style="width: 33.3%;">
                        <label for="recon_credit_input" class="user-label">Credit Input Field:</label>
                        <input type="number" id="recon_credit_input" name="credit_input" step="1" min="0"
                            placeholder="Enter credits">
                    </div>
                    <div class="entity-div" style="width: 33.3%; position: relative;">
                        <label class="user-label">Action:</label>
                        <div class="recon-credit-action radio-btn-div">
                            <label>
                                <input type="radio" name="action" value="1" checked>
                                Give Credits
                            </label>
                            <label>
                                <input type="radio" name="action" value="0">
                                Deduct Credits
                            </label>
                        </div>
                        <span id="detail-icon-recon" class="description-icon" title="View Details">
                            <i class="fas fa-info-circle"></i>
                        </span>
                    </div>
                    <div style="width: 33.3%;">

                    </div>
                </div>

                <div class="third-div">
                    <div class="entity-div" style="width: 33.3%;">
                        <label for="recon_reason" class="user-label">Reason:</label>
                        <select id="recon_reason" name="reason">
                            <option value="testing">Testing</option>
                            <option value="service_interruption">Service Interruption</option>
                            <option value="billing_adjustment">Billing Adjustment</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="entity-div" style="width: 33.3%;">
                        <label for="recon_comment" class="user-label">Comment:</label>
                        <textarea id="recon_comment" name="comment" rows="4" placeholder="Enter your comment here"></textarea>
                    </div>
                    <div>
                        <button class="customer-btn" id="reconCreditAdjustSubmitButton">Submit</button>
                    </div>
                </div>
            </div>


                        <!-- Recon Adjust Monthly Credit Limit Section -->
            <div id="adjustMonthlyCreditLimitSectionRecon" style="display:none">

                <div class="select-customer-details-div">
                    <div class="action-cont-test-user">

                        <div class="userlist-div">
                            <label class="user-label">Select Account:</label>
                            <select class="recon-credit-users select2" id="userListMonthlyLimitRecon"></select>
                        </div>

                        <div>
                            <label class="include-test-user-label-recon-credit">
                                <input type="checkbox" id="includeMonthlyLimitTestUserRecon">
                                Include Test Users
                            </label>
                        </div>

                        <div class="monthly-actions">
                            <button class="customer-btn" id="monthlyLimitSubmitBtnRecon">Submit</button>
                            <button class="customer-btn" id="monthlyHistoryBtnRecon">History</button>
                        </div>

                    </div>
                </div>

                <div class="container daily-calling-status-table-container">
                    <table id="monthlyLimitTableRecon" class="stripe">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Partner</th>
                                <th>Account</th>
                                <th>Service Instance</th>
                                <th>Business Name</th>
                                <th>Current Month Usage</th>
                                <th>Monthly Credit Cap</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>


                        <!-- Recon Monthly Credit History -->
            <div id="monthlyHistorySectionRecon" style="display:none">

                <div class="history-toolbar">

                    <button class="customer-btn" id="backToMonthlyRecon">← Back</button>

                    <div class="history-date">
                        <label><b>Select Date:</b></label>
                        <input type="text" id="monthlyHistoryDateRecon" class="form-control">
                    </div>

                    <div class="history-search">
                        <label><b>Search:</b></label>
                        <input type="text" id="monthlyHistorySearchRecon" class="form-control">
                    </div>

                </div>

                <table id="monthlyHistoryTableRecon" class="stripe">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Business Name</th>
                            <th>Old Credit Cap</th>
                            <th>Modified Credit Cap</th>
                            <th>Date</th>
                            <th>Modified By</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

            </div>


            <!--Recon Credit History Section -->
            <div id="reconCreditHistorySection" style="display: none;">
                <div class="recon-back-btn-div">
                    <button>
                        <i class="fa fa-arrow-left"></i> Back
                    </button>
                </div>
                <div id="reconCreditHistoryTable_filter" class="dataTables_filter icon-addon" style="position: relative;">
                    <div class="userlist-all-div" style="width: 33.3%;">
                        <div class="userlist-div">
                            <select class="recon-credit-users select2" id="userListReconCreditsAdjustmentHistory">
                            </select>
                        </div>
                        <div>
                            <button class="customer-btn" id="reconUserFilter">Apply</button>
                        </div>
                    </div>
                    <label class="contact-no-detail-label">
                        <form autocomplete="off">
                            <span class="search-input">
                                <input type="search" class="reconCreditHistoryTable_search"
                                    id="reconCreditHistoryTable_search" placeholder="Search"
                                    aria-controls="reconCreditHistoryTable" autocomplete="off" />
                                <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search"></i>
                                <i class="fas spin-icon fa-spinner fa-pulse"></i>
                            </span>
                        </form>
                    </label>
                </div>
                <div class="container daily-calling-status-table-container">
                    <div id="reconCreditHistoryTable_processing" class="dataTables_processing" style="display: none;">
                        Loading...</div>
                    <table id="reconCreditHistoryTable" class="stripe">
                        <thead>
                            <tr>
                                <th>Business Name</th>
                                <th>Organization</th>
                                <th>Date</th>
                                <th>Action</th>
                                <th>Credits</th>
                                <th>Reason</th>
                                <th>Comment</th>
                                <th>Modified By</th>
                                <th>Modified At</th>
                            </tr>
                        </thead>
                    </table>
                    <div class="jump-to-page-wrapper" style="display:none;">
                        <label>Jump to page: </label>
                        <input type="number" onkeyup="if(/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
                            name="jump_to_page" id="jump_to_page_num">
                        <a href="javascript:void(0);" id="go_to_page">GO</a>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <!-- Success Modal -->
    <div class="custom-modal-wrapper simple-success-modal common-modal">
        <i class="fa fa-times simple-success-modal-close" aria-hidden="true"></i>
        <div class="">
            <p class="success-msg-header msg-header"><i class="lyphicon fa fa-check"></i>&nbsp;Success</p>
            <p class="msg-text simple-success-modal-msg-text"></p>
            <div class="close-button" id="close-button">
                <button type="button" class="close-btn" id="closeSimpleSuccessModal">OK</button>
            </div>
        </div>
    </div>

    <!-- Error Modal -->
    <div class="custom-modal-wrapper simple-error-modal common-modal">
        <i class="fa fa-times simple-error-modal-close" aria-hidden="true"></i>
        <div class="">
            <p class="error-msg-header msg-header"><i class="fa fa-times close-icon" aria-hidden="true"></i>&nbsp;Error
            </p>
            <p class="msg-text simple-error-modal-msg-text"></p>
            <div class="close-button" id="close-button">
                <button type="button" class="close-btn" id="closeSimpleErrorModal">OK</button>
            </div>
        </div>
    </div>

    <!------------Action model ---------->
    <div class="custom-modal-wrapper simple-action-modal common-modal">
        <i class="fa fa-times simple-action-modal-close" aria-hidden="true"></i>
        <div class="">
            <p class="success-msg-header msg-header">Action Description</p>
            <p class="msg-text action-text" style="text-align: left; margin-bottom: 30px;">
                <strong style="color:#34548a;">Give Credits:</strong><br>
                This action will <strong>increase remaining credits</strong> for prepaid users or
                <strong>decrease used credits</strong> for postpaid users.
                <br><br>
                <strong style="color:#34548a;">Deduct Credits:</strong><br>
                This action will <strong>decrease remaining credits</strong> for prepaid users or
                <strong>increase used credits</strong> for postpaid users.
            </p>
            <div class="close-button" id="close-button">
                <button type="button" class="close-btn" id="closeSimpleActionModal">OK</button>
            </div>
        </div>
    </div>

    <!-- Confirmation Modal -->
    <div class="custom-modal-wrapper simple-confirm-modal common-modal" style="display:none; width:420px;">
        <i class="fa fa-times simple-confirm-modal-close" aria-hidden="true"></i>
        <div>
            <p class="msg-header" style="color:#d9534f;">
                <i class="fa fa-warning"></i>&nbsp;Confirmation Required
            </p>
            <p class="msg-text" id="confirmMessage"></p>

            <div style="confirm-btn-wrapper">
                <button class="close-btn" id="confirmCancelBtn">Cancel</button>
                <button class="customer-btn" id="confirmProceedBtn">Proceed</button>
            </div>
        </div>
    </div>


    <div id="loaderModal" class="modal">
        <img class="loader-img" src="../images/ajax-spinner.gif">
        <span class="loader-text">Please wait ...</span>
    </div>
    <script type="text/javascript" charset="utf8" src="{{ asset('js/datatables.js') }}"></script>

    <script type="text/javascript">
        const baseURL = "{{ URL::to('/') }}/";
        let allUsers = [];
        let monthlyLimitTable = null;
        let monthlyHistoryTable = null;
        let monthlyLimitTableRecon = null;
        let monthlyHistoryTableRecon = null;
        let currentCapType = 0;
        let confirmAction = null;
        $(document).ready(function() {
            $('.select2').select2();
            getMapperUserList(true, true, true);
            getReconUserList(true, true);
            getMapperData();
            listAllCreditHistoryUsers('mapper');
            listAllCreditHistoryUsers('recon');

            $('#monthlyHistoryDate').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

            $('#monthlyHistoryDate').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(
                    picker.startDate.format('YYYY-MM-DD') +
                    ' - ' +
                    picker.endDate.format('YYYY-MM-DD')
                );
                loadMonthlyHistory();
            });

            $('#monthlyHistoryBtn').on('click', function() {

                const userId = $('#userListMonthlyLimit').val();
                if (!userId) {
                    alert('Please select an account first.');
                    return;
                }

                $('#adjustMonthlyCreditLimitSection').hide();
                $('#monthlyHistorySection').show();

                setDefaultMonthlyHistoryRange(); // 👈 important
                loadMonthlyHistory();
            });

            $('#backToMonthly').on('click', function() {
                $('#monthlyHistorySection').hide();
                $('#adjustMonthlyCreditLimitSection').show();
            });

            $('#monthlyLimitSubmitBtn').off('click').on('click', function(e) {
                e.preventDefault();
                e.stopImmediatePropagation();

                const selectedUser = $('#userListMonthlyLimit').val();
                if (!selectedUser) {
                    alert('Please select an account first.');
                    return;
                }

                loadMonthlyLimitTable();
            });


            $('#includeMonthlyLimitTestUser').on('change', function() {
                getMapperUserList(false, false, false);
            });

            $('#includeMonthlyLimitTestUserRecon').on('change', function () {
                $("#loaderModal").show();
                getReconUserList(false, false);
            });

            monthlyLimitTable = $('#monthlyLimitTable').DataTable({
                processing: false,
                autoWidth: false,
                paging: true,
                pageLength: 10,
                responsive: true,
                // language: {
                // 	processing: "Processing..."
                // },
                ajax: {
                    url: baseURL + 'getMonthlyCreditCapData',
                    type: 'GET',
                    data: function(d) {
                        d.user_id = $('#userListMonthlyLimit').val() || '';
                         d.service = 0; // MAPPER
                    },
                    dataSrc: function(json) {
                        $("#loaderModal").hide();
                        return json.data || [];
                    },
                    error: function() {
                        $("#loaderModal").hide();
                    }
                },
                columns: [{
                        data: null,
                        render: (data, type, row, meta) => meta.row + 1
                    },
                    {
                        data: 'partner'
                    },
                    {
                        data: 'account'
                    },
                    {
                        data: 'service_instance'
                    },
                    {
                        data: 'business_name'
                    },
                    {
                        data: 'current_month_usage'
                    },

                    // 🔹 Editable column
                    {
                        data: 'monthly_credit_cap',
                        render: function(data, type, row) {
                            return `
						<input type="number"
							class="cap-input"
							value="${data}"
							data-user="${row.user_id}"
							style="width:90px; padding:4px">
					`;
                        }
                    },

                    // 🔹 Save button
                    {
                        data: null,
                        render: function() {
                            return `<button class="btn btn-sm btn-primary save-cap">Save</button>`;
                        }
                    }
                ]
            });
            //monthly history
            function loadMonthlyHistory() {
                const userId = $('#userListMonthlyLimit').val();
                const dateRange = $('#monthlyHistoryDate').val();

                if (!userId) {
                    alert('Please select an account first.');
                    return;
                }

                $("#loaderModal").show();

                // Create table only ONCE
                if (!monthlyHistoryTable) {
                    monthlyHistoryTable = $('#monthlyHistoryTable').DataTable({
                        searching: true,
                        dom: 't<"bottom"ip>',
                        bLengthChange: false,
                        pageLength: 10
                    });

                    // attach search ONCE
                    $('#monthlyHistorySearch').on('keyup', function() {
                        monthlyHistoryTable.search(this.value).draw();
                    });
                }

                // Clear previous data but DO NOT destroy the table
                monthlyHistoryTable.clear().draw();

                $.get(baseURL + 'getMonthlyCreditCapHistory', {
                    user_id: userId,
                    date_range: dateRange,
                    service:0 //mapper
                }, function(res) {

                    let rows = [];

                    res.data.forEach((row, i) => {
                        rows.push([
                            i + 1,
                            row.business_name,
                            row.old_cap ?? '-',
                            row.new_cap,
                            row.created_date,
                            row.modified_by
                        ]);
                    });

                    // Insert new data
                    monthlyHistoryTable.rows.add(rows).draw();

                    $("#loaderModal").hide();
                });
            }

            monthlyLimitTableRecon = $('#monthlyLimitTableRecon').DataTable({
                paging: true,
                pageLength: 10,
                autoWidth: false,
                responsive: true,
                ajax: {
                    url: baseURL + 'getMonthlyCreditCapData',
                    data: function (d) {
                        d.user_id = $('#userListMonthlyLimitRecon').val();
                        d.service = 1;
                    },
                    beforeSend: function () {
                        $("#loaderModal").show();
                    },
                    dataSrc: function (json) {
                        $("#loaderModal").hide();
                        return json.data || [];
                    },
                    error: function () {
                        $("#loaderModal").hide();
                    }
                },
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1 },
                    { data: 'partner' },
                    { data: 'account' },
                    { data: 'service_instance' },
                    { data: 'business_name' },
                    { data: 'current_month_usage' },
                    {
                        data: 'monthly_credit_cap',
                        render: d =>
                            `<input class="cap-input" type="number" value="${d}" style="width:80px">`
                    },
                    {
                        data: null,
                        render: () =>
                            `<button class="btn btn-sm btn-primary save-cap">Save</button>`
                    }
                ]
            });


            // ===== LOAD RECON MONTHLY =====
            $('#monthlyLimitSubmitBtnRecon').on('click', function () {
                if (!$('#userListMonthlyLimitRecon').val()) {
                    alert('Select account');
                    return;
                }
                $("#loaderModal").show();
                monthlyLimitTableRecon.ajax.reload();
            });

            // ===== SAVE MONTHLY RECON/Mapper CAP (SHARED) =====
            $(document).off('click', '.save-cap').on('click', '.save-cap', function (e) {
                e.preventDefault();

                const row = $(this).closest('tr');
                const usage = row.find('td').eq(5).text().replace(/,/g, '');
                const cap = $('.cap-input', row).val();

                if (!cap) {
                    showError('Please enter Monthly Credit Cap');
                    return;
                }

                const currentUsage = parseInt(usage, 10);
                const newCap = parseInt(cap, 10);

                const isRecon = $(this).closest('table').attr('id') === 'monthlyLimitTableRecon';
                const userId = isRecon
                    ? $('#userListMonthlyLimitRecon').val()
                    : $('#userListMonthlyLimit').val();

                const saveCap = function () {
                    $("#loaderModal").show();

                    $.post(baseURL + 'saveMonthlyCreditCap', {
                        user_id: userId,
                        new_cap: newCap,
                        service: isRecon ? 1 : 0
                    })
                    .done(function (res) {
                        if (res.success) {
                            showSuccess('Monthly Credit Cap Updated');

                            // reload correct table only
                            if (isRecon) {
                                monthlyLimitTableRecon.ajax.reload(null, false);
                            } else {
                                monthlyLimitTable.ajax.reload(null, false);
                            }
                        } else {
                            showError('Failed to update credit cap');
                        }
                    })
                    .fail(function () {
                        showError('Failed to update credit cap');
                    })
                    .always(function () {
                        $("#loaderModal").hide();
                    });
                };

                // 🚀 No limit rule (10 digit)
                if (newCap.toString().length >= 10) {
                    saveCap();
                    return;
                }

                // ⚠️ Usage exceeds cap
                if (currentUsage > newCap) {
                    showConfirm(
                        `Current usage <b>${currentUsage}</b> exceeds cap <b>${newCap}</b>.<br><br>Do you want to continue?`,
                        saveCap
                    );
                } else {
                    saveCap();
                }
            });
            // ===== HISTORY BUTTON =====
           $('#monthlyHistoryBtnRecon').on('click', function () {

                const userId = $('#userListMonthlyLimitRecon').val();

                if (!userId) {
                    alert('Please select an account first.');
                    return;
                }

                $('#adjustMonthlyCreditLimitSectionRecon').hide();
                $('#monthlyHistorySectionRecon').show();

                setDefaultMonthlyHistoryRangeRecon(); // ✅ DEFAULT MONTH
                loadMonthlyHistoryRecon();            // ✅ LOAD DATA
            });

            $('#monthlyHistoryDateRecon').on('apply.daterangepicker', function () {
                loadMonthlyHistoryRecon();
            });


            // ===== BACK BUTTON =====
            $('#backToMonthlyRecon').on('click', function () {
                $('#monthlyHistorySectionRecon').hide();
                $('#adjustMonthlyCreditLimitSectionRecon').show();
            });

            // ===== RECON HISTORY TABLE =====
            monthlyHistoryTableRecon = $('#monthlyHistoryTableRecon').DataTable({
                paging: true,
                searching: true,
                pageLength: 10,
                dom: 't<"bottom"ip>' 
            });

            $('#monthlyHistorySearchRecon').on('keyup', function () {
                monthlyHistoryTableRecon.search(this.value).draw();
            });

            // ===== LOAD HISTORY =====
        function loadMonthlyHistoryRecon() {

            const userId = $('#userListMonthlyLimitRecon').val();
            const dateRange = $('#monthlyHistoryDateRecon').val();

            if (!userId) return;

            $("#loaderModal").show();

                monthlyHistoryTableRecon.clear().draw();

                $.get(baseURL + 'getMonthlyCreditCapHistory', {
                    user_id: userId,
                    service: 1,
                    date_range: dateRange // ✅ REQUIRED
                }, function (res) {

                    let rows = [];
                    res.data.forEach((r, i) => {
                        rows.push([
                            i + 1,
                            r.business_name,
                            r.old_cap || '-',
                            r.new_cap,
                            r.created_date,
                            r.modified_by
                        ]);
                    });

                    monthlyHistoryTableRecon.rows.add(rows).draw();
                    $("#loaderModal").hide();
                });
            }


            $('#monthlyHistoryDateRecon').daterangepicker({
                autoUpdateInput: false,
                locale: { format: 'YYYY-MM-DD' }
            });

            function loadMonthlyLimitTable() {
                $("#loaderModal").show();
                monthlyLimitTable.ajax.reload();
            }

            function setDefaultMonthlyHistoryRange() {

                const picker = $('#monthlyHistoryDate').data('daterangepicker');
                if (!picker) return;

                const start = moment().startOf('month');
                const end = moment();

                $('#monthlyHistoryDate').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));

                picker.setStartDate(start);
                picker.setEndDate(end);
            }

            $('#organizationReconCreditsAdjustment').select2({
                placeholder: "Select or add new value",
                tags: true, // allow creating new value
                allowClear: true, // allows clearing selection
                createTag: function(params) {
                    var term = $.trim(params.term);
                    if (term === '') {
                        return null;
                    }
                    return {
                        id: term,
                        text: term,
                        newOption: true
                    };
                },
                templateResult: function(data) {
                    if (data.newOption) {
                        return data.text ? data.text + " (new)" : "(empty)";
                    }
                    return data.text;
                }
            });

            $('#metaTable').DataTable({
                bLengthChange: false,
                pageLength: 20,
                language: {
                    search: "",
                    searchPlaceholder: "Search",
                    background: "none"
                },
                columnDefs: [{
                    orderable: false,
                    searchable: false,
                    targets: [5] // Action column only
                }]
            });

            $('#mapperCreditTable, #reconCreditTable').DataTable({
                bLengthChange: false,
                pageLength: 20,
                language: {
                    search: "",
                    searchPlaceholder: "Search",
                    background: "none"
                }
            });

            //initialize fselect
            $('#userList').fSelect({
                placeholder: 'Select Users',
                numDisplayed: 1,
                overflowText: '{n} Users selected',
                noResultsText: 'No Users found',
                searchText: 'Search User',
                showSearch: true,
                keepOpen: true
            });

            //handling the click event for submenu list
          jQuery('.mapper-item').off('click').on('click', function (e) {
                e.preventDefault();

                jQuery(this).closest('li')
                    .addClass('menu-item-selected')
                    .siblings()
                    .removeClass('menu-item-selected');

                const target = $(this).data('target');

                currentCapType = (target === '#reconCreditManager') ? 1 : 0;

                $('.content-section').hide();

                $('#recentCreditUsageSection, #creditAdjustmentSection, #creditHistorySection, #adjustMonthlyCreditLimitSection').hide();
                $('#recentReconCreditUsageSection, #reconCreditAdjustmentSection, #reconCreditHistorySection, #adjustMonthlyCreditLimitSectionRecon').hide();

                $('.submenu input[type="checkbox"]').prop('checked', false);

                if (target === '#mapperCreditManager') {
                    $('#recentCreditUsageCheckbox').prop('checked', true);
                    $('#recentCreditUsageSection').show();
                }

                if (target === '#reconCreditManager') {
                    $('#recentReconCreditUsageCheckbox').prop('checked', true);
                    $('#recentReconCreditUsageSection').show();
                    getReconUserList(true, true);
                }

                // ===== CLEAR MONTHLY TABLES ON TAB SWITCH =====
                if (target === '#reconCreditManager') {
                    if ($.fn.DataTable.isDataTable('#monthlyLimitTableRecon')) {
                        monthlyLimitTableRecon.clear().draw();
                    }
                }

                if (target === '#mapperCreditManager') {
                    if ($.fn.DataTable.isDataTable('#monthlyLimitTable')) {
                        monthlyLimitTable.clear().draw();
                    }
                }

                $(target).show();

                // ===== FIX DATATABLE WIDTH =====
                setTimeout(function () {
                    if (target === '#reconCreditManager' && $.fn.DataTable.isDataTable('#monthlyLimitTableRecon')) {
                        monthlyLimitTableRecon.columns.adjust();
                    }

                    if (target === '#mapperCreditManager' && $.fn.DataTable.isDataTable('#monthlyLimitTable')) {
                        monthlyLimitTable.columns.adjust();
                    }
                }, 200);
            });
            // ===== MAPPER CHECKBOX LOGIC =====
        $('#recentCreditUsageCheckbox, #creditAdjustmentCheckbox, #adjustMonthlyCreditLimitCheckbox').on('change', function () {

                // allow only one mapper checkbox
                $('#recentCreditUsageCheckbox, #creditAdjustmentCheckbox, #adjustMonthlyCreditLimitCheckbox')
                    .not(this).prop('checked', false);

                // hide mapper sections
                $('#recentCreditUsageSection, #creditAdjustmentSection, #creditHistorySection, #adjustMonthlyCreditLimitSection')
                    .hide();

                if (this.id === 'recentCreditUsageCheckbox') {
                    $('#recentCreditUsageSection').show();
                }

                if (this.id === 'creditAdjustmentCheckbox') {
                    $('#creditAdjustmentSection').show();
                }

                if (this.id === 'adjustMonthlyCreditLimitCheckbox') {
                    $('#adjustMonthlyCreditLimitSection').show();
                }
        });

        // ===== : RECON CHECKBOX LOGIC =====
        $('#recentReconCreditUsageCheckbox, #reconCreditAdjustmentCheckbox, #adjustMonthlyCreditLimitCheckboxRecon').on('change', function () {

                // allow only one recon checkbox
                $('#recentReconCreditUsageCheckbox, #reconCreditAdjustmentCheckbox, #adjustMonthlyCreditLimitCheckboxRecon')
                    .not(this).prop('checked', false);

                // hide recon sections
                $('#recentReconCreditUsageSection, #reconCreditAdjustmentSection, #reconCreditHistorySection, #adjustMonthlyCreditLimitSectionRecon')
                    .hide();

                if (this.id === 'recentReconCreditUsageCheckbox') {
                    $('#recentReconCreditUsageSection').show();
                }

                if (this.id === 'reconCreditAdjustmentCheckbox') {
                    $('#reconCreditAdjustmentSection').show();
                }

                if (this.id === 'adjustMonthlyCreditLimitCheckboxRecon') {
                    $('#adjustMonthlyCreditLimitSectionRecon').show();
                     // ✅ FORCE reload users for Monthly section
                    getReconUserList(false, false);
                }
        });





            $("#numbertype .nav-item:visible").first()
                .addClass("menu-item-selected")
                .find("a.mapper-item")
                .trigger("click");

            //handle submit btn on user selection of metadata
            $('#userList').on('change', function() {
                toggleSubmitButton();
            });

            //on selection of mapper credit adjustment users
            $('#userListMapperCreditsAdjustment').on('change', function() {
                // let selectedUserId = $(this).val();
                // getUserWiseEntities(selectedUserId);
                let selectedUserId = $(this).val();
                // let selectedOption = $(this).find(':selected');
                // const mapperServiceType = selectedOption.data('mapper_service_type') ?? 0;

                // //hide the entity dropdown if user is postpaid
                // if (mapperServiceType == 1) {
                // 	$('.entity-all-div').hide();
                // } else {
                // 	$('.entity-all-div').show();
                $("#loaderModal").show();
                getUserWiseEntities(selectedUserId);
                // }
            });

            //on selection of mapper credit adjustment users
            $('#userListReconCreditsAdjustment').on('change', function() {
                let selectedUserId = $(this).val();
                $("#loaderModal").show();
                getUserWiseOrganization(selectedUserId);
            });

            //history table btn of mapper credits
            $('.history-btn-div button').on('click', function() {
                $('#creditAdjustmentSection').hide();
                $('#creditHistorySection').show();
                //Destroy old DataTable if it exists
                if ($.fn.DataTable.isDataTable('#mapperCreditHistoryTable')) {
                    $('#mapperCreditHistoryTable').DataTable().clear().destroy();
                }
                getMapperCreditsHistory();
            });

            $('.recon-history-btn-div button').on('click', function() {
                $('#reconCreditAdjustmentSection').hide();
                $('#reconCreditHistorySection').show();
                //Destroy old DataTable if it exists
                if ($.fn.DataTable.isDataTable('#reconCreditHistoryTable')) {
                    $('#reconCreditHistoryTable').DataTable().clear().destroy();
                }
                getReconCreditsHistory();
            });

            //back btn of mapper credits history table
            $('.back-btn-div button').on('click', function() {
                $('#creditAdjustmentSection').show();
                $('#creditHistorySection').hide();
            });

            //back btn of recon credits history table
            $('.recon-back-btn-div button').on('click', function() {
                $('#reconCreditAdjustmentSection').show();
                $('#reconCreditHistorySection').hide();
            });

            //on click of include test user mapper metadata
            $('.include-test-user-label').on('click', function() {
                getMapperUserList(true, false, false);
            });

            //on click of include test user mapper credit usage
            $('#includeMapperCreditTestUser').on('click', function() {
                getMapperUserList(false, true, false);
            });

            //on click of include test user recon credit usage
            $('#includeReconCreditTestUser').on('click', function() {
                $("#loaderModal").show();
                getReconUserList(true, false);
            });

            //on click of submit btn of mapper metadata
            $('#submitButton').on('click', function() {
                getMapperData();
            });

            //on click of submit btn of mapper credits usage
            $('#mapperCreditSubmitButton').on('click', function() {
                $("#loaderModal").show();
                getMapperCreditsData();
            });

            //on click of submit btn of recon credits usage
            $('#reconCreditSubmitButton').on('click', function() {
                $("#loaderModal").show();
                getReconCreditsData();
            });

            $('#closeSimpleActionModal, .simple-action-modal-close').click(function() {
                $('.simple-action-modal').css("display", "none");
            });

            $('#detail-icon, #detail-icon-recon').on('click', function() {
                $('.simple-action-modal').show();
            });

            //on click of submit btn of mapper credits adjustment
            $('#mapperCreditAdjustSubmitButton').on('click', function(e) {
                e.preventDefault(); // prevent form submission

                let isValid = true;
                $('.error-text').remove(); // remove old error messages

                // Validate user
                if (!$('#userListMapperCreditsAdjustment').val()) {
                    $('.mapper-users .select2-container').after(
                        '<div class="error-text">Please select user</div>');
                    isValid = false;
                }

                // Validate entity
                if ($('#entityListMapperCreditsAdjustment').is(':visible') && !$(
                        '#entityListMapperCreditsAdjustment').val()) {
                    $('.mapper-entity .select2-container').after(
                        '<div class="error-text">Please select an entity</div>');
                    isValid = false;
                }

                // Validate credits
                if (!$('#credit_input').val()) {
                    $('#credit_input').after('<div class="error-text">Please enter credits</div>');
                    isValid = false;
                }

                // Validate reason
                if (!$('#reason').val()) {
                    $('#reason').after('<div class="error-text">Please select a reason</div>');
                    isValid = false;
                }

                // Validate comment
                if (!$('#comment').val().trim()) {
                    $('#comment').after('<div class="error-text">Please enter a comment</div>');
                    isValid = false;
                }

                if (isValid) {
                    // Submit your AJAX or form here
                    console.log("Form is valid, submitting...");
                    creditAdjustmentAction();
                }

            });

            //on click of submit btn of recon credits adjustment
            $('#reconCreditAdjustSubmitButton').on('click', function(e) {
                e.preventDefault(); // prevent form submission

                let isValid = true;
                $('.error-text').remove(); // remove old error messages

                // Validate user
                if (!$('#userListReconCreditsAdjustment').val()) {
                    $('.recon-users .select2-container').after(
                        '<div class="error-text">Please select user</div>');
                    isValid = false;
                }

                // Validate credits
                if (!$('#recon_credit_input').val()) {
                    $('#recon_credit_input').after('<div class="error-text">Please enter credits</div>');
                    isValid = false;
                }

                // Validate reason
                if (!$('#recon_reason').val()) {
                    $('#recon_reason').after('<div class="error-text">Please select a reason</div>');
                    isValid = false;
                }

                // Validate comment
                if (!$('#recon_comment').val().trim()) {
                    $('#recon_comment').after('<div class="error-text">Please enter a comment</div>');
                    isValid = false;
                }

                if (isValid) {
                    // Submit your AJAX or form here
                    console.log("Form is valid, submitting...");
                    reconCreditAdjustmentAction();
                }

            });

            //remove the error msg on typing
            $('#entityListMapperCreditsAdjustment, #credit_input, #reason, #comment')
                .on('input change', function() {
                    $(this).next('.error-text').remove();
                });

            // Handle select2 separately
            $('#entityListMapperCreditsAdjustment').on('select2:select', function() {
                $(this).nextAll('.select2-container').next('.error-text').remove();
            });

            // When credit adjustment checkbox is clicked
            // $('#creditAdjustmentCheckbox').on('change', function() {
            // 	if ($(this).is(':checked')) {
            // 		$('#recentCreditUsageCheckbox, #adjustMonthlyCreditLimitCheckbox').prop('checked', false);

            // 		$('#recentCreditUsageSection').hide();
            // 		$('#creditAdjustmentSection').show();
            // 		$('#creditHistorySection').hide();
            // 		$('#adjustMonthlyCreditLimitSection').hide();
            // 	}
            // });


            // When recon recent credit usage checkbox is clicked
            // $('#recentReconCreditUsageCheckbox').on('change', function() {
            // 	if ($(this).is(':checked')) {
            // 		$('#reconCreditAdjustmentCheckbox').prop('checked', false);
            // 		$('#recentReconCreditUsageSection').show();
            // 		$('#reconCreditAdjustmentSection').hide();
            // 		$('#reconCreditHistorySection').hide();
            // 	} else {
            // 		$('#reconCreditAdjustmentCheckbox').prop('checked', true);
            // 		$('#recentReconCreditUsageSection').hide();
            // 		$('#reconCreditAdjustmentSection').show();
            // 		$('#reconCreditHistorySection').hide();

            // 	}
            // });

            // Adjust Monthly Credit Limit toggle
            // $('#adjustMonthlyCreditLimitCheckbox').on('change', function () {

            // 	if ($(this).is(':checked')) {

            // 		$('#recentCreditUsageCheckbox').prop('checked', false);
            // 		$('#creditAdjustmentCheckbox').prop('checked', false);

            // 		$('#recentCreditUsageSection').hide();
            // 		$('#creditAdjustmentSection').hide();
            // 		$('#creditHistorySection').hide();

            // 		$('#adjustMonthlyCreditLimitSection').show();

            // 		// LOAD MONTHLY DATA HERE
            // 	// loadMonthlyLimitTable();	
            // 	}
            // });

            //search functionality for mapper credit history table
            var mapperCreditHistoryTimer;
            jQuery("#mapperCreditHistoryTable_filter input[type='search']").on('search', function(evt) {
                var currSearchText = jQuery(this).val();
                if (currSearchText == "" || currSearchText == null) {
                    var mapperCreditHistoryTableObj = jQuery('#mapperCreditHistoryTable').DataTable();
                    mapperCreditHistoryTableObj.ajax.reload();
                }
            });

            jQuery("#mapperCreditHistoryTable_filter input[type='search']").on("keyup keypress", function(e) {
                if (mapperCreditHistoryTimer) {
                    clearTimeout(mapperCreditHistoryTimer);
                }
                var keyCode = e.keyCode || e.which;
                if (keyCode === 13) {
                    e.preventDefault();
                    var mapperCreditHistoryTableObj = jQuery('#mapperCreditHistoryTable').DataTable();
                    mapperCreditHistoryTableObj.ajax.reload();
                    jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css('display', 'none');
                    jQuery(".dataTables_filter .fa-spinner").css('display', 'inline-block');
                    return false;
                }
                var currSearchText = jQuery(this).val();
                var currSearchEle = jQuery(this);
                if (currSearchText != "") {
                    mapperCreditHistoryTimer = setTimeout(function() {
                        jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css('display',
                            'none');
                        jQuery(".dataTables_filter .fa-spinner").css('display', 'inline-block');
                        currSearchEle.prop("disabled", true);
                        // currSearchEle.prop("disabled", true);
                        var mapperCreditHistoryTableObj = jQuery('#mapperCreditHistoryTable')
                            .DataTable();
                        mapperCreditHistoryTableObj.ajax.reload();
                    }, 1000);
                }
                if (keyCode === 8) {
                    if (currSearchText == "" || currSearchText == null) {
                        var mapperCreditHistoryTableObj = jQuery('#mapperCreditHistoryTable').DataTable();
                        mapperCreditHistoryTableObj.ajax.reload();
                    }
                }
            });

            //search functionality for Recon credit history table
            var reconCreditHistoryTimer;
            jQuery("#reconCreditHistoryTable_filter input[type='search']").on('search', function(evt) {
                var currSearchText = jQuery(this).val();
                if (currSearchText == "" || currSearchText == null) {
                    var reconCreditHistoryTableObj = jQuery('#reconCreditHistoryTable').DataTable();
                    reconCreditHistoryTableObj.ajax.reload();
                }
            });

            jQuery("#reconCreditHistoryTable_filter input[type='search']").on("keyup keypress", function(e) {
                if (reconCreditHistoryTimer) {
                    clearTimeout(reconCreditHistoryTimer);
                }
                var keyCode = e.keyCode || e.which;
                if (keyCode === 13) {
                    e.preventDefault();
                    var reconCreditHistoryTableObj = jQuery('#reconCreditHistoryTable').DataTable();
                    reconCreditHistoryTableObj.ajax.reload();
                    jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css('display', 'none');
                    jQuery(".dataTables_filter .fa-spinner").css('display', 'inline-block');
                    return false;
                }
                var currSearchText = jQuery(this).val();
                var currSearchEle = jQuery(this);
                if (currSearchText != "") {
                    reconCreditHistoryTimer = setTimeout(function() {
                        jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css('display',
                            'none');
                        jQuery(".dataTables_filter .fa-spinner").css('display', 'inline-block');
                        currSearchEle.prop("disabled", true);
                        // currSearchEle.prop("disabled", true);
                        var reconCreditHistoryTableObj = jQuery('#mapperCreditHistoryTable')
                            .DataTable();
                        reconCreditHistoryTableObj.ajax.reload();
                    }, 1000);
                }
                if (keyCode === 8) {
                    if (currSearchText == "" || currSearchText == null) {
                        var reconCreditHistoryTableObj = jQuery('#mapperCreditHistoryTable').DataTable();
                        reconCreditHistoryTableObj.ajax.reload();
                    }
                }
            });

            //close success modal
            $(document).on("click", ".simple-success-modal-close, #closeSimpleSuccessModal", function() {
                $(".simple-success-modal").fadeOut();
            });

            //close error modal
            $(document).on("click", ".simple-error-modal-close, #closeSimpleErrorModal", function() {
                $(".simple-error-modal").fadeOut();
            });

            $('#mapperUserFilter').on('click', function() {
                var mapperCreditHistoryTableObj = jQuery('#mapperCreditHistoryTable').DataTable();
                mapperCreditHistoryTableObj.ajax.reload();
            });

            $('#reconUserFilter').on('click', function() {
                var reconCreditHistoryTableObj = jQuery('#reconCreditHistoryTable').DataTable();
                reconCreditHistoryTableObj.ajax.reload();
            });
        });

        //handle user selection on all checkbox
        function HandleUsersSelected() {
            const val = $('#selectAll').val();
            if (val === 'yes') {
                $('#selectAll').val('no');
                $('#userList').val([]);
                $('#selectAll').prop('checked', false);
            } else {
                $('#selectAll').val('yes');
                $('#userList').val(allUsers);
                $('#selectAll').prop('checked', true);
            }
            $('#userList').fSelect('reload');
            toggleSubmitButton();
        }

        // handle all checkbox selection
        function handleSelectAll() {
            const users = $('#userList').val();
            const userLength = allUsers.length;
            if (users != null && users.length === userLength) {
                $('#selectAll').val('yes');
                $('#selectAll').prop('checked', true);
            } else {
                $('#selectAll').val('no');
                $('#selectAll').prop('checked', false);
            }
        }

        /*AKASH 13 AUG 2025
         function to fetch all the mapper activated users*/
        function getMapperUserList(mapperMetaData, mapperCredit, mapperCreditAdjustment) {
            let url = '';

            if (mapperMetaData) {
                const includeTestUser = $('#includeTestUser').is(':checked') ? 1 : 0;
                url = `${baseURL}listAllMapperUser?include_test_user=${includeTestUser}`;
            } else if (mapperCredit) {
                const includeMapperCreditTestUser = $('#includeMapperCreditTestUser').is(':checked') ? 1 : 0;
                url = `${baseURL}listAllMapperUser?include_test_user=${includeMapperCreditTestUser}`;
            } else {
                const includeMonthlyLimitTestUser = $('#includeMonthlyLimitTestUser').is(':checked') ? 1 : 0;
                url = `${baseURL}listAllMapperUser?include_test_user=${includeMonthlyLimitTestUser}`;
            }
            $("#loaderModal").show();
            $.ajax({
                type: "GET",
                url: url,
                success: function(res) {
                    if (res.success && Array.isArray(res.data)) {
                        allUsers = [];
                        const labelOptionsForMetaData = [];
                        const labelOptionsForCredits = [];
                        labelOptionsForCredits.push(`<option value="" selected>Select User</option>`);
                        res.data.forEach(user => {
                            const label = `${user.businessName} - ${user.user_login}`;
                            const optionHTML =
                                `<option value="${user.user_reference_id}">${label}</option>`;
                            const optionWithDataAttr =
                                `<option value="${user.user_reference_id}" data-mapper_service_type="${user.mapper_service_type || ''}">${label}</option>`;
                            allUsers.push(user.user_reference_id);
                            labelOptionsForMetaData.push(optionHTML);
                            labelOptionsForCredits.push(optionWithDataAttr);
                        });

                        //for mapper meta data
                        if (mapperMetaData) {
                            const $userList = $('#userList');
                            $userList.empty();
                            $userList.append(labelOptionsForMetaData.join(''));
                            $userList.val(allUsers);
                            $userList.fSelect('reload');
                            $('#selectAll').prop('checked', true);
                            $("#loaderModal").hide();
                        }

                        //for mapper recent credit usage
                        if (mapperCredit) {
                            const $userListMapperCredits = $('#userListMapperCredits');
                            $userListMapperCredits.empty();
                            $userListMapperCredits.append(labelOptionsForCredits.join(''));
                            getMapperCreditsData();
                        }

                        //for mapper credit history
                        if (mapperCreditAdjustment) {
                            const $userListMapperCreditsAdjustment = $('#userListMapperCreditsAdjustment');
                            $userListMapperCreditsAdjustment.empty();
                            $userListMapperCreditsAdjustment.append(labelOptionsForCredits.join(''));
                            let selectedUserId = $userListMapperCreditsAdjustment.val();
                            getUserWiseEntities(selectedUserId);
                        }

                        const $userListMonthlyLimit = $('#userListMonthlyLimit');
                        if ($userListMonthlyLimit.length) {
                            $userListMonthlyLimit.empty();
                            $userListMonthlyLimit.append(labelOptionsForCredits.join(''));
                        }

                        $('#submitButton').prop('disabled', false);
                    } else {
                        alert('No users found.');
                        $("#loaderModal").hide();
                    }
                },
                error: function() {
                    // alert('Failed to fetch mapper user list.');
                    $("#loaderModal").hide();
                },
                complete: function () {
                    $("#loaderModal").hide();   // ✅ ALWAYS hides
                }
            });
        }

        /*AKASH 19 AUG 2025
         function to fetch all the Recon activated users*/
        function getReconUserList(reconCredit, reconCreditAdjustment) {
            let url = '';
           let includeTestUser = 0;
            // 🔹 Monthly Limit screen
            if (!reconCredit && !reconCreditAdjustment) {
                includeTestUser = $('#includeMonthlyLimitTestUserRecon').is(':checked') ? 1 : 0;
            } 
            // 🔹 Credit / History screen
            else {
                includeTestUser = $('#includeReconCreditTestUser').is(':checked') ? 1 : 0;
            }
            url = `${baseURL}listAllReconUser?include_test_user=${includeTestUser}`;
            $.ajax({
                type: "GET",
                url: url,
                success: function(res) {
                    if (res.success && Array.isArray(res.data)) {
                        const labelOptionsForCredits = [];
                        labelOptionsForCredits.push(`<option value="" selected>Select User</option>`);
                        res.data.forEach(user => {
                            const label = `${user.businessName} - ${user.user_login}`;
                            const optionWithDataAttr =
                                `<option value="${user.user_reference_id}" data-recon_service_type="${user.recon_service_type || ''}">${label}</option>`;
                            labelOptionsForCredits.push(optionWithDataAttr);
                        });

                        //for Recon recent credit usage
                        if (reconCredit) {
                            const $userListReconCredits = $('#userListReconCredits');
                            $userListReconCredits.empty();
                            $userListReconCredits.append(labelOptionsForCredits.join(''));
                            getReconCreditsData();
                        }

                        //for Recon credit history
                        if (reconCreditAdjustment) {
                            const $userListReconCreditsAdjustment = $('#userListReconCreditsAdjustment');
                            $userListReconCreditsAdjustment.empty();
                            $userListReconCreditsAdjustment.append(labelOptionsForCredits.join(''));
                            let selectedUserId = $userListReconCreditsAdjustment.val();
                            getUserWiseOrganization(selectedUserId);
                        }

                        const $userListMonthlyLimitRecon = $('#userListMonthlyLimitRecon');
                        if ($userListMonthlyLimitRecon.length) {
                            $userListMonthlyLimitRecon.empty();
                            $userListMonthlyLimitRecon.append(labelOptionsForCredits.join(''));
                        }
                        $("#loaderModal").hide();
                        $('#submitButton').prop('disabled', false);
                    } else {
                        alert('No users found.');
                        $("#loaderModal").hide();
                    }
                },
                error: function() {
                    // alert('Failed to fetch mapper user list.');
                    $("#loaderModal").hide();
                }
            });
        }

        /*AKASH 19 AUG 2025
        function to fetch all the Recon data user wise*/
        function getReconCreditsData() {
            const selectedOption = $('#userListReconCredits option:selected');
            const selectedUser = selectedOption.val();
            const selectedLabel = selectedOption.text();
            const reconServiceType = selectedOption.data('recon_service_type') ?? 0;
            const dateRange = $('#date-input-recon-credit').val();
            $.ajax({
                type: "GET",
                url: baseURL + 'fetchReconCreditsUsageUserwise',
                data: {
                    user_id: selectedUser,
                    recon_service_type: reconServiceType,
                    date_range: dateRange
                },
                success: function(res) {
                    $("#loaderModal").hide();
                    const data = Array.isArray(res.data) ? res.data : [];
                    const totalCredits = res.total_credits;
                    const heirarchy = res.heirarchy;
                    const totalCreditsFrom = res.total_credits_created_date;
                    const rows = [];

                    const today = new Date();
                    const todayFormatted = today.getFullYear() + "-" +
                        String(today.getMonth() + 1).padStart(2, '0') + "-" +
                        String(today.getDate()).padStart(2, '0');

                    if (totalCredits) {
                        $(".recon-credit-usage-detail").show();
                        if (reconServiceType) {
                            const html =
                                `${selectedLabel} has <span class="blue-bold">${totalCredits}</span> Number Recon credits Remaining`;
                            $(".recon-credit-usage-detail").html(html);
                        } else {
                            const html =
                                `${selectedLabel} has used <span class="blue-bold">${totalCredits}</span> Number Recon credits between <span class="blue-bold">${totalCreditsFrom}</span> and <span class="blue-bold">${todayFormatted}</span>`;
                            $(".recon-credit-usage-detail").html(html);
                        }
                    } else {
                        $(".recon-credit-usage-detail").show();
                        if (reconServiceType) {
                            const html =
                                `${selectedLabel} has <span class="blue-bold">0</span> Number Recon credits Remaining`;
                            $(".recon-credit-usage-detail").html(html);
                        } else {
                            const html =
                                `${selectedLabel} has used <span class="blue-bold">0</span> Number Recon credits this month`;
                            $(".recon-credit-usage-detail").html(html);
                        }
                    }

                    data.forEach((item, index) => {
                        const partner = heirarchy?.partner_account_name || '-';
                        const account = heirarchy?.account_name || '-';
                        const serviceInstance = heirarchy?.service_instance_name || '-';
                        const entity = item.organization || '-';
                        const date = item.create_date;
                        const creditsUsed = item.credits_used || '-';
                        const creditsAdjustments = !item.credits && item.credits !== 0 ?
                            '-' :
                            `${item.action_type === 1 ? '+' : '-'}${item.credits}`;

                        // Optional: Truncate partner name if too long
                        const truncatedPartner = partner.length > 30 ? partner.substring(0, 30) +
                            '...' : partner;

                        rows.push(`
					<tr>
						<td>${index + 1}</td>
						<td data-toggle="tooltip" data-placement="top" title="${partner}">${truncatedPartner}</td>
						<td>${account}</td>
						<td>${serviceInstance}</td>
						<td>${entity}</td>
						<td>${date}</td>
						<td><strong>${creditsUsed}</strong></td>
						<td><strong>${creditsAdjustments}</strong></td>
					</tr>
				`);
                    });

                    // Destroy and reinitialize DataTable
                    if ($.fn.DataTable.isDataTable('#reconCreditTable')) {
                        $('#reconCreditTable').DataTable().destroy();
                    }

                    $('#reconCreditTableBody').html(rows.join(''));
                    $('[data-toggle="tooltip"]').tooltip();

                    $('#reconCreditTable').DataTable({
                        bLengthChange: false,
                        pageLength: 20,
                        language: {
                            search: "",
                            searchPlaceholder: "Search",
                            background: "none"
                        },
                        columnDefs: [{
                            bSearchable: false,
                            orderable: false,
                            targets: [6] // adjust if needed
                        }]
                    });

                },
                error: function() {
                    $('#mapperCreditTableBody').html('<tr><td colspan="7">Error loading data.</td></tr>');
                    $("#loaderModal").hide();
                },
                complete: function() {
                    $("#loaderModal").hide();
                }
            });
        }

        /*AKASH 13 AUG 2025
         handling submit btn enable disable*/
        function toggleSubmitButton() {
            const selectedUsers = $('#userList').val();
            const isDisabled = !selectedUsers || selectedUsers.length === 0;
            $('#submitButton').prop('disabled', isDisabled);
        }

        /*AKASH 13 AUG 2025
         function which will fetch mapper meta data user wise*/
        function getMapperData() {
            let selectedUsers = 'all';
            let dateRange = '';
            const val = $('#selectAll').val();
            if (val === 'yes') {
                selectedUsers = 'all';
                dateRange = '';
            } else {
                selectedUsers = $('#userList').val();
                dateRange = $('#date-input').val();
            }
            $("#loaderModal").show();
            $.ajax({
                type: "GET",
                url: baseURL + 'listAllMetaData',
                data: {
                    user_ids: selectedUsers,
                    date_range: dateRange
                },
                success: function(data) {
                    const rows = [];
                    data.forEach((item, index) => {
                        const truncatedFileName = item.file_name.length > 30 ?
                            item.file_name.substring(0, 30) + '...' :
                            item.file_name;
                        rows.push(`
					<tr>
						<td>${index + 1}</td>
						<td data-toggle="tooltip" data-placement="top" title="${item.file_name}">
							${truncatedFileName}
						</td>
						<td>${item.batch}</td>
						<td>${item.display_name}</td>
						<td>${new Date(item.created_at).toLocaleString()}</td>
						<td>
							<a href="${item.url}" target="_blank">
								<i class="fa fa-download" aria-hidden="true" style="color:#34548A"></i>
							</a>
						</td>
					</tr>
					`);
                    });
                    // Destroy and re-init DataTable
                    if ($.fn.DataTable.isDataTable('#metaTable')) {
                        $('#metaTable').DataTable().destroy();
                    }
                    $('#metaTableBody').html(rows.join(''));
                    $('[data-toggle="tooltip"]').tooltip();
                    // Re-initialize DataTable
                    $('#metaTable').DataTable({
                        bLengthChange: false,
                        pageLength: 20,
                        language: {
                            search: "",
                            searchPlaceholder: "Search",
                            background: "none"
                        },
                        columnDefs: [{
                            bSearchable: false,
                            orderable: false,
                            targets: [5]
                        }]
                    });
                },
                error: function() {
                    $('#metaTableBody').html('<tr><td colspan="6">Error loading data.</td></tr>');
                },
                complete: function() {
                    $("#loaderModal").hide();
                }
            });
        }

        /*AKASH 13 AUG 2025
         function which will fetch mapper credits usage user wise*/
        function getMapperCreditsData() {
            const selectedOption = $('#userListMapperCredits option:selected');
            const selectedUser = selectedOption.val();
            const selectedLabel = selectedOption.text();
            const mapperServiceType = selectedOption.data('mapper_service_type') ?? 0;
            const dateRange = $('#date-input-mapper-credit').val();
            $.ajax({
                type: "GET",
                url: baseURL + 'fetchMapperCreditsUsageUserwise',
                data: {
                    user_id: selectedUser,
                    mapper_service_type: mapperServiceType,
                    date_range: dateRange
                },
                success: function(res) {
                    const data = Array.isArray(res.data) ? res.data : [];
                    const totalCredits = res.total_credits;
                    const heirarchy = res.heirarchy;
                    const totalCreditsFrom = res.total_credits_created_date;
                    const rows = [];

                    const today = new Date();
                    const todayFormatted = today.getFullYear() + "-" +
                        String(today.getMonth() + 1).padStart(2, '0') + "-" +
                        String(today.getDate()).padStart(2, '0');

                    if (totalCredits) {
                        $(".credit-usage-detail").show();
                        if (mapperServiceType) {
                            const html =
                                `${selectedLabel} has <span class="blue-bold">${totalCredits}</span> Number Mapper credits Remaining`;
                            $(".credit-usage-detail").html(html);
                        } else {
                            const html =
                                `${selectedLabel} has used <span class="blue-bold">${totalCredits}</span> Number Mapper credits between <span class="blue-bold">${totalCreditsFrom}</span> and <span class="blue-bold">${todayFormatted}</span>`;
                            $(".credit-usage-detail").html(html);
                        }
                    } else {
                        $(".credit-usage-detail").show();
                        if (mapperServiceType) {
                            const html =
                                `${selectedLabel} has <span class="blue-bold">0</span> Number Mapper credits Remaining`;
                            $(".credit-usage-detail").html(html);
                        } else {
                            const html =
                                `${selectedLabel} has used <span class="blue-bold">0</span> Number Mapper credits this month</b>`;
                            $(".credit-usage-detail").html(html);
                        }
                    }

                    data.forEach((item, index) => {
                        const partner = heirarchy?.partner_account_name || '-';
                        const account = heirarchy?.account_name || '-';
                        const serviceInstance = heirarchy?.service_instance_name || '-';
                        const entity = item.entity || '-';
                        const date = item.create_date;
                        const creditsUsed = item.credits_used || '-';
                        const creditsAdjustments = !item.credits && item.credits !== 0 ?
                            '-' :
                            `${item.action_type === 1 ? '+' : '-'}${item.credits}`;

                        // Optional: Truncate partner name if too long
                        const truncatedPartner = partner.length > 30 ? partner.substring(0, 30) +
                            '...' : partner;

                        rows.push(`
					<tr>
						<td>${index + 1}</td>
						<td data-toggle="tooltip" data-placement="top" title="${partner}">${truncatedPartner}</td>
						<td>${account}</td>
						<td>${serviceInstance}</td>
						<td>${entity}</td>
						<td>${date}</td>
						<td><strong>${creditsUsed}</strong></td>
						<td><strong>${creditsAdjustments}</strong></td>
					</tr>
				`);
                    });

                    // Destroy and reinitialize DataTable
                    if ($.fn.DataTable.isDataTable('#mapperCreditTable')) {
                        $('#mapperCreditTable').DataTable().destroy();
                    }

                    $('#mapperCreditTableBody').html(rows.join(''));
                    $('[data-toggle="tooltip"]').tooltip();

                    $('#mapperCreditTable').DataTable({
                        bLengthChange: false,
                        pageLength: 20,
                        language: {
                            search: "",
                            searchPlaceholder: "Search",
                            background: "none"
                        },
                        columnDefs: [{
                            bSearchable: false,
                            orderable: false,
                            targets: [6] // adjust if needed
                        }]
                    });
                },
                error: function() {
                    $('#mapperCreditTableBody').html('<tr><td colspan="7">Error loading data.</td></tr>');
                    $("#loaderModal").hide();
                },
                complete: function() {
                    $("#loaderModal").hide();
                }
            });
        }

        /*AKASH 13 AUG 2025
         function which will fetch mapper entities data user wise*/
        function getUserWiseEntities(userId) {
            $.ajax({
                type: "GET",
                url: baseURL + 'fetchEntityUserwise',
                data: {
                    user_id: userId,
                },
                success: function(res) {
                    const data = res.data || [];
                    const $entitySelect = $('#entityListMapperCreditsAdjustment');

                    // Clear previous options
                    $entitySelect.empty();

                    if (data.length > 0) {
                        $entitySelect.append(
                            '<option value="">Select Entity</option><option value="noEntity">No Entity</option>'
                            );
                        data.forEach(function(item) {
                            $entitySelect.append(`<option value="${item.id}">${item.entity}</option>`);
                        });
                    } else {
                        $entitySelect.append(
                            '<option value="">Select Entity</option><option value="noEntity">No Entity</option>'
                            );
                    }

                    $("#loaderModal").hide();
                },
                error: function() {
                    $('#entityListMapperCreditsAdjustment').empty().append(
                        '<option value="">Select Entity</option><option value="noEntity">No Entity</option>'
                        );
                    $("#loaderModal").hide();
                }
            });
        }

        /*AKASH 13 AUG 2025
         function which will fetch recon organizations data user wise*/
        function getUserWiseOrganization(userId) {
            $.ajax({
                type: "GET",
                url: baseURL + 'fetchOrganizationUserwise',
                data: {
                    user_id: userId,
                },
                success: function(res) {
                    const data = res.data || [];
                    const $organizationSelect = $('#organizationReconCreditsAdjustment');

                    // Clear previous options
                    $organizationSelect.empty();

                    if (data.length > 0) {
                        data.forEach(function(item) {
                            $organizationSelect.append(
                                `<option value="${item.organization}">${item.organization}</option>`
                                );
                        });
                    }

                    $("#loaderModal").hide();
                },
                error: function() {
                    $('#entityListMapperCreditsAdjustment').empty().append(
                        '<option value="">Select Entity</option><option value="noEntity">No Entity</option>'
                        );
                    $("#loaderModal").hide();
                }
            });
        }

        /*AKASH 13 AUG 2025
         function which will Adjust mapper credits user wise*/
        function creditAdjustmentAction() {
            $("#loaderModal").show();
            let userId = $('#userListMapperCreditsAdjustment').val();
            let selectedOption = $('#userListMapperCreditsAdjustment option:selected');
            let mapperServiceType = selectedOption.data('mapper_service_type') ?? 0;
            let entityId = $('#entityListMapperCreditsAdjustment').val();
            let date = $('#date-input-mapper-entity').val();
            let credits = $('#credit_input').val();
            let action = $('input[name="action"]:checked').val();
            let reason = $('#reason').val();
            let comment = $('#comment').val();
            $.ajax({
                type: "POST",
                url: baseURL + 'creditAdjustmentAction',
                data: {
                    user_id: userId,
                    mapper_service_type: mapperServiceType,
                    entity_id: entityId,
                    create_date: date,
                    credits: credits,
                    action_type: action,
                    reason: reason,
                    comment: comment
                },
                success: function(res) {
                    $("#loaderModal").hide();
                    // Show success modal
                    $(".simple-success-modal-msg-text").text("Credit adjustment successful.");
                    $(".simple-success-modal").fadeIn();
                    getMapperCreditsData();
                    listAllCreditHistoryUsers('mapper');

                    //reset form
                    $('#entityListMapperCreditsAdjustment').val('').trigger('change');
                    $('#credit_input').val('');
                    $('#comment').val('');

                    //Switch back to credit adjustment tab
                    $('#recentCreditUsageCheckbox').trigger('click');
                },
                error: function() {
                    $("#loaderModal").hide();
                    // Show error modal
                    $(".simple-error-modal-msg-text").text("Something went wrong while adjusting credits.");
                    $(".simple-error-modal").fadeIn();
                }
            });
        }

        /*AKASH 26 AUG 2025
        function which will fetch all Recon and mapper users of history table to show in filter dropdown*/
        function listAllCreditHistoryUsers(type) {
            let url = '';
            if (type == 'mapper') {
                url = `${baseURL}listAllMapperCreditHistoryUsers`;
            }
            if (type == 'recon') {
                url = `${baseURL}listAllReconCreditHistoryUsers`;
            }
            $.ajax({
                type: "GET",
                url: url,
                success: function(res) {
                    if (res.success && Array.isArray(res.data)) {
                        const labelOptions = [];
                        labelOptions.push('<option value="">Select User</option>');
                        res.data.forEach(user => {
                            const label = `${user.businessName} - ${user.user_login}`;
                            const optionWithDataAttr =
                                `<option value="${user.user_id}">${label}</option>`;
                            labelOptions.push(optionWithDataAttr);
                        });

                        //for Recon recent credit usage
                        if (type == 'recon') {
                            const $userListRecon = $('#userListReconCreditsAdjustmentHistory');
                            $userListRecon.empty();
                            $userListRecon.append(labelOptions.join(''));
                        }

                        //for Recon credit history
                        if (type == 'mapper') {
                            const $userListMapper = $('#userListMapperCreditsAdjustmentHistory');
                            $userListMapper.empty();
                            $userListMapper.append(labelOptions.join(''));
                        }
                        $("#loaderModal").hide();
                        $('#submitButton').prop('disabled', false);
                    } else {
                        alert('No users found.');
                        $("#loaderModal").hide();
                    }
                },
                error: function() {
                    // alert('Failed to fetch mapper user list.');
                    $("#loaderModal").hide();
                }
            });
        }

        /*AKASH 13 AUG 2025
         function which will Adjust Reconn credits user wise*/
        function reconCreditAdjustmentAction() {
            $("#loaderModal").show();
            let userId = $('#userListReconCreditsAdjustment').val();
            let selectedOption = $('#userListReconCreditsAdjustment option:selected');
            let reconServiceType = selectedOption.data('recon_service_type') ?? 0;
            let organization = $('#organizationReconCreditsAdjustment').val();
            let date = $('#date-input-recon-entity').val();
            let credits = $('#recon_credit_input').val();
            let action = $('.recon-credit-action input[name="action"]:checked').val();
            let reason = $('#recon_reason').val();
            let comment = $('#recon_comment').val();
            $.ajax({
                type: "POST",
                url: baseURL + 'reconCreditAdjustmentAction',
                data: {
                    user_id: userId,
                    recon_service_type: reconServiceType,
                    organization: organization,
                    create_date: date,
                    credits: credits,
                    action_type: action,
                    reason: reason,
                    comment: comment
                },
                success: function(res) {
                    $("#loaderModal").hide();
                    // Show success modal
                    $(".simple-success-modal-msg-text").text("Credit adjustment successful.");
                    $(".simple-success-modal").fadeIn();
                    getReconCreditsData();
                    listAllCreditHistoryUsers('recon');

                    //Reset form
                    $('#organizationReconCreditsAdjustment').val('');
                    $('#recon_credit_input').val('');
                    $('#recon_comment').val('');

                    //Switch back to credit adjustment tab
                    $('#recentReconCreditUsageCheckbox').click();
                },
                error: function() {
                    $("#loaderModal").hide();
                    // Show error modal
                    $(".simple-error-modal-msg-text").text("Something went wrong while adjusting credits.");
                    $(".simple-error-modal").fadeIn();
                }
            });
        }

        /*AKASH 13 AUG 2025
         function which will fetch mapper credits adjustment history*/
        function getMapperCreditsHistory() {
            var datatable = jQuery('#mapperCreditHistoryTable').DataTable({
                "buttons": ['colvis'],
                "serverSide": true,
                "scrollX": true,
                "sScrollXInner": "100%",
                "scrollCollapse": true,
                "processing": false,
                "searching": false,
                "order": [
                    [0, 'asc']
                ],
                "pageLength": 20,
                "oLanguage": {
                    "sEmptyTable": '<div id="list-number-note"><span><a href="/add-number/"><em></em></a> No Result Found</span></div>',
                    'sSearch': '',
                    'sSearchPlaceholder': "Search"
                },
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": [0]
                }, {
                    "bSearchable": false,
                    "aTargets": [0]
                }],
                "responsive": {
                    "breakpoints": [{
                        name: 'desktop',
                        width: Infinity
                    }, {
                        name: 'tablet',
                        width: 1024
                    }, {
                        name: 'fablet',
                        width: 768
                    }, {
                        name: 'phone',
                        width: 480
                    }]
                },
                'ajax': function(data, callback, settings) {
                    jQuery("#mapperCreditHistoryTable_processing").show();
                    var mapperCreditHistoryTableObj = jQuery('#mapperCreditHistoryTable').DataTable();
                    var params = mapperCreditHistoryTableObj ? mapperCreditHistoryTableObj.ajax.params() : '';
                    var column_name = '';
                    var sort_order = '';
                    if (params.order[0].column == 1) {
                        column_name = 'entity_name';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 2) {
                        column_name = 'create_date';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 4) {
                        column_name = 'credits';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 7) {
                        column_name = 'updated_by_email';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 8) {
                        column_name = 'created_at';
                        sort_order = params.order[0].dir;
                    }

                    var postData = {
                        pageSize: 20,
                        pageNumber: (mapperCreditHistoryTableObj.page.info().page + 1),
                        searchKeyword: (jQuery('#mapperCreditHistoryTable_filter input').val()) || '',
                        userFilter: (jQuery('#mapperCreditHistoryTable_filter select').val()) || '',
                        sortField: column_name,
                        sortDirection: sort_order
                    };

                    jQuery.ajax({
                        url: baseURL + "getMapperCreditsHistory",
                        type: 'GET',
                        data: postData,
                        success: function(response) {
                            jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css(
                                'display', 'inline-block');
                            jQuery(".dataTables_filter .fa-spinner").css('display', 'none');
                            jQuery("#mapperCreditHistoryTable_filter input[type='search']").prop(
                                "disabled", false);
                            jQuery("#mapperCreditHistoryTable_processing").hide();
                            $("#loaderModal").hide();

                            var tempDataTableArr = [];
                            var totalRecords = response.data;

                            if (totalRecords && totalRecords.length > 0) {
                                for (var i = 0; i < totalRecords.length; i++) {
                                    let formattedModifiedAt = '-';
                                    if (totalRecords[i].created_at) {
                                        let dateObj = new Date(totalRecords[i].created_at);
                                        if (!isNaN(dateObj.getTime())) { // Check if valid date
                                            // Format as YYYY-MM-DD HH:MM:SS
                                            formattedModifiedAt = dateObj.getFullYear() + '-' +
                                                String(dateObj.getMonth() + 1).padStart(2, '0') +
                                                '-' +
                                                String(dateObj.getDate()).padStart(2, '0') + ' ' +
                                                String(dateObj.getHours()).padStart(2, '0') + ':' +
                                                String(dateObj.getMinutes()).padStart(2, '0') +
                                                ':' +
                                                String(dateObj.getSeconds()).padStart(2, '0');
                                        } else {
                                            console.warn(
                                                `Invalid date format for created_at: ${totalRecords[i].created_at}`
                                                );
                                        }
                                    }

                                    // Mask comment if > 30 words
                                    let comment = totalRecords[i].comment || '-';
                                    let maskedComment = comment;
                                    if (comment !== '-' && comment.split(/\s+/).length > 30) {
                                        maskedComment = comment.split(/\s+/).slice(0, 30).join(
                                            ' ') + '...';
                                        // Add hover tooltip
                                        maskedComment =
                                            `<span title="${comment.replace(/"/g, '&quot;')}">${maskedComment}</span>`;
                                    }

                                    tempDataTableArr.push({
                                        businessName: totalRecords[i].businessName || '-',
                                        entity: totalRecords[i].entity_name || '-',
                                        date: totalRecords[i].create_date || '-',
                                        action: totalRecords[i].action || '-',
                                        credits: totalRecords[i].credits || '-',
                                        reason: totalRecords[i].reason || '-',
                                        comment: maskedComment || '-',
                                        modified_by: totalRecords[i].updated_by_email ||
                                            '-',
                                        modified_at: formattedModifiedAt || '-'
                                    });
                                }

                                callback({
                                    data: tempDataTableArr,
                                    recordsTotal: response.recordsTotal,
                                    recordsFiltered: response.recordsFiltered
                                });
                            } else {
                                jQuery("#mapperCreditHistoryTable tbody").html(
                                    "<tr><td></td><td></td><td></td><td>No Records Found.</td><td></td><td></td><td></td><td></td></tr>"
                                    );
                                // jQuery('.dataTables_paginate').hide();
                                jQuery('#mapperCreditHistoryTable_info').hide();
                                jQuery("#mapperCreditHistoryTable_processing").hide();
                            }
                            jQuery("#mapperCreditHistoryTable_processing").hide();
                        },
                        error: function(jqXhr, textStatus, errorThrown) {
                            // alert('Error fetching data: ' + (errorThrown || textStatus));
                        }
                    });
                },
                'columns': [{
                        data: 'businessName'
                    },
                    {
                        data: 'entity'
                    },
                    {
                        data: 'date'
                    },
                    {
                        data: 'action'
                    },
                    {
                        data: 'credits'
                    },
                    {
                        data: 'reason'
                    },
                    {
                        data: 'comment'
                    },
                    {
                        data: 'modified_by'
                    },
                    {
                        data: 'modified_at'
                    }
                ]
            });
        }

        /*AKASH 13 AUG 2025
         function which will fetch mapper credits adjustment history*/
        function getReconCreditsHistory() {
            var datatable = jQuery('#reconCreditHistoryTable').DataTable({
                "buttons": ['colvis'],
                "serverSide": true,
                "scrollX": true,
                "sScrollXInner": "100%",
                "scrollCollapse": true,
                "processing": false,
                "searching": false,
                "order": [
                    [0, 'asc']
                ],
                "pageLength": 20,
                "oLanguage": {
                    "sEmptyTable": '<div id="list-number-note"><span><a href="/add-number/"><em></em></a> No Result Found</span></div>',
                    'sSearch': '',
                    'sSearchPlaceholder': "Search"
                },
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": [0]
                }, {
                    "bSearchable": false,
                    "aTargets": [0]
                }],
                "responsive": {
                    "breakpoints": [{
                        name: 'desktop',
                        width: Infinity
                    }, {
                        name: 'tablet',
                        width: 1024
                    }, {
                        name: 'fablet',
                        width: 768
                    }, {
                        name: 'phone',
                        width: 480
                    }]
                },
                'ajax': function(data, callback, settings) {
                    jQuery("#reconCreditHistoryTable_processing").show();
                    var reconCreditHistoryTableObj = jQuery('#reconCreditHistoryTable').DataTable();
                    var params = reconCreditHistoryTableObj ? reconCreditHistoryTableObj.ajax.params() : '';
                    var column_name = '';
                    var sort_order = '';
                    if (params.order[0].column == 1) {
                        column_name = 'organization';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 2) {
                        column_name = 'create_date';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 4) {
                        column_name = 'credits';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 7) {
                        column_name = 'updated_by_email';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 8) {
                        column_name = 'created_at';
                        sort_order = params.order[0].dir;
                    }

                    var postData = {
                        pageSize: 20,
                        pageNumber: (reconCreditHistoryTableObj.page.info().page + 1),
                        searchKeyword: (jQuery('#reconCreditHistoryTable_filter input').val()) || '',
                        userFilter: (jQuery('#reconCreditHistoryTable_filter select').val()) || '',
                        sortField: column_name,
                        sortDirection: sort_order
                    };

                    jQuery.ajax({
                        url: baseURL + "getReconCreditsHistory",
                        type: 'GET',
                        data: postData,
                        success: function(response) {
                            jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css(
                                'display', 'inline-block');
                            jQuery(".dataTables_filter .fa-spinner").css('display', 'none');
                            jQuery("#reconCreditHistoryTable_filter input[type='search']").prop(
                                "disabled", false);
                            jQuery("#reconCreditHistoryTable_processing").hide();
                            $("#loaderModal").hide();

                            var tempDataTableArr = [];
                            var totalRecords = response.data;

                            if (totalRecords && totalRecords.length > 0) {
                                for (var i = 0; i < totalRecords.length; i++) {
                                    let formattedModifiedAt = '-';
                                    if (totalRecords[i].created_at) {
                                        let dateObj = new Date(totalRecords[i].created_at);
                                        if (!isNaN(dateObj.getTime())) { // Check if valid date
                                            // Format as YYYY-MM-DD HH:MM:SS
                                            formattedModifiedAt = dateObj.getFullYear() + '-' +
                                                String(dateObj.getMonth() + 1).padStart(2, '0') +
                                                '-' +
                                                String(dateObj.getDate()).padStart(2, '0') + ' ' +
                                                String(dateObj.getHours()).padStart(2, '0') + ':' +
                                                String(dateObj.getMinutes()).padStart(2, '0') +
                                                ':' +
                                                String(dateObj.getSeconds()).padStart(2, '0');
                                        } else {
                                            console.warn(
                                                `Invalid date format for created_at: ${totalRecords[i].created_at}`
                                                );
                                        }
                                    }

                                    // Mask comment if > 30 words
                                    let comment = totalRecords[i].comment || '-';
                                    let maskedComment = comment;
                                    if (comment !== '-' && comment.split(/\s+/).length > 30) {
                                        maskedComment = comment.split(/\s+/).slice(0, 30).join(
                                            ' ') + '...';
                                        // Add hover tooltip
                                        maskedComment =
                                            `<span title="${comment.replace(/"/g, '&quot;')}">${maskedComment}</span>`;
                                    }

                                    tempDataTableArr.push({
                                        businessName: totalRecords[i].businessName || '-',
                                        organization: totalRecords[i].organization || '-',
                                        date: totalRecords[i].create_date || '-',
                                        action: totalRecords[i].action || '-',
                                        credits: totalRecords[i].credits || '-',
                                        reason: totalRecords[i].reason || '-',
                                        comment: maskedComment || '-',
                                        modified_by: totalRecords[i].updated_by_email ||
                                            '-',
                                        modified_at: formattedModifiedAt || '-'
                                    });
                                }

                                callback({
                                    data: tempDataTableArr,
                                    recordsTotal: response.recordsTotal,
                                    recordsFiltered: response.recordsFiltered
                                });
                            } else {
                                jQuery("#reconCreditHistoryTable tbody").html(
                                    "<tr><td></td><td></td><td></td><td>No Records Found.</td><td></td><td></td><td></td><td></td></tr>"
                                    );
                                // jQuery('.dataTables_paginate').hide();
                                jQuery('#reconCreditHistoryTable_info').hide();
                                jQuery("#reconCreditHistoryTable_processing").hide();
                            }
                            jQuery("#reconCreditHistoryTable_processing").hide();
                        },
                        error: function(jqXhr, textStatus, errorThrown) {
                            // alert('Error fetching data: ' + (errorThrown || textStatus));
                        }
                    });
                },
                'columns': [{
                        data: 'businessName'
                    },
                    {
                        data: 'organization'
                    },
                    {
                        data: 'date'
                    },
                    {
                        data: 'action'
                    },
                    {
                        data: 'credits'
                    },
                    {
                        data: 'reason'
                    },
                    {
                        data: 'comment'
                    },
                    {
                        data: 'modified_by'
                    },
                    {
                        data: 'modified_at'
                    }
                ]
            });
        }

        function setDefaultMonthlyHistoryRangeRecon() {

            const picker = $('#monthlyHistoryDateRecon').data('daterangepicker');
            if (!picker) return;

            const start = moment().startOf('month');
            const end = moment();

            $('#monthlyHistoryDateRecon').val(
                start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD')
            );

            picker.setStartDate(start);
            picker.setEndDate(end);
        }

        function toNumber(val) {
            if (!val) return 0;
            return parseInt(val.toString().replace(/,/g, ''), 10) || 0;
        }

  

        function showConfirm(message, onYes) {
            confirmAction = onYes;
            $('#confirmMessage').html(message);   // ✅ correct
            $('.simple-confirm-modal').fadeIn();
        }

        // ✅ PROCEED BUTTON
        $(document).on('click', '#confirmProceedBtn', function () {
            $('.simple-confirm-modal').fadeOut();
            if (confirmAction) {
                confirmAction();
                confirmAction = null;
            }
        });

        // ✅ CANCEL / CLOSE
        $(document).on('click', '#confirmCancelBtn, .simple-confirm-modal-close', function () {
            $('.simple-confirm-modal').fadeOut();
            confirmAction = null;
        });

        // success & error (unchanged)
        function showSuccess(msg) {
            $('.simple-success-modal-msg-text').text(msg);
            $('.simple-success-modal').fadeIn();
        }

        function showError(msg) {
            $('.simple-error-modal-msg-text').text(msg);
            $('.simple-error-modal').fadeIn();
        }


    </script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        $(function() {
            var today = moment();

            // For datetimes (20 days)
            var twentyDaysAgo = moment().subtract(20, 'days');
            $('input[name="datetimes"]').daterangepicker({
                startDate: twentyDaysAgo,
                endDate: today,
                minDate: twentyDaysAgo,
                maxDate: today,
                maxSpan: {
                    days: 20
                },
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

            // For datetimes mapper & recon-credit (2 months)
            var today = moment();
            var startOfMonth = today.clone().startOf('month');
            var twoMonthsAgo = today.clone().subtract(2, 'months').startOf('month');

            $('input[name="datetimes-mapper-credit"], input[name="datetimes-recon-credit"]').daterangepicker({
                startDate: startOfMonth,
                endDate: today,
                minDate: twoMonthsAgo,
                maxDate: today,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

            // For datetimes mapper & recon-credit (2 months)
            var today = moment();
            var twoMonthsAgo = today.clone().subtract(2, 'months').startOf('month');
            $('input[name="datetimes-mapper-entity"], input[name="datetimes-recon-entity"]').daterangepicker({
                singleDatePicker: true,
                startDate: today,
                minDate: twoMonthsAgo,
                maxDate: today,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

        });
    </script>
@endsection