@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;  /* 🔥 aligns options with inputs */
}
    </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 simulator')
                <li class="nav-item dropdown menu-item-selected">
                    <a class="menu-item call-simulator-item" data-target="#callsimulator">
                        <span>Call Simulator</span>
                    </a>
                </li>
                @endcan
                @can('test device details simulator')
                <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 simulator')
    <div id="callsimulator" class="content-section">
        <div>
            <h1 style="margin-bottom: 2%;">Simulate Call</h1>
        </div>
        <div class="call-simulator-section">
            <div class="call-simulator-inner"> <!-- ADD THIS -->
            <div class="call-simulator-row">
                <div class="call-simulator-group">
                    <input type="text" name="CalledFrom" class="CalledFrom" id="CalledFrom" placeholder="Called From">
                    <span id="callFromError"></span>
                </div>
                <div class="call-simulator-group">
                    <input type="text" name="CalledTo" class="CalledTo" id="CalledTo" placeholder="Called To">
                    <span id="callToError"></span>
                </div>
                <input type="button" id="TestCallBTN" name="TestCallBTN" value = "Initiate Call" onclick="verifyFunction('TestCallFunction()')">
            </div>
            <div class="call-options-wrapper">

    <!-- Calling Platform -->
                <div class="call-option-row">
                    <span class="call-type-title">Calling Platform Selection</span>

                    <label>
                        <input type="radio" name="CallType" value="021" checked>
                        Voice Service Platform (021)
                    </label>

                    <label>
                        <input type="radio" name="CallType" value="001">
                        Regular Calling Network (001)
                    </label>
                </div>

                <!-- Provider -->
                <div class="call-option-row">
                    <span class="call-type-title">Provider</span>

                    <label>
                        <input type="radio" name="provider" value="inteliquent" checked>
                        Inteliquent
                    </label>

                    <label>
                        <input type="radio" name="provider" value="cige">
                        CIGE
                    </label>
                </div>
                </div>
            </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">
                </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>Screenshot</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 simulator')
    <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="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
            });
    });
    $(document).ready(function() {
        $('#metaTable').DataTable({
            bLengthChange:false,
            pageLength:10,
            language: { search: "", searchPlaceholder:"Search", background: "none"},
            "aoColumnDefs": [{ "bSortable": false, "aTargets": [0]}],
        });
        
        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');
                        $("#CalledFrom").val('');
                        $("#CalledTo").val('');
                        $("#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
    });

    //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 + "getSimulatorCallReports",
                    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] ?? '-';
                                // Screenshot anchor
                                var screenshotLink = '-';
                                if (totalRecords[i].screenshot_google_vision_url) {
                                    screenshotLink = `
                                        <a href="${totalRecords[i].screenshot_google_vision_url}"
                                        target="_blank"
                                        title="View Screenshot">
                                        Click Here
                                        </a>`;
                                }
                                tempDataTableArr.push({
                                    careerName: totalRecords[i].carrier_name || '-',
                                    callFrom: totalRecords[i].called_from || '-',
                                    callTo: totalRecords[i].called_to || '-',
                                    callStatus: statusText,
                                    telephontCallTime: totalRecords[i].telephony_call_time || '-',
                                    cName: totalRecords[i].cname || '-',
                                    screenshot: screenshotLink,
                                });
                            }

                            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 + "downloadCallSimulatorData"
        + "?date_input=" + encodeURIComponent(dateInput);
        // + "&called_from=" + encodeURIComponent(callFrom)
        // + "&called_to=" + encodeURIComponent(calledTo);

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