@extends('layouts.app')

@section('content')

</div>
<div class="container">
    <style>
        :root {
            --primary-color: #34548A;
            --secondary-color: #ebe7e7;
            --border-color: #d7d7d7;
        }

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

        .callsimulator-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;
        }

        .callsimulator-submenu .role-permission-list li a {
            text-align: center;
            float: initial;
            margin: auto;
            white-space: nowrap;
            width: 100%;
            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) !important;
            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,
        table thead th {
            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 !important; */
            background-color: #d7d7d7 !important;
        }

        table.dataTable.stripe tbody tr.even,
        table.dataTable.display tbody tr.even {
            /* background-color: #f9f9f9 !important; */
            background-color: #f8f8f8 !important;
        }

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

        .jump-to-page-wrapper {
            margin-top: 15px;
            display: flex;
            align-items: baseline;
            justify-content: end;
            gap: 10px;
            font-size: 14px;
        }

        .jump-to-page-wrapper label {
            font-weight: 500;
            color: #333;
        }

        .jump-to-page-wrapper input {
            width: 70px;
            padding: 6px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
            font-size: 14px;
        }

        .dataTables_scrollBody {
            scrollbar-color: #34548A #fff !important;
        }

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

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

        #backBtnNumber {
            position: absolute;
            top: -90px;
        }

        .download-btns {
            display: flex;
            gap: 10px;
            margin-right: 58%;
        }

        .fa-refresh {
            color: #34548a;
            font-size: 25px !important;
            position: absolute;
            left: -15%;
            top: 13%;

            &:hover {
                cursor: pointer;
            }
        }

        .spaceAboveMenu {
            margin-top: 10% !important;
        }

        .btn {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 20px;
            border: none;
            cursor: pointer;
            margin: 5px 0;
            font-family: "Montserrat";
            border-width: 0px;
            font-weight: 600;
            min-height: 38px;
        }

        .btn-primary {
            background-color: #34548A;
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #34548A;
            color: #fff;
        }

        /********************* Call Simulator css start ***********************/
        #callsimulator_filter {
            margin-bottom: 20px !important;
            margin: 0px 17px;
            display: flex;
            align-items: end;
            justify-content: space-between;
            /* margin-top: 6%; */
        }

        #callsimulatortbl_filter {
            margin-bottom: -8px !important;
        }

        #callsimulator_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;
        }

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

        #callsimulatortbl_wrapper .dataTables_scrollBody {
            max-height: 600px;
        }

        #callSimulatorFilter {
            margin-left: 5%;
        }

        select#callSimulatorBulkAction {
            border-radius: 20px;
            width: 250px;
        }

        /*#callSimulatortbl td:first-child,
        #callSimulatortbl td:nth-child(2) {
            color: #34548a;
            font-weight: 600;
        }*/

        #callSimulatortbl td:nth-child(6) {
            color: #34548a;
            font-weight: 600;
        }

        /* #callSimulatortbl td:nth-child(n+3) {
            color: #a19595;
        } */
        #callSimulatortbl td:nth-child(-n+5) {
            color: #a19595;
        }

        #callsimulator_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;
        }

        .call-simulator-section {
            display: flex;
            justify-content: center;   /* horizontally center */
            align-items: center;       /* vertically center */
            margin-bottom: 40px;
        }

        .call-simulator-row {
            display: flex;
            align-items: center;
            gap: 10px; /* spacing between fields */
        }

        .call-simulator-group input {
            padding: 6px;
            /* width: 150px; */
        }
        /********* Call Simulator css end **************/

        /************ Device Management css start ********************/
        #deviceMgmt_filter {
            margin-bottom: 20px !important;
            margin: 0px 17px;
            display: flex;
            align-items: end;
            justify-content: space-between;
        }

        #deviceMgmttbl_filter {
            margin-bottom: -8px !important;
        }

        #deviceMgmt_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;
        }

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

        #deviceMgmttbl_wrapper .dataTables_scrollBody {
            max-height: 600px;
        }

        #deviceMgmtFilter {
            margin-left: 5%;
        }

        select#deviceMgmtBulkAction {
            border-radius: 20px;
            width: 250px;
        }

        #deviceMgmttbl td:first-child,
        #deviceMgmttbl td:nth-child(2) {
            color: #34548a;
            font-weight: 600;
        }

        #deviceMgmttbl td:nth-child(n+3) {
            color: #a19595;
        }

        #deviceMgmt_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;
        }
        /*************** Device Management css end ******************/



        /***************************/
        .daily-calling-status-table-container
        {
            padding-right: 5%;
            padding-left: 5%;
        }
        .left-side-button{
            margin: auto;
            float: left;
        }

        #download_device_data{
            min-width: 150px;
            /* background-color: #87155a; */
            background-color: #34548A;
            color: #ffffff;
            font-family: "Montserrat";
            border-width: 0px;
            box-shadow: 0px 2px 8px #35093b;
            font-weight: 600;
            border-radius: 25px;
            min-height: 38px;
            cursor: pointer;
            outline: none;
        }
        .left-side-header{
            margin: auto;
            /* color: #34548A!important; */
        }
        .left-side-header-release{
            margin-bottom: 15px;
            /* color: #34548A!important; */
        }
        #metaTable_filter input
        {
            border-radius: 35px!important;
            padding: 10px;
            outline:none;
            margin-top: -40px;
            margin-bottom: 11px;
            width: 100%;
        }
        .metaTable_filter label{
            margin-top: -62px;
        }
        .metaTable_filter{
            margin-bottom: 3rem;

        }
        #metaTable_filter
        {
            margin-top: -20px;
        }
        /***************************/
        table#callSimulatortbl thead {
            background-color: #34548A !important;
            border: 0 !important;
            padding: 5px !important;
            color: #ebe7e7 !important;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
        }
        span#callFromError, span#callToError  {
            display: block;
            color: red;
            font-size: 15px;
            margin-top: 4px;
        }

        table#callSimulatortbl tr td {
            font-size: 15px;
        }

        .fa-refresh {
            color: #34548a;
            font-size: 25px !important;
            position: absolute;
            left: -15%;
            top: 13%;

            &:hover {
                cursor: pointer;
            }
        }

        #go_to_page {
            padding: 6px 12px;
            color: #34548a;
            font-size: 14px;
            display: inline-block;
        }

        #go_to_page:hover {
            color: #0056b3;
            text-decoration: underline;
            cursor: pointer;
        }
        /* wrapper for both rows */
