@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-bottom : 0px;
        margin-top    : -20px;
        margin-right  : 36px !important;
    }
    .creaFeedReport{
        height : 28px;
        float  : right;
    }
    input:read-only{
        cursor      : pointer;
    }
</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>
            <!-- <div class="form-group col-md-7"> -->
            <div class="form-group flex m-auto">
                <!-- count section start-->
                <div class="btn-outline-success active count-div" id="countfilter0" data-toggle="tooltip">
                    <label> Total:</label>
                <small id="total_count0"></small>
                </div>
                <div class="count-div" id="countfilter1" data-toggle="tooltip">
                    <label>Active: </label>
                    <small id="active_count1"></small>
                </div>
                <div class="count-div" id="countfilter2" data-toggle="tooltip">
                    <label>In-Active: </label>
                    <small id="inactive_count2"></small>
                </div>
            </div>
            <!-- count section end -->
            <div class="col-md-4">
                <button type="submit" id="runReport" class="creaFeedReport btn excel-btn btn-sm border-0 excel-btn border-radius-0"> Run Report</button>
                @can('hasExcelPermission')
                <form class="pull-right mr-3" id="creativeReportForm" action="{{ url('exportCreativeReport') }}">
                    @csrf
                    <button type="submit" class="export-feedcreativereport 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="creative_state" id="creative_state_hidden" />
                    <input type="hidden" name="inventory_filter" id="inventory_filter_hidden"/>
                    <input type="hidden" name="oemId_filter" id="oemId_filter_hidden"/>
                    <input type="hidden" name="channelType_filter" id="channelType_filter_hidden"/>
                </form>
                @endif
            </div>
        </div>
        <div class="card-body table-responsive">
            <form>
                <div class="filter-table-inline pl-0 mb-n2 d-flex flex-wrap" style="margin-bottom: 18px !important;">
                    <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" placeholder="Select Date" value="{{date('Y-m-d')}}">
                    </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" placeholder="Select Date" value="{{date('Y-m-d')}}">
                    </div>
                    <div class="form-group col-md-2">
                        <label>Campaign 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">
                        <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="form-group col-md-2">
                        <label class="labelText">Campaign Type</label>
                        <select id="channelTypeFilter" class="form-control cform-control divs input-size">
                            <option value="" selected>All</option>
                            <option value="1">OEM</option>
                            <option value="2">Ad Network</option>
                        </select>
                    </div>
                    <div class="form-group col-md-2 oem_div">
                        <label class="labelText">OEM Channel</label>
                        <select id="oemIdFilter" class="form-control cform-control divs input-size" multiple>
                        </select>
                    </div>
                    <div class="form-group col-md-2 inv_div">
                        <label for="inventory_filter">Inventory Type</label>
                            <select class="form-control" name="inventory_filter[]" multiple id="inventory_filter"> </select>
                    </div>
                    <div class="form-group col-md-2 placement_div">
                        <label>Placement</label><br>
                        <select class="form-control" name="placement_filter[]" multiple id="placement_filter"> </select>
                    </div>
                    <div class="form-group col-md-2 sub_placement_div">
                        <label>Sub Placement</label><br>
                        <select class="form-control" name="sub_placement_filter[]" multiple id="sub_placement_filter"> </select>
                    </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>Creative Status</th>
                        <th>Campaign ID</th>
                        <th>Creative ID</th>
                        <th>Channel Type</th>
                        <th>Inventory Type</th>
                        <th>Creative Name</th>
                        <th>Creative Language</th>
                        <th>Creative Headline</th>
                        <th>Creative Description</th>
                        <th>Tracker</th>
                        <th>Landing URL</th>
                        <th>State</th>
                        <th>City</th>
                        <th>Website Id</th>
                        <th>On-Boarded Date</th>
                        <th>Impression Date</th>
                        <th>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>CPM Spends</th>
                        <th>CPC Spends</th>
                        <th>CPA Spends</th>
                        <th>Total Spends</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 <span data-toggle="tooltip" title="(Conversions / Clicks) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPM <span data-toggle="tooltip" title="(Spends / Impressions) x 1000"><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>CPA <span data-toggle="tooltip" title="(Spends / Conversions)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></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>
                        <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() {
            var creative_state = 0;
            var inventory_filter = oemId_filter = channelType_filter = '';
            var typingTimer;
            /* call function while DOM get ready to get all records.*/
            creativeReportList();
            getPlacementNames();
            getInventories();
            getOEMIds();
            $('.inv_div').show();
            $('.oem_div').hide();
            // clear all filter script
            $('.clear_filter').on('click',function(){
                $('#language_filter option:first').prop('selected',true);
                $('#period_filter   option:eq(1)').prop('selected',true);
                $("#inventory_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
                $("#oemIdFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
                $('#channelTypeFilter   option:eq(1)').prop('selected',true);
                $('#placement_filter').val('').prop('selected', true);
                $("#placement_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
                $('#sub_placement_filter').val('').prop('selected', true);
                $("#sub_placement_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
                $('.count-div').removeClass('btn-outline-success active');
                $('#'+$('.count-div').eq(0).prop('id')).addClass('btn-outline-success active');
                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);
                $('#campaign_id').val('');
                $('#creative_id').val('');
                creativeReportList();
            });
            get_creative_count();

            //Count Filter
            $('.count-div').click(function (e) {
                e.preventDefault();
                creative_state = parseInt(this.id.slice(-1));
                creativeReportList(creative_state);
                $('.count-div').removeClass('btn-outline-success active');
                $(this).addClass('btn-outline-success active');
                inventory_filter = $('#inventory_filter').val();
            });

            /*return start and end date for  excel export*/
            $(document).on('click',".export-feedcreativereport",function(e) {
                e.preventDefault()
                var start_date = $('#start_date').val();
                var end_date = $('#end_date').val();
                var inventory_filter = $('#inventory_filter').val();
                var oemId_filter = $('#oemIdFilter').val();
                var placement_filter = $('#placement_filter').val();
                var sub_placement_filter = $('#sub_placement_filter').val();
                var channelType_filter = $('#channelTypeFilter').val();
                var campaign_id = $('#campaign_id').val();
                var creative_id = $('#creative_id').val();
                var search      = $('#report-main-table_filter input[type="search"]').val();
                $('#from_date_hidden').val(start_date);
                $('#to_date_hidden').val(end_date);
                $('#creative_state_hidden').val(creative_state);
                $('#inventory_filter_hidden').val(inventory_filter);
                $('#oemId_filter_hidden').val(oemId_filter);
                $('#channelType_filter_hidden').val(channelType_filter);
                // if date is todays date then normal form will be submitted if its not the we are using the ajax to enter the data in the tbl_export_data table
                if(false){
                    $('#creativeReportForm').submit();
                }else{
                    let page_name = $("#report_dropdown option:selected").text();
                    $('.export-feedcreativereport').attr('disabled','disabled');
                    $('.export-feedcreativereport').addClass('bg-secondary');
                    $.ajax({
                        "url" : "{{ url('exportCreativeReport') }}",
                        "type": "GET",
                        "data": {
                            fromdate         : start_date,
                            todate           : end_date,
                            creative_state   : creative_state,
                            page_name        : page_name,
                            inventory_filter : inventory_filter,
                            campaign_id      : campaign_id,
                            creative_id      : creative_id,
                            search           : search,
                            oemId_filter     : oemId_filter,
                            channelType_filter: channelType_filter,
                            placement_filter : placement_filter,
                            sub_placement_filter : sub_placement_filter
                        },
                        "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');
                            }
                        }
                    });
                }
            });


            /**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 inventory_filter = $('#inventory_filter').val();
                    var creative_id = $('#creative_id').val();
                    var campaign_id = $('#campaign_id').val();
                    // creativeReportList(creative_state,inventory_filter,campaign_id,creative_id);
                    $('#period_filter').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 inventory_filter = $('#inventory_filter').val();
                    var creative_id = $('#creative_id').val();
                    var campaign_id = $('#campaign_id').val();
                    // creativeReportList(creative_state,inventory_filter,campaign_id,creative_id);
                },
                onSelect: function() {
                    $('#period_filter').val('');
                }
            });

            $("body").on("change", "#period_filter", function() {
                var periodValue = $(this).val();
                $("#start_date").val('');
                $("#end_date").val('');
                var inventory_filter = $('#inventory_filter').val();
                var creative_id = $('#creative_id').val();
                var campaign_id = $('#campaign_id').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);
                        // creativeReportList(creative_state,inventory_filter,campaign_id,creative_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);
                        // creativeReportList(creative_state,inventory_filter,campaign_id,creative_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
                        // creativeReportList(creative_state,inventory_filter,campaign_id,creative_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);
                        // creativeReportList(creative_state,inventory_filter,campaign_id,creative_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);
                        // creativeReportList(creative_state,inventory_filter,campaign_id,creative_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
                        // creativeReportList(creative_state,inventory_filter,campaign_id,creative_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);
                        // creativeReportList(creative_state,inventory_filter,campaign_id,creative_id);
                    }
                }
            });

            $("body").on("click", "#runReport", function(){
                var inventory_filter = $('#inventory_filter').val();
                var oemId_filter = $('#oemIdFilter').val();
                var placement_filter = $('#placement_filter').val();
                var sub_placement_filter = $('#sub_placement_filter').val();
                var channelType_filter = $('#channelTypeFilter').val();
                var creative_id = $('#creative_id').val();
                var campaign_id = $('#campaign_id').val();
                creativeReportList(creative_state, inventory_filter, campaign_id, creative_id,oemId_filter,channelType_filter,placement_filter,sub_placement_filter);
            });

            $('#inventory_filter').multiselect({
                nonSelectedText        : 'Select Inventory',
                allSelectedText        : 'Selected All',
                selectAllJustVisible   : false,
                includeSelectAllOption : true,
                selectAllValue         : 'all',
                selectAllText          : 'Select all',
                unselectAllText        : 'Unselect all',
            });

            $('#oemIdFilter').multiselect({
                includeSelectAllOption : true,
                allSelectedText        : 'All Selected',
                nonSelectedText        : 'Select OEM',
                selectAllText          : 'Select All',
                unselectAllText        : 'UnSelect All',
                selectAllValue         : 'all',
                selectAllJustVisible   : false,
                numberDisplayed        : 1
            });

            $('#placement_filter').multiselect({
                nonSelectedText                : 'Select Placement',
                allSelectedText                : 'Selected All',
                unselectAllText                : 'Unselect all',
                selectAllJustVisible           : false,
                enableFiltering                : true,
                includeFilterClearBtn          : true,
                buttonWidth                    : '100%',
                enableHTML                     : true,
                enableCaseInsensitiveFiltering : true,
                selectAllJustVisible           : false,
                includeSelectAllOption         : true,
                templates : {
                    filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button"><i class="fa fa-close"></i></button></span>',
                },
            });
        
            $('#sub_placement_filter').multiselect({
                nonSelectedText                : 'Select Sub Placement',
                allSelectedText                : 'Selected All',
                unselectAllText                : 'Unselect all',
                selectAllJustVisible           : false,
                enableFiltering                : true,
                includeFilterClearBtn          : true,
                buttonWidth                    : '100%',
                enableHTML                     : true,
                enableCaseInsensitiveFiltering : true,
                selectAllJustVisible           : false,
                includeSelectAllOption         : true,
                templates : {
                    filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button"><i class="fa fa-close"></i></button></span>',
                },
            });
            /*  campaign id filter*/
            // $('#campaign_id').on('input', function() {
            //     var campaign_id = $(this).val();
            //     var creative_id = $('#creative_id').val();
            //     var inventory_filter = $('#inventory_filter').val();
            //     clearTimeout(typingTimer);
            //     typingTimer = setTimeout(function() {
            //         creativeReportList(creative_state, inventory_filter, campaign_id, creative_id);
            //     }, 500);
            // });
        
            /*  creative id filter*/
            // $('#creative_id').on('input', function() {
            //     var creative_id = $(this).val();
            //     var campaign_id = $('#campaign_id').val();
            //     var inventory_filter = $('#inventory_filter').val();
            //     clearTimeout(typingTimer);
            //     typingTimer = setTimeout(function() {
            //         creativeReportList(creative_state, inventory_filter, campaign_id, creative_id);
            //     }, 500);
            // });

            // inventory filter
            // $("body").on("change", "#inventory_filter", function(){
            //     var inventory_filter = $(this).val();
            //     var creative_id = $('#creative_id').val();
            //     var campaign_id = $('#campaign_id').val();
            //     creativeReportList(creative_state,inventory_filter, campaign_id, creative_id);
            // });
            
        });

        //all records displaying here
        function creativeReportList(creative_state=null,inventory_filter=null, campaign_id=null, creative_id=null, oemId_filter=null, channelType_filter=null, placement_filter=null,sub_placement_filter=null) {
            $('.export-feedcreativereport').removeAttr('disabled');
            $('.export-feedcreativereport').removeClass('bg-secondary border-0');
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').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": [
                    [17, "desc"]
                ],
                "ajax": {
                    "url": "{{ url('getCreativeReport') }}",
                    "type": "POST",
                    "data": {
                        _token: "{{csrf_token()}}",
                        "start_date"       : start_date,
                        "end_date"         : end_date,
                        "creative_state"   : creative_state,
                        "inventory_filter" : inventory_filter,
                        "campaign_id"      : campaign_id,
                        "creative_id"      : creative_id,
                        "oemId_filter"     : oemId_filter,
                        "channelType_filter": channelType_filter,
                        "placement_filter" : placement_filter,
                        "sub_placement_filter" : sub_placement_filter
                    },
                    "dataType": "json",

                },
                "columnDefs": [{
                    orderable: false,
                    targets: 0
                }],
                "columns": [{
                        data: "id",
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: "Creative_Status",
                        render: function(data, type, row, meta) {
                            if (row.Creative_Status == 'Deleted') {
                                data = '<label class="badge badge-danger">&nbsp;&nbsp;Deleted&nbsp;&nbsp;</label>';
                            } else {
                                if (row.Creative_Status == 'Active') {
                                    data = '<label class="badge badge-success">&nbsp;&nbsp;Active&nbsp;&nbsp;</label>';
                                } else if (row.Creative_Status == 'Paused') {
                                    data = '<label class="badge badge-danger">&nbsp;&nbsp;Paused&nbsp;&nbsp;</label>';
                                } else {
                                    data = '<label class="badge badge-danger">In-Active&nbsp;</label>';
                                }
                            }
                            return data;
                        }
                    },
                    {
                        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: "Channel_Type",
                        render:function(data, type, row, meta){
                            return ((row.Channel_Type) ? row.Channel_Type : "NA")
                        }
                    },
                    { 
                        data: "Inventory_Type",
                        render:function(data, type, row, meta){
                            return ((row.Inventory_Type) ? row.Inventory_Type : "NA")
                            // data = row.inventory_type == 1 ? 'Text' : (row.inventory_type == 2 ? 'Tile' : (row.inventory_type == 3 ? 'OEM' : (row.inventory_type == 4 ? 'OEM-Text' : (row.inventory_type == 5 ? 'Text-Expanded' : (row.inventory_type == 6 ? 'Banner Ads' : 'Interstitial')))));
                            // return data;
                        }
                    },
                    {
                        data: "Creative_Name",
                        render: function(data, type, row, meta) {
                            return ((row.Creative_Name) ? row.Creative_Name : "NA")
                        }
                    },
                    {
                        data: "Creative_Language",
                        render: function(data, type, row, meta) {
                            return ((row.Creative_Language) ? row.Creative_Language : "NA")
                        }
                    },
                    {
                        data: "Creative_Headline",
                        render: function(data, type, row, meta) {
                            return ((row.Creative_Headline) ? row.Creative_Headline : "NA")
                        }
                    },
                    {
                        data: "Creative_Description",
                        render: function(data, type, row, meta) {
                            return ((row.Creative_Description) ? row.Creative_Description : "NA")
                        }
                    },
                    {
                        data: "Tracker",
                        render: function(data, type, row, meta) {
                            return ((row.Tracker) ? row.Tracker : "NA")
                        }
                    },
                    {
                        data: "Landing_URL",
                        render: function(data, type, row, meta) {
                            return ((row.Landing_URL) ? row.Landing_URL : "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: "Website_Id",
                        render: function(data, type, row, meta) {
                            return ((row.Website_Id) ? row.Website_Id : "NA")
                        }
                    },
                    {
                        data: "On_Boarded_Date",
                        render: function(data, type, row, meta) {
                            return ((row.On_Boarded_Date) ? row.On_Boarded_Date : "NA")
                        }
                    },
                    {
                        data: "Impression_Date",
                        render: function(data, type, row, meta) {
                            return ((row.Impression_Date) ? row.Impression_Date : "NA")
                        }
                    },
                    {
                        data: "Impressions",
                        render: function(data, type, row, meta) {
                            return ((row.Impressions) ? Number(row.Impressions).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "Clicks",
                        render: function(data, type, row, meta) {
                            return ((row.Clicks) ? Number(row.Clicks).toLocaleString() : "0")
                        }
                    },
                    // {
                    //     data: "unique_clicks",
                    //     render: function(data, type, row, meta) {
                    //         return ((row.unique_clicks) ? Number(row.unique_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: "Cpm_Spends",
                        render: function(data, type, row, meta) {
                            return ((row.Cpm_Spends) ? Number(row.Cpm_Spends).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "Cpc_Spends",
                        render: function(data, type, row, meta) {
                            return ((row.Cpc_Spends) ? Number(row.Cpc_Spends).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "Cpa_Spends",
                        render: function(data, type, row, meta) {
                            return ((row.Cpa_Spends) ? Number(row.Cpa_Spends).toLocaleString() : "0")
                        }
                    },
                    {
                        data: "Total_Spends",
                        render: function(data, type, row, meta) {
                            return ((row.Total_Spends) ? Number(row.Total_Spends).toLocaleString() : "0")
                        }
                    },
                    {
                        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: "CPM",
                        render: function(data, type, row, meta) {
                            return ((row.CPM) ? row.CPM : "0.00")
                        }
                    },
                    {
                        data: "CPC",
                        render: function(data, type, row, meta) {
                            return ((row.CPC) ? row.CPC : "0.00")
                        }
                    },
                    {
                        data: "CPA",
                        render: function(data, type, row, meta) {
                            return ((row.CPA) ? row.CPA : "0.00")
                        }
                    }
                ],
                fnRowCallback: function(nRow, aData) {
                    return nRow;
                },
                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(17).footer() ).html(api['impressionsTotal']     ? numberFormatter.format(api['impressionsTotal'])             : 0);
                    $( row.column(18).footer() ).html(api['clicksTotal']          ? numberFormatter.format(api['clicksTotal'])                  : 0);
                    $( row.column(19).footer() ).html(api['conversionsTotal']     ? numberFormatter.format(api['conversionsTotal'])             : 0);
                    $( row.column(20).footer() ).html(api['sumLikes']             ? numberFormatter.format(api['sumLikes'])                     : 0);
                    $( row.column(21).footer() ).html(api['sumShares']            ? numberFormatter.format(api['sumShares'])                    : 0);
                    $( row.column(22).footer() ).html(api['sumSharedClicks']      ? numberFormatter.format(api['sumSharedClicks'])              : 0);
                    $( row.column(23).footer() ).html(api['sumSharedConversions'] ? numberFormatter.format(api['sumSharedConversions'])         : 0);
                    $( row.column(24).footer() ).html(api['cpm_spends_total']     ? numberFormatter.format(api['cpm_spends_total'])             : 0);
                    $( row.column(25).footer() ).html(api['cpc_spends_total']     ? numberFormatter.format(api['cpc_spends_total'])             : 0);
                    $( row.column(26).footer() ).html(api['cpa_spends_total']     ? numberFormatter.format(api['cpa_spends_total'])             : 0);
                    $( row.column(27).footer() ).html(api['spendsTotal']          ? numberFormatter.format(api['spendsTotal'])                  : 0);
                    $( row.column(28).footer() ).html(api['impressionsTotal'] > 0 ? (api['clicksTotal']*100/api['impressionsTotal']).toFixed(2) + '%': '0.00%');
                    $( row.column(29).footer() ).html(api['clicksTotal']      > 0 ? (api['conversionsTotal']*100/api['clicksTotal']).toFixed(2) + '%': '0.00%');
                    $( row.column(30).footer() ).html(api['impressionsTotal'] > 0 ? ((api['spendsTotal']/api['impressionsTotal']) * 1000).toFixed(2) : '0.00');
                    $( row.column(31).footer() ).html(api['clicksTotal']      > 0 ? (api['spendsTotal']/api['clicksTotal']).toFixed(2)               : '0.00');
                    $( row.column(32).footer() ).html(api['conversionsTotal'] > 0 ? (api['spendsTotal']/api['conversionsTotal']).toFixed(2)          : '0.00');
                }
            });
        }

        // Getting Report Creative Count
        function get_creative_count(){
            $.ajax({
                "url": "{{ url('get_creative_count') }}",
                "type": "POST",
                "data": {
                        _token: "{{csrf_token()}}",
                        "flag":1
                    },
                    "dataType": "json",
                success: function(response) {
                    $("#total_count0").html(response[0].total);
                    $("#active_count1").html(response[0].active);
                    $("#inactive_count2").html(response[0].inactive);
                }
            });
        }

        function getInventories (){
            var website_id = $('.campaignId-slot-WebsiteID').text();
            var campaignId = $('#blockedCampaignId').val();
            $.ajax({
                url      : "{{ url('get_inventory_types') }}",
                type     : 'GET',
                dataType : 'json',
                success: function(data) {
                    $('#inventory_filter').empty();
                    $.each(data, function(key, value) {
                    if(value.id != 8 && value.id != 9){
                        $('#inventory_filter').append($('<option>', {
                            value : value.id,
                            text  : value.inventory_name
                        }));
                    }
                    });
                    $('#inventory_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
                }
            });
        }
        function getOEMIds() {
            $.ajax({
                url: "{{ url('getAllOEMIds') }}",
                type: "GET",
                dataType: "json",
                success: function(response) {
                    $("#oemIdFilter").empty();
                    var oemList = '';
                    response.forEach(function(data){
                        let oem_name = data.oem_name ? ' ('+data.oem_name+')' : '';
                        oemList +="<option value='"+data.id+"'>OEM - "+data.id + oem_name+"</option>";
                    });
                    $("#oemIdFilter").html(oemList);
                    $('#oemIdFilter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
                }
            });
        }
        $('#channelTypeFilter').on('change', function() {
            var campaign_type     = $(this).val();
            $('#oemIdFilter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
            $('#inventory_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
            $('.oem_div').hide();
            $('.inv_div').show();
        
            if(campaign_type){
                if(campaign_type.length > 1){
                    $('.inv_div').show();
                    $('.oem_div').hide();
                }else{
                    if(campaign_type[0] == 1){
                        $('.inv_div').hide();
                        $('.oem_div').show();
                    }else if(campaign_type[0] == 2){
                        $('.inv_div').show();
                        $('.oem_div').hide();
                    }
                }
            }else{
                $('.inv_div').show();
                $('.oem_div').hide();
            }
            $(".sub_placement_div, .placement_div").show()
            getPlacementTypes(campaign_type);
        });
        $('#oemIdFilter').on('change',function() {
            var oem_id     = $(this).val();
            getPlacementByOEMId(oem_id);
        });
        //Handling placement dropdown display based on Inventory Changes
        $('#inventory_filter').on('change', function() {
            var campaign_type = $("#channelTypeFilter").val();
            var selectedInventory = $(this).val();
            var placementList = '';
            $('#placement_filter, #sub_placement_filter').empty();
            if(selectedInventory.length > 0){
                (selectedInventory.includes('1') || selectedInventory.includes('5') || selectedInventory.includes('6') || selectedInventory.includes('7')) ? $(".sub_placement_div, .placement_div").show() : $(".sub_placement_div, .placement_div").hide();
                if (selectedInventory.length === 0 || 
                    (selectedInventory.includes('1') && selectedInventory.includes('5') && selectedInventory.includes('6') && selectedInventory.includes('7'))) {
                    placementList += `<option value="1">Standard Inventory</option>`;
                    placementList += `<option value="2">Expanded Inventory</option>`;
                    placementList += `<option value="3">Selected Inventory</option>`;
                } else {
                    if (selectedInventory.includes('5') || selectedInventory.includes('6') || selectedInventory.includes('1')) {
                        placementList += `<option value="1">Standard Inventory</option>`;
                    }
                    if (selectedInventory.includes('6') || selectedInventory.includes('1') || selectedInventory.includes('7')) {
                        placementList += `<option value="2">Expanded Inventory</option>`;
                        placementList += `<option value="3">Selected Inventory</option>`;
                    }
                }
                $("#placement_filter").html(placementList);
                $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
                getSubPlacement(2);
            }else {
                $(".sub_placement_div, .placement_div").show()
                getPlacementTypes(2);
            }
        });
        
        $("body").on("change", "#placement_filter", function() {
            var inventoryTypeFilter  = $('#inventory_filter').val();
            console.log(inventoryTypeFilter);
            var placementValue = $(this).val();// Ensure placementValue is an array
            console.log(placementValue);

            getSubPlacementTypes(placementValue,inventoryTypeFilter);
            (placementValue[0] == '1' || placementValue[0] == '3') && !placementValue.includes('2') ? $('.sub_placement_div').hide() :  $('.sub_placement_div').show();
            if(placementValue == ''){
                $('#subPlacementSearch option').slice(1).each(function() {
                    var optionInventory = $(this).attr('data-inventory-type');
                    if (optionInventory === '3') {
                        $(this).show();
                    }else {
                        $(this).hide();
                    }
                });
            }
        });

        function getSubPlacement(flag){
          $.ajax({
            "url"      : "{{ url('getSubPlacementNames') }}/" + flag,
            "type"     : 'GET',
            "dataType" : 'json',
            success: function(response) {
              $("#sub_placement_filter").empty();
              var subPlacementList = '';
              response.forEach(function(data){
                  subPlacementList +=`<option value="${data.id}">${data.sub_placement_name}</option>`;
              });
              $("#sub_placement_filter").html(subPlacementList);
              $('#sub_placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
            }
          });
        }

        // Load Inventory Types
        function getPlacementTypes(campaign_type) {
          var bothCampaign = true;
          if(campaign_type){
            if(campaign_type == 1){ //for OEM Campaign
              bothCampaign = false;
              $.ajax({
                "url"      : "{{ url('get_placement_names') }}",
                "type"     : 'GET',
                "dataType" : 'json',
                success: function(response) {
                  $("#placement_filter").empty()
                  var placementList = '';
                  response.forEach(function(data){
                    if (data.website_id) {
                      placementList +=`<option value="${data.id}" data-id="${data.id}" data-inventory="${data.inventory_type}">${data.placement_name}</option>`;
                    }
                  });
                  $("#placement_filter").html(placementList);
                  $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
                }
              });
             getSubPlacement(1);
            }else if(campaign_type == 2){ //for Ad Network Campaign
              bothCampaign = false;
              $("#placement_filter").empty()
              var placementList = '';
              placementList =`<option value="1">Standard Inventory</option>`;
              placementList +=`<option value="2">Expanded Inventory</option>`;
              placementList +=`<option value="3">Selected Inventory</option>`;
              $("#placement_filter").html(placementList);
              $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
             getSubPlacement(2);
            }
          }
          if(bothCampaign){ //for both OEM and Ad Network Campaign
            getPlacementNames();
          }
        }

        function getPlacementNames(){
          var channelTypeFilter = $("#channelTypeFilter").val();
          $.ajax({
            "url"      : "{{ url('get_placement_names') }}",
            "type"     : 'GET',
            "dataType" : 'json',    
            success: function(response) {
                $("#placement_filter").empty()
                var placementList = '';
                response.forEach(function(data){
                  // if (data.website_id) {
                    placementList +=`<option value="${data.id}" data-id="${data.id}">${data.placement_name}</option>`;
                  // }
                });
                placementList +=`<option value="1">Standard Inventory</option>`;
                placementList +=`<option value="2">Expanded Inventory</option>`;
                placementList +=`<option value="3">Selected Inventory</option>`;
                $("#placement_filter").html(placementList);
                $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
                if(channelTypeFilter){
                  getSubPlacement(channelTypeFilter[0]);
                }else{
                  getSubPlacement(0);
                } 
            }
          });
        }
        // Load Sub-Placement Types
        function getSubPlacementTypes(id,inventory_type) {
          $.ajax({
            "url"      : "{{ url('getSubplacementById') }}",
            "type"     : 'POST',
            "dataType" : 'json',    
            "data" :{
                        _token: "{{csrf_token()}}",
                        "id" : id, 
                        "inventory_type" : inventory_type
                    },
            success: function(response) {
              $("#sub_placement_filter").empty()
              var subPlacementList = '';
              response.forEach(function(data){
                  subPlacementList +=`<option value="${data.id}">${data.sub_placement_name}</option>`;
              });
              $("#sub_placement_filter").html(subPlacementList);
              $('#sub_placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
            }
          });
        }

        function getPlacementByOEMId(oem_id){
          $.ajax({
            "url"      : "{{ url('getPlacementsByOEMId') }}",
            "type"     : 'POST',
            "dataType" : 'json',
            "data": {
                        _token: "{{csrf_token()}}",
                        "oem_id" : oem_id,
                        "flag":1
                    },    
            success: function(response) {
              $("#placement_filter").empty();
              var subPlacementList = '';
              response.forEach(function(data){
                  subPlacementList +=`<option value="${data.id}">${data.placement_name}</option>`;
              });
              $("#placement_filter").html(subPlacementList);
              $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
              getSubPlacementByOEMId(oem_id);
            }
          });
        }

        function getSubPlacementByOEMId(oem_id){
          $.ajax({
            "url"      : "{{ url('getPlacementsByOEMId') }}",
            "type"     : 'POST',
            "dataType" : 'json',    
            "data": {
                        _token: "{{csrf_token()}}",
                        "oem_id" : oem_id,
                        "flag":0
                    },    
            success: function(response) {
              $("#sub_placement_filter").empty();
              var subPlacementList = '';
              response.forEach(function(data){
                  subPlacementList +=`<option value="${data.id}">${data.placement_name}</option>`;
              });
              $("#sub_placement_filter").html(subPlacementList);
              $('#sub_placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
            }
          });
        }
    </script>
    @endsection