@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') Dashboard @endsection
<style> 
    .form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio{
        display: unset;
    }
    .dataTables_wrapper .dataTables_filter input {
        margin-right: 0px;
        margin-top: 0px;
    }
    .advance_filter{
        border: 1px solid #ccc !important;
        padding: 20px;
        border-radius: 16px;
        width: 80%;
        background:ghostwhite;
    }
    </style>
<script>
   
$(document).ready(function(){
    $('#whistledashboard').DataTable({"scrollX": true, "bLengthChange": false  });
    $('#start_date,#end_date').datepicker('setDate', 'today');
    $('#start_date,#end_date').datepicker({  maxDate: new Date() });

    $(".export-dashboard-excel").click(function(){
        selecetedColumnArray = [];
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var parent_id = $('#langOpt').val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $('#sender_id').val();
        var launched_status = $('#launched_status').val();


        $("input:checkbox:checked").each(function(){
            if($(this).data('column-name')){
                selecetedColumnArray.push($(this).data('column-name'));
            }
        });
        $('#from_date_hidden').val(start_date);
        $('#to_date_hidden').val(end_date);
        $('#parent_id_hidden').val(parent_id);
        $('#export_selected_column').val(selecetedColumnArray);
        $('#brand_name_hidden').val(brand_name);
        $('#campaign_group_hidden').val(campaign_group);
        $('#campaign_sub_group_hidden').val(campaign_sub_group);
        $('#campaign_type_hidden').val(campaign_type);
        $('#campaign_through_hidden').val(campaign_through);
        $('#alias_server_name_hidden').val(alias_server_name);
        $('#sender_id_hidden').val(sender_id);
        $('#launched_status_hidden').val(launched_status);
        $(this).submit();
    });
    whistledashboarddata();
});

$(document).ready(function() {
    $("#adv-filter").on('click', function(){
        $('.desc').toggle();
    });
});  
function getTotalSpends(start_date,end_date,parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status){
        $.ajax({
            "url": "{{ url('getTotalSpends') }}",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}",
                "start_date":start_date,
                "end_date":end_date,
                "parent_id": parent_id,
                "brand_name": brand_name,
                "campaign_group":campaign_group,
                "campaign_sub_group":campaign_sub_group,
                "campaign_type":campaign_type,
                "campaign_through":campaign_through,
                "alias_server_name":alias_server_name,
                "sender_id":sender_id,
                "launched_status":launched_status
            },
            "dataType": "json",
            success: function(response) {
                $("#TotalSpends").html(response[0].total_spends);
            }
        });
    }
</script>

