@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')
Whistle Feed Report
@endsection
<style>
    .dataTables_scroll {
        overflow: auto;
    }
    .mb-n4{
        margin-bottom: 0rem !important;
    }
    #report-main-table_filter{
        margin-top: -55px;
        margin-bottom: 2rem;
        margin-right: 13px;
    }
    .dropdown-item input[type="checkbox"]{
        cursor: pointer !important;
    }
    .optionalFilter{
        margin-top    : 33px;
        margin-bottom : 17px;
    }
    #runReport{
        float: right;
        height: 28px;
    }
</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-0 mr-0 mt-4 mb-n4">
            <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.report')</div>
            <!-- count section end -->
            <div class="col-md-9">
                <button type="submit" id="runReport" class="btn btn-sm excel-btn border-0 border-radius-0"> Run Report</button>
                @can('hasExcelPermission')
                <div class="pull-right mr-3">
                    @csrf
                    <button type="submit" class="export-feedstatsreport btn excel-btn btn-sm border-0 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="account_id" id="account_id_hidden" />
                    <input type="hidden" name="websiteId" id="website_hidden" />
                    <input type="hidden" name="campaginName" id="campagin_hidden" />
                    <input type="hidden" name="client_filter" id="client_filter_val_hidden" />
                    <input type="hidden" name="search" id="search_filter_hidden"/> --}}
                </div>
                @endif
            </div>
        </div>
        <div class="card-body table-responsive">
            <form>
                <div class="d-flex flex-wrap">
                    <div class="form-group col-md-2 pl-0 mr-3">
                        <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 pl-0 mr-3">
                        <label for="start_date">From Date</label>
                        <input type="text" class="form-control" id="start_date" name="start_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
                    </div>

                    <div class="form-group col-md-2 pl-0 mr-3">
                        <label for="end_date">To Date</label>
                        <input type="text" class="form-control" id="end_date" name="end_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
                    </div>
                    <div class="form-group col-md-2 pl-0 mr-3">
                        <label>Account ID</label>
                        <input type="text" class="form-control" id="account_id" name="account_id" placeholder="Search Account ID" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                    </div>
                    <div class="form-group col-md-2 pl-0 mr-3">
                        <label for="client_filter">Client</label><br>
                        <select class="form-control" name="client_filter[]" multiple id="client_filter">
                            @foreach ($feed_accname as $value)
                            <option value="{{$value->id}}">
                                {{ $value->account_name }}-({{$value->id}})
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-sm-2 pl-0 mr-3"> 
                        <label>Publisher ID</label>
                        <input type="text" class="form-control" id="publisher_id" name="publisher_id" placeholder="Search Publisher ID" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                    </div>
                    <div class="form-group col-sm-2 pl-0 mr-3"> 
                        <label for="start_date">Website ID  &nbsp; </label><br>
                        @if( count($website_name) > 0)
                            <select class="form-control" name="website[]" multiple id="website">
                                @foreach ($website_name as $value)
                                    <option value="{{$value->id}}">
                                    {{ $value->website }}-({{$value->id}})
                                    </option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                    <div class="form-group col-md-2 pl-0 mr-3">
                        <label>Campagin ID</label>
                        <input type="text" class="form-control" id="campaign_id" name="campaign_id" placeholder="Search Campaign ID" onkeypress="return event.charCode >= 48 && event.charCode <= 57"> 
                    </div>
                    <div class="form-group col-md-2 pl-0">
                        <label>Creative ID</label>
                        <input type="text" class="form-control" id="creative_id" name="creative_id" placeholder="Search Creative ID" onkeypress="return event.charCode >= 48 && event.charCode <= 57"> 
                    </div>
                    <div class="btn-group col-md-2 optionalFilter">
                        <a class="dropdown-toggle column-toggle-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-filter" aria-hidden="true"></i></a>
                        <div class="dropdown-menu">
                            <ul class="dropdown-item toggle-column"> 
                                <li><label><input type="checkbox" id="all_stats_optional_columns"> Select All</label></li>
                                <li><label><input type="checkbox" class="statsOptionColumn" data-column="2" data-column-name="creative_id"> Creative ID</label></li>
                                <li><label><input type="checkbox" class="statsOptionColumn" data-column="12" data-column-name="date"> Impression Date</label></li>
                                <li><label><input type="checkbox" class="statsOptionColumn" data-column="13" data-column-name="month"> Month</label></li>
                                <li><label><input type="checkbox" class="statsOptionColumn" data-column="22" data-column-name="CR"> CR</label></li>
                                <li><label><input type="checkbox" class="statsOptionColumn" data-column="23" data-column-name="Cost"> Cost</label></li>
                                <li><label><input type="checkbox" class="statsOptionColumn" data-column="24" data-column-name="feed_revenue"> Feed Revenue</label></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
            <div class="col-8 pl-0 mb-4 custom-z-index">
                @include('whistle_feed.feed_reports.clearFilter')
            </div>
            <table class="table-bordered table-hover text-center" id="report-main-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Campaign ID</th>
                        <th>Creative ID </th>
                        <th>Publisher ID</th>
                        <th>Website ID</th>
                        <th>Website Name</th>
                        <th>Account ID </th>
                        <th>Client</th>
                        <th>Brand Name</th>
                        <th>Email</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Impression Date</th> 
                        <th>Month</th> 
                        <th>Viewable Impressions</th>
                        <th>Clicks</th>
                        <th>Conversions</th>
                        <th>Likes</th>
                        <th>Shares</th>
                        <th>Clicks From Shares</th>
                        <th>Conversions From Shares</th>
                        <th>CTR % <span data-toggle="tooltip" title="(clicks * (100 / Impressions))"><i class="fa fa-info-circle" aria-hidden="true"></i></span> </th>
                        <th>CR</th>
                        <th>Cost</th>
                        <th>Feed Revenue</th>
                    </tr>
                </thead>
                <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>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
    <script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
    <script type="application/javascript">
        $(document).ready(function() {
            statsreportlist();
            // clear all filter script
            $('.clear_filter').on('click',function(){
                $('#account_id').val('');
                $('#publisher_id').val('');
                $('#creative_id').val('');
                $('#campaign_id').val('');
                $('#client_filter input[type="checkbox"]').prop('checked', false);
                $('#client_filter option:selected').prop('selected', false);
                $('#client_filter').multiselect('refresh');
                $('#website input[type="checkbox"]').prop('checked', false);
                $('#website option:selected').prop('selected', false);
                $('#website').multiselect('refresh');
                $('#period_filter   option:eq(1)').prop('selected',true);
                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);
                statsreportlist();
            });
       
            /**select from date here***/
            $("#start_date").datepicker({
                dateFormat: 'yy-mm-dd',
                maxDate: 0,
                autoclose: true,
                todayHighlight: true,
                endDate: 'today',
                onSelect: function(selectedDate) {
                    var startDate = $('#start_date').datepicker('getDate');
                    var todaysDate = new Date();
                    let year = startDate.getFullYear();
                    let month = startDate.getMonth();
                    let daysInMonth = new Date(year, month + 1, 0).getDate();
                    let currentMonth = new Date().getMonth();
                    let currentDate = new Date();
                    let timeDifference = currentDate-startDate
                    let daysDifferent = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
                     var maxdaycount;
                    if(startDate){
                        maxdaycount = new Date(startDate);
                        maxdaycount.setDate(maxdaycount.getDate() + daysInMonth-1);
                    }
                    if (todaysDate.setHours(0,0,0,0) == startDate.setHours(0,0,0,0)) {
                        $('#end_date').datepicker('option', 'maxDate', startDate);
                    } 
                    else if((month==currentMonth)|| (daysDifferent<=daysInMonth)){
                        let today = new Date()
                        let formattedDate = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
                        $('#end_date').datepicker('option', 'maxDate', formattedDate);
                    }
                    else {
                        $('#end_date').datepicker('option', 'maxDate', maxdaycount);
                    }
                    $('#end_date').datepicker('option', 'minDate', startDate);
                    $('#end_date').datepicker('setDate', startDate);
                    var account_id = $('#account_id').val();
                    var website = $('#website').val();
                    var campaign_id = $('#campaign_id').val();
                    var client_filter = $('#client_filter').val();
                    var publisher_id  = $('#publisher_id').val();
                    // statsreportlist(account_id,website,campaign_id,client_filter,publisher_id);
                    $('#account_id').val('');
                    $('#website').val('');
                    $('#campaign_id').val('');
                    $('#client_filter').val('');
                    $('#publisher_id').val('');
                }
            });

            /**select to date here***/
            $("#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 (startDate == null) {
                        $('#start_date').datepicker('setDate', endDate);
                    }
                    if (endDate < startDate) {
                        var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                        $('#end_date').datepicker('setDate', minDate);
                    }
                    var account_id = $('#account_id').val();
                    var website = $('#website').val();
                    var campaign_id = $('#campaign_id').val();
                    var client_filter = $('#client_filter').val();
                    var publisher_id  = $('#publisher_id').val();
                    // statsreportlist(account_id,website,campaign_id,client_filter,publisher_id);
                },
                onSelect: function() {
                    $('#account_id').val('');
                    $('#website').val('');
                    $('#campaign_id').val('');
                    $('#client_filter').val('');
                    $('#publisher_id').val('');
                }
            });

            $("body").on("change", "#period_filter", function() {
                var periodValue   = $(this).val();
                var account_id    = $('#account_id').val();
                var creative_id   = $('#creative_id').val();
                var website       = $('#website').val();
                var campaign_id   = $('#campaign_id').val();
                var client_filter = $('#client_filter').val();
                var publisher_id  = $('#publisher_id').val();
                $("#start_date").val('');
                $("#end_date").val('');
                if (periodValue != '') {
                    //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', 'maxDate', start_date);
                        $('#end_date').datepicker('setDate', end_date);
                        // statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
                    }

                    //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', 'maxDate', start_date);
                        $('#end_date').datepicker('setDate', end_date);
                        // statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
                    }

                    //filter by this month
                    else if (periodValue == '3') {
                        var start_date = new Date();
                        var end_date = new Date();
                        end_date =   end_date.setDate(end_date.getDate());
                        end_date = new Date(end_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('option', 'maxDate', end_date); // Set maxDate to today
                        $('#end_date').datepicker('setDate', end_date);
                        $('#end_date').val(end_date); // Ensure end date is set in the input field
                        // statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
                    }

                    //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);
                        // statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
                    }

                    //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);
                        // statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
                    }

                    //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);
                        end_date = new Date();
                        end_date =   end_date.setDate(end_date.getDate());
                        end_date = new Date(end_date).toJSON().slice(0, 10);
                        $('#start_date').val(start_date);
                        $('#end_date').datepicker('option', 'minDate', start_date);
                        $('#end_date').datepicker('option', 'maxDate', end_date); // Set maxDate to today
                        $('#end_date').datepicker('setDate', end_date);
                        $('#end_date').val(end_date); // Ensure end date is set in the input field
                        // statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
                    }
                    //filter by previous year
                    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);
                        // statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
                    }
                }
            });
            
        });
        //all records displaying here
        function statsreportlist(account_id=null,website=null,campaign_id=null,client_filter=null,creative_id=null,publisher_id=null) {
            $('.export-feedstatsreport').removeAttr('disabled');
            $('.export-feedstatsreport').removeClass('bg-secondary border-0');
            var optionalColumn = $("input:checkbox:checked[data-column-name]").map(function() {
            return $(this).data('column-name');
            }).get();
            var start_date    = $('#start_date').val();
            var end_date      = $('#end_date').val();
            var website       = $('#website').val();
            var campaign_id   = $('#campaign_id').val();
            var client_filter = $('#client_filter').val();
            var account_id    = $('#account_id').val();
            var creative_id   = $('#creative_id').val();
            $("#report-main-table").DataTable().clear().destroy();
            $('#report-main-table').DataTable({
                "processing": true,
                "lengthChange": false,
                "serverSide": true,
                "paging": true,
                "searching": true,
                "scrollX": true,
                "pageLength": 50,
                "ordering": true,
                "lengthChange": false,
                "scrollY":  400,
                "scrollCollapse": true,
                "fixedHeader":{ header: true},
                "language": {
                    search: "",
                    searchPlaceholder: "Search..."
                },
                "order": [
                    [14, "desc"]
                ],
                "ajax": {
                    "url"  : "{{ url('getStatsReport') }}",
                    "type" : "POST",
                    "data" : {
                        _token          : "{{csrf_token()}}",
                        "start_date"    : start_date,
                        "end_date"      : end_date,
                        "account_id"    :account_id,
                        "website"       : website,
                        "campaign_id"   : campaign_id,
                        "client_filter" : client_filter,
                        "creative_id"   : creative_id,
                        "publisher_id"  : publisher_id,
                        "optionalColumn": optionalColumn
                    },
                    "dataType" : "json",
                },
                "columnDefs": [
                {
                    orderable : true,
                    targets   : [2, 12, 13, 22, 23, 24], // Specifing the Optional column indices to hide
                    visible   : false
                }],
                "columns": [
                    {
                        data: "id",
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: "campaign_id",
                        render: function(data, type, row, meta) {
                            return ((row.campaign_id) ? row.campaign_id : "NA")
                        }
                    },
                    { 
                        data: "creative_id",
                        render: function(data, type, row, meta){
                            return ((row.creative_id)  ? row.creative_id :  "NA")
                        }
                    },
                    { 
                        data: "publisher_id",
                        render: function(data, type, row, meta){
                            return ((row.publisher_id)  ? row.publisher_id :  "NA")
                        },
                        searchable: true,
                    },
                    { 
                        data: "pencil_id",
                        render: function(data, type, row, meta){
                            return ((row.pencil_id)  ? 'WFP'+row.pencil_id :  "NA")
                        }
                    },
                    {
                        data: "website",
                        render: function(data, type, row, meta){
                            data = (row.website)  ? '<a href = ' + row.website + ' target="_blank"> ' + row.website + ' </a>' : "NA";
                        return data;
                        }
                    },
                    { 
                        data: "account_id",
                        render: function(data, type, row, meta){
                            return ((row.account_id)  ? row.account_id :  "NA")
                        }
                    },
                    { 
                        data: "account_name",
                        render: function(data, type, row, meta){
                            return ((row.account_name)  ? row.account_name :  "NA")
                        }
                    },
                    { 
                        data: "brandname",
                        render: function(data, type, row, meta){
                            return ((row.brandname)  ? row.brandname :  "NA")
                        }
                    },
                    { 
                        data: "email",
                        render: function(data, type, row, meta){
                            return ((row.email)  ? row.email :  "NA")
                        }
                    },
                    {
                        data: "city",
                        render: function(data, type, row, meta) {
                            return ((row.city) ? row.city : "NA")
                        }
                    },
                    {
                        data: "state",
                        render: function(data, type, row, meta) {
                            return ((row.state) ? row.state : "NA")
                        }
                    },
                    { 
                        data: "date",
                        render: function(data, type, row, meta){
                            return ((row.date)  ? row.date :  "NA")
                        }
                    },
                    { 
                        data: "date",
                        render: function(data, type, row, meta){
                            if (data) {
                                const dateParts = (data).split('-');
                                const year = dateParts[0];
                                const monthIndex = parseInt(dateParts[1], 10) - 1; // JavaScript months are 0-based
                                const monthNames = [
                                    "January", "February", "March", "April", "May", "June",
                                    "July", "August", "September", "October", "November", "December"
                                ];
                                const monthName = monthNames[monthIndex]; // Get month name
                                return `${monthName}-${year}`;
                            } else {
                                return "NA";
                            }
                        }
                    },
                    {
                        data: "viewable_impressions",
                        render: function(data, type, row, meta) {
                            return ((row.viewable_impressions) ? Number(row.viewable_impressions).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "clicks",
                        render: function(data, type, row, meta) {
                            return ((row.clicks) ? Number(row.clicks).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "conversions",
                        render: function(data, type, row, meta) {
                            return ((row.conversions) ? Number(row.conversions).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "likes",
                        render: function(data, type, row, meta) {
                            return ((row.likes) ? Number(row.likes).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "shares",
                        render: function(data, type, row, meta) {
                            return ((row.shares) ? Number(row.shares).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "Clicks_From_Shares",
                        render: function(data, type, row, meta) {
                            return Number(row.Clicks_From_Shares).toLocaleString()
                        }
                    },
                    {
                        data: "Conversions_From_Shares",
                        render: function(data, type, row, meta) {
                            return Number(row.Conversions_From_Shares).toLocaleString()
                        }
                    },
                    {
                        data: "CTR",
                        render: function(data, type, row, meta) {
                            return ((row.CTR) ? row.CTR + "%" : "0.00%")
                        }
                    },
                    {
                        data: "CR",
                        render: function(data, type, row, meta) {
                            return ((row.CR) ? row.CR + "%" : "0.00%")
                        }
                    },
                    { 
                        data: "Cost",
                        render: function(data, type, row, meta) {
                        return ((row.Cost) ? Number(row.Cost).toLocaleString() : 0);
                        }
                    },
                    { 
                        data: "feed_revenue",
                         render: function(data, type, row, meta) {
                         return ((row.feed_revenue) ? Number(row.feed_revenue).toLocaleString() : 0)
                         }
                    }
                ],
                fnDrawCallback: function( settings ) {
                    $('.paginate_button').click(function(){
                    $('.dataTables_scrollBody').scrollTop(0);
                    })
                },
                footerCallback: function(row, start, end, display) {
                    var row = this.api();
                    var api = this.api().ajax.json().footer_total[0];
                    const numberFormatter = Intl.NumberFormat('en-US');
                    $( row.column(14).footer() ).html(api['impressionsTotal'] ? numberFormatter.format(api['impressionsTotal']) : 0);
                    $( row.column(15).footer() ).html(api['clicksTotal']      ? numberFormatter.format(api['clicksTotal'])      : 0);
                    $( row.column(16).footer() ).html(api['conversionsTotal'] ? numberFormatter.format(api['conversionsTotal']) : 0);
                    $( row.column(17).footer() ).html(api['sumLikes'] ? numberFormatter.format(api['sumLikes']) : 0);
                    $( row.column(18).footer() ).html(api['sumShares'] ? numberFormatter.format(api['sumShares']) : 0);
                    $( row.column(19).footer() ).html(api['sumSharedClicks'] ? numberFormatter.format(api['sumSharedClicks']) : 0);
                    $( row.column(20).footer() ).html(api['sumSharedConversions'] ? numberFormatter.format(api['sumSharedConversions']) : 0);
                    $( row.column(21).footer() ).html(api['impressionsTotal'] > 0 ? (api['clicksTotal']*100/api['impressionsTotal']).toFixed(2) + '%' : '0.00%');
                    $( row.column(22).footer() ).html(api['clicksTotal']      > 0 ? (api['conversionsTotal']*100/api['clicksTotal']).toFixed(2) + '%' : '0.00%');
                    $( row.column(24).footer() ).html(api['feedRevenueTotal']     ? numberFormatter.format(api['feedRevenueTotal']) : 0);
                }
            });
            $('.statsOptionColumn').each(function() {
                if($(this).is(':checked')){
                    $("#report-main-table").DataTable().column( $(this).data('column') ).visible(  true );
                }else{
                    $("#report-main-table").DataTable().column( $(this).data('column') ).visible(  false );
                }
            });
        }

    $(document).on('click',".export-feedstatsreport",function(e){
        e.preventDefault()
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var website = $('#website').val();
        var campaign_id = $('#campaign_id').val();
        var client_filter = $('#client_filter').val();
        var account_id = $('#account_id').val();
        var creative_id = $('#creative_id').val();
        var publisher_id  = $('#publisher_id').val();
        let page_name = $("#report_dropdown option:selected").text();
        var search        = $('#report-main-table_filter input[type="search"]').val();
        // $('#from_date_hidden').val(start_date);
        // $('#to_date_hidden').val(end_date);
        // $('#website_hidden').val(website);
        // $('#campagin_hidden').val(campaign_id);
        // $('#account_id_hidden').val(account_id);
        // $('#client_filter_val_hidden').val(client_filter);
        // $('.export-feedstatsreport').attr('disabled','disabled');
        // $('.export-feedstatsreport').addClass('bg-secondary');
        // $('#search_filter_hidden').val(search);
        //Getting and storing all selected optional columns
        var selectedColumnArray = $("input:checkbox:checked[data-column-name]").map(function() {
            return $(this).data('column-name');
        }).get();

        $.ajax({
            "url" : "{{ url('exportStatsReport') }}",
            "type": "post",
            "data": {
                _token                : "{{csrf_token()}}",
                fromdate              : start_date,
                todate                : end_date,
                page_name             : page_name,
                account_id            : account_id,
                websiteId             : website,
                creative_id           : creative_id,
                campaign_id           : campaign_id,
                client_filter         : client_filter,
                selectedColumnArray   : selectedColumnArray,
                publisher_id          : publisher_id,
                search                : search,
            },
            "dataType": "json",
            success: function(response) {
                if(response){
                    toastr.success('File Will Be Sent To Your Registered Email Id');
                }else{
                    toastr.error('Something Went Wrong or File Is Already Being Created');
                }
            }
        });
    });

    $("body").on("click", "#runReport", function() {
        var client_filter = $('#client_filter').val();
        var account_id = $('#account_id').val();
        var website = $('#website').val();
        var campaign_id = $('#campaign_id').val();
        var creative_id = $('#creative_id').val();
        var publisher_id  = $('#publisher_id').val();
        statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
    });
    
    /*account id filter*/
    // $("#account_id").keyup(function(){
    //     var account_id = $(this).val();
    //     var client_filter = $('#client_filter').val();
    //     var website = $('#website').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var creative_id = $('#creative_id').val();
    //     var publisher_id  = $('#publisher_id').val();
    //     statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
    // });

    /*  campaign id filter*/
    // var typingTimer;
    // $("#campaign_id").keyup(function() {
    //     var campaign_id   = $(this).val();
    //     var creative_id   = $('#creative_id').val();
    //     var account_id    = $('#account_id').val();
    //     var client_filter = $('#client_filter').val();
    //     var website       = $('#website').val();
    //     var publisher_id  = $('#publisher_id').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         statssubreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
    //     }, 500); 
    // });

    /*  creative id filter*/
    // var typingTimer;
    // $("#creative_id").keyup(function() {
    //     var creative_id = $(this).val();
    //     var account_id = $('#account_id').val();
    //     var client_filter = $('#client_filter').val();
    //     var website = $('#website').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var publisher_id  = $('#publisher_id').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
    //     }, 500); 
    // });

    // $("#publisher_id").keyup(function() {
    //     var publisher_id = $(this).val();
    //     var account_id = $('#account_id').val();
    //     var client_filter = $('#client_filter').val();
    //     var website = $('#website').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var creative_id  = $('#creative_id').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
    //     }, 500); 
    // });

    /*website filter on change*/
    // $("body").on("change", "#website", function() {
    //     var client_filter = $('#client_filter').val();
    //     var account_id = $('#account_id').val();
    //     var website = $(this).val();
    //     var campaign_id = $('#campaign_id').val();
    //     var creative_id = $('#creative_id').val();
    //     var publisher_id  = $('#publisher_id').val();
    //     statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
    // });
    /*Client filter on change*/
    // $("body").on("change", "#client_filter", function(){
    //     var client_filter = $(this).val();
    //     var account_id = $('#account_id').val();
    //     var website = $('#website').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var creative_id = $('#creative_id').val();
    //     var publisher_id  = $('#publisher_id').val();
    //     statsreportlist(account_id,website,campaign_id,client_filter,creative_id,publisher_id);
    // });

    //multi select for users
    $('#website,#client_filter').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All 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
    });
    //optional column changes script starts here
    $('.dropdown-item').on('click', function(e) {
       if($(this).hasClass('toggle-column')) {
           e.stopPropagation();
           }
    });
    //selecting all optional column 
    $("#all_stats_optional_columns").click(function () {
        $('.statsOptionColumn').not(this).prop('checked', this.checked);
        $(".dataTables_processing").css("display","block");
        setTimeout(() => {
        $(".dataTables_processing").css("display","none");
        }, 1000);
        $('.statsOptionColumn').each(function() {
            if($(this).is(':checked')){
             $("#report-main-table").DataTable().column( $(this).data('column') ).visible(  true );
            }else{
             $("#report-main-table").DataTable().column( $(this).data('column') ).visible(  false );
            
            }
        });
        $("#runReport").trigger("click");
    });
    // selecting each optional columns 
    $('.statsOptionColumn').on('click', function (e) {
        if ($('.statsOptionColumn:checked').length == $('.statsOptionColumn').length){
             $('#all_stats_optional_columns').prop('checked',true);
        }
        else {
            $('#all_stats_optional_columns').prop('checked',false);
        }
        // Get the column API object
        var column =  $("#report-main-table").DataTable().column($(this).attr('data-column'));
        // Toggle the visibility of the column
        column.visible(!column.visible());
        $("#runReport").trigger("click");
    });
    //optional column changes script ends here

    </script>
    @endsection