@extends('layouts.app')
@section('content')
<style>
    #calling_frequency_time {
      width: 19%;
    }
    .maintenance-device-dropdown-control, .maintenance-device-dropdown-control-app {
        margin-bottom: -7px;
    }
    .maintenance-device-dropdown-control-cont,.maintenance-device-dropdown-control-cont-app{
        width: 64%;
    }
    #metaTable_filter input
    {
        border-radius: 35px!important;
        padding: 10px;
        outline:none;
        margin-top: -40px;
        margin-bottom: 11px;
        width: 100%;
    }
    .paginate_button
    {
        border: 2px solid #d7d7d7!important;
        color: #ebe7e7!important;
        font-weight: bold;
    }
    .paginate_button:hover
    {
        border: 2px solid #34548A!important;;
        background: #34548A!important;
        border-color: #34548A!important;
        color: #ebe7e7!important;
        font-weight: bold!important;
    }
    .paginate_button.disabled:hover
    {
        color: #ebe7e7!important;
        font-weight: bold!important;
    }
    .dataTables_paginate a.current
    {
        color: #ebe7e7!important;
        background: #34548A!important;
        border-color: #34548A!important;
    }
    .daily-calling-status-table-container
    {
        padding-right: 5%;
        padding-left: 5%;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover
    {
        color: #ebe7e7!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: #ebe7e7!important;
    }
    .dataTables_info
    {
        color: #34548A!important;
        font-size: 16px;
        font-weight: bold;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button
    {
        color: #86165a!important;
    }
    table.dataTable
    {
        border: none!important;
    }
    table.dataTable thead
    {
        background-color:#34548A!important;
        border: 0!important;
        padding: 5px!important;
        color: #ebe7e7!important;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    table.dataTable thead th
    {
        border: none!important;
    }
    table.dataTable tbody td
    {
        border: none!important;
    }
    table.dataTable tbody th, table.dataTable tbody td
    {
        padding: 16px 6px;
    }
    .vl {
        border-left: 6px solid #34548A;
        height: 558px;
        margin-left: 30px;
    }
    .popup_box
    {
        visibility:hidden;
        display:none;
        width:30%;
        background-color:#34548A;
        position:fixed;
        left:21%;
        top:8%;
        border-radius:10px;
        border:2px solid grey;
        box-shadow:0px 0px 10px 0px grey;
        font-family:helvetica;
        width: 55%;
        z-index: 999;
    }
    .popup_box .cancel_button
    {
        float:right;
        margin-top:4px;
        margin-bottom:4px;
        margin-right:5px;
        background-color:#34548A;
        border:none;
        color:white;
        padding:5px;
        border-radius:1000px;
        width:25px;
        border:1px solid #424242;
        box-shadow:0px 0px 10px 0px #34548A;
        cursor:pointer;
    }
    .popup_box #info_text
    {
        padding:10px;
        clear:both;
        background-color:white;
        color:#6E6E6E;
        overflow: scroll;
        height: 383px;
    }
    .popup_box .close_button
    {
        margin:0px;
        padding:0px;
        width:70px;
        height:30px;
        line-height:30px;
        font-size:16px;
        background-color:grey;
        color:white;
        border:none;
        margin-bottom:10px;
        border-radius:2px;
        cursor:pointer;
    }
    .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    /* Modal Content */
    .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 38%;
    }
    .popup-txt{
        color: #34548A;
    }
    .PWNoBTN{
        background-color: #fefefe;
        border-color: #34548A;
    }
    .user-name{
        color: #34548A!important;
        font-weight: bold;
        cursor: pointer;
    }
    .left-side-header{
        margin: auto;
        /* color: #34548A!important; */
    }
    .left-side-header-release{
        margin-bottom: 15px;
        /* color: #34548A!important; */
    }
    .left-side-button{
        margin: auto;
        float: left;
    }
    .user-info-header{
        float: left;
        font-size:x-large;
        color: black;
        font-weight: bold;
    }
    .td-value{
        color: black;
    }
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
    .metaTable_filter label{
        margin-top: -62px;
    }
    .metaTable_filter{
        margin-bottom: 3rem;
       
    }
    #metaTable_filter
    {
        margin-top: -20px;
    }
    div.tab
		{
			overflow: hidden;
			border: 1px solid #ccc;
			background-color: #34548a;
		}

		/* Style the buttons inside the tab */
		.tablinks
		{
			background-color: inherit;
			float: left;
			border: none;
			outline: none;
			cursor: pointer;
			padding: 14px 16px;
			transition: 0.3s;
			border-radius: 0;
			text-transform: uppercase;
		}

		/* Change background color of buttons on hover */
		div.tab button:hover
		{
			background-color: whitesmoke;
			color: #34548a;
		}

		/* Create an active/current tablink class */
		div.tab button.active
		{
			background-color: whitesmoke;
			color: #34548a;
		}

		/* Style the tab content */
		.tabcontent
		{
			display: none;
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-top: none;
		}
    #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;
    }

</style>
{{--  START Test Call section  --}}
@can('test call')
<div class="margin-top-bottom textlabel">
        <h2>Test Call</h2>
    </div>
    <div class="addnumber-success-popup">
        <div class="addnumber-error-message"></div>
        <div class="close-addno-error-button">
            <i class="fa fa-times"></i>
        </div>
    </div>
    <div class="margin-top-bottom textlabel">
        <label class="call-type-label" for="isYouVOXX">
            <input class="CallType" type="radio" id="isYouVOXX" name="CallType" value="1">Non Number Sentry
        </label>
        <label class="call-type-label" for="isNS">
            <input class="CallType" type="radio" id="isNS" name="CallType" value="2" checked>Number Sentry
        </label>
    </div>
    <div class="margin-top-bottom">
        <input type="text" id="CalledFrom" name="CalledFrom" placeholder = "Called From" >
        <input type="text" id="CalledTo" name="CalledTo" placeholder = "Called To">
    </div>
    <div class="margin-top-bottom">
        <input type="button" id="TestCallBTN" name="TestCallBTN" value = "Test Call" onclick="verifyFunction('TestCallFunction()')">
    </div>
    <!--div-- class="margin-top-bottom">
        <input type="button" id="connectTestCallBTN" name="connectTestCallBTN" value = "Connect Test Call" onclick="ConnectTestCallFunction()">
    </div-->
<br/>

<hr>
<br/>
@endcan
{{--  END Test Call section  --}}

{{--  START Test Device Management section  --}}
@can('test device management')
<div class="margin-top-bottom textlabel">
    <h2>Test Device Management</h2>
</div>
<div class="container column-container">
    <div class="col-one-half-left-content">
        <div class="margin-top-bottom">
            <h3>Count of Device(s) in Test Call mode: <span id="deviceTestCunt">0</span></h3>
            <!-- <h3>Do you want to move these devices to Active status?</h3> -->
            <input class="Stop-awesome" type="button" id="removeTestCallMode" name="removeTestCallMode" value = "Move To Active Status" onclick="removeTestCallMode()" style="padding: 0 20px;" >
            <div class="blink-me blink-text" id="removeTestCallModeProgress" style="padding: 0 20px; padding: 0px 20px; margin-bottom: 12px !important;">
                Loading ...
            </div>
            <br />
            <div class="test-call-device-list-cont">
                <table>
                    <thead>
                    <tr>
                        <th>
                            <label class="check-box-container">
                                <input id="select-all-devices-test" type="checkbox">
                                <span class="checkmark"></span>
                            </label>
                        </th>
                        <th>Device</th>
                        <th>Mobile No</th>
                        <th>Date Time</th>
                    </tr>
                    </thead>
                    <tbody class="test-call-device-list-tbody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="margin-top-bottom demo">
        <div class="test-call-device-dropdown-control-cont">
               <div class="test-call-dropdown-control control-group">
                    <select class="test-call-device-select demo-default" placeholder="Search for a Device">

                    </select>
                </div>
                <input class="Stop-awesome test-call-mode-btn" type="button" id="test-call-mode-device" name="test-call-mode-device" value="Move Device(s) to Test Call" onclick="moveDevicesToTestCall()" style="padding: 0 20px;">
            </div>
        </div>
    </div>
</div>
<br/>
    <hr>
    <br/>
@endcan
{{--  END Test Device Management section  --}}

{{--  START Test Device Details section  --}}
@can('test device details')
<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('downloadDeviceData')}}">
                @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>
        
        <h2 class="left-side-header" style="color:black;margin-right: 12%;">Test Device Details</h2>
            <table id="metaTable" class="stripe">
            <div class="row">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Device Name</th>
                        <th>Device Number</th>
                        <th>APK Version</th>
                        <th>Network Name</th>
                        <!-- <th>Network Type</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->app_version}}</td>
                            <td>{{$value->network_name}}</td>
                            <!-- <td></td> -->
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>     
    </div>  
