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

.status-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.status-item {
    font-weight: 600;
}

.status-item label {
    margin-right: 3px;
}

.status-item.pending {
    color: #f0ad4e;
}

.status-item.success {
    color: #28a745;
}

.status-item.failed {
    color: #dc3545;
}

.status-item.retries {
    color: #6f42c1;
}

.status-item.initiated {
    color: #007bff;
}

.select-date-btn:focus,
.select-date-btn:active {
    outline: none !important;
}
</style>
<div class="container" >
    <div class="margin-top-bottom textlabel">
        <h2>Test Call Status</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="all" class="type" name="type" value="all" checked> All
                        <input type="radio" id="calling" class="type" name="type" value="calling_queue"> Calling Queue
                        <input type="radio" id="warmup" class="type" name="type" value="warm_up_queue"> Warmup Queue
                        <input type="radio" id="dynamic_daily" class="type" name="type" value="dynamic_daily"> Dynamic Daily
                        <input type="radio" id="dynamic_gtad" class="type" name="type" value="dynamic_gtad"> Dynamic GTAD
                    </div>
                    <div>
                        <div class="radio-container">
                            <label class="select-date-lbl">Call Execution Status: &nbsp;</label>

                            <input type="radio" id="all_calls" class="call_execution_status"
                                name="call_execution_status" value="all"> All

                            <input type="radio" id="live_calls" class="call_execution_status"
                                name="call_execution_status" value="1" checked> Live Calls

                            <input type="radio" id="skipped_calls" class="call_execution_status"
                                name="call_execution_status" value="0"> Skipped Calls
                        </div>
                    </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 class="margin-top-bottom textlabel status-summary">
            <div class="status-item pending">
                <label>Pending:</label>
                <span id="total_pending">0</span>
            </div>

            <div class="status-item success">
                <label>Success:</label>
                <span id="total_success">0</span>
            </div>

            <div class="status-item failed">
                <label>Failed:</label>
                <span id="total_failed">0</span>
            </div>

            <div class="status-item retries">
                <label>Retries:</label>
                <span id="total_retries">0.00 % (0)</span>
            </div>

            <div class="status-item initiated">
                <label>Initiated:</label>
                <span id="total_initiated">0</span>
            </div>
        </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('CallingResultCarrierWiseNew') }}";
    var getRebootTypeUrl = "{{ route('getRebootTypes') }}";
    var getRetryTypeUrl = "{{ route('getRetryTypes') }}";

    var dataTableValues = {};
    var devices = [];
    /*************************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 = '';
        var tabledata = [];
        function getPSRICount()
        {
            $('#daily-calling-status-count-table').DataTable();
            var type = $('input[name="type"]:checked').val();
            var triggered_source = $('input[name="call_execution_status"]:checked').val();
            jQuery("#loaderModal").show();
            $.ajax({
                type:"GET",
                url : getPSRICountUrl,
                dataType:'json',
                data: {
                    "date": srchDate,
                    "type": type,
                    "triggered_source": triggered_source
                },
                success: function(res)
                {
                    jQuery("#loaderModal").hide();
                    if(res.success)
                    {
                        $('#total_pending').text(res.data.pending);
                        $('#total_success').text(res.data.successResult);
                        $('#total_failed').text(res.data.failed);
                        $('#total_retries').text(res.data.retryPercent);
                        $('#total_initiated').text(res.data.initiated);
                    }
                    getDailyCallingData();
                },
                error: function(res)
                {
                    getDailyCallingData();
                },
            });
        }

        function getDailyCallingData() {
            // jQuery("#loaderModal").show();
            type = $('input[name="type"]:checked').val();
            var triggered_source = $('input[name="call_execution_status"]:checked').val();
            $.ajax({
                type:"GET",
                url : getCallingResultCarrierWiseUrl,
                dataType:'json',
                data: {
                    "date": srchDate,
                    "type": type,
                    "triggered_source": triggered_source
                },
                success: function(res)
                {
                    if(res.code == 200)
                    {
                        dataTableValues = res.data;
                        loaddatatable();
                        jQuery('#daily-calling-status-count-table_processing').css('display','none');
                        $('#high_pending').text(res.highlow.pending.high);
                        $('#low_pending').text(res.highlow.pending.low);
                        deviceRebootCount(srchDate);
                    }
                    return false;
                    //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;

                            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(load = 1)
        {
            let data = [];

            Object.keys(dataTableValues).forEach((resp) =>
            {
                data.push(dataTableValues[resp]);
                devices.push(resp);
            });

            jQuery('.dataTables_filter input').attr('placeholder','Search');
            $('#daily-calling-status-count-table').DataTable(
            {
                data:data,
                "bDestroy": true,
                columns: [
                        { data: 'post_title' },
                        { data: 'mobile_number' },
                        { 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();
            getPSRICount();
        });

        getPSRICount();

        function deviceRebootCount(date)
        {
            let url = "{{ route('devicerebootcount') }}";
            $.ajax(
            {
                url:url,
                method:'GET',
                data:{date: date},
                dataType:'json',
                async:true,
                success:(response) =>
                {
                    if(response.code === 200)
                    {
                        Object.keys(dataTableValues).forEach((resp) =>
                        {
                            if(response.data[resp] !== undefined)
                            {
                                // dataTableValues[resp].rebootRequestsResult = response.data[resp];
                                dataTableValues[resp].rebootRequestsResult = '<a href="javascript:void(0);" class="show_all_reboot_type" data-device_number="'+ resp +'">'+response.data[resp]+'</a>';
                            }
                            else
                            {
                                dataTableValues[resp].rebootRequestsResult = 0;
                                response.highlow.reboot.low = 0;
                            }
                        })

                        $('#high_reboots').text(response.highlow.reboot.high);
                        $('#low_reboots').text(response.highlow.reboot.low);
                    }

                    loaddatatable();
                    SuccessCount(date);
                },
                error:(response) =>
                {
                    SuccessCount(date);
                    console.log('error', response)
                }
            })
        }

        function SuccessCount(date)
        {
            type = $('input[name="type"]:checked').val();
            var triggered_source = $('input[name="call_execution_status"]:checked').val();
            let url = "{{ route('successcount') }}";
            $.ajax(
            {
                url:url,
                method:'POST',
                data:{date: date,type: type, triggered_source: triggered_source},
                dataType:'json',
                async:true,
                success:(response) =>
                {
                    if(response.code === 200)
                    {
                        Object.keys(dataTableValues).forEach((resp) =>
                        {
                            if(response.data[resp] !== undefined)
                            {
                                dataTableValues[resp].successResult = response.data[resp];
                            }
                            else
                            {
                                response.highlow.success.low = 0;
                                dataTableValues[resp].successResult = 0;
                            }
                        })

                        $('#high_success').text(response.highlow.success.high);
                        $('#low_success').text(response.highlow.success.low);
                    }

                    loaddatatable();
                    deviceRetryCount(date);
                },
                error:(response) =>
                {
                    deviceRetryCount(date);
                    console.log('error', response)
                }
            })
        }

        function deviceRetryCount(date)
        {
            type = $('input[name="type"]:checked').val();
            var triggered_source = $('input[name="call_execution_status"]:checked').val();
            let url = "{{ route('deviceretrycount') }}";
            $.ajax(
            {
                url:url,
                method:'GET',
                data:{date: date,type: type, triggered_source: triggered_source},
                dataType:'json',
                async:true,
                success:(response) =>
                {
                    if(response.code === 200)
                    {
                        Object.keys(dataTableValues).forEach((resp) =>
                        {
                            if(response.data[resp] !== undefined)
                            {
                               // dataTableValues[resp].retryResult = response.data[resp];
                               dataTableValues[resp].retryResult = '<a href="javascript:void(0);" class="show_all_retry_type" data-device_number="'+ resp +'">'+response.data[resp]+'</a>';
                            }
                            else
                            {
                                dataTableValues[resp].retryResult = 0;
                                response.highlow.retry.low = 0;
                            }
                        })

                        $('#high_retries').text(response.highlow.retry.high);
                        $('#low_retries').text(response.highlow.retry.low);
                    }

                    loaddatatable();
                    deviceLabelledCount(date);
                },
                error:(response) =>
                {
                    deviceLabelledCount(date);
                    console.log('error', response)
                }
            })
        }

        function deviceLabelledCount(date)
        {
            type = $('input[name="type"]:checked').val();
            var triggered_source = $('input[name="call_execution_status"]:checked').val();
            let url = "{{ route('devicelabelledcount') }}";
            $.ajax(
            {
                url:url,
                method:'GET',
                data:{date: date,type: type, triggered_source: triggered_source},
                dataType:'json',
                async:true,
                success:(response) =>
                {
                    if(response.code === 200)
                    {
                        Object.keys(dataTableValues).forEach((resp) =>
                        {
                            if(response.data[resp] !== undefined)
                            {
                                dataTableValues[resp].labeledBlockedResult = response.data[resp];
                            }
                            else
                            {
                                dataTableValues[resp].labeledBlockedResult = 0;
                                response.highlow.labelled.low = 0;
                            }
                        })

                        $('#high_lb').text(response.highlow.labelled.high);
                        $('#low_lb').text(response.highlow.labelled.low);
                    }

                    loaddatatable();
                    deviceNoCnameCount(date);
                },
                error:(response) =>
                {
                    deviceNoCnameCount(date);
                    console.log('error', response)
                }
            })
        }

        function deviceNoCnameCount(date)
        {
            type = $('input[name="type"]:checked').val();
            var triggered_source = $('input[name="call_execution_status"]:checked').val();
            let url = "{{ route('devicenocnamecount') }}";
            $.ajax(
            {
                url:url,
                method:'GET',
                data:{date: date,type: type, triggered_source: triggered_source},
                dataType:'json',
                async:true,
                success:(response) =>
                {
                    if(response.code === 200)
                    {
                        Object.keys(dataTableValues).forEach((resp) =>
                        {
                            if(response.data[resp] !== undefined)
                            {
                                dataTableValues[resp].NoBusinessNamePresentedResult = response.data[resp];
                            }
                            else
                            {
                                dataTableValues[resp].NoBusinessNamePresentedResult = 0;
                                response.highlow.nocname.low = 0;
                            }
                        })

                        $('#high_nocname').text(response.highlow.nocname.high);
                        $('#low_nocname').text(response.highlow.nocname.low);
                    }

                    loaddatatable();
                },
                error:(response) =>
                {
                    console.log('error', response)
                }
            })
        }

        $(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();
                },
            });

        });


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

        $(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 triggered_source = $('input[name="call_execution_status"]: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,
                    "triggered_source": triggered_source
                },
                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();
                },
            });

        });

    });

    /**********************************************************/
</script>
@endsection