<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h3>Whistle Dashboard
                @can('hasExcelPermission')          
                <form class="pull-right" method="post" action="{{ url('exportwhistledashboard') }}">
                @csrf
                <button type="submit" class="export-dashboard-excel btn  btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                <input type="hidden" name="fromdate" id="from_date_hidden" />
                <input type="hidden" name="todate" id="to_date_hidden"/>
                <input type="hidden" name="parentid[]" id="parent_id_hidden"/>
                <input type="hidden" name="exportSelectedColumn" id="export_selected_column"/>

                <input type="hidden" name="brand_name_data[]" id="brand_name_hidden"/>
                <input type="hidden" name="campaign_group_data[]" id="campaign_group_hidden"/>
                <input type="hidden" name="campaign_sub_group_data[]" id="campaign_sub_group_hidden"/>
                <input type="hidden" name="campaign_type_data[]" id="campaign_type_hidden"/>
                <input type="hidden" name="campaign_through_data[]" id="campaign_through_hidden"/>
                <input type="hidden" name="alias_server_name_data[]" id="alias_server_name_hidden"/>
                <input type="hidden" name="sender_id_data[]" id="sender_id_hidden"/>
                <input type="hidden" name="launched_status_data[]" id="launched_status_hidden"/>
            </form>
            @endcan
            </h3>
        </div>
        <div class="card-body table-responsive">               
            <form>
               <div class = " filter-table-inline pl-0 d-flex flex-wrap">
                    <div class="form-group col-md-3"> 
                        <label for="start_date">Choose Account &nbsp; </label><br>
                        <select class="form-control" name="langOpt[]" multiple id="langOpt">
                            <optgroup label="ACTIVE">
                                @foreach ($accname as $value)
                                @if($value->status == 1)
                                    <option value="{{$value->id}}">{{ $value->account_name }}-({{$value->id}})</option>
                                @endif
                                @endforeach
                            </optgroup>
                            <optgroup label="INACTIVE">
                                @foreach ($accname as $value)
                                @if($value->status == 0)
                                    <option value="{{$value->id}}">{{ $value->account_name }}-({{$value->id}})</option>
                                @endif
                                @endforeach
                            </optgroup>
                        </select>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="period_filter">Choose Time Period</label>
                        <select id="period_filter" class="form-control">
                            <option value=''>Select</option>
                            <option value="1" selected>Today</option>
                            <option value="2">Yesterday</option>
                            <option value="3">This Month</option>
                            <option value="4">Last Month</option>
                            <option value="5">Last 6 Months</option>
                            <option value="6">This Year</option>
                            <option value="7">Last Year</option>
                        </select>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="start_date">From Date</label>
                        <input type="text" class="form-control" id="start_date" name="start_date">
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end_date">To Date</label>
                        <input type="text" class="form-control" id="end_date" name="end_date">
                    </div>
                    <div class="col-md-2" id="adv-filter">
                        <label for="advance_filters" class="form-control text-center">Advance Filters</label>
                    </div>

                    <div class="dropdown column-toggle col-xs-1 col-md-1 col-sm-1 ml-n5">
                        <a class="dropdown-toggle column-toggle-dropdown  pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-filter" aria-hidden="true"></i></a>
                        <div class="dropdown-menu toggle-column-dropdown-menu">
                            <ul class="dropdown-item toggle-column"> 
                                <li><label><input type="checkbox" id="checkAll" checked> Check All</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="1" data-column-name="launch_id" checked> Launch ID</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="2" data-column-name="account_id" checked> Account ID</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="3" data-column-name="brand_name" checked> Brand Name<label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="4" data-column-name="category" checked> Category</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="5" data-column-name="account_category" checked> Account Category</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="6" data-column-name="client" checked> Client</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="7" data-column-name="username" checked> Username</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="8" data-column-name="email" checked> Email</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="9" data-column-name="role" checked> Role</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="10" data-column-name="user_id" checked> User ID</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="11" data-column-name="created_on" checked> Created On</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="12" data-column-name="account_manager" checked> Account Manager</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="13" data-column-name="relation_manager" checked> Relationship Manager</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="14" data-column-name="account_type" checked> Account Type</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="15" data-column-name="boarding_status" checked> Boarding Status</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="16" data-column-name="type_of_sales" checked> Type of Sales</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="17" data-column-name="state" checked> State</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="18" data-column-name="city" checked> City</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="19" data-column-name="campaign_group" checked> Campaign Group</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="20" data-column-name="campaign_sub_group" checked> Campaign Sub Group</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="21" data-column-name="campaign_data" checked> Campaign Data</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="22" data-column-name="campaign_url" checked> Campaign URL</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="23" data-column-name="campaign_type" checked> Campaign Type</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="24" data-column-name="gateway_name" checked> Gateway Name</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="25" data-column-name="sender_id" checked> Sender ID</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="26" data-column-name="language" checked> Language</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="27" data-column-name="campaign_date_and_time" checked> Campaign Date & Time</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="28" data-column-name="launched_status" checked> Launched Status</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="29" data-column-name="SMS_pushed" checked> SMS Pushed</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="30" data-column-name="SMS_submitted" checked> SMS Submitted</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="31" data-column-name="total_sms_units" checked> Total SMS Units</label></li>

                                <li><label><input type="checkbox" class="toggle-vis" data-column="32" data-column-name="invalid_count" checked> Invalid Count</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="33" data-column-name="dnd_ndnd_count" checked> Dnd ndnd Count</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="34" data-column-name="exclude_count" checked> Exclude Count</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="35" data-column-name="blacklist_count" checked> Blacklist Count</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="36" data-column-name="duplicate_numbers_count" checked> Duplicate Numbers Count</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="37" data-column-name="exclude_no_activity_numbers" checked> Exclude No Activity Numbers</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="38" data-column-name="exclude_operator_count" checked> Exclude Operator Count</label></li>

                                <li><label><input type="checkbox" class="toggle-vis" data-column="39" data-column-name="clicks" checked> Clicks</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="40" data-column-name="unique_clicks" checked> Unique Clicks</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="41" data-column-name="bot_clicks" checked> Bot Clicks</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="42" data-column-name="whistle_actions" checked> Whistle Actions</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="43" data-column-name="total_spends" checked> Total Spends</label></li>

                                <li><label><input type="checkbox" class="toggle-vis" data-column="44" data-column-name="master_CPS1" checked> Master CPS1</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="45" data-column-name="master_CPS2" checked> Master CPS2</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="46" data-column-name="master_CPS3" checked> Master CPS3</label></li>

                                <li><label><input type="checkbox" class="toggle-vis" data-column="47" data-column-name="manager_CPS1" checked> Manager CPS1</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="48" data-column-name="manager_CPS2" checked> Manager CPS2</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="49" data-column-name="manager_CPS3" checked> Manager CPS3</label></li>

                                <li><label><input type="checkbox" class="toggle-vis" data-column="50" data-column-name="user_CPS1" checked> User CPS1</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="51" data-column-name="user_CPS2" checked> User CPS2</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="52" data-column-name="user_CPS3" checked> User CPS3</label></li>

                                <li><label><input type="checkbox" class="toggle-vis" data-column="53" data-column-name="content_volume_1" checked> Content Volume 1</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="54" data-column-name="content_volume_2" checked> Content Volume 2</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="55" data-column-name="content_volume_3" checked> Content Volume 3</label></li>

                                <li><label><input type="checkbox" class="toggle-vis" data-column="56" data-column-name="content_1_SMS_units" checked> Content 1 SMS Units</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="57" data-column-name="content_2_SMS_units" checked> Content 2 SMS Units</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="58" data-column-name="content_3_SMS_units" checked> Content 3 SMS Units</label></li>

                                <li><label><input type="checkbox" class="toggle-vis" data-column="59" data-column-name="CTRP" checked> CTR %</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="60" data-column-name="UCTR" checked> UCTR %</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="61" data-column-name="lead_ratio" checked> Lead Ratio</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="62" data-column-name="CPC" checked> CPC</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="63" data-column-name="CPUC" checked> CPUC</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="64" data-column-name="CPL" checked> CPL</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="65" data-column-name="CPM" checked> CPM</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="66" data-column-name="bot_clicks_ratio" checked> Bot Click Ratio %</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="67" data-column-name="CTA" checked> CTA %</label></li>
                                <li><label><input type="checkbox" class="toggle-vis" data-column="68" data-column-name="UCTA" checked> UCTA %</label></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class = "advance_filter desc">
                    <div class = "d-sm-inline-flex flex-wrap">
                        <div class="form-group col-sm-3 desc"> 
                            <label for="brand_name">Choose Brand Name &nbsp; </label><br>
                            <select class="form-control" name="brand_name[]" multiple id="brand_name">
                                @foreach ($getBrandName as $value)
                                @if($value->campaign_name != null)
                                <option value="{{$value->campaign_name}}">{{ $value->campaign_name }}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-3 desc"> 
                            <label for="campaign_group">Choose Campaign Group  &nbsp; </label><br>
                            <select class="form-control" name="campaign_group[]" multiple id="campaign_group">
                                @foreach ($getCampaignGroup as $value)
                                @if($value->group_name != null)
                                <option value="{{$value->group_name}}">{{ $value->group_name }}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-3 desc"> 
                            <label for="campaign_sub_group">Choose Campaign Sub Group  &nbsp; </label><br>
                            <select class="form-control" name="campaign_sub_group[]" multiple id="campaign_sub_group">
                                @foreach ($getCampaignSubGroup as $value)
                                @if($value->sub_group_name != null)
                                <option value="{{$value->sub_group_name}}">{{ $value->sub_group_name }}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-3 desc flex-wrap"> 
                            <label for="campaign_type">Choose Campaign Data &nbsp; </label><br>
                            <select class="form-control" name="campaign_type[]" multiple id="campaign_type">
                            @foreach ($getCampaignType as $value)
                                @if ($value->campaign_data != null && $value->type!=null) 
                                    <option value="{{$value->type}}">{{ $value->campaign_data }}</option>
                                @endif
                            @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-3 desc"> 
                            <label for="campaign_through">Choose Campaign Type &nbsp; </label><br>
                            <select class="form-control" name="campaign_through[]" multiple id="campaign_through">
                                <option value="1">SMS</option>
                                <option value="2">WhatsApp</option>
                                <option value="3">Google RCS</option>
                                <option value="4">Yulore Rich Card (Y)</option>
                                <option value="5">Yulore Structure (YS)</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-3 desc flex-wrap"> 
                            <label for="alias_server_name">Choose Gateway &nbsp; </label><br>
                            <select class="form-control" name="alias_server_name[]" multiple id="alias_server_name">
                                @foreach ($getAliasServerName as $value)
                                @if($value->alias_server_name != null)
                                <option value="{{$value->alias_server_name}}">{{ $value->alias_server_name }}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-3 desc"> 
                            <label for="sender_id">Choose Sender ID &nbsp; </label><br>
                            <select class="form-control" name="sender_id[]" multiple id="sender_id">
                                @foreach ($getSenderId as $value)
                                @if($value->sender_name!=null)
                                    <option value="{{$value->sender_name}}">{{ $value->sender_name }}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-3 desc"> 
                            <label for="launched_status">Choose Launched Status &nbsp; </label><br>
                            <select class="form-control" name="launched_status[]" multiple id="launched_status">
                                <option value="1">Success</option>
                                <option value="2">In-Process</option>
                                <option value="6">Scheduled</option>
                                <option value="7">IN-Queue</option>
                                <option value="3">Scheduled-Stopped</option>
                                <option value="4">API-Failed</option>
                                <option value="5">Reverted-Credits(From Support)</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-row-reverse  px-1">
                      <a style="cursor: pointer; color: darkgreen; text-decoration: underline;">Total Spends: <span id="TotalSpends"></span></a>
                  </div>
                    
            </form>
            <table class="table-bordered table-hover" id="whistledashboard">
                <thead>
                    <tr>
                    <th>Sr. No</th>
                    <th>Launch ID</th>
                    <th>Account ID</th>
                    <th>Brand Name</th>
                    <th>Category</th>
                    <th>Account Category</th>
                    <th>Client</th>
                    <th>User Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>User ID</th>
                    <th>Account Created On </th>
                    <th>Account Manager</th>
                    <th>Relationship Manager</th>
                    <th>Account Type</th>
                    <th>Boarding Status</th>
                    <th>Type of Sales</th>
                    <th>State</th>
                    <th>City</th>
                    <th>Campaign Group</th>
                    <th>Campaign Sub Group</th>
                    <th>Campaign Data</th>
                    <th>Campaign URL</th>
                    <th>Campaign Type</th>
                    <th>Gateway Name</th>
                    <th>Sender ID</th>
                    <th>Language</th>
                    <th>Campaign Date & Time</th>
                    <th>Launched Status</th>

                    <th>SMS Pushed</th>
                    <th>SMS Submitted</th>
                    <th>Total SMS Units</th>

                    <th>Invalid Numbers</th>
                    <th>DND Numbers</th>
                    <th>Already Used Numbers</th>
                    <th>Blacklisted Numbers</th>
                    <th>Duplicate Numbers</th>
                    <th>Exclude No Activity Numbers</th>
                    <th>Exclude Operator Numbers</th>

                    <th>Clicks</th>
                    <th>Unique Clicks</th>
                    <th>Bot Clicks</th>
                    <th>Whistle Actions</th>
                    <th>Total Spends</th>

                    <th>Master CPM1</th>
                    <th>Master CPM2</th>
                    <th>Master CPM3</th>

                    <th>Manager CPM1</th>
                    <th>Manager CPM2</th>
                    <th>Manager CPM3</th>

                    <th>User CPM1</th>
                    <th>User CPM2</th>
                    <th>User CPM3</th>

                    <th>Content Volume 1</th>
                    <th>Content Volume 2</th>
                    <th>Content Volume 3</th>

                    <th>Content 1 SMS Units</th>
                    <th>Content 2 SMS Units </th>
                    <th>Content 3 SMS Units</th>

                    <th>CTR % <span data-toggle="tooltip" title="(Total Clicks / SMS Submitted) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>UCTR % <span data-toggle="tooltip" title="(Unique Clicks / SMS Submitted) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>Lead Ratio <span data-toggle="tooltip" title="(Whistle Actions/ SMS Submitted) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>CPC <span data-toggle="tooltip" title="Spends / Clicks"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>CPUC  <span data-toggle="tooltip" title="Spends/ Unique Clicks"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>CPL <span data-toggle="tooltip" title="Spends / Whistle Actions"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>CPM <span data-toggle="tooltip" title="Total Spends / SMS Submitted"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>Bot Click Ratio % <span data-toggle="tooltip" title=" (Bot Clicks * 100)/(Bot Clicks + Clicks)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>

                    <th>CTA % <span data-toggle="tooltip" title=" (Whistle Actions / Clicks) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>UCTA % <span data-toggle="tooltip" title=" (Whistle Actions / Unique Clicks) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <th>Total</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
 
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>