</div>
<br/>
<hr>
<br/>
@endcan
{{--  END Test Device Details section  --}}

{{--  START Test Device Release Management section  --}}
@can('test device release management')
<div class="container">
<h2 class="left-side-header-release" style="color:black;margin-right: 2%;">Test Device Release Management</h2>
		@error('error')
			<div
				class="alert alert-danger alert-dismissible fade show"
				role="alert"
			>
				<strong>{{ $message }}</strong>
				<span type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></span>
			</div>
		@enderror

		@if(Session::has('success'))
			<div class="alert alert-info">
				{{Session::get('success')}}
			</div>
		@endif
		<div class="tab">
			<button class="tablinks {{($errors->any()) ? 'inactive': 'active'}}" onclick="openTab(event, 'viewData')">
				App Releases
			</button>
			<button class="tablinks {{($errors->any()) ? 'active': 'inactive'}}" onclick="openTab(event, 'addrelease')">
				Add New Release
			</button>
		</div>
        
		<div id="viewData" class="tabcontent daily-calling-status-table-container">
			<table id="metaTable1" class="stripe">
				<thead>
					<tr>
						<th>App Version</th>
						<th>Version Code</th>
						<th>Roll Back Version</th>
						<th>Roll Back Version Code</th>
						<th>Release Notes</th>
						<th>Status</th>
						<th>Release Date</th>
				</thead>
				<tbody class="">
					@foreach($deviceData as $value)
						<tr>
							<td>{{$value['app_version']}}</td>
							<td>{{$value['version_code']}}</td>
							<td>{{$value['rollback_app_version']}}</td>
							<td>{{$value['rollback_version_code']}}</td>
							<td>{{$value['release_notes']}}</td>
							<td>{{($value['status']) ? 'Active': 'Inactive'}}</td>
							<td>{{date("d F Y H:i:s", strtotime($value['created_at']))}}</td>
						</tr>
					@endforeach
				</tbody>
			</table>
		</div>
		<div id="addrelease" class="tabcontent">
			<div class="row">
				<div class="col-md-3">
					
				</div>
				<div class="col-md-8">
					<form
						method="POST"
						enctype="multipart/form-data"
						action='/addnewrelease'
					>
						@csrf
						<div class="form-group row">
							<div class="col-md-3">
								<label class="title"><b>Release Notes</b></label>
							</div>
							<div class="col-md-6">
								<textarea name="release_notes" placeholder="Release Notes" class="form-control"></textarea>
								@error('release_notes')
									<span class="text-danger">
										<b>{{$message}}</b>
									</span>
								@enderror
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-3">
								<label class="title"><b>Release APK</b></label>
							</div>
							<div class="col-md-6">
								<input type="file" name="release_apk" class="form-control">
								@error('release_apk')
									<span class="text-danger">
										<b>{{$message}}</b>
									</span>
								@enderror
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-3">
								<label class="title"><b>Rollback APK</b></label>
							</div>
							<div class="col-md-6">
								<input type="file" name="rollback_apk" class="form-control">
								@error('rollback_apk')
									<span class="text-danger">
										<b>{{$message}}</b>
									</span>
								@enderror
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-12">
								<button type="submit">Add New Release</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
