@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') Dashboard @endsection
<style type="text/css">

    .form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio{
        display: unset;
    }
    table.dataTable thead, table.dataTable tbody {
white-space: pre;
}
.d-inline-flex {
    margin-bottom: -50px;
    position:relative;
    z-index:1;
}
.table-responsive #maindashboard_filter{
    margin-bottom: 10px;
}
</style>
<script>
$(document).ready(function(){
    //multi select for users
    $('#langOpt').multiselect({
        includeSelectAllOption: true,
        allSelectedText: 'All Users selected',
        nonSelectedText: 'No User selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth:'300px'
    });
    $('#maindashboard').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(){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var parent_id = $('#langOpt').val();

        $('#from_date_hidden').val(start_date);
        $('#to_date_hidden').val(end_date);
        $('#parent_id_hidden').val(parent_id);
        $(this).submit();
    });
    dashboardselection();
});
    
</script>

<div class="container-fluid">
    <div class="card">

        <div class="card-header">
            <h3>Dashboard

            @can('hasExcelPermission')
                <form class="pull-right" method="post" action="{{ url('exportmaindashboard') }}">
                @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"/>
            </form>
            @endcan
            </h3>
        </div>
    <div class="card-body">
     <form class="d-inline-flex">
            <div class="form-group col-md-3"> 
                <label for="start_date">Choose Account &nbsp; </label>    
                <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-4">
                        <label for="period_filter">Choose Time Period</label>
                        <select id="period_filter" class="form-control">
                            <option value=''>Select</option>
                            <option value="1">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-3">
                <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-3">
                <label for="end_date">To Date</label>
                <input type="text" class="form-control" id="end_date" name="end_date">
            </div>
</form>
    <div class="table-responsive">
        <table class="table-bordered" id="maindashboard">
            <thead>
                <tr>
                <th>Sr. No</th>
                <th>Account ID</th>
                <th>Brand Name</th>
                <th>Industry</th>
                <th>Account Category</th>
                <th>Client</th>
                <th>User Name</th>
                <th>Email</th>
                <th>Account Manager</th>
                <th>Relationship Manager</th>
                <th>Campaign Group</th>
                <th>Campaign Sub Group</th>
                <th>Campaign Data</th>
                <th>Campaign Type</th>
                <th>Total SMS Pushed</th>
                <th>Total 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>Total Clicks</th>
                <th>Unique Clicks</th>
                <th>Whistle Actions</th>
                <!-- <th>UCR %</th> -->
                <th>CTR %</th>
                <th>CPUC</th>
                <th>CPA</th>
                <th>RCPA</th>
                <th>ROI %</th>
                <th>Spends</th>
                <th>Revenue</th>
                <th>ROI</th>
                </tr>
            </thead>
            <tbody>
                @foreach($dashboarddt['data'] as $key=>$val)
                    <tr>
                        <td>{{$key+1}}</td>
                        <td>{{$val['account_id']}}</td>
                        <td><a href="{{ url('campaigndetails/'.$val['parent_id'].'/'.$val['DT_RowId'].'/'.$val['from_date'].'/'.$val['to_date']) }}"  target="_blank">{{$val['Brand Name']}}</a></td>
                        <td>{{$val['Industry']}}</td>
                        <td>{{$val['Account Category']}}</td>
                        <td>{{$val['Client']}}</td>
                        <td>{{$val['Username']}}</td>
                        <td>{{$val['Email']}}</td>
                        <td>{{$val['Account Manager']}}</td>
                        <td>{{$val['Relationship Manager']}}</td>
                        <td>{{$val['Campaign Group']}}</td>
                        <td>{{$val['Campaign Sub Group']}}</td>
                        <td>{{$val['Campaign Data']}}</td>
                        <td>{{$val['Campaign Type']}}</td>
                        <td>{{$val['Total SMS Pushed']}}</td>
                        <td>{{$val['Total SMS Submitted']}}</td>
                        <td>{{$val['Total SMS Units']}}</td>
                        <td>{{$val['Invalid Numbers']}}</td>
                        <td>{{$val['DND Numbers']}}</td>
                        <td>{{$val['Already Used Numbers']}}</td>
                        <td>{{$val['Blacklisted Numbers']}}</td>
                        <td>{{$val['duplicate_numbers_count']}}</td>
                        <td>{{$val['exclude_no_activity_numbers']}}</td>
                        <td>{{$val['exclude_operator_count']}}</td>
                        <td>{{$val['Total Clicks']}}</td>
                        <td>{{$val['Unique Clicks']}}</td>
                        <td>{{$val['Whistle Actions']}}</td>
                        <td>{{$val['CTR %']}}</td>
                        <td>{{$val['CPUC']}}</td>
                        <td>{{$val['CPA']}}</td>
                        <td>{{$val['RCPA']}}</td>
                        <td>{{$val['ROI %']}} %</td>
                        <td>{{$val['Spends']}}</td>
                        <td>{{$val['Revenue']}}</td>
                        <td>{{$val['ROI']}}</td>
                    </tr>
                @endforeach
                </tbody>
                <tfoot>
                <tr>
                    <td>Total</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>
                    <td>NA</td>

                    <td title="Total SMS Pushed"></td>
                    <td title="Total SMS Submitted"></td>
                    <td title="Total SMS Units"></td>
                    <td title="Invalid Numbers"></td>
                    <td title="DND Numbers"></td>
                    <td title="Already Used Numbers"></td>                  

                    <td title="Blacklisted Numbers"></td>
                    <td title="Duplicate Numbers"></td>
                    <td title="Exclude No Activity Numbers"></td>
                    <td title="Exclude Operator Numbers"></td>                   
                    <td title="Total Clicks"></td>
                    
                    <td title="Unique Clicks"></td>
                    <td title="Whistle Actions"></td>
                    <td title="CTRP"></td>
                    <td title="CPUC"></td>
                    <td title="CPA"></td>
                    <td title="RCPA"></td>
                    
                    <td title="ROI %"></td>
                    <td title="Spends"></td>
                    <td title="Revenue"></td>
                    <td title="ROI"></td> 
                </tr>
                </tfoot>
            </tbody>

        </table>
    </div>

    </div>

    </div>