<script>
    //multi select for users
    $('.desc').hide();

    $('#langOpt,#brand_name,#campaign_group,#campaign_sub_group,#campaign_type,#campaign_through,#alias_server_name,#sender_id,#launched_status').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });

    var start_date = end_date = '';

        $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        endDate: 'today',
        onSelect: function (selectedDate) {
            var startDate = $('#start_date').datepicker('getDate');
            $('#end_date').datepicker('option', 'minDate', startDate);
            $('#end_date').datepicker('setDate', startDate);
            var brand_name = $('#brand_name').val();
            var parent_id = $('#langOpt').val();
            var campaign_group = $('#campaign_group').val();
            var campaign_sub_group = $('#campaign_sub_group').val();
            var campaign_type = $('#campaign_type').val();
            var campaign_through = $('#campaign_through').val();
            var alias_server_name = $('#alias_server_name').val();
            var sender_id = $('#sender_id').val();
            var launched_status = $('#launched_status').val();
            whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
            $('#period_filter').val('');
            $('#checkAll').prop('checked',true);
            $('.toggle-vis').prop('checked',true);
        }
    });

    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        minDate: $("#start_date").datepicker("getDate"),
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        onClose: function() {
            var startDate = $('#start_date').datepicker('getDate');
            var endDate = $('#end_date').datepicker('getDate');
            if (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', minDate);
            }
            var brand_name = $('#brand_name').val();
            var parent_id = $('#langOpt').val();
            var campaign_group = $('#campaign_group').val();
            var campaign_sub_group = $('#campaign_sub_group').val();
            var campaign_type = $('#campaign_type').val();
            var campaign_through = $('#campaign_through').val();
            var alias_server_name = $('#alias_server_name').val();
            var sender_id = $('#sender_id').val();
            var launched_status = $('#launched_status').val();
            whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
            $('#checkAll').prop('checked',true);
            $('.toggle-vis').prop('checked',true);
        },
        onSelect: function() {
            $('#period_filter').val('');
        }
    });

    $('#langOpt').change(function(){
        var parent_id = $(this).val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $('#sender_id').val();
        var launched_status = $('#launched_status').val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });

    $('#brand_name').change(function(){
        var parent_id = $('#langOpt').val();
        var brand_name = $(this).val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $('#sender_id').val();
        var launched_status = $('#launched_status').val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });

    $('#campaign_group').change(function(){
        var parent_id = $('#langOpt').val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $(this).val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $('#sender_id').val();
        var launched_status = $('#launched_status').val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });

    $('#campaign_sub_group').change(function(){
        var parent_id = $('#langOpt').val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $(this).val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $('#sender_id').val();
        var launched_status = $('#launched_status').val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });

    $('#campaign_type').change(function(){
        var parent_id = $('#langOpt').val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $(this).val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $('#sender_id').val();
        var launched_status = $('#launched_status').val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });

    $('#campaign_through').change(function(){
        var parent_id = $('#langOpt').val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $(this).val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $('#sender_id').val();
        var launched_status = $('#launched_status').val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });

    $('#alias_server_name').change(function(){
        var parent_id = $('#langOpt').val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $(this).val();
        var sender_id = $('#sender_id').val();
        var launched_status = $('#launched_status').val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });

    $('#sender_id').change(function(){
        var parent_id = $('#langOpt').val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $(this).val();
        var launched_status = $('#launched_status').val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });

    $('#launched_status').change(function(){
        var parent_id = $('#langOpt').val();
        var brand_name = $('#brand_name').val();
        var campaign_group = $('#campaign_group').val();
        var campaign_sub_group = $('#campaign_sub_group').val();
        var campaign_type = $('#campaign_type').val();
        var campaign_through = $('#campaign_through').val();
        var alias_server_name = $('#alias_server_name').val();
        var sender_id = $('#sender_id').val();
        var launched_status = $(this).val();
        whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status)
    });
    
    $("body").on("change", "#period_filter", function(){
            var periodValue = $(this).val();
            var brand_name = $('#brand_name').val();
            var parent_id = $('#langOpt').val();
            var campaign_group = $('#campaign_group').val();
            var campaign_sub_group = $('#campaign_sub_group').val();
            var campaign_type = $('#campaign_type').val();
            var campaign_through = $('#campaign_through').val();
            var alias_server_name = $('#alias_server_name').val();
            var sender_id = $('#sender_id').val();
            var launched_status = $('#launched_status').val();


            //filter by today
            if(periodValue=='1'){
                var start_date = new Date().toJSON().slice(0,10);
                var end_date = new Date().toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
                $('#checkAll').prop('checked',true);
                $('.toggle-vis').prop('checked',true);
            }

            //filter by yesterday
            else if(periodValue=='2'){
                var start_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
                var end_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
                $('#checkAll').prop('checked',true);
                $('.toggle-vis').prop('checked',true);
            }

            //filter by this month
            else if(periodValue=='3'){
                var start_date = new Date();
                var end_date = new Date().toJSON().slice(0,10);
                start_date = new Date(start_date.setMonth(start_date.getMonth()));
                start_date = new Date(start_date.setDate(1));
                start_date = start_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
                $('#checkAll').prop('checked',true);
                $('.toggle-vis').prop('checked',true);
            }

            //filter by last month
            else if(periodValue=='4'){
                var start_date = new Date();
                var end_date = new Date();
                start_date = new Date(start_date.setDate(1));
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 1));
                start_date = start_date.toJSON().slice(0,10);
                end_date = new Date(end_date.setDate(1)-864e5);
                end_date = end_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
                $('#checkAll').prop('checked',true);
                $('.toggle-vis').prop('checked',true);
            }

            //filter by last 6 month
            else if(periodValue=='5')
            {
                var start_date = new Date();
                var end_date = new Date();
                end_date = new Date(end_date.setDate(1)-864e5);
                end_date = end_date.toJSON().slice(0,10);
                start_date = new Date(start_date.setDate(1));
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 6));
                start_date = start_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
                $('#checkAll').prop('checked',true);
                $('.toggle-vis').prop('checked',true);
            }

            //filter by this year
            else if(periodValue=='6')
            {
                var end_date = new Date().toJSON().slice(0,10);
                var makeDate = new Date(end_date);
                var start_date = new Date(makeDate.setMonth(0));
                start_date = new Date(makeDate.setDate(1));
                start_date = start_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
                $('#checkAll').prop('checked',true);
                $('.toggle-vis').prop('checked',true);
            }

            else if(periodValue=='7'){
                var end_date = new Date();
                var start_date = new Date();
                end_date = new Date(end_date.setMonth(0));
                end_date = new Date(end_date.setDate(1)-864e5).toJSON().slice(0,10);
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 12));
                start_date = new Date(start_date.setMonth(0));
                start_date = new Date(start_date.setDate(1)).toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                whistledashboarddata(parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
                $('#checkAll').prop('checked',true);
                $('.toggle-vis').prop('checked',true);
            }
        });

    function whistledashboarddata(parent_id=null,brand_name=null,campaign_group=null,campaign_sub_group=null,campaign_type=null,campaign_through=null,alias_server_name=null,sender_id=null,launched_status=null){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        getTotalSpends(start_date,end_date,parent_id,brand_name,campaign_group,campaign_sub_group,campaign_type,campaign_through,alias_server_name,sender_id,launched_status);
        $("#whistledashboard").DataTable().clear().destroy();
        $('#whistledashboard').DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "scrollX": true,
            "lengthChange": false,
            "pageLength":20,
            "bLengthChange": true,
            "scrollY":  400,
            "ordering": true,
            "scrollCollapse": true,
            "language": {
                search: '',
                searchPlaceholder: "Search..."
            },
            "order": [
                [0, "desc"]
            ],
            "ajax": {
                type: "POST",
                url: 'getWhistleDashboard',
                "data": {
                    "_token": "{{ csrf_token() }}",
                    "start_date": start_date,
                    "end_date": end_date,
                    "parent_id": parent_id,
                    "brand_name": brand_name,
                    "campaign_group":campaign_group,
                    "campaign_sub_group":campaign_sub_group,
                    "campaign_type":campaign_type,
                    "campaign_through":campaign_through,
                    "alias_server_name":alias_server_name,
                    "sender_id":sender_id,
                    "launched_status":launched_status
                },
            },
            "columnDefs": [{
                orderable: false,
                targets: 0
            }],
            "columns": [
                {
                    data: 'launch_id',
                    render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'launch_id',
                    render: function(data, type, row, meta) {
                        return row.launch_id;
                    }
                },
                {
                    data: 'account_id',
                    render: function(data, type, row, meta) {
                        return row.account_id;
                    }
                },
                {
                    data: 'brand_name',
                    render: function(data, type, row, meta) {
                        url = 'campaigndetails/' + row.account_id + '/' + row.campaign_id + '/' + row.from_date + '/' + row.to_date;
                        if (type === 'display') {
                            data = '<a href="' + url + '"  target="_blank">' + (row.brand_name ? row.brand_name : 'NA') + '</a>';
                        }
                        return data;
                    }
                },
                {
                    data: 'industry',
                    render: function(data, type, row, meta) {
                        return row.industry;
                    }
                },
                {
                    data: 'account_category',
                    render: function(data, type, row, meta) {
                        return row.account_category;
                    }
                },
                {
                    data: 'client',
                    render: function(data, type, row, meta) {
                        return row.client;
                    }
                },
                {
                    data: 'username',
                    render: function(data, type, row, meta) {
                        return row.username ? row.username.split(',')[0] : 'NA';
                    }
                },
                {
                    data: 'email',
                    render: function(data, type, row, meta) {
                        return row.username ? row.username.split(',')[1] : 'NA';
                    }
                },
                {
                    data: 'role',
                    render: function(data, type, row, meta) {
                        return row.username ? row.username.split(',')[2] : 'NA';
                    }
                },
                {
                    data: 'user_id',
                    render: function(data, type, row, meta) {
                        return row.user_id;
                    }
                },
                {
                    data: 'created_on',
                    render: function(data, type, row, meta) {
                        return row.created_on;
                    }
                },
                {
                    data: 'account_manager',
                    render: function(data, type, row, meta) {
                        return (row.account_manager ? row.account_manager : 'Not Assigned')
                    }
                },
                {
                    data: 'relation_manager',
                    render: function(data, type, row, meta) {
                        return (row.relation_manager ? row.relation_manager : 'Not Assigned')
                    }
                },
                {
                    data: 'account_type',
                    render: function(data, type, row, meta) {
                        return (row.account_type ? row.account_type : 'NA')
                    }
                },
                {
                    data: 'boarding_status',
                    render: function(data, type, row, meta) {
                        return (row.boarding_status ? row.boarding_status : 'NA')
                    }
                },
                {
                    data: 'sales_type',
                    render: function(data, type, row, meta) {
                        return (row.sales_type ? row.sales_type : 'NA')
                    }
                },
                {
                    data: 'state',
                    render: function(data, type, row, meta) {
                        return (row.state ? row.state : 'NA')
                    }
                },
                {
                    data: 'city',
                    render: function(data, type, row, meta) {
                        return (row.city ? row.city : 'NA')
                    }
                },
                {
                    data: 'group_name',
                    render: function(data, type, row, meta) {
                        return (row.group_name ? row.group_name : 'NA')
                    }
                },
                {
                    data: 'sub_group_name',
                    render: function(data, type, row, meta) {
                        return (row.sub_group_name ? row.sub_group_name : 'NA')
                    }
                },
                {
                    data: 'campaign_data',
                    render: function(data, type, row, meta) {
                        return (row.campaign_data ? row.campaign_data : 'NA')
                    }
                },
                {
                    data: 'campaign_url',
                    render: function(data, type, row, meta) {
                        return (row.campaign_url ? row.campaign_url : 'NA')
                    }
                },
                {
                    data: 'campaign_through',
                    render: function(data, type, row, meta) {
                        return (row.campaign_through ? row.campaign_through : 'NA')
                    }
                },
                {
                    data: 'gateway',
                    render: function(data, type, row, meta) {
                        return (row.gateway ? row.gateway : 'NA')
                    }
                },
                {
                    data: 'sender_name',
                    render: function(data, type, row, meta) {
                        return (row.sender_name ? row.sender_name : 'NA')
                    }
                },
                {
                    data: 'message_type',
                    render: function(data, type, row, meta) {
                        return (row.message_type ? row.message_type : 'NA')
                    }
                },
                {
                    data: 'datetime',
                    render: function(data, type, row, meta) {
                        return (row.datetime ? row.datetime : 'NA')
                    }
                },
                {
                    data: 'scheduled_status',
                    render: function(data, type, row, meta) {
                        const status = row.scheduled_status || 'NA';
                        switch (status) {
                            case 'IN-Queue':
                            case 'Scheduled':
                                return '<span class="text-warning">' + status + '</span>';
                            case 'Success':
                                return '<span class="text-success">' + status + '</span>';
                            case 'In-Process':
                                return '<span class="text-warning">' + status + '</span>';
                            case 'Scheduled-Stopped':
                            case 'API-Failed':
                            case 'Reverted-Credits(From Support)':
                                return '<span class="text-danger">' + status + '</span>';
                            default:
                                return '<span class="default_class">' + status + '</span>';
                        }
                    }
                },
                {
                    data: 'pushed_volume',
                    render: function(data, type, row, meta) {
                        return (row.pushed_volume ? row.pushed_volume : '0')
                    }
                },
                {
                    data: 'volume_count',
                    render: function(data, type, row, meta) {
                        return (row.volume_count ? row.volume_count : '0')
                    }
                },
                {
                    data: 'total_sms_units',
                    render: function(data, type, row, meta) {
                        return (row.total_sms_units ? row.total_sms_units : '0')
                    }
                },
                {
                    data: 'invalid_count',
                    render: function(data, type, row, meta) {
                        return (row.invalid_count ? row.invalid_count : '0')
                    }
                },
                {
                    data: 'dnd_ndnd_count',
                    render: function(data, type, row, meta) {
                        return (row.dnd_ndnd_count ? row.dnd_ndnd_count : '0')
                    }
                },
                {
                    data: 'exclude_count',
                    render: function(data, type, row, meta) {
                        return (row.exclude_count ? row.exclude_count : '0')
                    }
                },
                {
                    data: 'blacklist_count',
                    render: function(data, type, row, meta) {
                        return (row.blacklist_count ? row.blacklist_count : '0')
                    }
                },
                {
                    data: 'duplicate_numbers_count',
                    render: function(data, type, row, meta) {
                        return (row.duplicate_numbers_count ? row.duplicate_numbers_count : '0')
                    }
                },
                {
                    data: 'exclude_no_activity_numbers',
                    render: function(data, type, row, meta) {
                        return (row.exclude_no_activity_numbers ? row.exclude_no_activity_numbers : '0')
                    }
                },
                {
                    data: 'exclude_operator_count',
                    render: function(data, type, row, meta) {
                        return (row.exclude_operator_count ? row.exclude_operator_count : '0')
                    }
                },
                {
                    data: 'clicks',
                    render: function(data, type, row, meta) {
                        return (row.clicks ? row.clicks : '0')
                    }
                },
                {
                    data: 'unique_clicks',
                    render: function(data, type, row, meta) {
                        return (row.unique_clicks ? row.unique_clicks : '0')
                    }
                },
                {
                    data: 'bot_clicks',
                    render: function(data, type, row, meta) {
                        return (row.bot_clicks ? row.bot_clicks : '0')
                    }
                },
                {
                    data: 'whistle_actions',
                    render: function(data, type, row, meta) {
                        return (row.whistle_actions ? row.whistle_actions : '0')
                    }
                },
                {
                    data: 'total_spends',
                    render: function(data, type, row, meta) {
                        return (row.total_spends ? row.total_spends : '0')
                    }
                },
                {
                    data: 'master_cps',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let master_cps1 = (role == 'MASTER' || role == 'VLADMIN') ? (row.master_cps ? row.master_cps: '0.00') : '0.00';
                        return master_cps1
                    }
                },
                {
                    data: 'master_cps2',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let master_cps2 = (role == 'MASTER' || role == 'VLADMIN') ? (row.master_cps2 ? row.master_cps2: '0.00') : '0.00';
                        return master_cps2
                    }
                },
                {
                    data: 'master_cps3',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let master_cps3 = (role == 'MASTER' || role == 'VLADMIN') ? (row.master_cps3 ? row.master_cps3: '0.00') : '0.00';
                        return master_cps3
                    }
                },
                {
                    data: 'manager_cps',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let manager_cps1 = (role == 'MANAGER') ? (row.manager_cps ? row.manager_cps: '0.00') : '0.00';
                        return manager_cps1
                    }
                },
                {
                    data: 'manager_cps2',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let manager_cps2 = (role == 'MANAGER') ? (row.manager_cps2 ? row.manager_cps2: '0.00') : '0.00';
                        return manager_cps2
                    }
                },
                {
                    data: 'manager_cps3',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let manager_cps3 = (role == 'MANAGER') ? (row.manager_cps3 ? row.manager_cps3: '0.00') : '0.00';
                        return manager_cps3
                    }
                },
                {
                    data: 'cps',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let user_cps1 = (role == 'USER') ? (row.cps ? row.cps: '0.00') : '0.00';
                        return user_cps1
                    }
                },
                {
                    data: 'cps2',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let user_cps2 = (role == 'USER') ? (row.cps2 ? row.cps2: '0.00') : '0.00';
                        return user_cps2
                    }
                },
                {
                    data: 'cps3',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let user_cps3 = (role == 'USER') ? (row.cps3 ? row.cps3: '0.00') : '0.00';
                        return user_cps3
                    }
                },
                {
                    data: 'content1_volume',
                    render: function(data, type, row, meta) {
                        return (row.content1_volume ? row.content1_volume : '0.00')
                    }
                },
                {
                    data: 'content2_volume',
                    render: function(data, type, row, meta) {
                        return (row.content2_volume ? row.content2_volume : '0.00')
                    }
                },
                {
                    data: 'content3_volume',
                    render: function(data, type, row, meta) {
                        return (row.content3_volume ? row.content3_volume : '0.00')
                    }
                },
                {
                    data: 'sms1_unit',
                    render: function(data, type, row, meta) {
                        return (row.sms1_unit ? row.sms1_unit : '0.00')
                    }
                },
                {
                    data: 'sms2_unit',
                    render: function(data, type, row, meta) {
                        return (row.sms2_unit ? row.sms2_unit : '0.00')
                    }
                },
                {
                    data: 'sms3_unit',
                    render: function(data, type, row, meta) {
                        return (row.sms3_unit ? row.sms3_unit : '0.00')
                    }
                },
                {
                    data: 'CTRP',
                    render: function(data, type, row, meta) {
                        return (row.CTRP ? row.CTRP + ' %' : '0.00')
                    }
                },
                {
                    data: 'UCTR',
                    render: function(data, type, row, meta) {
                        return (row.UCTR ? row.UCTR + ' %' : '0.00')
                    }
                },
                {
                    data: 'lead_ratio',
                    render: function(data, type, row, meta) {
                        return (row.lead_ratio ? row.lead_ratio : '0.00')
                    }
                },
                {
                    data: 'CPC',
                    render: function(data, type, row, meta) {
                        return (row.CPC ? row.CPC : '0.00')
                    }
                },
                {
                    data: 'CPUC',
                    render: function(data, type, row, meta) {
                        return (row.CPUC ? row.CPUC : '0.00')
                    }
                },
                {
                    data: 'CPL',
                    render: function(data, type, row, meta) {
                        return (row.CPL ? row.CPL : '0.00')
                    }
                },
                {
                    data: 'CPM',
                    render: function(data, type, row, meta) {
                        return (row.CPM ? row.CPM : '0.00')
                    }
                },
                {
                    data: 'bot_clicks_ratio',
                    render: function(data, type, row, meta) {
                        return (row.bot_clicks_ratio ? row.bot_clicks_ratio : '0.00')
                    }
                },
                {
                    data: 'CTA',
                    render: function(data, type, row, meta) {
                        return (row.CTA ? row.CTA : '0.00')
                    }
                },
                {
                    data: 'UCTA',
                    render: function(data, type, row, meta) {
                        return (row.UCTA ? row.UCTA : '0.00')
                    }
                }
            ],
            fnRowCallback: function(nRow, aData) {
                return nRow;
            },
            footerCallback: function(footerrow, data, start, end, display) {
                var row = this.api();
                var api = this.api().ajax.json().footer_total;
                const numberFormatter = Intl.NumberFormat('en-IN');
                $(row.column(29).footer()).html(api['SMS_pushed']               ? numberFormatter.format(Number(api['SMS_pushed']).toFixed(2)) : 0);
                $(row.column(30).footer()).html(api['SMS_submitted']                ? numberFormatter.format(Number(api['SMS_submitted']).toFixed(2)) : 0);
                $(row.column(31).footer()).html(api['total_sms_units']             ? numberFormatter.format(Number(api['total_sms_units']).toFixed(2)) : 0);
                $(row.column(32).footer()).html(api['invalid_count']               ? numberFormatter.format(Number(api['invalid_count']).toFixed(2)) : 0);
                $(row.column(33).footer()).html(api['dnd_ndnd_count']              ? numberFormatter.format(Number(api['dnd_ndnd_count']).toFixed(2)) : 0);
                $(row.column(34).footer()).html(api['exclude_count']               ? numberFormatter.format(Number(api['exclude_count']).toFixed(2)) : 0);
                $(row.column(35).footer()).html(api['blacklist_count']             ? numberFormatter.format(Number(api['blacklist_count']).toFixed(2)) : 0);
                $(row.column(36).footer()).html(api['duplicate_numbers_count']     ? numberFormatter.format(Number(api['duplicate_numbers_count']).toFixed(2)) : 0);
                $(row.column(37).footer()).html(api['exclude_no_activity_numbers'] ? numberFormatter.format(Number(api['exclude_no_activity_numbers']).toFixed(2)) : 0);
                $(row.column(38).footer()).html(api['exclude_operator_count']      ? numberFormatter.format(Number(api['exclude_operator_count']).toFixed(2)) : 0);
                $(row.column(39).footer()).html(api['clicks']                      ? numberFormatter.format(Number(api['clicks']).toFixed(2)) : 0);
                $(row.column(40).footer()).html(api['unique_clicks']               ? numberFormatter.format(Number(api['unique_clicks']).toFixed(2)) : 0);
                $(row.column(41).footer()).html(api['bot_clicks']                  ? numberFormatter.format(Number(api['bot_clicks']).toFixed(2)) : 0);
                $(row.column(42).footer()).html(api['whistle_actions']             ? numberFormatter.format(Number(api['whistle_actions']).toFixed(2)) : 0);
                $(row.column(43).footer()).html(api['total_spends']                ? numberFormatter.format(Number(api['total_spends']).toFixed(2)) : 0);
                // $(row.column(43).footer()).html(api['master_cps']                  ? numberFormatter.format(Number(api['master_cps']).toFixed(2)) : 0);
                // $(row.column(44).footer()).html(api['master_cps2']                 ? numberFormatter.format(Number(api['master_cps2']).toFixed(2)) : 0);
                // $(row.column(45).footer()).html(api['master_cps3']                 ? numberFormatter.format(Number(api['master_cps3']).toFixed(2)) : 0);
                // $(row.column(46).footer()).html(api['manager_cps']                 ? numberFormatter.format(Number(api['manager_cps']).toFixed(2)) : 0);
                // $(row.column(47).footer()).html(api['manager_cps2']                ? numberFormatter.format(Number(api['manager_cps2']).toFixed(2)) : 0);
                // $(row.column(48).footer()).html(api['manager_cps3']                ? numberFormatter.format(Number(api['manager_cps3']).toFixed(2)) : 0);
                // $(row.column(49).footer()).html(api['cps']                         ? numberFormatter.format(Number(api['cps']).toFixed(2)) : 0);
                // $(row.column(50).footer()).html(api['cps2']                        ? numberFormatter.format(Number(api['cps2']).toFixed(2)) : 0);
                // $(row.column(51).footer()).html(api['cps3']                        ? numberFormatter.format(Number(api['cps3']).toFixed(2)) : 0);
                $(row.column(53).footer()).html(api['content1_volume']             ? numberFormatter.format(Number(api['content1_volume']).toFixed(2)) : 0);
                $(row.column(54).footer()).html(api['content2_volume']             ? numberFormatter.format(Number(api['content2_volume']).toFixed(2)) : 0);
                $(row.column(55).footer()).html(api['content3_volume']             ? numberFormatter.format(Number(api['content3_volume']).toFixed(2)) : 0);
                $(row.column(56).footer()).html(api['sms1_unit']                   ? numberFormatter.format(Number(api['sms1_unit']).toFixed(2)) : 0);
                $(row.column(57).footer()).html(api['sms2_unit']                   ? numberFormatter.format(Number(api['sms2_unit']).toFixed(2)) : 0);
                $(row.column(58).footer()).html(api['sms3_unit']                   ? numberFormatter.format(Number(api['sms3_unit']).toFixed(2)) : 0);
                $(row.column(59).footer()).html(api['CTRP']                        ? Number(api['CTRP']).toFixed(2) : 0.00);
                $(row.column(60).footer()).html(api['UCTR']                        ? Number(api['UCTR']).toFixed(2) : 0.00);
                $(row.column(61).footer()).html(api['lead_ratio']                  ? Number(api['lead_ratio']).toFixed(2) : 0.00);
                $(row.column(62).footer()).html(api['CPC']                         ? Number(api['CPC']).toFixed(2) : 0.00);
                $(row.column(63).footer()).html(api['CPUC']                        ? Number(api['CPUC']).toFixed(2) : 0.00);
                $(row.column(64).footer()).html(api['CPL']                         ? Number(api['CPL']).toFixed(2) : 0.00);
                $(row.column(65).footer()).html(api['CPM']                         ? Number(api['CPM']).toFixed(2) : 0.00);
                $(row.column(66).footer()).html(api['bot_clicks_ratio']            ? Number(api['bot_clicks_ratio']).toFixed(2) : 0.00);
                $(row.column(67).footer()).html(api['CTA']                         ? Number(api['CTA']).toFixed(2) : 0.00);
                $(row.column(68).footer()).html(api['UCTA']                        ? Number(api['UCTA']).toFixed(2) : 0.00);
            },
        });
    }

    $('.toggle-vis').on('click', function (e) {
        if ($('.toggle-vis:checked').length == $('.toggle-vis').length){
             $('#checkAll').prop('checked',true);
        }
        else {
            $('#checkAll').prop('checked',false);
        }
        // Get the column API object
        var column =  $("#whistledashboard").DataTable().column($(this).attr('data-column'));
        // Toggle the visibility
        column.visible(!column.visible());
    });

    $("#checkAll").click(function () {
     $('.toggle-vis').not(this).prop('checked', this.checked);
     $(".dataTables_processing").css("display","block");
     setTimeout(() => {
     $(".dataTables_processing").css("display","none");
     }, 1000);
     for ( var i=1 ; i<=$('.toggle-vis').length; i++ ) {
        if($(this).is(':checked')){
         $("#whistledashboard").DataTable().column( i ).visible(  true );
        }else{
         $("#whistledashboard").DataTable().column( i ).visible(  false );

        }
    }
 });
 $("document").ready(function() {
     $('.dropdown-item').on('click', function(e) {
    if($(this).hasClass('toggle-column')) {
        e.stopPropagation();
    }
});
});
</script>
@endsection