<br/>
<hr>
<br/>
@endcan
{{--  END Test Device Release Management section  --}}

<!-- 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="hidePopup()">&times;</span>
        <p id="msg" style="font-size:22px" class=""></p>
        <div class="margin-top-bottom">
            <button onclick="hidePopup()">Ok</button>
        </div>
    </div>
</div>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script>
    function startAnimation(currEle, progressEle, progressEleText)
    {
        currEle.hide();
        progressEle.html(progressEleText);
        progressEle.show();
    }
    
    function hidePopup()
    {
        $('#msg').text('');
        $('#msgPopup').css('display', 'none');
        $('#msg').removeClass('text-danger');
        $('#msg').removeClass('text-success');
        $('#myPWModal').css('display', 'none');
    }

    function stopAnimation(currEle, progressEle){
        currEle.show();
        progressEle.hide();
    }

        $( document ).ready(function() {
        $("#select-all-devices").prop('checked', false);
        $("#select-all-devices-test").prop('checked', false);
        //GetMaintenanceModeDevices();
        GetTestCallModeDevices();
        $("#select-all-devices").on('click', function(){
            if($(this).is(':checked')){
                $(".select-device").each(function(){
                    $(this).prop('checked', true);
                });
            }else{
                $(".select-device").each(function(){
                    $(this).prop('checked', false);
                });
            }
        });

        $("#select-all-devices-test").on('click', function(){
            if($(this).is(':checked')){
                $(".select-device-test-call").each(function(){
                    $(this).prop('checked', true);
                });
            }else{
                $(".select-device-test-call").each(function(){
                    $(this).prop('checked', false);
                });
            }
        });
    });
    jQuery( document ).ready(function() {
        jQuery("#loaderModal").show();
        jQuery(".reboot-device-select").hide();
        jQuery("#reboot-device").hide();
        jQuery(".maintenance-device-dropdown-control-cont").hide();
        var ajaxApiUrl = baseURL + "GetAllDevices";
        jQuery.ajax({
            type : "GET",
            url : ajaxApiUrl,
            success: function(res) {
                if( res.success ){
                    if( res.data.all_devices.length > 0 ){
                        var all_device_names = res.data.all_devices;
                        allDevicesArr = res.data.all_devices;
                        var deviceNameOptions = "<option value=''></option>";
                        var deviceMaintenanceNameOptions = "";
                        for( var k=0;k<all_device_names.length;k++ ){
                            deviceNameOptions = deviceNameOptions + "<option value='"+all_device_names[k].mobile_number+"' data-dynamicreboot='"+all_device_names[k].dynamic_reboot+"'>"+all_device_names[k].device_name+"</option>";
                            if(parseInt(all_device_names[k].device_status) != 3){
                                deviceMaintenanceNameOptions = deviceMaintenanceNameOptions + "<option value='"+all_device_names[k].ID+"'>"+all_device_names[k].device_name+"</option>";
                            }
                        }
                    }
                    jQuery(".reboot-device-select").html('');
                    jQuery(".reboot-device-select").append(deviceNameOptions);
                    jQuery(".reboot-device-select").selectize({
                        onInitialize: function(){
                            var s = this;
                            this.revertSettings.$children.each( function(){
                                jQuery.extend(s.options[this.value], jQuery(this).data());
                            });
                        }
                    });
                    jQuery("#reboot-device").show();

                    jQuery(".maintenance-device-select").html('');
                    jQuery(".maintenance-device-select").append(deviceMaintenanceNameOptions);
                    jQuery(".maintenance-device-select").fSelect({
                        placeholder: 'Select some device(s)',
                        numDisplayed: 4,
                        overflowText: '{n} device(s) selected',
                        noResultsText: 'No device(s) found',
                        searchText: 'Search device(s)',
                        showSearch: true
                    });
                    jQuery(".maintenance-device-dropdown-control-cont").show();

                    jQuery(".test-call-device-select").html('');
                    jQuery(".test-call-device-select").append(deviceNameOptions);
                    jQuery(".test-call-device-select").selectize({
                        onInitialize: function(){
                            var s = this;
                            this.revertSettings.$children.each( function(){
                                jQuery.extend(s.options[this.value], jQuery(this).data());
                            });
                        }
                    });
                    jQuery("#reboot-device").show();

                    jQuery("#loaderModal").hide();
                }
                else {
                    jQuery(".reboot-device-select").html('');
                    jQuery(".reboot-device-select").append(deviceNameOptions);
                    jQuery(".reboot-device-select").selectize();
                    jQuery("#reboot-device").show();
                    jQuery("#loaderModal").hide();
                }
            },
            error: function( jqXHR,error, errorThrown ) {
                if( jqXHR.status && jqXHR.status == 400 ){
                    var res_json = JSON.parse(jqXHR.responseText);
                }
            }
        });
        //for get parent devices
        var ajaxApiUrl1 = baseURL + "GetAllParentDevices";
        jQuery.ajax({
            type : "GET",
            url : ajaxApiUrl1,
            success: function(res) {
                if( res.success ){
                    if( res.data.all_devices.length > 0 ){
                        var all_device_names = res.data.all_devices;
                        allDevicesArr = res.data.all_devices;
                        var deviceNameOptions = "<option value=''></option>";
                        var deviceMaintenanceNameOptions = "";
                        for( var k=0;k<all_device_names.length;k++ ){
                            deviceNameOptions = deviceNameOptions + "<option value='"+all_device_names[k].ID+"'>"+all_device_names[k].carrier_name+"</option>";
                        }
                    }


                    jQuery(".parent_carrier_name").html('');
                    jQuery(".parent_carrier_name").append(deviceNameOptions);
                    jQuery(".parent_carrier_name").selectize({
                        onInitialize: function(){
                            var s = this;
                            this.revertSettings.$children.each( function(){
                                jQuery.extend(s.options[this.value], jQuery(this).data());
                            });
                        }
                    });
                    jQuery("#reboot-device").show();

                    jQuery("#loaderModal").hide();
                }
                else {
                    jQuery(".reboot-device-select").html('');
                    jQuery(".reboot-device-select").append(deviceNameOptions);
                    jQuery(".reboot-device-select").selectize();
                    jQuery("#reboot-device").show();
                    jQuery("#loaderModal").hide();
                }
            },
            error: function( jqXHR,error, errorThrown ) {
                if( jqXHR.status && jqXHR.status == 400 ){
                    var res_json = JSON.parse(jqXHR.responseText);
                }
            }
        });

        $('#parent_carrier_button').click(function(){
            jQuery('#cancel-call-confirmation-modal').show();
        });
    });
    //var pwmodal = document.getElementById("myPWModal");
    function verifyFunction(callFor)
    {
        var CallType = $(".CallType:checked").val();

        if(CallType == 1)
        {
            $("#myPWModal").css('display','block');
            $("#PwYesBTN").attr('onclick',callFor);
            return true;
        }

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

        var deviceNumber = $('#CalledTo').val();

        $.ajax(
        {
            url:url,
            type: 'GET',
            data: {deviceNumber:deviceNumber},
            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);
                    }
                }
                else
                {
                    $('#msgPopup').css('display', 'block');
                    $('#msg').text(result.header.msg);
                }

                $('#TestCallBTN').val('Test Call');
                $('#TestCallBTN').prop('disabled', false);
            },
            error:(response) =>
            {
                $('#TestCallBTN').val('Test Call');
                $('#TestCallBTN').prop('disabled', false);
                $('#msgPopup').css('display', 'block');
                $('#msg').text('Facing some technical error, please try again');
            }
        })
    }
     // Get the <span> element that closes the modal
    //  var span1 = document.getElementsByClassName("close")[1];
    $('#PWNoBTN').click(function() {
        $("#myPWModal").css('display','none');
        // ^-- missing #
    });
    function StartStopCallFunction(val){
        //debugger;
        /*var Pass = $("#password").val();
        if(Pass == ''){
            alert('Please enter password');
            return false;
        }*/
        modal.style.display = "none";
        if(val !=''){
            $(':input[type="button"]').prop('disabled', true);
            var urlLink = baseURL + "StopTestCall";
            $.ajax({
                type : "POST",
                url : urlLink,
                data : {status:val},
                success : function(response) {
                    //pwmodal.style.display = "none";
                    alert(response.message);
                    $(':input[type="button"]').prop('disabled', false);
                    //$("#password").val('');
                },
                error: function(error){
                    $(':input[type="button"]').prop('disabled', false);
                }
            });
        }
    }
    var baseURL = "{{ URL::to('/') }}" + "/";
    function TestCallFunction()
    {
        //alert(baseURL);
        var CalledFrom = $("#CalledFrom").val();
        var CalledTo = $("#CalledTo").val();
        var Pass = $("#password").val();
        var CallType = $(".CallType:checked").val();

        var filter = /^\d*(?:\.\d{1,2})?$/;
        if (CallType == 1)
        {
            $("#mobile-valid").removeClass("hidden");
            $("#folio-invalid").addClass("hidden");
        }
        else
        {
            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";

            if(CallType == 1)
            {
                urlLink = baseURL + "TestCallForCallingAPI"
            }

            $('#PwYesBTN').val('Sending Admin call.....');
            $('#PwYesBTN').prop('disabled', true);
            $.ajax(
            {
                type : "POST",
                url : urlLink,
                data : {called_from:CalledFrom, called_to: CalledTo, 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 ConnectTestCallFunction() {
        $("#StartCallQueueBTN").prop('disabled', true);
        var urlLink = baseURL + "callForTesting"
        $.ajax({
            type : "GET",
            url : urlLink,
            data : '',
            success : function(response) {
                // $("#StartCallQueueBTN").prop('disabled', false);
            }
        });
        // $("#StartCallQueueBTN").prop('disabled', false);
    }
    function GetTestCallModeDevices(){
        startAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"), "Loading ...");
        var urlLink = baseURL + "GetTestCallModeDevices";
        $.ajax({
            type : "GET",
            url : urlLink,
            data : {},
            success : function(response) {
                let response_devices_arr = response.data.length ? response.data : [];
                $("#deviceTestCunt").text(response_devices_arr.length);
                let tbody_str = '';
                for(let i=0;i<response_devices_arr.length;i++){
                    tbody_str = tbody_str + '<tr>'
                        + '<td>'
                        + '<label class="check-box-container">'
                        + '<input class="select-device-test-call" type="checkbox" value="'+response_devices_arr[i].device_id+'" />'
                        + '<span class="checkmark"></span>'
                        + '</label>'
                        + '</td>'
                        + '<td>' + response_devices_arr[i].device_name + '</td>'
                        + '<td>' + response_devices_arr[i].mobile_number + '</td>'
                        + '<td>' + response_devices_arr[i].maintenance_date_time + '</td>';
                }
                $(".test-call-device-list-tbody").html(tbody_str);
                stopAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"));
            }
        });
    }
    function removeTestCallMode(){
        if($('.select-device-test-call').length <= 0){
            alert("No devices to move in active status");
            return;
        }
        let selected_devices = [];
        $('.select-device-test-call:checked').each(function() {
            selected_devices.push(this.value);
        });
        if(!selected_devices.length){
            alert("Please select at least one device to move in active status");
            return;
        }
        $(':input[type="button"]').prop('disabled', true);
        startAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"), "Wait ...");
        //console.log(selected_devices);return;
        var urlLink = baseURL + "UpdateTestCallModeDeviceToFree";
        $.ajax({
            type : "POST",
            url : urlLink,
            data : {selected_devices: selected_devices.join()},
            success : function(response) {
                alert(response.message);
                $(':input[type="button"]').prop('disabled', false);
                if(response.success){
                    $('.select-device-test-call:checked').each(function() {
                        $(this).closest('tr').remove();
                    });
                    stopAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"));
                    $("#select-all-devices-test").prop('checked', false);
                    /*$("#select-all-devices").prop('checked', false);
                    var current_device_count = parseInt($("#deviceCunt").text());
                    var updated_device_count = current_device_count - selected_devices.length;
                    $("#deviceCunt").text((updated_device_count > 0 ? updated_device_count : 0));
                    addUpdatedDevicesToAllDevices(selected_devices);*/
                }
            },
            error: function(error){
                $(':input[type="button"]').prop('disabled', false);
            }
        });
    }
    function GetAllParentDevices(){
        startAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"), "Loading ...");
        var urlLink = baseURL + "GetTestCallModeDevices";
        $.ajax({
            type : "GET",
            url : urlLink,
            data : {},
            success : function(response) {
                let response_devices_arr = response.data.length ? response.data : [];
                let tbody_str = '';
                for(let i=0;i<response_devices_arr.length;i++){
                    tbody_str = tbody_str + '<tr>'
                        + '<td>'
                        + '<label class="check-box-container">'
                        + '<input class="select-device-test-call" type="checkbox" value="'+response_devices_arr[i].device_id+'" />'
                        + '<span class="checkmark"></span>'
                        + '</label>'
                        + '</td>'
                        + '<td>' + response_devices_arr[i].device_name + '</td>'
                        + '<td>' + response_devices_arr[i].maintenance_date_time + '</td>';
                }
                $(".test-call-device-list-tbody").html(tbody_str);
                stopAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"));
            }
        });
    }
    function moveDevicesToTestCall(){
        var selectedDevices = $(".test-call-device-select").val();
        if(!selectedDevices){
            alert("Please select at least one device to move in test call status");
            return;
        }

        $(':input[type="button"]').prop('disabled', true);
        startAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"), "Wait ...");
        var urlLink = baseURL + "UpdateFreeDevicesToTestCall";
        $.ajax({
            type: "POST",
            url: urlLink,
            data: {selected_devices: selectedDevices},
            success: function(response) {
                alert(response.message);
                $(':input[type="button"]').prop('disabled', false);
                if(response.success){
                    //$('.maintenance-device-select :selected').remove();
                    //$('.maintenance-device-select').fSelect('reload');
                    stopAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"), "Wait ...");
                    GetTestCallModeDevices();
                }
            },
            error: function(error){
                $(':input[type="button"]').prop('disabled', false);
            }
        });
    }
    function DownloadDeviceData(){
        var urlLink = baseURL + "downloadDeviceData";
        $.ajax({
            type: "POST",
            url: urlLink,
            data: { },
            success: function(response) {
                // alert(response.message);
                // $(':input[type="button"]').prop('disabled', false);
                // if(response.success){
                //     //$('.maintenance-device-select :selected').remove();
                //     //$('.maintenance-device-select').fSelect('reload');
                //     stopAnimation($("#removeTestCallMode"), $("#removeTestCallModeProgress"), "Wait ...");
                //     GetTestCallModeDevices();
                // }
            },
            error: function(error){
                //$(':input[type="button"]').prop('disabled', false);
            }
        });
    }
    function GetMaintenanceModeDevices(){
        startAnimation($("#removeMaintanance"), $("#removeMaintananceProgress"), "Loading ...");
        var urlLink = baseURL + "GetMaintenanceModeDevices";
        $.ajax({
            type : "GET",
            url : urlLink,
            data : {},
            success : function(response) {
                let response_devices_arr = response.data.length ? response.data : [];
                $("#deviceCunt").text(response_devices_arr.length);
                let tbody_str = '';
                for(let i=0;i<response_devices_arr.length;i++){
                    tbody_str = tbody_str + '<tr>'
                                + '<td>'
                                + '<label class="check-box-container">'
                                + '<input class="select-device" type="checkbox" value="'+response_devices_arr[i].device_id+'" />'
                                + '<span class="checkmark"></span>'
                                + '</label>'
                                + '</td>'
                                + '<td>' + response_devices_arr[i].device_name + '</td>'
                                + '<td>' + response_devices_arr[i].maintenance_reason + '</td>'
                                + '<td>' + response_devices_arr[i].maintenance_date_time + '</td>';
                }
                $(".maintenance-device-list-tbody").html(tbody_str);
                stopAnimation($("#removeMaintanance"), $("#removeMaintananceProgress"));
            }
        });
    }
    
    function StartCallQueueFunction() {
        jQuery("#loaderModal").show();
        var urlLink = baseURL + "updateStopCallSettingsAPI/false"
        $.ajax({
            type : "GET",
            url : urlLink,
            data : '',
            success : function(response)
            {
                jQuery("#loaderModal").hide();
                checkCallingCountStatus();
                ConnectTestCallFunction();
                alert('Calling was started');
            },
            error:() =>
            {
                jQuery("#loaderModal").hide();
                alert('Facing some technical error');
            }
        });
    }
    function StopCallQueueFunction() {
        jQuery("#loaderModal").show();
        var urlLink = baseURL + "updateStopCallSettingsAPI/true"
        $.ajax({
            type : "GET",
            url : urlLink,
            data : '',
            success : function(response) {
                jQuery("#loaderModal").hide();
                alert('Calling was stoped');
                checkCallingCountStatus();
            }
        });
    }
    // jQuery(document).ready(() =>
	// 	{
	// 		let index = {{($errors->any())? 1 : 0}};
	// 		tabcontent = document.getElementsByClassName("tabcontent");
	// 		tabcontent[index].style.display = "block";
	// 		$('#metaTable').DataTable({
	// 			bLengthChange:false,
	// 			pageLength:20,
	// 			language: { search: "", searchPlaceholder:"Search", background: "none"},
	// 			"columnDefs": [
	//       			{ "bSearchable": false, "orderable":false, "targets": [ 5 ] }
	//     		]
	// 		});
	// 	})

	// 	function openTab(evt, cityName)
	// 	{
	// 		// Declare all variables
	// 		var i, tabcontent, tablinks;

	// 		// Get all elements with class="tabcontent" and hide them
	// 		tabcontent = document.getElementsByClassName("tabcontent");
	// 		for (i = 0; i < tabcontent.length; i++)
	// 		{
	// 			tabcontent[i].style.display = "none";
	// 		}

	// 		// Get all elements with class="tablinks" and remove the class "active"
	// 		tablinks = document.getElementsByClassName("tablinks");
	// 		for (i = 0; i < tablinks.length; i++)
	// 		{
	// 			tablinks[i].className = tablinks[i].className.replace(" active", "");
	// 		}

	// 		// Show the current tab, and add an "active" class to the button that opened the tab
	// 		document.getElementById(cityName).style.display = "block";
	// 		evt.currentTarget.className += " active";
	// 	}
</script>

@can('test device release management')
<script>

    jQuery(document).ready(() =>
    {
        let index = {{($errors->any())? 1 : 0}};
        tabcontent = document.getElementsByClassName("tabcontent");
        tabcontent[index].style.display = "block";
        $('#metaTable1').DataTable({
            bLengthChange:false,
            pageLength:20,
            language: { search: "", searchPlaceholder:"Search", background: "none"},
            "columnDefs": [
                { "bSearchable": false, "orderable":false, "targets": [ 5 ] }
            ]
        });
    })

    function openTab(evt, cityName)
    {
        // Declare all variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++)
        {
            tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++)
        {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>
@endcan

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

    </script>
@endsection