.call-simulator-section {
    display: flex;
    flex-direction: column;
    align-items: center;   /* keep center */
}

.call-options-wrapper {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.call-option-row {
    display: flex;
    align-items: center;
    gap: 25px;
}

.call-type-title {
    font-weight: 700;
    min-width: 160px;
}

.call-option-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.call-simulator-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cige-card {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    background: #f7f9fc;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    padding: 8px 18px 14px;
    text-align: left;
}

.cige-top-row,
.cige-mid-row,
.cige-node-row,
.cige-footer {
    border-bottom: 1px solid #d9e0ea;
    padding: 16px 0;
}

.cige-footer {
    border-bottom: 0;
    padding-bottom: 4px;
}

.cige-top-row,
.cige-mid-row,
.cige-node-row {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    justify-content: flex-start;
}

.cige-mid-row .cige-field,
.cige-node-row .cige-field {
    flex: 0 1 420px;
    max-width: 420px;
    text-align: left;
}

.cige-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.cige-field {
    flex: 1;
    min-width: 0;
}

.cige-label {
    display: block;
    margin-bottom: 8px;
    color: #243b67;
    font-weight: 700;
    font-size: 15px;
}

.cige-inline .cige-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.cige-radios {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 28px;
    color: #243b67;
    font-weight: 600;
}

.cige-radios label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
}

.cige-radios input[type="radio"]:disabled {
    cursor: not-allowed;
}

.cige-radios label:has(input[type="radio"]:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.cige-card input[type="text"],
.cige-card select {
    width: 100%;
    height: 42px;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    background: #fff;
    color: #243b67;
    padding: 0 12px;
    font-size: 15px;
}

.cige-hint,
.cige-card .cige-error {
    display: block;
    margin-top: 6px;
    color: #8b95a7;
    font-size: 13px;
}

.cige-card .cige-error {
    color: #d91d17;
    min-height: 16px;
}

.cige-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
    gap: 20px;
}

.cige-summary {
    color: #243b67;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
    margin-right: auto;
}

.cige-summary strong {
    display: inline-block;
    min-width: 108px;
}

#TestCallBTN {
    background: #2f6fed;
    color: #fff;
    border: 0;
    border-radius: 24px;
    min-width: 150px;
    height: 44px;
    padding: 0 28px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#TestCallBTN:disabled {
    opacity: 0.7;
    cursor: default;
}

#callSimulatortbl tbody tr {
    cursor: pointer;
}

.cige-result-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: auto;
    background: rgba(15, 23, 42, 0.45);
    padding: 24px 16px;
}

.cige-result-dialog {
    max-width: 1080px;
    margin: 0 auto;
    background: #f4f7fb;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    padding: 16px 16px 14px;
}

.cige-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cige-result-head h2 {
    margin: 0;
    color: #2f6fed;
    font-size: 20px;
    font-weight: 700;
}

.cige-result-close {
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #667085;
}

.cige-result-top {
    display: grid;
    grid-template-columns: 1.15fr 1.45fr 220px;
    gap: 12px;
}

.cige-result-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    padding: 12px 14px;
}

.cige-result-card h3 {
    margin: 0 0 10px;
    color: #243b67;
    font-size: 15px;
    font-weight: 700;
}

.cige-kv {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 6px 8px;
    color: #243b67;
    font-size: 13px;
    margin-bottom: 6px;
}

.cige-kv span:first-child {
    color: #667085;
}

.cige-ok {
    color: #178a3a;
    font-weight: 700;
}

.cige-muted {
    color: #98a2b3;
}

.cige-copy {
    border: 0;
    background: transparent;
    color: #2f6fed;
    cursor: pointer;
    margin-left: 6px;
}

.cige-phone-wrap {
    display: flex;
    justify-content: center;
}

.cige-phone {
    width: 170px;
    min-height: 300px;
    background: #111;
    border: 8px solid #1c1c1c;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cige-phone img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: none;
}

.cige-phone .cige-preview-empty {
    color: #d0d5dd;
    font-size: 13px;
    padding: 12px;
    text-align: center;
}

.cige-section-rule {
    border-top: 1px solid #d9e0ea;
    margin: 14px 0 12px;
}

.cige-artifacts {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    border: 1px solid #d9e0ea;
    font-size: 13px;
}

.cige-artifacts th,
.cige-artifacts td {
    border: 1px solid #d9e0ea;
    padding: 6px 8px;
    color: #243b67;
}

.cige-artifacts th {
    text-align: left;
    font-weight: 700;
    background: #ddd7d7;
}

.cige-artifacts a {
    color: #2f6fed;
}

.cige-result-block {
    margin-top: 12px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    padding: 10px 14px;
}

.cige-result-block summary {
    cursor: pointer;
    color: #243b67;
    font-weight: 700;
}