</div>

<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>

<script>
  
    $('#langOpt').multiselect({
        enableFiltering: true,
        includeSelectAllOption: true,
        selectAllJustVisible: false,
        templates: {
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" 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);
            dashboardselection();
            $('#period_filter').val('');
        }
    });

    $("#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);
            }
            dashboardselection();
        },
        onSelect: function() {
            $('#period_filter').val('');
        }
    });

    $('#langOpt').change(function(){
        var parent_id = $(this).val();
        dashboardselection()
    });

    
    $("body").on("change", "#period_filter", function(){
            var periodValue = $(this).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);
                dashboardselection();
            }

            //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);
                dashboardselection();
            }

            //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);
                dashboardselection();
            }

            //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);
                dashboardselection();
            }

            //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);
                dashboardselection();
            }

            //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);
                dashboardselection();
            }

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

    function dashboardselection(){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var parent_id = $('#langOpt').val();
        $("#maindashboard tbody tr").html('<td valign="top" colspan="19" class="dataTables_empty class="text-center">Loading, please wait...</td>');
        $.ajax({
            type: "POST",
            url: 'dashboard',
            data: {
                "_token"     : "{{ csrf_token() }}",
                "start_date" : start_date,
                "end_date"   : end_date,
                "parent_id"  : parent_id,
            },
            success: function(dashboarddt) {
                var dashboarddata = dashboarddt['data'];
                $("#maindashboard").DataTable().clear().destroy();
                $('#maindashboard').on('shown.bs.tab', function(e){
                    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();  
                });
                $('#maindashboard').DataTable({data: dashboarddata, "scrollX": true, "bLengthChange": false,
                "language": { "search": "", "searchPlaceholder":"Search ..." },
                aoColumns: [
                    { data: 'Sr.No',
                        render: function(data, row){
                            data = row+1;
                            return data;
                        }
                    },
                    { data: 'account_id', },
                    { data: 'Brand Name',
                        render: function(data, type, row, meta){
                            url = 'campaigndetails/' + row.parent_id + '/' + row.DT_RowId + '/' + row.from_date + '/' + row.to_date;
                            if(type === 'display'){
                                data = '<a href="'+url+'"  target="_blank">' + data + '</a>';
                            }
                            return data;
                        }
                    },
                    { data: 'Industry' },
                    { data: 'Account Category' },
                    { data: 'Client' },
                    { data: 'Username' },
                    { data: 'Email' },
                    { data: 'Account Manager' },
                    { data: 'Relationship Manager' },
                    { data: "Campaign Group" },
                    { data: "Campaign Sub Group" },
                    { data: "Campaign Data" },
                    { data: "Campaign Type" },
                    { data: "Total SMS Pushed" },
                    { data: "Total SMS Submitted" },
                    { data: "Total SMS Units" },
                    { data: "Invalid Numbers" },
                    { data: "DND Numbers" },
                    { data: "Already Used Numbers" },
                    { mData: "Blacklisted Numbers" },
                    { mData: "duplicate_numbers_count" },
                    { mData: "exclude_no_activity_numbers" },
                    { mData: "exclude_operator_count" },
                    { mData: "Total Clicks" },
                    { mData: "Unique Clicks" },
                    { mData: "Whistle Actions" },
                    { data: 'CTR %',
                        render: function(data, type, row, meta){
                            return data+'%';
                        }
                    },
                    { mData: "CPUC" },
                    { mData: "CPA" },
                    { mData: "RCPA" },
                    { data: 'ROI %',
                        render: function(data, type, row, meta){
                            return data+'%';
                        } 
                    },
                    { mData: "Spends" },
                    { mData: "Revenue" },
                    { mData: "ROI" }
                ],
                fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    $('td:eq(0)', nRow).html(iDisplayIndexFull + 1);
                },
                footerCallback: function ( footerrow, data, start, end, display ) {
                    var api = this.api();
                    var count = api.rows( {search:'applied'} ).count();
                    const toINR = new Intl.NumberFormat('en-IN', {
                                currency: 'INR',
                                minimumFractionDigits: 2
                            });
                    // ---------------------
                    // Remove the formatting to get integer data for summation
                    var intVal = function ( i ) {
                        return typeof i === 'string' ? i.replace(/[\%,]/g, '')*1 : typeof i === 'number' ? i : 0;
                    };
                    // Total over search
                    pageTotalSMSPushed = api.column( 14, {search: 'applied' } ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // Update footer
                    pageTotalSMSSubmitted = api.column( 15, { search: 'applied' } ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalSMSUnits = api.column( 16, { search: 'applied' } ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalInvalidNumbers = api.column( 17, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalDNDNumbers = api.column( 18, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalAlreadyUsedNumbers = api.column( 19, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalBlacklistedNumbers = api.column( 20, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalduplicate_numbers_count = api.column( 21, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalexclude_no_activity_numbers = api.column( 22, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalexclude_operator_count = api.column( 23, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalTotalClicks = api.column( 24, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalUniqueClicks = api.column( 25, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    pageTotalWhistleActions = api.column( 26, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= intVal(a) + intVal(b);
                        }, 0 );
                    // // -------------------------
                    //pageTotalCPUC = api.column( 27, { search: 'applied'} ).data().reduce( function (a, b) {
						//return result= (intVal(a) + intVal(b)).toFixed(2);
                    //}, 0 );
                    // // -------------------------
                    pageTotalCPA = (api.column( 29, { search: 'applied' } ).data()
                        .reduce( function (a, b) {
                        return result= (intVal(a) + intVal(b)).toFixed(2);
                    }, 0 ));
	                // // -------------------------
                    len_rcpa = api.column( 30, { search: 'applied' } ).data().filter(a=>parseFloat(a)!=0).length;
                    pageTotalRCPA = (api.column( 30, { search: 'applied' } ).data()
                        .reduce( function (a, b) {
                        return result= (intVal(a) + intVal(b)).toFixed(2);
                    }, 0 ))/len_rcpa;
                    if(!isFinite(pageTotalRCPA)){pageTotalRCPA = 0.00;}
                    pageTotalRCPA = pageTotalRCPA.toFixed(2);
                    // -------------------------
                    pageTotalROIPercentage = api.column( 31, { search: 'applied'} ).data()
                        .reduce( function (a, b) {
                            return result= (intVal(a) + intVal(b)).toFixed(2);
                        }, 0 );
                    if(count!=0) {
                        pageTotalROIPercentage = pageTotalROIPercentage/count;
                    } else {
                        pageTotalROIPercentage = 0;
                    }
                    // // -------------------------
                    pageTotalSpends = api.column( 32, { search: 'applied'} ).data().reduce( function (a, b) {
                        return result= (intVal(a) + intVal(b)).toFixed(2);
                    }, 0 );
                    // // -------------------------
                    pageTotalRevenue = api.column( 33, { search: 'applied'} ).data().reduce( function (a, b) {
                        return result= (intVal(a) + intVal(b)).toFixed(2);
                    }, 0 );
                    // // -------------------------
                    pageTotalROI = api.column( 34, { search: 'applied'} ).data().reduce( function (a, b) {
                        return result= (intVal(a) + intVal(b)).toFixed(2);
                    }, 0 );
                    //  ----- calculate totals on serach -----
                    pageTotalCPA = (pageTotalSpends/pageTotalWhistleActions).toFixed(2);
                    if(!isFinite(pageTotalCPA)){pageTotalCPA = 0.00;}

                    pageTotalCPUC = (pageTotalSpends/pageTotalUniqueClicks).toFixed(2);
                    if(!isFinite(pageTotalCPUC)){pageTotalCPUC = 0.00;}

                    pageTotalRevenue = (pageTotalRCPA*pageTotalWhistleActions).toFixed(2);
                    if(!isFinite(pageTotalRevenue)){pageTotalRevenue = 0.00;}

                    pageTotalROI = (pageTotalRevenue - pageTotalSpends).toFixed(2);
                    if(!isFinite(pageTotalROI)){pageTotalROI = 0.00;}

                    pageTotalROIPercentage = (100*(pageTotalROI/pageTotalRevenue)).toFixed(2);
                    if(!isFinite(pageTotalROIPercentage)){pageTotalROIPercentage = 0.00;}
                    //------------------------------------
                    pageTotalCTRPercentage = (100*(pageTotalTotalClicks/pageTotalSMSSubmitted)).toFixed(2);
                    if(!isFinite(pageTotalCTRPercentage)){pageTotalCTRPercentage = 0.00;}
                    // ------------------------------------
                    $( api.column( 14 ).footer() ).html( pageTotalSMSPushed );
                    $( api.column( 15 ).footer() ).html( pageTotalSMSSubmitted );
                    $( api.column( 16 ).footer() ).html( pageTotalSMSUnits );
                    $( api.column( 17 ).footer() ).html( pageTotalInvalidNumbers );
                    $( api.column( 18 ).footer() ).html( pageTotalDNDNumbers );
                    $( api.column( 19 ).footer() ).html( pageTotalAlreadyUsedNumbers );
                    $( api.column( 20 ).footer() ).html( pageTotalBlacklistedNumbers );
                    $( api.column( 21 ).footer() ).html( pageTotalduplicate_numbers_count );
                    $( api.column( 22 ).footer() ).html( pageTotalexclude_no_activity_numbers);
                    $( api.column( 23 ).footer() ).html( pageTotalexclude_operator_count );
                    $( api.column( 24 ).footer() ).html( pageTotalTotalClicks );
                    $( api.column( 25 ).footer() ).html( pageTotalUniqueClicks );
                    $( api.column( 26 ).footer() ).html( pageTotalWhistleActions );
                    $( api.column( 27 ).footer() ).html( pageTotalCTRPercentage+'%');
                    $( api.column( 28 ).footer() ).html( pageTotalCPUC);
                    $( api.column( 29 ).footer() ).html( pageTotalCPA );
                    $( api.column( 30 ).footer() ).html( pageTotalRCPA );
                    $( api.column( 31 ).footer() ).html( pageTotalROIPercentage+'%');
                    $( api.column( 32 ).footer() ).html( pageTotalSpends );
                    $( api.column( 33 ).footer() ).html( pageTotalRevenue );
                    $( api.column( 34 ).footer() ).html( pageTotalROI );
                },
                });
            }
        });
    }
</script>
@endsection