@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="/css/traffic-monitor.css?k5m8o4f">
<style>
    
    .common-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        border-radius: 5px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        border: 1px solid #e2e2e2;
        text-align: center;
        background-color: #f8f8f8;
        box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
        z-index: 999;
        -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
    }

    .permissions-table {
        margin-top: 20px;
    }

    .pop-up-heading {
        text-align: left;
        text-transform: uppercase;
        font-size: 17px;
    }

    .close {
        color: #aaaaaa;
        font-size: 28px;
        font-weight: bold;
        text-align: right;
        margin: -50px -15px 0px 0px;
    }

    .close-btn {
        margin-top: 30px;
        margin-bottom: -10px;
    }
</style>

<div class="container" id="admin-console-traffic-monitor">
    @can('traffic monitor')
    <div class="margin-top-bottom">
        <div class="heading-box">
            <h4>Traffic Monitor</h4>
        </div>
        <div class="container traffic-monitor-page">
            <div class="day-section">
                <div class="row day-container inbound-outbound-section">
                    <button type="button" class="day-name active_slot" data-value="15_min">15 mins</button>
                    <button type="button" class="day-name" data-value="30_min">30 mins</button>
                    <button type="button" class="day-name" data-value="1_hr">1 hr</button>
                    <button type="button" class="day-name" data-value="3_hr">3 hrs</button>
                    <button type="button" class="day-name" data-value="6_hr">6 hrs</button>
                    <button type="button" class="day-name" data-value="12_hr">12 hrs</button>
                    <button type="button" class="day-name" data-value="today">Today</button>
                    <button type="button" class="day-name" data-value="yesterday">Yesterday</button>
                </div>
            </div>
        </div>
    </div>

    <div class="margin-top-bottom">
        <div class="traffic-filters">
            <select class="outbound-clients" name="outbound_clients[]" multiple>
                @foreach($clients as $key => $val)
                    <option value="{{ $key }}">{{ $val }}</option>
                @endforeach
            </select>

        </div>

        <div class="traffic-filters">
            <select class="outbound-dialer-ips" name="outbound-dialer_ips[]" multiple>
                @foreach($dialer_ip as $key => $val)
                    <option value="{{ $key }}">{{ $val ." ($key)" }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="brand-scan-box">
        <div class="header-row">
            <div>
                <center>
                    <h2 class="head-two">Outbound Calls</h2>
                </center>
            </div>
        </div>
        <center class="outbound-calls-section">
            <div class="donut-list gauge-section-container">
                <div class="donutcolumn1">
                    <div class="filters">
                        <center>
                            <span class="group-by-carriers">
                                <label style="color: #34548A;font-size: 18px; font-weight: 600;">Carriers &amp; Apps</label>
                            </span>
                        </center>
                    </div>
                    <div class="" style="font-size: 13px;">
                        <center>
                            <a class="select-all-carriers" href="javascript:void(0);" style="text-decoration: underline; color:#34548A;">Select All</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="clear-all-carriers" href="javascript:void(0);" style="text-decoration: underline; color:#34548A;">Clear</a>
                        </center>
                    </div>
                    <center>
                        <div class="scroll carriers-box">
                            <button class="accordion top-carriers">
                                <label class="containermain">Top Carriers
                                    <input type="checkbox" id="top-carriers" checked>
                                    <span class="checkmark"></span>
                                </label>
                            </button>
                            <div class="panel top-carriers child-carrier-container">
                                                        </div>
                            <button class="accordion cable-telephone">
                                <label class="containermain">Cable Telephone
                                    <input type="checkbox" id="cable-telephone">
                                    <span class="checkmark"></span>
                                </label>
                            </button>
    
                            <div class="panel cable-telephone child-carrier-container">
                                                        </div>
                            <button class="accordion others">
                                <label class="containermain">Others
                                    <input type="checkbox" id="others">
                                    <span class="checkmark"></span>
                                </label>
                            </button>
    
                            <div class="panel others child-carrier-container">
                                                        </div>
                            <div class="unidentified-carriers">
                                <label class="container">
                                <input type="checkbox" name="unidentified_carriers" id="unidentified_carriers" value="1" checked>Include Unidentified Carriers<span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                    </center>
                    <center>
                      <p style="margin-top:20px;">
                        <a class="common-link-button" href="javascript:void(0);" style="text-align:center;" id="apply_carriers_btn">APPLY</a>
                      </p>
                    </center>
                </div>
                <div class="donut-container">
                    <div class="total-outboundCall"  style='opacity: 0.5'>
                        <p class="outboundCall-count"></p>
                        <p class="outboundCall-text">Calls During the Selected Time Period</p>
                    </div>
                    <div class="donut-charts" style='opacity: 0.5'>
                        <!-- Donut1 Starts -->
                        <div class="donutcolumn2">
                            <div class="labeled" id="guage1">
                                <center>
                                    <div class="gauge-percent">
                                        <div class="gauge-percent-labels-block">
                                            <div class="gauge_label" style="left:34px; top:163px;">0%</div>
                                            <div class="gauge_label" style="left:5px; top:50px;">25%</div>
                                            <div class="gauge_label" style="left:108px; top:-10px;">50%</div>
                                            <div class="gauge_label" style="left:205px; top:55px;">75%</div>
                                            <div class="gauge_label" style="left:176px; top:165px;">100%</div>
                                        </div>
                                    </div>
                                    <div id="answers_gauge"></div>
                                </center>
                            </div>
                        </div>
                        <!-- Donut1 ends -->
                        <!-- Donut2 Starts -->
                        <div class="donutcolumn3">
                            <div class="brand-scan-chart-box">
                                <div class="donut-chart-box">
                                    <div class="donut-chart-inner-box">
                                        <div id="lbuc_donut" class="donut-size" style="margin-top: 10%;"></div>
                                        <div class="centerLabel1">Label &amp; Blocking</div>
                                        <div id="legend-tooltip" class="ggl-tooltip hidden">
                                            <div id="series-name"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Donut2 ends -->
                        <!-- Donut3 Starts -->
                        <div class="donutcolumn4">
                            <div class="brand-scan-chart-box">
                                <div class="donut-chart-box">
                                    <div class="donut-chart-inner-box">
                                        <div id="attestation_donut" class="donut-size" style="margin-top: 10%;margin-left: -10px;"></div>
                                        <div class="centerLabel2">Attestation</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Donut3 ends -->
                        <!-- Donut4 Starts -->
                        <div class="donutcolumn5">
                            <div class="brand-scan-chart-box">
                                <div class="donut-chart-box">
                                    <div class="donut-chart-inner-box">
                                        <div id="duration_donut" class="donut-size"></div>
                                        <div class="centerLabel3">Duration</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Donut4 ends -->
                    </div>
                </div>
                <div class="no-outbound-data" style='z-index: 0; opacity: 0.9'>
                    <h2 class="no-preview-available">No Outbound Calls in Selected Timeframe!</h2>
                </div>
            </div>
        </center>
    </div>
    @endcan

    <hr>

    <div class="inboundCalls">
        <div class="header-row">
            <div style="padding: 20px 0 0;">
                <center>
                    <h2 class="head-two">Inbound Calls</h2>
                </center>
    
            </div>
        </div>
        <center class="inbound-detail-section">
            <div class="inbound-list row">
                <!-- Donut1 Starts -->
                <div class="column1">
                    <div class="total-inboundCall">
                        <p class="inboundCall-count">0</p>
                        <p class="inboundCall-text">Calls During the Selected Time Period</p>
                    </div>
                </div>
                <!-- Donut1 ends -->
                <!-- Donut2 Starts -->
                <div class="column2">
                    <div class="brand-scan-chart-box">
                        <div class="donut-chart-box">
                            <div class="donut-chart-inbound-box">
                                <div id="donut-inbound" class="donut-size"></div>
                                <div class="centerLabel-inbound">Call Durations
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Donut2 ends -->
                <!-- google geo chart Starts -->
                <div class="column3">
                    <div class="brand-scan-chart-box">
                        <div class="donut-chart-box">
                            <div class="donut-chart-inbound-box">
                                <div id="geo-inbound" class="donut-size"></div>
                                <div class="centerLabel-inbound">Toll Free Numbers Count: <span class="tollfree_numbers_count">0</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- google geo chart Ends -->
            </div>
            <div class="no-inbound-data" style="z-index: 0; opacity: 0.9">
                <h2 class="no-preview-available">No Inbound Calls in Selected Timeframe!</h2>
            </div>
        </center>
    </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="daily-calling-status-count-table_processing" class="dataTables_processing" style="display: none;">Loading...</div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script>
    var attestation = null;
    var answers = null;
    var duration = null;
    var lbuc = null;
    var total_outbound_calls = ;
</script>
<script>
    
    var baseURL = "{{ URL::to('/') }}" + "/";
    var wp_cookie = '';

    jQuery(".outbound-clients").fSelect({
        placeholder: 'Select Client(s)',
        numDisplayed: 5,
        overflowText: '{n} Client(s) selected',
        noResultsText: 'No Client(s) found',
        searchText: 'Search Client(s)',
        showSearch: true
    });

    jQuery(".outbound-dialer-ips").fSelect({
        placeholder: 'Select Egress Trunk Group(s)',
        numDisplayed: 5,
        overflowText: '{n} Egress Trunk Group(s) selected',
        noResultsText: 'No Egress Trunk Group(s) found',
        searchText: 'Search Egress Trunk Group(s)',
        showSearch: true
    });

    document.getElementById('top-carriers').onclick = function () {
        var checkboxes = document.getElementsByName('top-carriers');
        jQuery('.top-carriers').find('.checkmark').removeClass('intermediate');
        for (var checkbox of checkboxes) {
            checkbox.checked = this.checked;
        }
    }
    document.getElementById('cable-telephone').onclick = function () {
        var checkboxes = document.getElementsByName('cable_telephone_carriers');
        jQuery('.cable-telephone').find('.checkmark').removeClass('intermediate');
        for (var checkbox of checkboxes) {
            checkbox.checked = this.checked;
        }
    }
    document.getElementById('others').onclick = function () {
        var checkboxes = document.getElementsByName('others_carriers');
        jQuery('.others').find('.checkmark').removeClass('intermediate');
        for (var checkbox of checkboxes) {
            checkbox.checked = this.checked;
        }
    }
    
    jQuery(document).on('click', '.carriers-chk', function(e) {
        var closestElem = jQuery(this).closest('.child-carrier-container');
        var closestPrev = closestElem.prev();
        var total_count = closestElem.find(".carriers-chk").length;
        var total_checked_count = closestElem.find(".carriers-chk:checkbox:checked").length;
        
        if(total_checked_count < total_count) {
            closestPrev.find('.checkmark').addClass('intermediate');
            closestPrev.find('input[type=checkbox]').prop('checked', true);
        }
        
        if(total_checked_count == total_count) {
            closestPrev.find('.checkmark').removeClass('intermediate');
            closestPrev.find('input[type=checkbox]').prop('checked', true);
        }
        
        if(total_checked_count == 0) {
            closestPrev.find('input[type=checkbox]').prop('checked', false);
        }
    });
    
    var acc = document.getElementsByClassName("accordion");
    var i;
    
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
    
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          let active = document.querySelectorAll(".carriers-box .accordion.active");
          for(let j = 0; j < active.length; j++){
            active[j].classList.remove("active");
            active[j].nextElementSibling.style.maxHeight = null;
          }
          this.classList.toggle("active");
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
        });
    }
    
    jQuery(document).click(function(e) {
        if(!jQuery(".carriers-box ").is(e.target) && !jQuery(".carriers-box ").has(e.target).length) {
            jQuery('.accordion').removeClass('active');
            jQuery('.carriers-box .panel').removeAttr('style');
        }
        if (!jQuery(e.target).closest('.mfp-content').length) {
            jQuery("body").css('overflow','auto');
        }
    });
    
    jQuery(".select-all-carriers, .clear-all-carriers").on('click', function () {
        jQuery('.top-carriers, .cable-telephone, .others').find('.checkmark').removeClass('intermediate');
        if(jQuery(this).hasClass('select-all-carriers')) {
            jQuery('.carriers-chk').prop('checked', true);
            jQuery('#top-carriers, #cable-telephone, #others, #unidentified_carriers').prop('checked', true);
            getOutboundCalls();
        }
        if(jQuery(this).hasClass('clear-all-carriers')) {
            jQuery('.carriers-chk').prop('checked', false);
            jQuery('#top-carriers, #cable-telephone, #others, #unidentified_carriers').prop('checked', false);
            getOutboundCalls();
        }
    });
    
    var loaderHtml = '<div class="loading_overlay"><div class="loading_overlay_inner"><img class="spinner-image" src="/wp-content/uploads/2023/04/number-sentry-spinner-blue.gif" alt=""><p>Please wait...</p></div></div>';
    
    jQuery(document).ready(function ()
    {	
        getInboundCalls();
        
    });
    
    // labeled blocked donut
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(lbucDrawDonutChart);
    var lbucColors = [
        { color: '#ed7d31' },
        { color: '#c00000' },
        { color: '#ffd966' },
        { color: '#00b050' },
    ];
    var lbucDonutData = lbuc;
    
    if(total_outbound_calls == 0) {
        lbucDonutData = [["All", "All Matches Result"], ["L", 1], ["B", 1], ["U", 1], ["C", 1]];
    }
    
    function lbucDrawDonutChart() {
        var lbucDonutChartData = google.visualization.arrayToDataTable(lbucDonutData);
    
        var options = {
            backgroundColor: 'transparent',
            width: 250,
            height: 300,
            title: '',
            legend: { position: 'bottom', alignment: 'center', maxLines: 2, pointShape: 'square'},
            bar: { groupWidth: '75%' },
            slices: lbucColors,
            pieHole: 0.3,
            pieSliceTextStyle: {
                color: '#000',
                fontSize: 12,
                bold: true
            }
        };
    
        // var view = new google.visualization.DataView(lbucDonutChartData);
    
        var chart = new google.visualization.PieChart(document.getElementById('lbuc_donut'));
        
        
        var legendTooltip = document.getElementById('legend-tooltip');
    
        // set legend tooltip position
        google.visualization.events.addListener(chart, 'ready', function (gglEvent) {
            var chartLayout = chart.getChartLayoutInterface();
            var legendBounds = chartLayout.getBoundingBox('legend');
            legendTooltip.style.top = (legendBounds.top + (legendBounds.height * 2)) + 'px';
            legendTooltip.style.left = legendBounds.left + 'px';
        });
    
        // show legend tooltip
        google.visualization.events.addListener(chart, 'onmouseover', function (gglEvent) {
            jQuery(legendTooltip).removeClass('hidden');
            if (gglEvent.row === 0) {
                jQuery('#series-name').html("Labeled");
            } else if(gglEvent.row === 1) {
                jQuery('#series-name').html("Blocked");
            } else if(gglEvent.row === 2) {
                jQuery('#series-name').html("Unknown");
            } else if(gglEvent.row === 3) {
                jQuery('#series-name').html("Clean Numbers");
            }
        });
    
        // hide legend tooltip
        google.visualization.events.addListener(chart, 'onmouseout', function (gglEvent) {
            jQuery(legendTooltip).addClass('hidden');
        });
        
        chart.draw(lbucDonutChartData, options);
    }
    
    // Attestation donut chart --------------------------
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(attestationDrawDonutChart);
    var attestationColors = [
        { color: '#00b050' },
        { color: '#ffff00' },
        { color: '#ed7d31' },
    ];
    var attestationDonutData = attestation;
    if(total_outbound_calls == 0) {
        attestationDonutData = [["All", "All Matches Result"], ["A", 1], ["B", 1], ["C", 1]];
    }
    function attestationDrawDonutChart() {
        var attestationChartData = google.visualization.arrayToDataTable(attestationDonutData);
    
        var options = {
            backgroundColor: 'transparent',
            width: 250,
            height: 300,
            title: '',
            legend: { position: 'bottom', alignment: 'center', maxLines: 3, pointShape: 'square' },
            slices: attestationColors,
            pieHole: 0.3,
            //pieSliceText: 'none',
            pieSliceTextStyle: {
                color: '#000',
                fontSize: 12,
                bold: true
            }
        };
    
        var view = new google.visualization.DataView(attestationChartData);
    
        var chart = new google.visualization.PieChart(document.getElementById('attestation_donut'));
        chart.draw(view, options);
    }
    
    // Duration donut chart --------------------------
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(durationDrawDonutChart);
    var durationColors = [
        { color: '#c00000' },
        { color: '#ed7d31' },
        { color: '#ffff00' },
        { color: '#ffd966' },
        { color: '#00b050' },
    ];
    var durationDonutData = duration;
    if(total_outbound_calls == 0) {
        durationDonutData = [["All", "All Matches Result"], ["1 to 12 Sec", 1], ["13 to 30 Sec", 1], ["31 to 48 Sec", 1], ["49 to 90 Sec", 1], ["more than 90 Sec", 1]];
    }
    function durationDrawDonutChart() {
        var durationDonutChartData = google.visualization.arrayToDataTable(durationDonutData);
    
        var options = {
            backgroundColor: 'transparent',
            width: 400,
            height: 300,
            title: '',
            legend: { position: 'right', alignment: 'center', maxLines: 1, pointShape: 'square' },
            slices: durationColors,
            pieHole: 0.3,
            //pieSliceText: 'none',
            pieSliceTextStyle: {
                color: '#000',
                fontSize: 12,
                bold: true
            }
        };
    
        var view = new google.visualization.DataView(durationDonutChartData);
        var chart = new google.visualization.PieChart(document.getElementById('duration_donut'));
        chart.draw(view, options);
    }
    
    // Start: gauge code here
    var all_count = answers.total_calls;
    var answersGauge =
        [
            ['Label', 'Value'],
            ['Answers', answers.answers],
        ];
    if(total_outbound_calls == 0) {
        all_count = 1;
        answersGauge = [['Label', 'Value'],['Answers', 1]];
    }
    var answersOptions = {
        backgroundColor: 'transparent',
        width: 200,
        height: 300,
        redFrom: 0,
        redTo: (all_count * 2) / 100,
        yellowFrom: (all_count * 2) / 100,
        yellowTo: (all_count * 10) / 100,
        greenFrom: (all_count * 10) / 100,
        greenTo: all_count,
        minorTicks: 5,
        max: all_count
    };
    google.charts.load('current', { 'packages': ['gauge'] });
    google.charts.setOnLoadCallback(answersGaugeDrawChart);
    
    function answersGaugeDrawChart() {
        var data = google.visualization.arrayToDataTable(answersGauge);
        var chart = new google.visualization.Gauge(document.getElementById('answers_gauge'));
        chart.draw(data, answersOptions);
    }
    // End: gauge code here
    
    // donut-inbound --------------------------
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(drawInboundDurationDonutChart);
    var inboundDurationColors = [
        { color: '#c00000' },
        { color: '#ed7d31' },
        { color: '#ffff00' },
        { color: '#ffd966' },
        { color: '#00b050' },
    ];
    
    var inboundDurationDonutData = [
        ['All', 'All Matches Result'],
        ['1 to 12 Sec', 1],
        ['13 to 30 Sec', 1],
        ['31 to 48 Sec', 1],
        ['49 to 90 Sec', 1],
        ['more than 90 Sec', 1],
    ];
    
    function drawInboundDurationDonutChart() {
        var inboundDurationDonutChartData = google.visualization.arrayToDataTable(inboundDurationDonutData);
    
        var options = {
            width: 500,
            height: 300,
            title: '',
            legend: { position: 'right', alignment: 'center', maxLines: 3, pointShape: 'square', textStyle: { color: 'black', top: '20px', bottom: '40px' } },
            slices: inboundDurationColors,
            pieHole: 0.3,
            //pieSliceText: 'none',
            pieSliceTextStyle: {
                color: '#000',
                fontSize: 12,
                bold: true
            }
        };
    
        var view = new google.visualization.DataView(inboundDurationDonutChartData);
    
        var chart = new google.visualization.PieChart(document.getElementById('donut-inbound'));
        chart.draw(view, options);
    }
    // donut-inbound Ends --------------------------
    
    // geo-inbound Start --------------------------
    google.charts.load('current', {
        'packages': ['geochart'],
    });
    google.charts.setOnLoadCallback(drawRegionsMap);
    
    var regionMapData = [
            ['State', 'Popularity'],
            ['Alabama', 1],
            ['Alaska', 2],
            ['Arizona', 3],
            ['Arkansas', 4],
            ['California', 5],
            ['Colorado', 6],
            ['Connecticut', 7],
            ['Florida', 8],
            ['Georgia', 9],
            ['Hawaii', 10],
            ['Indiana', 11],
            ['Iowa', 12],
            ['New Jersey', 13],
            ['New Jersey', 14],
            ['New Mexico', 15],
        ];
    
    function drawRegionsMap() {
        
        var options = {
            width: 400,
            height: 350,
            region: 'US',
            resolution: 'provinces',
            colorAxis: {colors: ['#c4c4c4', '#2b4370']}
        };
        
        var view = google.visualization.arrayToDataTable(regionMapData);
        var chart = new google.visualization.GeoChart(document.getElementById('geo-inbound'));
        chart.draw(view, options);
    }
    
    // geo-inbound End --------------------------
    
    jQuery(".test-summary-number-table-container").show();
    
    jQuery(document).on('click', '#apply_carriers_btn', function (e) {
        e.stopPropagation();
        getOutboundCalls();
    });
    
    jQuery(document).on('click', '.call-summary-back-btn', function (e) {
        e.stopPropagation();
        jQuery('.test-history-search-input').val('');
        var CallSummaryDataTableObj = jQuery('#call-summary-table').DataTable();
        CallSummaryDataTableObj.ajax.reload();
    });
    
    var inOutTimeSlot = '15_min';
    jQuery(".day-container.inbound-outbound-section").on('click', '.day-name', function () {
        inOutTimeSlot = jQuery(this).data('value');
        jQuery('.day-container.inbound-outbound-section .day-name').removeClass('active_slot');
        jQuery(this).addClass('active_slot');
        getOutboundCalls();
        getInboundCalls();
    });
    
    var datatableTimeSlot = '15_min';
    jQuery(".day-container.datatable-section").on('click', '.day-name', function () {
        datatableTimeSlot = jQuery(this).data('value');
        jQuery('.day-container.datatable-section .day-name').removeClass('active_slot');
        jQuery(this).addClass('active_slot');
        var CallSummaryDataTableObj = jQuery('#call-summary-table').DataTable();
        CallSummaryDataTableObj.ajax.reload();
    });
    
    function getOutboundCalls() {
        jQuery('.brand-scan-box').prepend(loaderHtml);
        var selected_carriers = jQuery(".carriers-chk:checkbox:checked").map(function () {
                return this.value;
            }).toArray();
        
        var unidentifiedCarriers = 0;
    
        if(jQuery("#unidentified_carriers").prop('checked') == true){
            unidentifiedCarriers = 1;
        }
        
        jQuery.ajax({
            url: baseURL + "getOutboundCallsAC",
            headers: {
                "Accept-WP-Cookie": wp_cookie
            },
            data: {
                carriers: selected_carriers,
                is_unidentified: unidentifiedCarriers,
                time_slot: inOutTimeSlot,
                userIds: jQuery('.outbound-clients').val(),
                dialerIps: jQuery('.outbound-dialer-ips').val(),
            },
            type: "POST",
            success: function (res) {
                if(res.data.total_outbound_calls > 0) {
                    jQuery('.outbound-calls-section').show();
                    attestationDonutData = res.data.attestation;
                    attestationDrawDonutChart();
                    
                    durationDonutData = res.data.duration;
                    durationDrawDonutChart();
                    
                    lbucDonutData = res.data.lbuc;
                    lbucDrawDonutChart();
                    
                    answersGauge =
                        [
                            ['Label', 'Value'],
                            ['Answers', res.data.answers.answers],
                        ];
                    
                    answersOptions.max = res.data.answers.total_calls;
                    answersOptions.redFrom = 0;
                    answersOptions.redTo = (res.data.answers.total_calls * 2) / 100;
                    answersOptions.yellowFrom = (res.data.answers.total_calls * 2) / 100;
                    answersOptions.yellowTo = (res.data.answers.total_calls * 10) / 100;
                    answersOptions.greenFrom = (res.data.answers.total_calls * 10) / 100;
                    answersOptions.greenTo = res.data.answers.total_calls;
                    google.charts.setOnLoadCallback(answersGaugeDrawChart);
                    
                    jQuery('.outboundCall-count').text(res.data.answers.total_calls);
                    jQuery('.brand-scan-box .header-row .head-two').text('Outbound Calls');
                    jQuery('.no-outbound-data').css('opacity', 0);
                    jQuery('.donut-container .total-outboundCall, .donut-container .donut-charts').css('opacity', 1);
                } else {
                    // jQuery('.brand-scan-box .header-row .head-two').text('No Outbound Calls');
                    // jQuery('.outbound-calls-section').hide();
                    jQuery('.donut-container .total-outboundCall, .donut-container .donut-charts').css('opacity', 0.5);
                    jQuery('.no-outbound-data').css({'opacity': 0.9, 'z-index': 0});
                    all_count = 1;
                    lbucDonutData = [["All", "All Matches Result"], ["L", 1], ["B", 1], ["U", 1], ["C", 1]];
                    attestationDonutData = [["All", "All Matches Result"], ["A", 1], ["B", 1], ["C", 1]];
                    durationDonutData = [["All", "All Matches Result"], ["1 to 12 Sec", 1], ["13 to 30 Sec", 1], ["31 to 48 Sec", 1], ["49 to 90 Sec", 1], ["more than 90 Sec", 1]];
                    answersGauge = [['Label', 'Value'],['Answers', 1]];
                }
                jQuery('.brand-scan-box .loading_overlay').remove();
            },
            error: function (jqXHR, error, errorThrown) {
                jQuery(".brand-scan-box").show();
                jQuery('.donut-list.gauge-section-container .loading_overlay').remove();
            }
        });
        
    }
    
    function getInboundCalls() {
        jQuery('.inbound-detail-section').prepend(loaderHtml);
        
        jQuery.ajax({
            url: baseURL + "getinboundcallsAC",
            headers: {
                "Accept-WP-Cookie": wp_cookie
            },
            data: {
                time_slot: inOutTimeSlot,
                userIds: jQuery('.outbound-clients').val(),
                dialerIps: jQuery('.outbound-dialer-ips').val(),
            },
            type: "GET",
            success: function (res) {
                var inboundCallCount = 0;
                if(res.data.total_inbound_calls > 0) {
                    inboundDurationDonutData = res.data.call_duration;
                    drawInboundDurationDonutChart();
                    
                    regionMapData = res.data.heat_map;
                    drawRegionsMap();
                    
                    jQuery('.inboundCall-count').text(res.data.total_inbound_calls);
                    jQuery('.inboundCalls .header-row .head-two').text('Inbound Calls');
                    jQuery('.inbound-list.row').show();
                    jQuery('.inbound-detail-section .inbound-list').css({'opacity': 1, 'z-index': 1});
                    jQuery('.no-inbound-data').css({'opacity': 0});
                } else {
                    // jQuery('.inboundCalls .header-row .head-two').text('No Inbound Calls');
                    // jQuery('.inbound-list.row').hide();
                    jQuery('.inboundCall-count').text(inboundCallCount);
                    jQuery('.inbound-detail-section .inbound-list').css({'opacity': 0.5, 'z-index': 0});
                    jQuery('.no-inbound-data').css({'opacity': 0.9, 'z-index': 0});
                }
                jQuery('.tollfree_numbers_count').text(res.data.tollfree_numbers_count);
                jQuery('.inbound-detail-section .loading_overlay').remove();
            },
            error: function (jqXHR, error, errorThrown) {
                jQuery('.inbound-detail-section .loading_overlay').remove();
            }
        });
    }

</script>
@endsection