.cige-result-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.cige-result-actions button {
    background: #fff;
    color: #2f6fed;
    border: 1px solid #2f6fed;
    border-radius: 22px;
    height: 40px;
    padding: 0 18px;
    font-weight: 700;
    cursor: pointer;
}
    </style>
    <div class="spaceAboveMenu"></div>

    <div class="pagetextlabel">
        <div class="callsimulator-submenu" id="callSimulatorMenu">
            <ul class="navbar-nav ml-auto role-permission-list">
                @can('test call cige')
                <li class="nav-item dropdown menu-item-selected">
                    <a class="menu-item call-simulator-item" data-target="#callsimulator">
                        <span>CIGE Test</span>
                    </a>
                </li>
                @endcan
                @can('test device details cige')
                <li class="nav-item dropdown">
                    <a class="menu-item call-simulator-item" data-target="#devicemgmt">
                        <span>Device Management</span>
                    </a>
                </li>
                @endcan
            </ul>
        </div>
    </div>

    @can('test call cige')
    <div id="callsimulator" class="content-section">
        <div class="cige-card">
            <div class="cige-top-row">
                <div class="cige-inline">
                    <span class="cige-label">Provider</span>
                    <div class="cige-radios">
                        <label>
                            <input type="radio" name="provider" value="inteliquent">
                            Inteliquent
                        </label>
                        <label>
                            <input type="radio" name="provider" value="cgie" checked>
                            CIGE
                        </label>
                    </div>
                </div>
                <div class="cige-inline">
                    <span class="cige-label">Calling Platform Selection</span>
                    <div class="cige-radios">
                        <label>
                            <input type="radio" name="CallType" value="021" disabled>
                            Voice Service Platform (021)
                        </label>
                        <label>
                            <input type="radio" name="CallType" value="001" checked>
                            Regular Calling Network (001)
                        </label>
                    </div>
                </div>
            </div>

            <div class="cige-mid-row">
                <div class="cige-field">
                    <label class="cige-label" for="CalledFrom">Called From</label>
                    <input type="text" name="CalledFrom" class="CalledFrom" id="CalledFrom" maxlength="10" autocomplete="off">
                    <span id="callFromError" class="cige-error"></span>
                </div>
                <div class="cige-field">
                    <label class="cige-label" for="CalledTo">Called To / Capture Device</label>
                    <select name="CalledTo" id="CalledTo">
                        <option value="">Select a device</option>
                        @foreach($devicelist as $value)
                            <option
                                value="{{ $value->mobile_number }}"
                                data-carrier="{{ $value->carrier_name }}"
                                data-number="{{ $value->mobile_number }}">
                                {{ $value->post_title }} - {{ $value->carrier_name }} - {{ $value->mobile_number }}
                            </option>
                        @endforeach
                    </select>
                    <span class="cige-hint">Select a device or type a registered number</span>
                    <span id="callToError" class="cige-error"></span>
                </div>
            </div>

            <div class="cige-node-row">
                <div class="cige-field">
                    <label class="cige-label" for="targetCige">Target CIGE Node</label>
                    <select name="target_cige" id="targetCige">
                        <option value="cige-isen (IP: 35.223.250.192)" selected>cige-isen (IP: 35.223.250.192)</option>
                    </select>
                </div>
            </div>

            <div class="cige-footer">
                <div class="cige-summary">
                    <div><strong>Target:</strong> <span id="cigeTargetSummary"></span></div>
                    <div><strong>Destination:</strong> <span id="cigeDestinationSummary"></span></div>
                </div>
                <input type="button" id="TestCallBTN" name="TestCallBTN" value="Initiate Call" onclick="verifyFunction('TestCallFunction()')">
            </div>
        </div>

        <div>
            <h1 style="margin-top: 4%;">Calling Results</h1>
        </div>
        <div id="callSimulatorSection" style="display:none;">
            <div id="callsimulator_filter" class="dataTables_filter icon-addon">
                <div style="float:left;gap:10px;position:relative;">
                    <label>Select Date</label>
                    <input type="text" class="input-date datepicker" id="date-input" name="date-input" placeholder="yyyy/mm/dd" value="{{$dateRange}}" autocomplete="off" />
                </div>
                <div class="download-btns">
                    <input type="button" class="manage-number-btn btn btn-primary" id="downloadCallSimulator" value="Download">
                    <a class="manage-number-btn btn btn-primary" href="{{ route('cigeBqRecords') }}" style="margin-left:8px;">BQ Records</a>
                </div>

                {{-- Right: Download Buttons + Search --}}
                <div style="display:flex;align-items:end;gap:10px;position:relative;">
                    <div id="callsimulatortbl_filter" class="dataTables_filter icon-addon" style="position: relative;">
                        <i class="fa fa-refresh reload-business-table" aria-hidden="true"></i>
                        <label class="contact-no-detail-label">
                            <span class="search-input">
                                <input type="search" class="callSimulatortbl_search" id="callSimulatortbl_search" placeholder="Search" aria-controls="callSimulatorListTable" 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>
                        </label>
                    </div>
                </div>
            </div>

            <div class="container daily-calling-status-table-container1">
                <div id="callsimulator_processing" class="dataTables_processing" style="display: none;">Loading...</div>
                <table id="callSimulatortbl" class="stripe">
                    <thead>
                        <tr>
                            <th>Carrier Name</th>
                            <th>Called From</th>
                            <th>Called To</th>
                            <th>Call Status</th>
                            <th>Telephony Call Time</th>
                            <th>Cname</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
                <div class="jump-to-page-wrapper">
                    <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 id="go_to_page">GO</a>
                </div>
            </div>
        </div>
    </div>
    @endcan
    @can('test device details cige')
    <div id="devicemgmt" class="content-section">
        <div class="row maintenance-device-list-cont">
            <div class="col-md-12">
                <div class="container daily-calling-status-table-container">
                {{-- <div class="left-side-button">
                    <form method="post" action="{{route('downloadTodaysDeviceData')}}">
                        @csrf
                        <input class="Stop-awesome test-call-mode-btn" type="submit" id="download_device_data" name="download_device_data" value="Download Today's Updated Device(s) Data" style="padding: 0 20px;">
                    </form>
                </div> --}}

                    <table id="metaTable" class="stripe">
                    <div class="row">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Device Name</th>
                                <th>Mobile Number</th>
                                <th>Carrier</th>
                        </thead>
                        <tbody class="maintenance-device">
                            @foreach($devicelist as $key => $value)
                                <tr>
                                    <td>{{$key + 1}}</td>
                                    <td>{{$value->post_title}}</td>
                                    <td>{{$value->mobile_number}}</td>
                                    <td>{{$value->carrier_name}}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endcan
</div>

<!-- The Enter PW Modal -->
<div id="myPWModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close"  onclick="hidePopup()">&times;</span>
        <p id="model_msg"> <span>Are you sure to test call.</span> <input type="hidden" id="password" name="pass" placeholder = "Enter Key" ></p>
        <div class="margin-top-bottom">
            <input type="button" id="PwYesBTN" name="PwYesBTN" value = "Ok" onclick="">
        </div>
        <div class="margin-top-bottom">
            <input type="button" id="PWNoBTN" name="PWNoBTN" value = "Cancel" >
        </div>
    </div>
</div>

