@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="/css/traffic-monitor.css?{{ time() }}">
<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-fluid" >
    <div id="loaderModal" class="modal">
        <img class="loader-img" src="../images/ajax-spinner.gif">
        <span class="loader-text">Please wait ...</span>
    </div>
    <div class="card shadow-lg">
        <div class="card-header">
            <div class="row">
                <div class="col-md-12">
                    <h4>Outbound Traffic Monitor Filters</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="container traffic-monitor-page">
                        <div class="day-section">
                            <div class="row day-container outbound-timeslot-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>
            <div class="row justify-content-center mt-3">
                <div class="col-md-2">
                    <label class="select-date-lbl"></label>
                    <div class="input-group-append float-right mt-5">
                        <span class="input-group-text">
                            <input type="checkbox" id="include_test_users" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                            &nbsp;<b>Show Test Users</b>
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="select-date-lbl">Filter By Clients: &nbsp;</label>
                    <div class="input-group-append">
                        <select class="form-control col-md-12 outbound-clients" name="outbound_clients[]" style="width:100%" multiple>
                            @foreach($clients as $key => $val)
                                <option value="{{ $key }}">{{ $val }}</option>
                            @endforeach
                        </select>
                        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All Clients">
                            <b>All</b>&nbsp;
                            <input type="checkbox" id="select_all_clients" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                        </span>
                        <span class="input-group-text" onclick="refreshAll()" style="display: none;">
                            <i class="fas fa-sync-alt" data-toggle="tooltip" data-placement="top" title="Reset to Default"></i>
                        </span>
                    </div>

                    <div class="input-group-append mt-2">
                        <select class="form-control col-md-12 clients-endpoint" name="clients_endpoint[]" style="width:100%" multiple>
                            
                        </select>
                        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All Clients">
                            <b>All</b>&nbsp;
                            <input type="checkbox" id="select_all_clients_endpoint" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="select-date-lbl">Filter By Engress Trunk Group: &nbsp;</label>
                    <div class="input-group-append">
                        <select class="form-control col-md-12 outbound-dialer-ips" name="outbound-dialer_ips[]" style="width:100%" multiple>
                            
                        </select>
                        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All">
                            <b>All</b>&nbsp;
                            <input type="checkbox" id="select_all_trunk_group" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                        </span>
                        <span class="input-group-text" onclick="refreshAll()" style="display: none;">
                            <i class="fas fa-sync-alt" data-toggle="tooltip" data-placement="top" title="Reset to Default"></i>
                        </span>
                    </div>
                </div>
                <div class="col-md-1 apply-filtes-col">
                    <button id="apply_filters" class="apply-filters-btn"><i class="fa fa-search"></i> Search</button>
                </div>
            </div>
        </div>
        <div class="card-body" id="admin-console-traffic-monitor">
            <div class="row mb-3">
                <div class="col-md-12">
                    <h3>Outbound Calls</h3>
                </div>
            </div>
            <div class="row brand-scan-box">
                <div class="col-md-12">
                    <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</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">
                                    <center>
                                        <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>
                                                <div id="ans_percentages" class="ans-percentages">
                                                    <div id="answer-percent">{{ $ans_percent; }}</div>
                                                </div>
                                            </center>
                                        </div>
                                    </center>
                                </div>
                                <!-- Donut1 ends -->
                                <!-- Donut2 Starts -->
                                <div class="donutcolumn3">
                                    <center>
                                        <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>
                                    </center>
                                </div>
                                <!-- Donut2 ends -->
                                <!-- Donut3 Starts -->
                                <div class="donutcolumn4">
                                    <center>
                                        <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>
                                    </center>
                                </div>
                                <!-- Donut3 ends -->
                                <!-- Donut4 Starts -->
                                <div class="donutcolumn5">
                                    <center>
                                        <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 id="duration_avg" class="duration-avg">
                                                        <div id="duration-percent">{{ $duration_avg; }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </center>
                                </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>
                </div>
            </div>
        </div>

        <div class="card-header">
            <div class="row mb-3">
                <div class="col-md-12">
                    <h3>Inbound Traffic Monitor Filters</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="container traffic-monitor-page">
                        <div class="day-section">
                            <div class="row day-container inbound-timeslot-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>
            <div class="row justify-content-center mt-3">
                <div class="col-md-2">
                    <label class="select-date-lbl"></label>
                    <div class="input-group-append float-right" style="margin-top: 31px;">
                        <span class="input-group-text">
                            <input type="checkbox" id="inbound_include_test_users" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                            &nbsp;<b>Show Test Users</b>
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="select-date-lbl">Filter By Clients: &nbsp;</label>
                    <div class="input-group-append">
                        <select class="form-control col-md-12 inbound-clients" name="inbound_clients[]" style="width:100%" multiple>
                            
                        </select>
                        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All Clients">
                            <b>All</b>&nbsp;
                            <input type="checkbox" id="select_all_inbound_clients" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                        </span>
                    </div>
                    <div class="input-group-append mt-2">
                        <select class="form-control col-md-12 inbound-clients-endpoint" name="inbound_clients_endpoint[]" style="width:100%" multiple>
                            
                        </select>
                        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All Clients">
                            <b>All</b>&nbsp;
                            <input type="checkbox" id="select_all_inbound_clients_endpoint" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="select-date-lbl">Filter By Inbound Switch & Trunk: &nbsp;</label>
                    <div class="input-group-append">
                        <select class="form-control col-md-12 inbound-switch" name="inbound_switch[]" style="width:100%" multiple>
                            
                        </select>
                        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All">
                            <b>All</b>&nbsp;
                            <input type="checkbox" id="select_all_inbound_switch" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                        </span>
                    </div>

                    <div class="input-group-append mt-2">
                        <select class="form-control col-md-12 inbound-trunk" name="inbound_trunk[]" style="width:100%" multiple>
                            
                        </select>
                        <span class="input-group-text" data-toggle="tooltip" data-placement="top" title="Select All">
                            <b>All</b>&nbsp;
                            <input type="checkbox" id="select_all_inbound_trunk" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                        </span>
                    </div>
                </div>
                
                <div class="col-md-1 apply-filtes-col">
                    <button id="apply_inbound_filters" class="apply-filters-btn"><i class="fa fa-search"></i> Search</button>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-12">
                    <h3>Inbound Calls</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div 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 id="inbound_duration_avg" class="inbound-duration-avg">
                                                <div id="inbound-duration-percent">0 Avg(Sec)</div>
                                            </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>
                    </div>
                </div>
            </div>
        </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="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 = '';

    var clients = null;
    var testUsers = null;
    var testUsersEndpoints = [];
    var usersWithEndpoint = [];
    var inboundClient = [];
    var inboundTestUser = [];
    
    jQuery(document).on('change', '.outbound-clients', function () {
        var selectedClientCount = jQuery(this).val();
        var allClientCount = jQuery(".outbound-clients option").map(function () {
            return this.value;
        }).toArray();
        if(selectedClientCount.length == allClientCount.length) {
            jQuery('#select_all_clients').prop('checked', true);
        } else {
            jQuery('#select_all_clients').prop('checked', false);
        }
        jQuery('.clients-endpoint').fSelect('reload');
    });

    jQuery(".clients-endpoint").on('change', function () {
        var selectedEndpointCount = jQuery(this).val();
        var allEndpointCount = jQuery(".clients-endpoint option").map(function () {
            return this.value;
        }).toArray();
        if(selectedEndpointCount.length == allEndpointCount.length) {
            jQuery('#select_all_clients_endpoint').prop('checked', true);
        } else {
            jQuery('#select_all_clients_endpoint').prop('checked', false);
        }
    });

    jQuery(".outbound-dialer-ips").on('change', function () {
        var selectedDialerIpCount = jQuery(this).val();
        var allDialerIpCount = jQuery(".outbound-dialer-ips option").map(function () {
            return this.value;
        }).toArray();
        if(selectedDialerIpCount.length == allDialerIpCount.length) {
            jQuery('#select_all_trunk_group').prop('checked', true);
        } else {
            jQuery('#select_all_trunk_group').prop('checked', false);
        }
    });

    jQuery("#include_test_users").on('click', function () {
        jQuery('#select_all_clients, #select_all_clients_endpoint').prop('checked', false);
        var selectedClients = jQuery(".outbound-clients").val();
        var clientsHtml = "";
        var clientsEndpointHtml = "";
        
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            jQuery.each(testUsers, function(u_id, u_name) {
                clientsHtml += "<option value='"+u_id+"'>"+u_name+"</option>";
            });

            jQuery.each(testUsersEndpoints, function(u_id, u_name) {
                clientsEndpointHtml += "<option value='"+u_id+"'>"+u_name + "(" + u_id + ")" +"</option>";
            });

        } else {
            jQuery(this).prop('checked', false);
            jQuery.each(clients, function(u_id, u_name) {
                clientsHtml += "<option value='"+u_id+"'>"+u_name+"</option>";
            });

            jQuery.each(usersWithEndpoint, function(u_id, u_name) {
                clientsEndpointHtml += "<option value='"+u_id+"'>"+u_name + "(" + u_id + ")" +"</option>";
            });
        }
        jQuery('.outbound-clients').html(clientsHtml);
        jQuery('.clients-endpoint').html(clientsEndpointHtml);
        jQuery('.outbound-clients').fSelect('reload');
        jQuery('.clients-endpoint').fSelect('reload');
        jQuery('#select_all_clients, #select_all_clients_endpoint').trigger('click');
    });

    jQuery("#select_all_clients").on('click', function () {
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            var allClients = jQuery(".outbound-clients option").map(function () {
                return this.value;
            }).toArray();
            jQuery('.outbound-clients').val(allClients);
            jQuery(".clients-endpoint option").removeAttr('disabled');
        } else {
            jQuery(this).prop('checked', false);
            jQuery('.outbound-clients').val([]);
            jQuery(".clients-endpoint option").attr('disabled', true);
        }
        jQuery('.outbound-clients').fSelect('reload');
        jQuery('.clients-endpoint').fSelect('reload');
    });

    jQuery("#select_all_clients_endpoint").on('click', function () {
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            var allClients = jQuery(".clients-endpoint option").map(function () {
                return this.value;
            }).toArray();
            jQuery('.clients-endpoint').val(allClients);
        } else {
            jQuery(this).prop('checked', false);
            jQuery('.clients-endpoint').val([]);
        }
        jQuery('.clients-endpoint').fSelect('reload');
    });

    jQuery("#select_all_trunk_group").on('click', function () {
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            var allDialerIps = jQuery(".outbound-dialer-ips option").map(function () {
                return this.value;
            }).toArray();
            jQuery('.outbound-dialer-ips').val(allDialerIps);
        } else {
            jQuery(this).prop('checked', false);
            jQuery('.outbound-dialer-ips').val([]);
        }
        jQuery('.outbound-dialer-ips').fSelect('reload');
    });

    jQuery("#apply_filters").on('click', function () {
        jQuery('#apply_filters').attr('disabled', true);
        jQuery('#apply_filters i').removeClass('fa-search').addClass('fa-spinner fa-spin');
        getOutboundCalls();
    });

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

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

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

    jQuery("#inbound_include_test_users").on('click', function () {
        // jQuery('#select_all_inbound_clients, #select_all_inbound_clients_endpoint').prop('checked', false);
        jQuery('#select_all_inbound_clients').prop('checked', false);
        var selectedClients = jQuery(".inbound-clients").val();
        var clientsHtml = "";
        var clientsEndpointHtml = "";
        
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            jQuery.each(inboundTestUser, function(u_id, u_name) {
                clientsHtml += "<option value='"+u_id+"'>"+u_name+"</option>";
            });

            jQuery.each(testUsersEndpoints, function(u_id, u_name) {
                clientsEndpointHtml += "<option value='"+u_id+"'>"+u_name + "(" + u_id + ")" +"</option>";
            });

        } else {
            jQuery(this).prop('checked', false);
            jQuery.each(inboundClient, function(u_id, u_name) {
                clientsHtml += "<option value='"+u_id+"'>"+u_name+"</option>";
            });

            jQuery.each(usersWithEndpoint, function(u_id, u_name) {
                clientsEndpointHtml += "<option value='"+u_id+"'>"+u_name + "(" + u_id + ")" +"</option>";
            });
        }
        jQuery('.inbound-clients').html(clientsHtml);
        jQuery('.inbound-clients-endpoint').html(clientsEndpointHtml);
        jQuery('.inbound-clients').fSelect('reload');
        jQuery('.inbound-clients-endpoint').fSelect('reload');
        // jQuery('#select_all_inbound_clients, #select_all_inbound_clients_endpoint').trigger('click');
        jQuery('#select_all_inbound_clients').trigger('click');
    });

    jQuery(document).on('change', '.inbound-clients', function () {
        var selectedInboundClientCount = jQuery(this).val();
        var allInboundClientCount = jQuery(".inbound-clients option").map(function () {
            return this.value;
        }).toArray();
        if(selectedInboundClientCount.length == allInboundClientCount.length) {
            jQuery('#select_all_inbound_clients').prop('checked', true);
        } else {
            jQuery('#select_all_inbound_clients').prop('checked', false);
        }
        jQuery('.inbound-clients-endpoint').fSelect('reload');
    });

    jQuery(".inbound-clients-endpoint").on('change', function () {
        var selectedInboundEndpointCount = jQuery(this).val();
        var allInboundEndpointCount = jQuery(".inbound-clients-endpoint option").map(function () {
            return this.value;
        }).toArray();
        if(selectedInboundEndpointCount.length == allInboundEndpointCount.length) {
            jQuery('#select_all_clients_endpoint').prop('checked', true);
        } else {
            jQuery('#select_all_clients_endpoint').prop('checked', false);
        }
    });

    jQuery("#select_all_inbound_clients").on('click', function () {
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            var allClients = jQuery(".inbound-clients option").map(function () {
                return this.value;
            }).toArray();
            jQuery('.inbound-clients').val(allClients);
            jQuery(".inbound-clients-endpoint option").removeAttr('disabled');
        } else {
            jQuery(this).prop('checked', false);
            jQuery('.inbound-clients').val([]);
            jQuery(".inbound-clients-endpoint option").attr('disabled', true);
        }
        jQuery('.inbound-clients').fSelect('reload');
        jQuery('.inbound-clients-endpoint').fSelect('reload');
    });

    jQuery("#select_all_inbound_clients_endpoint").on('click', function () {
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            var allClients = jQuery(".inbound-clients-endpoint option").map(function () {
                return this.value;
            }).toArray();
            jQuery('.inbound-clients-endpoint').val(allClients);
        } else {
            jQuery(this).prop('checked', false);
            jQuery('.inbound-clients-endpoint').val([]);
        }
        jQuery('.inbound-clients-endpoint').fSelect('reload');
    });

    jQuery("#select_all_inbound_switch").on('click', function () {
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            var allDialerIps = jQuery(".inbound-switch option").map(function () {
                return this.value;
            }).toArray();
            jQuery('.inbound-switch').val(allDialerIps);
        } else {
            jQuery(this).prop('checked', false);
            jQuery('.inbound-switch').val([]);
        }
        jQuery('.inbound-switch').fSelect('reload');
    });

    jQuery("#select_all_inbound_trunk").on('click', function () {
        if(jQuery(this).is(":checked")) {
            jQuery(this).prop('checked', true);
            var allDialerIps = jQuery(".inbound-trunk option").map(function () {
                return this.value;
            }).toArray();
            jQuery('.inbound-trunk').val(allDialerIps);
        } else {
            jQuery(this).prop('checked', false);
            jQuery('.inbound-trunk').val([]);
        }
        jQuery('.inbound-trunk').fSelect('reload');
    });

    jQuery("#apply_inbound_filters").on('click', function () {
        jQuery('#apply_inbound_filters').attr('disabled', true);
        jQuery('#apply_inbound_filters i').removeClass('fa-search').addClass('fa-spinner fa-spin');
        getInboundCalls();
    });

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

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

    jQuery(".inbound-switch").fSelect({
        placeholder: 'Select Inbound Switch(s)',
        numDisplayed: 2,
        overflowText: '{n} Inbound Switch(s) selected',
        noResultsText: 'No Inbound Switch(s) found',
        searchText: 'Search Inbound Switch(s)',
        showSearch: true
    });

    jQuery(".inbound-trunk").fSelect({
        placeholder: 'Select Ingress Trunk(s)',
        numDisplayed: 2,
        overflowText: '{n} Ingress Trunk(s) selected',
        noResultsText: 'No Ingress Trunk(s) found',
        searchText: 'Search Ingress Trunk(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="/images/number-sentry-spinner-blue.gif" alt=""><p>Please wait...</p></div></div>';
    
    jQuery(document).ready(function ()
    {	
        jQuery('#select_all_clients').trigger('click');
        getOutboundFilters();
        getInboundFilters();
        
    });
    
    // 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.outbound-timeslot-section").on('click', '.day-name', function () {
        inOutTimeSlot = jQuery(this).data('value');
        jQuery('.day-container.outbound-timeslot-section .day-name').removeClass('active_slot');
        jQuery(this).addClass('active_slot');
        getOutboundCalls();
    });

    var inOutTimeSlot = '15_min';
    jQuery(".day-container.inbound-timeslot-section").on('click', '.day-name', function () {
        inOutTimeSlot = jQuery(this).data('value');
        jQuery('.day-container.inbound-timeslot-section .day-name').removeClass('active_slot');
        jQuery(this).addClass('active_slot');
        getInboundCalls();
    });
    
    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",
            data: {
                carriers: selected_carriers,
                is_unidentified: unidentifiedCarriers,
                time_slot: inOutTimeSlot,
                userIds: jQuery('.outbound-clients').val(),
                endpoints: jQuery('.clients-endpoint').val(),
                dialerIps: jQuery('.outbound-dialer-ips').val(),
            },
            type: "POST",
            success: function (res) {
                jQuery('#apply_filters').removeAttr('disabled');
                jQuery('#apply_filters i').removeClass('fa-spinner fa-spin').addClass('fa-search');
                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);

                    jQuery('#answer-percent').text(res.data.ans_percent);
                    jQuery('#duration-percent').text(res.data.duration_avg);
                } 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();
                jQuery('#apply_filters').removeAttr('disabled');
                jQuery('#apply_filters i').removeClass('fa-spinner fa-spin').addClass('fa-search');
            }
        });
        
    }
    
    function getInboundCalls() {
        jQuery('.inbound-detail-section').prepend(loaderHtml);
        
        jQuery.ajax({
            url: baseURL + "getinboundcallsAC",
            data: {
                time_slot: inOutTimeSlot,
                userIds: jQuery('.inbound-clients').val(),
                endpoints: jQuery('.inbound-clients-endpoint').val(),
                switchIps: jQuery('.inbound-switch').val(),
                trunkIps: jQuery('.inbound-trunk').val(),
            },
            type: "POST",
            success: function (res) {
                jQuery('#apply_inbound_filters').removeAttr('disabled');
                jQuery('#apply_inbound_filters i').removeClass('fa-spinner fa-spin').addClass('fa-search');
                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});
                    jQuery('#inbound-duration-percent').text(res.data.duration_avg);
                } 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();
                jQuery('#apply_inbound_filters').removeAttr('disabled');
                jQuery('#apply_inbound_filters i').removeClass('fa-spinner fa-spin').addClass('fa-search');
            }
        });
    }

    function getOutboundFilters() {
        
        jQuery.ajax({
            url: baseURL + "getOutboundFilters",
            type: "GET",
            success: function (res) {
                usersWithEndpoint = res.data.users_with_endpoint;
                testUsersEndpoints = res.data.testusers_with_endpoint;
                var clientsEndpointHtml = "";
                jQuery.each(usersWithEndpoint, function(u_id, u_name) {
                    clientsEndpointHtml += "<option value='"+u_id+"'>"+u_name + "(" + u_id + ")" +"</option>";
                });

                jQuery('.clients-endpoint, .inbound-clients-endpoint').html(clientsEndpointHtml);
                jQuery('.clients-endpoint, .inbound-clients-endpoint').fSelect('reload');

                var outboundTrunkHtml = "";
                jQuery.each(res.data.dialer_ip, function(key, value) {
                    outboundTrunkHtml += "<option value='"+value+"'>"+ value + "</option>";
                });

                jQuery('.outbound-dialer-ips').html(outboundTrunkHtml);
                jQuery('.outbound-dialer-ips').fSelect('reload');

                jQuery('#select_all_clients_endpoint, #select_all_trunk_group').trigger('click');
            },
            error: function (jqXHR, error, errorThrown) {
                jQuery('.inbound-detail-section .loading_overlay').remove();
                jQuery('#apply_inbound_filters').removeAttr('disabled');
                jQuery('#apply_inbound_filters i').removeClass('fa-spinner fa-spin').addClass('fa-search');
            }
        });
    }

    function getInboundFilters() {
        
        jQuery.ajax({
            url: baseURL + "getInboundFilters",
            type: "GET",
            success: function (res) {
                inboundClient = res.data.inbound_clients;
                inboundTestUser = res.data.inbound_test_users;
                var inboundClientHtml = "";
                jQuery.each(inboundClient, function(u_id, u_name) {
                    inboundClientHtml += "<option value='"+u_id+"'>"+u_name + "(" + u_id + ")" +"</option>";
                });

                jQuery('.inbound-clients').html(inboundClientHtml);
                jQuery('.inbound-clients').fSelect('reload');

                var inboundSwitchHtml = "";
                jQuery.each(res.data.inbount_switch, function(key, value) {
                    inboundSwitchHtml += "<option value='"+value+"'>"+ value + "</option>";
                });

                jQuery('.inbound-switch').html(inboundSwitchHtml);
                jQuery('.inbound-switch').fSelect('reload');

                var inboundTrunkHtml = "";
                jQuery.each(res.data.inbount_trunk, function(key, value) {
                    inboundTrunkHtml += "<option value='"+value+"'>"+ value + "</option>";
                });

                jQuery('.inbound-trunk').html(inboundTrunkHtml);
                jQuery('.inbound-trunk').fSelect('reload');

                jQuery('#select_all_inbound_clients, #select_all_inbound_switch, #select_all_inbound_trunk').trigger('click');

                getInboundCalls();
            },
            error: function (jqXHR, error, errorThrown) {
                jQuery('.inbound-detail-section .loading_overlay').remove();
                jQuery('#apply_inbound_filters').removeAttr('disabled');
                jQuery('#apply_inbound_filters i').removeClass('fa-spinner fa-spin').addClass('fa-search');
            }
        });
    }

</script>
@endsection