@extends('layouts.app')

@section('content')
<style>
#daily-calling-status-count-table_processing {
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    margin: 280px 0px 0px 0px;
}
.radio-container {
    box-sizing: border-box;
    font-family: ‘Open Sans’, sans-serif;
    font-size: 13px;
    line-height: 30px;
    margin: 0;
        outline: 0;
    overflow: hidden;
    padding: 0;
}
.radio-container input {
    box-sizing: border-box;
    margin: 0;
    outline: 0;
    padding: 0;
    position: relative;
    top: 9px;
    vertical-align: top;
}
.daily-calling-status-table-container table tbody {
    max-height: 400px;
    height: auto;
}
</style>
<div class="container" >
    <div class="margin-top-bottom textlabel">
        <h2>Test Call Details</h2>
    </div>
    <div class="">
        <div class="calender-container">
            <form action="" id="filter_result_by_date" method="POST">
                @csrf
                <p>
                    <div class="radio-container">
                    <label class="select-date-lbl">Calling Type: &nbsp;</label>
                    <input type="radio" id="calling" class="type" name="type" value="calling_queue" checked> Calling Queue
                    <input type="radio" id="warmup" class="type" name="type" value="warm_up_queue"> Warmup Queue
                    </div>
                    <label class="select-date-lbl">Select Date: &nbsp;</label><input type="text" class="input-date datepicker" id="date-input" name="date-input" placeholder="yyyy/mm/dd" value={{$date_input}} autocomplete="off" />
                    <button class="select-date-btn">Submit</button>
                </p>
            </form>
        </div>
    </div>
    <div class="margin-top-bottom">
        <div class="container daily-calling-status-table-container new-daily-calling-pg">
                <table id="daily-calling-status-count-table">
                    <thead>
                        <tr>
                            <th class="search-field-th" colspan="2"></th>
                            <th class="textlabel reboots-head-count">High:  <span id="high_reboots">0</span><br>Low: <span id="low_reboots">0</span></th>
                            <th class="textlabel pending-head-count">High: <span id="high_pending">0</span><br>Low: <span id="low_pending">0</span></th>
                            <th class="textlabel success-head-count">High: <span id="high_success">0</span><br>Low: <span id="low_success">0</span></th>
                            <th class="textlabel retries-head-count">High: <span id="high_retries">0</span><br>Low: <span id="low_retries">0</span></th>
                            <th class="textlabel label-block-head-count">High: <span id="high_lb">0</span><br>Low: <span id="low_lb">0</span></th>
                            <th class="textlabel no-cname-head-count">High: <span id="high_nocname">0</span><br>Low: <span id="low_nocname">0</span></th>
                        </tr>
                        <tr>
                            <th>Device Name</th>
                            <th>Device #</th>
                            <th>Carrier Name</th>
                            <th>Reboots</th>
                            <th>Pending</th>
                            <th>Success</th>
                            <th>Retries</th>
                            <th>Labels & Blocks</th>
                            <th>No CNAME</th>
                        </tr>
                    </thead>
                </table>
        </div>
    </div>
</div>
<div id="loaderModal" class="modal">
    <img class="loader-img" src="../images/ajax-spinner.gif">
    <span class="loader-text">Please wait ...</span>
</div>

<div id="show_device_reboot_type" class="modal" style="display:none">
    <div class="modal-content">
        <span class="close close-popup">&times;</span>
        <div class="modal-body" id="reboot_type_data"></div>
        <div class="row">
            <div class="margin-top-bottom col">
                <button class="close-popup">Close</button>
            </div>
        </div>
   </div>
</div>