<div id="cigeResultModal" class="cige-result-modal">
    <div class="cige-result-dialog">
        <div class="cige-result-head">
            <h2>CIGE Test Results and Evidence</h2>
            <span class="cige-result-close" id="cigeResultClose">&times;</span>
        </div>
        <div class="cige-result-top">
            <section class="cige-result-card">
                <h3>Test Identity</h3>
                <div class="cige-kv">
                    <span>Test-run ID:</span> <span><span id="cigeTestRunId"></span>
{{--                        <button type="button" class="cige-copy" id="cigeCopyTestId" title="Copy">&#128203;</button>--}}
                    </span>
                </div>
                <div class="cige-kv"><span>Launched:</span> <span id="cigeLaunched"></span></div>
                <div class="cige-kv"><span>Called From:</span> <span id="cigeCalledFrom"></span></div>
                <div class="cige-kv"><span>Capture Device:</span> <span id="cigeCaptureDevice"></span></div>
                <div class="cige-kv"><span>Destination:</span> <span id="cigeDestination"></span></div>
                <div class="cige-kv"><span>Target:</span> <span id="cigeTarget"></span></div>
                <div class="cige-section-rule"></div>
                <h3>SIP Call-IDs</h3>
                <div class="cige-kv"><span>Production 001 SBC:</span> <span class="cige-bq cige-muted" data-field="production_sbc">Unavailable</span></div>
                <div class="cige-kv"><span>ISEN:</span> <span class="cige-bq cige-muted" data-field="isen_call_id">Unavailable</span></div>
            </section>
            <section class="cige-result-card">
                <h3>Governance and CEL Outcome</h3>
                <div class="cige-kv"><span>DGR Decision:</span> <span class="cige-bq cige-muted" data-field="dgr_decision">Unavailable</span></div>
                <div class="cige-kv"><span>Persisted CEL Record:</span> <span class="cige-bq cige-muted" data-field="persisted_cel_record">Unavailable</span></div>
                <div class="cige-kv"><span>Recorded decision:</span> <span class="cige-bq cige-muted" data-field="recorded_decision">Unavailable</span></div>
                <div class="cige-kv"><span>Governance reason:</span> <span class="cige-bq cige-muted" data-field="governance_reason">Unavailable</span></div>
                <div class="cige-kv"><span>Evaluated policy:</span> <span class="cige-bq cige-muted" data-field="evaluated_policy">Unavailable</span></div>
                <div class="cige-kv"><span>Record timestamp:</span> <span id="cigeRecordTime" class="cige-bq" data-field="record_timestamp"></span></div>
                <div class="cige-section-rule"></div>
                <h3>Artifact Access</h3>
                <table class="cige-artifacts">
                    <thead>
                        <tr><th>Artifact</th><th>Availability</th><th>Actions</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>SGI</td><td id="cigeArtSgiStatus" class="cige-muted">Unavailable</td><td id="cigeArtSgiActions" class="cige-muted" data-label="View · Download JSON">View · Download JSON</td></tr>
                        <tr><td>DGR</td><td id="cigeArtDgrStatus" class="cige-muted">Unavailable</td><td id="cigeArtDgrActions" class="cige-muted" data-label="View · Download JSON">View · Download JSON</td></tr>
                        <tr><td>Persisted CEL Record</td><td id="cigeArtCelStatus" class="cige-muted">Unavailable</td><td id="cigeArtCelActions" class="cige-muted" data-label="View · Download JSON">View · Download JSON</td></tr>
                        <tr><td>Production 001 SBC CDR</td><td id="cigeArtSbcStatus" class="cige-muted">Unavailable</td><td id="cigeArtSbcActions" class="cige-muted" data-label="View · Download .txt">View · Download .txt</td></tr>
                        <tr><td>ISEN CDR</td><td id="cigeArtIsenStatus" class="cige-muted">Unavailable</td><td id="cigeArtIsenActions" class="cige-muted" data-label="View · Download .txt">View · Download .txt</td></tr>
                        <tr>
                            <td>Capture Phone Screenshot</td>
                            <td id="cigeShotStatus" class="cige-muted">Unavailable</td>
                            <td id="cigeShotActions" class="cige-muted">View · Download</td>
                        </tr>
                    </tbody>
                </table>
            </section>
            <section class="cige-result-card">
                <h3>Capture Phone Preview</h3>
                <div class="cige-phone-wrap">
                    <div class="cige-phone">
                        <img id="cigePreviewImage" alt="Capture phone screenshot">
                        <div id="cigePreviewEmpty" class="cige-preview-empty">Unavailable</div>
                    </div>
                </div>
            </section>
        </div>
        <details class="cige-result-block">
            <summary>Correlation Details</summary>
            <div class="cige-result-top" style="margin-top:10px;">
                <div class="cige-kv"><span>SGI ID:</span> <span class="cige-bq cige-muted" data-field="sgi_id">Unavailable</span></div>
                <div class="cige-kv"><span>Session ID:</span> <span class="cige-bq cige-muted" data-field="session_id">Unavailable</span></div>
                <div></div>
                <div class="cige-kv"><span>SGO ID:</span> <span class="cige-bq cige-muted" data-field="sgo_id">Unavailable</span></div>
                <div class="cige-kv"><span>DGR ID:</span> <span class="cige-bq cige-muted" data-field="dgr_id">Unavailable</span></div>
            </div>
        </details>
        <details class="cige-result-block">
            <summary>Configuration Used</summary>
            <div class="cige-result-top" style="margin-top:10px;">
                <div class="cige-kv"><span>Policy ID:</span> <span class="cige-bq cige-muted" data-field="policy_id">Unavailable</span></div>
                <div class="cige-kv"><span>Policy Version:</span> <span class="cige-bq cige-muted" data-field="policy_version">Unavailable</span></div>
                <div></div>
                <div class="cige-kv"><span>Bundle ID:</span> <span class="cige-bq cige-muted" data-field="bundle_id">Unavailable</span></div>
                <div class="cige-kv"><span>Bundle Version:</span> <span class="cige-bq cige-muted" data-field="bundle_version">Unavailable</span></div>
                <div></div>
                <div class="cige-kv"><span>ISEN Enforcement Setting:</span> <span class="cige-bq cige-muted" data-field="isen_enforcement_setting">Unavailable</span></div>
                <div class="cige-kv"><span>ISEN Build:</span> <span class="cige-bq cige-muted" data-field="isen_build">Unavailable</span></div>
                <div></div>
                <div class="cige-kv"><span>RTE Build:</span> <span class="cige-bq cige-muted" data-field="rte_build">Unavailable</span></div>
            </div>
        </details>
        <div class="cige-result-actions" style="display: none">
            <button type="button" id="cigeDownloadPackage">Download Test Package</button>
            <button type="button" id="cigeRunAgain">Run Again</button>
        </div>
    </div>
</div>

<div id="msgPopup" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close" onclick="hidePopupAndLoadTable()">&times;</span>
        <p id="msg" style="font-size:22px" class=""></p>
        <div class="margin-top-bottom">
            <button onclick="hidePopupAndLoadTable()">Ok</button>
        </div>
    </div>
</div>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
    var baseURL = "{{ URL::to('/') }}" + "/";
    // const canDoAction1 = @json(auth() -> user() -> can('test call'));
    // const canDoAction2 = @json(auth() -> user() -> can('test device details'));

    // console.log("canDoAction1 ===> ", canDoAction1);
    // console.log("canDoAction2 ===> ", canDoAction2);
    $( function() {
        $( ".datepicker" ).datepicker({
                dateFormat: 'yy-mm-dd',
                maxDate: 0,
                minDate: '-3M',
                showOn: "button",
                    buttonImage: "{{env('WP_URL')}}/wp-content/uploads/2022/07/Calender-blue-1.png",
                    buttonImageOnly: true
            });
    });
    function updateCigeSummary() {
        var $selected = $('#CalledTo option:selected');
        var carrier = $selected.data('carrier') || '';
        var number = $selected.data('number') || '';
        $('#cigeTargetSummary').text($('#targetCige option:selected').text());
        $('#cigeDestinationSummary').text(number ? (carrier + ' · ' + number) : '');
    }

    function syncCallTypeForProvider() {
        var provider = $("input[name='provider']:checked").val();
        var $voicePlatform = $("input[name='CallType'][value='021']");
        var $regularNetwork = $("input[name='CallType'][value='001']");

        if (provider === 'cige') {
            $voicePlatform.prop('checked', false).prop('disabled', true);
            $regularNetwork.prop('checked', true).prop('disabled', false);
        } else {
            $voicePlatform.prop('disabled', false);
        }
    }

    $(document).ready(function() {
        $('#metaTable').DataTable({
            bLengthChange:false,
            pageLength:10,
            language: { search: "", searchPlaceholder:"Search", background: "none"},
            "aoColumnDefs": [{ "bSortable": false, "aTargets": [0]}],
        });

        updateCigeSummary();
        syncCallTypeForProvider();
        $("input[name='provider']").on('change', syncCallTypeForProvider);
        $('#CalledTo, #targetCige').on('change', updateCigeSummary);
        $('#callSimulatortbl').on('click', 'tbody tr', function (e) {
            if ($(e.target).closest('a.cige-initiate-call').length) {
                return;
            }
            var row = $('#callSimulatortbl').DataTable().row(this).data();
            if (row && row.detail) {
                openCigeResultModal(row.detail);
            }
        });
        $('#callSimulatortbl').on('click', 'a.cige-initiate-call', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var row = $('#callSimulatortbl').DataTable().row($(this).closest('tr')).data();
            if (!row || !row.detail) {
                return;
            }
            var calledFrom = String(row.detail.calledFrom || '').replace(/\D/g, '');
            var calledTo = String(row.detail.calledTo || '').replace(/\D/g, '');
            $('#CalledFrom').val(calledFrom);
            if ($('#CalledTo option[value="' + calledTo + '"]').length) {
                $('#CalledTo').val(calledTo);
            } else {
                $('#CalledTo').val('');
            }
            updateCigeSummary();
            verifyFunction('TestCallFunction()');
        });
        $('#cigeResultClose').on('click', closeCigeResultModal);
        $('#cigeResultModal').on('click', function (e) {
            if (e.target === this) {
                closeCigeResultModal();
            }
        });
        $('#cigeCopyTestId').on('click', function () {
            var value = $('#cigeTestRunId').text();
            if (navigator.clipboard && value) {
                navigator.clipboard.writeText(value);
            }
        });
        $('#cigeDownloadPackage').on('click', function () {
            var url = $(this).data('url');
            if (url) {
                window.open(url, '_blank');
            }
        });
        $('#cigeRunAgain').on('click', function () {
            closeCigeResultModal();
            $('#CalledFrom').focus();
        });
        callSimulator();

        //handling the click event for submenu list
        jQuery('.call-simulator-item').on('click', function(e) {
            e.preventDefault();
            // Menu item selected styling
            jQuery(this)
                .closest('li')
                .addClass('menu-item-selected')
                .siblings()
                .removeClass('menu-item-selected');
            // Show the target content div and hide others
            const target = jQuery(this).data('target');
            jQuery('.content-section').hide(); // hide all
            jQuery(target).show();
            setTimeout(function() {
                jQuery(target).find('.dataTable').each(function() {
                    if ($.fn.DataTable.isDataTable(this)) {
                        $(this).DataTable().columns.adjust(); // no draw()
                    }
                });
            }, 150);
        });

        $("#callSimulatorMenu .nav-item:visible").first()
            .addClass("menu-item-selected")
            .find("a.call-simulator-item")
            .trigger("click");
    });

    function hidePopup()
    {
        $('#msg').text('');
        $('#msgPopup').css('display', 'none');
        $('#msg').removeClass('text-danger');
        $('#msg').removeClass('text-success');
        $('#myPWModal').css('display', 'none');
    }
    function hidePopupAndLoadTable()
    {
        $('#msg').text('');
        $('#msgPopup').css('display', 'none');
        $('#msg').removeClass('text-danger');
        $('#msg').removeClass('text-success');
        callSimulator();
    }

    $('#PWNoBTN').click(function() {
        $("#myPWModal").css('display','none');
    });
    function TestCallFunction()
    {
        var CalledFrom = $("#CalledFrom").val();
        var CalledTo = $("#CalledTo").val();
        var CallType = $("input[name='CallType']:checked").val();
        var Pass = $("#password").val();
        var filter = /^\d*(?:\.\d{1,2})?$/;
        if (filter.test(CalledTo))
        {
            if (CalledTo.length == 10)
            {
                $("#mobile-valid").removeClass("hidden");
                $("#folio-invalid").addClass("hidden");
            }
            else
            {
                alert('Please put 10  digit mobile number');
                $("#folio-invalid").removeClass("hidden");
                $("#mobile-valid").addClass("hidden");
                return false;
            }
        }
        else
        {
            alert('Not a valid number');
            $("#folio-invalid").removeClass("hidden");
            $("#mobile-valid").addClass("hidden");
            return false;
        }

        if(CalledFrom && CalledTo)
        {
            var urlLink = baseURL + "AddTestCallInCallingQueue";

            $('#PwYesBTN').val('Sending Admin call.....');
            $('#PwYesBTN').prop('disabled', true);
            $.ajax(
            {
                type : "POST",
                url : urlLink,
                data : {
                    called_from: CalledFrom,
                    called_to: CalledTo,
                    call_type: CallType,
                    provider: $("input[name='provider']:checked").val(),
                    pw: Pass
                },
                success : (response) =>
                {
                    $('#msgPopup').css('display', 'block');
                    $('#msg').text(response.header.msg);

                    if(response.header.code == 200)
                    {
                        $('#msg').addClass('text-success');
                        $("#myPWModal").css('display','none');
                        $("#password").val('');
                    }
                    else
                    {
                        $('#msg').addClass('text-danger');
                    }

                    $('#PwYesBTN').val('OK');
                    $('#PwYesBTN').prop('disabled', false);
                },
                error:(response) =>
                {
                    $('#PwYesBTN').val('OK');
                    $('#PwYesBTN').prop('disabled', false);
                    $('#msgPopup').css('display', 'block');
                    $('#msg').text('Facing some technical error, please try again');
                    $('#msg').addClass('text-danger');
                }
            });
        }
        else
        {
            alert("Called From & Called To Required");
        }
    }

    function verifyFunction(callFor)
    {
        // var table = $('#callSimulatortbl').DataTable();
        // table.clear().destroy();
        // var CallType = $(".CallType:checked").val();

        var CalledFrom = $("#CalledFrom").val();
        var CalledTo = $("#CalledTo").val();
        if (CalledTo === "" && CalledFrom === "") {
            $("#callFromError").text("Called From is required.");
            $("#callToError").text("Called To is required.");
            return false;
        } else if (CalledTo === "") {
            $("#callToError").text("Called To is required.");
            $("#callFromError").text("");
            return false;
        } else if (CalledFrom === "") {
            $("#callFromError").text("Called From is required.");
            $("#callToError").text("");
            return false;
        } else {
            $("#callToError").text("");
            $("#callFromError").text("");
        }

        //*********************************************************************
        var filter = /^[0-9]{10}$/;
        if (filter.test(CalledTo) && filter.test(CalledFrom))
        {
            if (CalledTo.length == 10 && CalledFrom.length == 10)
            {
                $("#mobile-valid").removeClass("hidden");
                $("#folio-invalid").addClass("hidden");
            }
            else
            {
                alert('Please put 10  digit mobile number');
                $("#folio-invalid").removeClass("hidden");
                $("#mobile-valid").addClass("hidden");
                return false;
            }
        }
        else
        {
            alert('Not a valid number');
            $("#folio-invalid").removeClass("hidden");
            $("#mobile-valid").addClass("hidden");
            return false;
        }
        //*********************************************************************

        // pwmodal.style.display = "block";
        var url = '/checkDeviceStatus';
        $('#TestCallBTN').val('Checking Device Status....');
        $('#TestCallBTN').prop('disabled', true);

        var deviceNumber = $('#CalledTo').val();
        var isCaptured = 1;
        $.ajax(
        {
            url:url,
            type: 'GET',
            data: {deviceNumber:deviceNumber, isCaptured:isCaptured},
            dataType:'JSON',
            success:(result) =>
            {
                if(result.header.code === 200)
                {
                    if(result.data.status != 4)
                    {
                        $('#msgPopup').css('display', 'block');
                        $('#msg').text('Please move device to test mode first');
                    }
                    else
                    {
                        $("#myPWModal").css('display','block');
                        $("#PwYesBTN").attr('onclick',callFor);
                        // loadDeviceReportTable();
                        //callSimulator();
                    }
                }
                else
                {
                    $('#msgPopup').css('display', 'block');
                    $('#msg').text(result.header.msg);
                }
                $('#TestCallBTN').val('Initiate Call');
                $('#TestCallBTN').prop('disabled', false);
            },
            error:(response) =>
            {
                $('#TestCallBTN').val('Initiate Call');
                $('#TestCallBTN').prop('disabled', false);
                $('#msgPopup').css('display', 'block');
                $('#msg').text('Facing some technical error, please try again');
            }
        })
    }

    //On date change load table
    $('#date-input').on('change', function() {
        var callSimulatortblObj = jQuery('#callSimulatortbl').DataTable();
        callSimulatortblObj.ajax.reload();
    });

    jQuery('.reload-business-table').on('click', function() {
        var callSimulatortblListTableObj = jQuery('#callSimulatortbl').DataTable();
        callSimulatortblListTableObj.ajax.reload();
    });

    //On search in datatable load table and get details on table
    var callSimulatorListTimer;
    jQuery("#callsimulatortbl_filter input[type='search']").on('search', function(evt) {
        var currSearchText = jQuery(this).val();
        if (currSearchText == "" || currSearchText == null) {
            var callSimulatorListTableObj = jQuery('#callSimulatortbl').DataTable();
            callSimulatorListTableObj.ajax.reload();
        }
    });

    jQuery("#callsimulatortbl_filter input[type='search']").on("keyup keypress", function(e) {
        if (callSimulatorListTimer) {
            clearTimeout(callSimulatorListTimer);
        }
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) {
            e.preventDefault();
            var callSimulatorListTableObj = jQuery('#callSimulatortbl').DataTable();
            callSimulatorListTableObj.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 != "") {
            callSimulatorListTimer = 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 callSimulatorListTableObj = jQuery('#callSimulatortbl').DataTable();
                callSimulatorListTableObj.ajax.reload();
            }, 1000);
        }
        if (keyCode === 8) {
            if (currSearchText == "" || currSearchText == null) {
                var callSimulatorListTableObj = jQuery('#callSimulatortbl').DataTable();
                callSimulatorListTableObj.ajax.reload();
            }
        }
    });

    $('#go_to_page').on('click', function() {
        var table = $('#callSimulatortbl').DataTable();
        let page = parseInt($('#jump_to_page_num').val());
        if (!page || page < 1) return;
        let totalPages = table.page.info().pages;
        if (page > totalPages) page = totalPages;
        table.page(page - 1).draw('page');

        $('#jump_to_page_num').val(''); // ✅ clear input
    });

    function openCigeResultModal(detail) {
        $('#cigeTestRunId').text(detail.testRunId || '-');
        $('#cigeLaunched').text(detail.launched || '-');
        $('#cigeCalledFrom').text(detail.calledFrom || '-');
        $('#cigeCaptureDevice').text(detail.captureDevice || '-');
        $('#cigeDestination').text(detail.destination || '-');
        $('#cigeTarget').text(detail.target || '-');
        $('#cigeRecordTime').text(detail.launched || '-');

        if (detail.screenshot) {
            $('#cigePreviewImage').attr('src', detail.screenshot).show();
            $('#cigePreviewEmpty').hide();
            $('#cigeShotStatus').text('Available').removeClass('cige-muted').addClass('cige-ok');
            $('#cigeShotActions').removeClass('cige-muted').empty()
                .append($('<a>', { href: detail.screenshot, target: '_blank', text: 'View' }))
                .append(' · ')
                .append($('<a>', { href: detail.screenshot, target: '_blank', download: '', text: 'Download' }));
            $('#cigeDownloadPackage').data('url', detail.screenshot);
        } else {
            $('#cigePreviewImage').hide().attr('src', '');
            $('#cigePreviewEmpty').show();
            $('#cigeShotStatus').text('Unavailable').removeClass('cige-ok').addClass('cige-muted');
            $('#cigeShotActions').text('View · Download').addClass('cige-muted');
            $('#cigeDownloadPackage').data('url', '');
        }

        $('#cigeResultModal').show();
        fetchCigeEvidence(detail);
    }

    function resetCigeBigQueryFields(launched) {
        $('.cige-bq').each(function () {
            if (this.id === 'cigeRecordTime') {
                $(this).text(launched || '-').removeClass('cige-muted cige-ok');
                return;
            }
            $(this).text('Unavailable').addClass('cige-muted').removeClass('cige-ok');
        });
        ['Sgi', 'Dgr', 'Cel', 'Sbc', 'Isen'].forEach(function (name) {
            var $actions = $('#cigeArt' + name + 'Actions');
            $('#cigeArt' + name + 'Status').text('Unavailable').addClass('cige-muted').removeClass('cige-ok');
            $actions.addClass('cige-muted').text($actions.data('label'));
        });
    }

    function setCigeBqField(field, value) {
        var $el = $('.cige-bq[data-field="' + field + '"]');
        if (!$el.length || value === null || value === undefined || value === '') {
            return;
        }
        $el.text(value).removeClass('cige-muted');
        var normalized = String(value).toUpperCase();
        if (normalized === 'ALLOW' || normalized === 'AVAILABLE') {
            $el.addClass('cige-ok');
        }
    }

    function setCigeArtifact(name, url) {
        var $status = $('#cigeArt' + name + 'Status');
        var $actions = $('#cigeArt' + name + 'Actions');
        if (!url) {
            $status.text('Unavailable').addClass('cige-muted').removeClass('cige-ok');
            $actions.addClass('cige-muted').text($actions.data('label'));
            return;
        }
        $status.text('Available').removeClass('cige-muted').addClass('cige-ok');
        $actions.removeClass('cige-muted').empty()
            .append($('<a>', { href: url, target: '_blank', text: 'View' }))
            .append(' · ')
            .append($('<a>', { href: url, target: '_blank', download: '', text: 'Download' }));
    }

    function applyCigeSourceFields(row) {
        if (!row || typeof row !== 'object') {
            return;
        }
        Object.keys(row).forEach(function (key) {
            setCigeBqField(key, row[key]);
        });
    }

    function fetchCigeEvidence(detail) {
        resetCigeBigQueryFields(detail.launched);
        if (!detail.calledFrom || detail.calledFrom === '-' || !detail.calledTo) {
            return;
        }
        $.ajax({
            url: baseURL + 'getCigeTestEvidence',
            type: 'GET',
            data: {
                called_from: detail.calledFrom,
                called_to: detail.calledTo
            },
            success: function (response) {
                var data = response.data || {};
                var celRows = Array.isArray(data.cel) ? data.cel : [];
                var cdrRows = Array.isArray(data.cdr) ? data.cdr : [];
                var cel = celRows[0] || {};
                var cdr = cdrRows[0] || {};

                applyCigeSourceFields(cel);
                applyCigeSourceFields(cdr);

                setCigeBqField('sgo_id', cel.sgo_id);
                setCigeBqField('session_id', cel.correlation_id);
                setCigeBqField('dgr_id', cel.correlation_id);
                setCigeBqField('isen_call_id', cel.call_id);
                setCigeBqField('production_sbc', cdr.call_id || cel.call_id);
                setCigeBqField('dgr_decision', cel.enforcement_action);
                setCigeBqField('recorded_decision', cel.enforcement_action);
                setCigeBqField('persisted_cel_record', celRows.length ? 'Available' : null);
                setCigeBqField('governance_reason', cel.primary_reason_tag || cel.primary_reason_code);
                setCigeBqField('evaluated_policy', cel.policy_version);
                setCigeBqField('policy_version', cel.policy_version);
                setCigeBqField('record_timestamp', cel.decision_ts || cel.ingress_ts || cdr.call_start);
                setCigeBqField('sgi_id', cdr.cdr_id);

                setCigeArtifact('Sgi', cdr.sgi_url || null);
                setCigeArtifact('Dgr', cel.dgr_url || null);
                setCigeArtifact('Cel', cel.cel_url || null);
                setCigeArtifact('Sbc', cdr.sbc_cdr_url || null);
                setCigeArtifact('Isen', cdr.isen_cdr_url || null);
            }
        });
    }

    function closeCigeResultModal() {
        $('#cigeResultModal').hide();
    }

    //Fetch datatable for call simulator tab
    function callSimulator() {
        if ($.fn.DataTable.isDataTable('#callSimulatortbl')) {
          $('#callSimulatortbl').DataTable().destroy();
        }

        var datatable = jQuery('#callSimulatortbl').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-note1"><span><a href="/add-number/"><em></em></a> No Result Found</span></div>',
                'sSearch': '',
                'sSearchPlaceholder': "Search"
            },
            "aoColumnDefs": [{
                "bSortable": true,
                "aTargets": [0]
            }, {
                "bSearchable": true,
                "aTargets": [0]
            }, {
                targets: [6],       // Screenshot column
                orderable: false,
                searchable: false
            }],
            "responsive": {
                "breakpoints": [{
                    name: 'desktop',
                    width: Infinity
                }, {
                    name: 'tablet',
                    width: 1024
                }, {
                    name: 'fablet',
                    width: 768
                }, {
                    name: 'phone',
                    width: 480
                }]
            },
            'ajax': function(data, callback, settings) {
                jQuery("#callsimulator_processing").show();
                var callSimulatortblObj = jQuery('#callSimulatortbl').DataTable();
                var params = callSimulatortblObj ? callSimulatortblObj.ajax.params() : '';
                var column_name = '';
                var sort_order = '';
                if (params.order && params.order.length > 0) {
                    if (params.order[0].column == 0) {
                        column_name = 'careerName';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 1) {
                        column_name = 'callFrom';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 2) {
                        column_name = 'callTo';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 3) {
                        column_name = 'callStatus';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 4) {
                        column_name = 'telephontCallTime';
                        sort_order = params.order[0].dir;
                    } else if (params.order[0].column == 5) {
                        column_name = 'cName';
                        sort_order = params.order[0].dir;
                    }
                }
                var postData = {
                    // pageSize: 50,
                    pageSize: 20,
                    pageNumber: (callSimulatortblObj.page.info().page + 1),
                    searchKeyword: (jQuery('#callSimulatortbl_search').val() || '').trim(),
                    called_from: (jQuery("#CalledFrom").val()) || '',
                    called_to: (jQuery("#CalledTo").val()) || '',
                    date: (jQuery("#date-input").val()) || '',
                    sortField: column_name,
                    sortDirection: sort_order
                };
                $('#callSimulatorSection').show();
                var statusMap = {
                        0 : 'Pending',
                        1 : 'Success',
                        2 : 'Busy',
                        3 : 'Failed',
                        4 : 'Failed'
                };

                jQuery.ajax({
                    url: baseURL + "getCigeTestCallReports",
                    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("#callsimulator_filter input[type='search']").prop("disabled", false);
                        jQuery("#callsimulator_processing").hide();
                        $("#loaderModal").hide();

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

                        if (totalRecords && totalRecords.length > 0) {
                            for (var i = 0; i < totalRecords.length; i++) {
                                var statusText = statusMap[totalRecords[i].status] ?? '-';
                                var shotUrl = totalRecords[i].screenshot_google_vision_url || '';
                                var calledFrom = totalRecords[i].called_from || '';
                                var calledTo = totalRecords[i].called_to || '';
                                var actionLink = (calledFrom && calledTo)
                                    ? '<a href="#" class="cige-initiate-call" title="Initiate Call">Initiate Call</a>'
                                    : '-';
                                var launched = totalRecords[i].telephony_call_time || '-';
                                var day = launched && launched !== '-' ? launched.substring(0, 10).replace(/-/g, '') : '';
                                tempDataTableArr.push({
                                    careerName: totalRecords[i].carrier_name || '-',
                                    callFrom: calledFrom || '-',
                                    callTo: calledTo || '-',
                                    callStatus: statusText,
                                    telephontCallTime: launched,
                                    cName: totalRecords[i].cname || '-',
                                    screenshot: actionLink,
                                    detail: {
                                        testRunId: day ? ('TEST-' + day + '-' + totalRecords[i].id) : String(totalRecords[i].id),
                                        launched: launched,
                                        calledFrom: calledFrom || '-',
                                        calledTo: calledTo,
                                        captureDevice: totalRecords[i].post_title || totalRecords[i].carrier_name || '-',
                                        destination: (totalRecords[i].carrier_name || '-') + ' · ' + (calledTo || '-'),
                                        target: $('#targetCige option:selected').text() || 'cige-isen 35.223.250.192',
                                        screenshot: shotUrl
                                    }
                                });
                            }

                            callback({
                                data: tempDataTableArr,
                                recordsTotal: response.recordsTotal,
                                recordsFiltered: response.recordsFiltered
                            });
                        } else {
                            jQuery("#callSimulatortbl tbody").html(`
                                <tr>
                                    <td colspan="16" style="text-align:center; padding:12px; font-weight:500; color:#666;">
                                        No Records Found.
                                    </td>
                                </tr>
                            `);
                            // jQuery('.dataTables_paginate').hide();
                            jQuery('#callSimulator_info').hide();
                            jQuery("#callsimulator_processing").hide();
                        }
                        jQuery("#callsimulator_processing").hide();
                    },
                    error: function(jqXhr, textStatus, errorThrown) {
                        // alert('Error fetching data: ' + (errorThrown || textStatus));
                    }
                });
            },
            'columns': [
                {
                    data: 'careerName'
                },
                {
                    data: 'callFrom'
                },
                {
                    data: 'callTo'
                },
                {
                    data: 'callStatus'
                },
                {
                    data: 'telephontCallTime'
                },
                {
                    data: 'cName'
                },
                {
                    data: 'screenshot'
                }
            ]
        });
    }

    //On doenload call simulator generate excel
    jQuery("#downloadCallSimulator").on('click',function() {
        var dateInput = jQuery('#date-input').val();
        var callFrom = jQuery('#CalledFrom').val();
        var calledTo = jQuery('#CalledTo').val();

        let url = baseURL + "downloadCigeTestData"
        + "?date_input=" + encodeURIComponent(dateInput);
        // + "&called_from=" + encodeURIComponent(callFrom)
        // + "&called_to=" + encodeURIComponent(calledTo);

        window.location.href = url; // THIS triggers download
    });
</script>
@endsection