<div id="daily-calling-status-count-table_processing" class="dataTables_processing" style="display: block;">Loading...</div>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script>
    var getPSRICountUrl = "{{ route('CallingTotalCounts') }}";
    var getCallingResultCarrierWiseUrl = "{{ route('CallingResultCarrierWise') }}";
    var getRebootTypeUrl = "{{ route('getRebootTypes') }}";
    var getRetryTypeUrl = "{{ route('getRetryTypes') }}";
    /*************************added by 1206 *******************/
    $( 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
            });
        $( ".datepicker" ).val('{{$date_input}}');
    });

    $(document).ready( function ()
    {
        var srchDate = $('#date-input').val();
        var type = $('input[name="type"]:checked').val();
        var tabledata = [];
        function getPSRICount()
        {
            jQuery("#loaderModal").show();
            $.ajax({
                type:"GET",
                url : getPSRICountUrl,
                dataType:'json',
                data: {
                    "date": srchDate,
                    "type": type
                },
                success: function(res)
                {
                    jQuery("#loaderModal").hide();
                    if(res.success)
                    {
                        $('#total_pending').text(res.data.pending);
                        $('#total_success').text(res.data.successResult);
                        $('#total_retries').text(res.data.retryPercent);
                        $('#total_initiated').text(res.data.initiated);
                    }
                    getDailyCallingData();
                },
                error: function(res)
                {
                    getDailyCallingData();
                },
            });
        }

        function getDailyCallingData() {
            // jQuery("#loaderModal").show();
            $.ajax({
                type:"GET",
                url : getCallingResultCarrierWiseUrl,
                dataType:'json',
                data: {
                    "date": srchDate,
                    "type": type
                },
                success: function(res){
                    //var DailyCallingDataTableArr = [];
                    jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css('display','inline-block');
                    jQuery(".dataTables_filter .contact-no-loader").css('display','none');
                    jQuery("#daily-calling-status-count-table_filter input[type='search']").prop("disabled", false);
                    jQuery(".dataTables_filter input[type='search']").focus();
                    if(res.success ){
                        console.log('testing123');
                        if(res.data.high) {
                            var high_data = res.data.high;
                            var stalled10_count = res.data.stalled10_count;
                            $('#high_reboots').text(high_data.reboots);
                            $('#high_pending').text(high_data.pending);
                            $('#high_success').text(high_data.success);
                            $('#high_retries').text(high_data.retries);
                            $('#high_lb').text(high_data.lb);
                            $('#high_nocname').text(high_data.nocname);
                        }
                        if(res.data.low) {
                            var low_data = res.data.low;
                            $('#low_reboots').text(low_data.reboots);
                            $('#low_pending').text(low_data.pending);
                            $('#low_success').text(low_data.success);
                            $('#low_retries').text(low_data.retries);
                            $('#low_lb').text(low_data.lb);
                            $('#low_nocname').text(low_data.nocname);
                        }

                        if( res.data.all_counts){
                            var carrierWiseResult = res.data.all_counts;
                            for(i = 0; i < carrierWiseResult.length; i++) {
                                if(carrierWiseResult[i].rebootRequestsResult > 0) {
                                    carrierWiseResult[i].rebootRequestsResult = '<a href="javascript:void(0);" class="show_all_reboot_type" data-device_number="'+ carrierWiseResult[i].mobile_number +'">'+carrierWiseResult[i].rebootRequestsResult+'</a>';
                                }
                                if(carrierWiseResult[i].retryResult > 0) {
                                    carrierWiseResult[i].retryResult = '<a href="javascript:void(0);" class="show_all_retry_type" data-device_number="'+ carrierWiseResult[i].mobile_number +'">'+carrierWiseResult[i].retryResult+'</a>';
                                }
                            }
                            jQuery("#labeled-details-page-table_paginate").show();
                            jQuery("#labeled-details-page-table_info").show();

                        }else{
                            jQuery('#daily-calling-status-count-table tbody').html("<tr><td>No matching records found.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
                            jQuery('#daily-calling-status-count-table_paginate').hide();
                            jQuery('#daily-calling-status-count-table_info').hide();
                            jQuery('#daily-calling-status-count-table').css('width', '100%');
                        }

                        jQuery("#loaderModal").hide();
                        loaddatatable(carrierWiseResult);
                        jQuery('#daily-calling-status-count-table_processing').css('display','none');
                        jQuery('.dataTables_filter input').attr('placeholder','Search');
                    }
                    else if(res.success == false)
                    {
                        getDailyCallingData();
                    }
                },
                error: function( jqXhr, textStatus, errorThrown ){
                }
            });

        }
        function loaddatatable(tabledata){
            jQuery('.dataTables_filter input').attr('placeholder','Search');
            $('#daily-calling-status-count-table').DataTable(
            {
                data:tabledata,
                "bDestroy": true,
                columns: [
                        { data: 'post_title' },
                        { data: 'mobile_number' }, //or { data: 'MONTH', title: 'Month' }`
                        { data: 'website_carrier_name' },
                        { data: 'rebootRequestsResult' },
                        { data: 'pendingResult' },
                        { data: 'successResult' },
                        { data: 'retryResult' },
                        { data: 'labeledBlockedResult' },
                        { data: 'NoBusinessNamePresentedResult' },
                    ],
                "bLengthChange": false,
                "bFilter": true,
                "bInfo": true,
                "bAutoWidth": false,
                "responsive": {
                    "breakpoints": [
                        { name: 'desktop', width: Infinity },
                        { name: 'tablet',  width: 1024 },
                        { name: 'fablet',  width: 768 },
                        { name: 'phone',   width: 480 }
                    ]
                },
                "pagingType": "full_numbers",
                "pageLength": 100,
                "language": { "search": "" },
                "order": [[ 4, "desc" ]],
                "aoColumnDefs": [{ "bSortable": false, "aTargets": []}, { "bSearchable": false, "aTargets": [3,4,5,6,7,8]}],
            });
        }
            jQuery('.dataTables_filter input').attr('placeholder','Search');
            jQuery('.dataTables_filter input').attr('autocomplete','off');
            jQuery(".dataTables_filter input").wrap("<form>");
            jQuery(".dataTables_filter input").closest("form").attr("autocomplete","off");
            jQuery('#daily-calling-status-count-table_wrapper > table').wrap('<div class="table-responsive"></div>');


        $('#filter_result_by_date').on('submit', function (e)
        {
            e.preventDefault();
            jQuery('#daily-calling-status-count-table_processing').css('display','block');
            srchDate = $('#date-input').val();
            type = $('input[name="type"]:checked').val();
            getDailyCallingData();
        });

        // getPSRICount();
        loaddatatable(tabledata);
        getDailyCallingData();


        $(document).on('click', '.show_all_reboot_type', function (e) {
            e.preventDefault();
            var selectedDate = $('#date-input').val();
            var get_type = $('input[name="type"]:checked').val();
            var device_number = $(this).data('device_number');
            console.log(device_number);
            jQuery("#loaderModal").show();
            
            $.ajax({
                type:"GET",
                url : getRebootTypeUrl,
                dataType:'json',
                data: {
                    "date": selectedDate,
                    "type": get_type,
                    "device_number": device_number
                },
                success: function(res) {
                    jQuery("#loaderModal").hide();
                    if(res.success) {
                        $('#reboot_type_data').html(res.reboot_html);
                        $("#show_device_reboot_type").fadeToggle();
                        $("#show_device_reboot_type").css({"visibility":"visible","display":"block"});
                    }
                },
                error: function(res) {
                    jQuery("#loaderModal").hide();
                },
            });

        });

        $(document).on('click', '.show_all_retry_type', function (e) {
            e.preventDefault();
            var selectedDate = $('#date-input').val();
            var get_type = $('input[name="type"]:checked').val();
            var device_number = $(this).data('device_number');
            console.log(device_number);
            jQuery("#loaderModal").show();
            
            $.ajax({
                type:"GET",
                url : getRetryTypeUrl,
                dataType:'json',
                data: {
                    "date": selectedDate,
                    "device_number": device_number,
                    "type":get_type
                },
                success: function(res) {
                    console.log(res);
                    jQuery("#loaderModal").hide();
                    if(res.success) {
                        $('#reboot_type_data').html(res.retry_html);
                        $("#show_device_reboot_type").fadeToggle();
                        $("#show_device_reboot_type").css({"visibility":"visible","display":"block"});
                    }
                },
                error: function(res) {
                    jQuery("#loaderModal").hide();
                },
            });

        });

        $('.close-popup').on('click', function (e) {
            $("#show_device_reboot_type").fadeToggle();
            $("#show_device_reboot_type").css({"visibility":"hidden","display":"none"});
        });

    });
    /**********************************************************/
</script>
@endsection