@extends('layouts.app')

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

@section('content')
@section('page_title')
    Whistle Feed Publisher Analytics
@endsection
<style>
    .dataTables_scroll {
        overflow: auto;
    }
    #runReport{
        height: 29px;
        width: 85px;
        margin-left: -26px;
    }
</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-0 mr-0 mt-4">
            <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.report')</div>
            <!-- count section start-->
                <form class="flex m-auto">
                    <div class="count-div" data-toggle="tooltip" title="Number of Websites">
                        <label> Total:</label>
                    <small id="total_count"></small>
                    </div>
                    <div class="count-div"  data-toggle="tooltip" title="Total Active Websites In Last 24 Hours">
                        <label>Active: </label>
                        <small id="active_count"></small>
                    </div>
                    <div class="count-div"  data-toggle="tooltip" title=" Total In-Active websites In Last 24 Hours">
                        <label>In-Active: </label>
                        <small id="inactive_count"></small>
                    </div>
                </form>
                <!-- count section end -->
            <div class="form-group col-md-3">
                <div class="pull-right col-sm-2 mr-3">
                    <button type="submit" id="runReport" class="btn btn-sm excel-btn border-0 border-radius-0"> Run Report</button>
                </div>
                @can('hasExcelPermission')
                    <form class="pull-right mr-3" action="{{ url('exportpublisherAnalytics') }}">
                        @csrf
                        <button type="submit" class="export-publisherAnalytics btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                        <input type="hidden" name="websiteid" id="website_id_hidden"/>
                        <input type="hidden" name="revenue_filter" id="revenue_filter_hidden"/>
                        <input type="hidden" name="language_filter" id="language_filter_hidden"/>
                        <input type="hidden" name="platform_filter" id="platform_filter_hidden"/>
                        <input type="hidden" name="status_filter" id="status_filter_hidden"/>
                        <input type="hidden" name="inventory_filter" id="inventory_filter_hidden"/>
                        <input type="hidden" name="channelType_filter" id="channelType_filter_hidden"/>
                        <input type="hidden" name="oemId_filter" id="oemId_filter_hidden"/>
                    </form>
                @endif
            </div>
        </div>

        <div class="card-body table-responsive">
            <form>
                <div class="filter-table-inline d-flex flex-wrap">
                    <div class="form-group col-2">
                        <label>Website ID</label>
                        <div class="form-group prepend">
                            <span class="prefix">WFP -</span>
                            <input type="text" class="form-control pencil-input mb-n3" id="website_id" name="website_id" placeholder="Search Website ID" autocomplete="off" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                        </div>
                    </div>
                    <div class="form-group col-2">
                        <label for="platform_filter">Platform Filter</label>
                        <select id="platform_filter" name="platform_filter[]" class="form-control" multiple>
                            <option value="0">Website</option>
                            <option value="1">Mobile App</option>
                        </select>
                    </div>
                    <div class="form-group col-2">
                        <label class="labelText">Publisher 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="0">Ad Network</option>
                        </select>
                    </div>
                    <div class="form-group col-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-2 inv_div">
                        <label for="inventory_filter">Inventory Type</label>
                            <select class="form-control" name="inventory_filter[]" id="inventory_filter" multiple> </select>
                    </div>
                    <div class="form-group col-2">
                        <label for="language_filter">Language Filter</label>
                        <select id="language_filter" name="language_filter[]" class="form-control" data-live-search="true" multiple>
                                                        </select>
                    </div>
                    <div class="form-group col-2">
                        <label for="revenue_filter">Revenue Type</label>
                        <select id="revenue_filter" name="revenue_filter[]" class="form-control" data-live-search="true" multiple>
                            <option value='1'>CPM</option>
                            <option value='0'>CPC</option>
                            <option value='2'>CPI</option>
                            <option value='3'>RTB</option>
                        </select>
                    </div>
                    <div class="form-group col-2">
                        <label for="status_filter">Status</label>
                        <select id="status_filter" name="status_filter[]" class="form-control" multiple>
                            <option value="1">Active</option>
                            <option value="0">In-Active</option>
                        </select>
                    </div>
                </div>
            </form>
            <div class="col-8 pl-0 mb-5 custom-z-index">
                @include('whistle_feed.feed_reports.clearFilter')
            </div>
            <table class="table-bordered table-hover" id="publisher-analytics-table">
                <thead>
                    <tr>
                        <th>Sl. No.</th>
                        <th>Publisher Token</th>
                        <th>On-Boarded Date</th>
                        <th>Website ID</th>
                        <th>Inventory Type</th>
                        <th>Platform</th>
                        <th>Language</th>
                        <th>Website/App</th>
                        <th>User Name</th>
                        <th>Ad Request</th>
                        <th>Filled Request</th>
                        <th>Fill Rate % <span data-toggle="tooltip" title="(Filled Request / Ad Request) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>Viewable Impressions</th>
                        <th>Clicks</th>
                        <th>Conversions</th>
                        <th>Revenue Type</th>
                        <th>Publisher Revenue</th>
                        <th>Cost</th>
                        <th>Feed Revenue</th>
                        <th>CTR % <span data-toggle="tooltip" title="(Clicks / Impressions) x 100"><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>eCpm <span data-toggle="tooltip" title="(Revenue / Impressions) x 1000"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>eCpc <span data-toggle="tooltip" title="Revenue / Clicks"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPA <span data-toggle="tooltip" title="Revenue / Conversions"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>Last Seen</th>
                        <th>Status</th>
                        <th>Load Time (sec)</th>
                        <th>Last Checked</th>
                        <th>Blocked Campaigns</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>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="application/javascript">

$(document).ready(function() {
    var website_id = platform_filter = language_filter = revenue_filter = status_filter = inventory_filter = channelType_filter = oemId_filter = '';
    /* call function while DOM get ready to get all records.*/
    publisherAnalytics();
    getWebsiteCount();
    getInventories();
    getOEMIds();          
    $(".inv_div, .oem_div").hide();
    // clear all filter script
    $('.clear_filter').on('click',function(){
        $('#website_id').val('')
        $("#language_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#revenue_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#platform_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#inventory_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#status_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#oemIdFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#channelTypeFilter   option:eq(1)').prop('selected',true);
        publisherAnalytics();
    });
     /*return start and end date for  excel export*/
    $(".export-publisherAnalytics").click(function(){
        website_id = $('#website_id').val();
        revenue_filter   = $('#revenue_filter').val();
        language_filter  = $('#language_filter').val();
        platform_filter  = $('#platform_filter').val();
        status_filter    = $('#status_filter').val();
        inventory_filter = $('#inventory_filter').val();
        channelType_filter = $('#channelTypeFilter').val();
        oemId_filter = $('#oemIdFilter').val();
        $("#website_id_hidden").val(website_id);
        $("#revenue_filter_hidden").val(revenue_filter);
        $("#language_filter_hidden").val(language_filter);
        $("#platform_filter_hidden").val(platform_filter);
        $("#platform_filter_hidden").val(platform_filter);
        $("#status_filter_hidden").val(status_filter);
        $('#inventory_filter_hidden').val(inventory_filter);
        $('#channelType_filter_hidden').val(channelType_filter);
        $('#oemId_filter_hidden').val(oemId_filter);
        $(this).submit();
    });

    /**Run Report on Click */
    $("body").on("click", "#runReport", function(){
        platform_filter = $('#platform_filter').val();
        website_id      = $('#website_id').val()
        language_filter = $('#language_filter').val();
        revenue_filter  = $('#revenue_filter').val();
        status_filter   = $('#status_filter').val();
        inventory_filter = $('#inventory_filter').val();
        channelType_filter = $('#channelTypeFilter').val();
        oemId_filter    = $('#oemIdFilter').val();
        publisherAnalytics(website_id,platform_filter,language_filter,revenue_filter,status_filter,inventory_filter,oemId_filter,channelType_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
    });

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

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

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

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

    //  script for platform filter
    // $("body").on("change", "#platform_filter", function(){
    //     platform_filter = $(this).val();
    //     website_id      = $('#website_id').val()
    //     language_filter = $('#language_filter').val();
    //     revenue_filter  = $('#revenue_filter').val();
    //     status_filter   = $('#status_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     publisherAnalytics(website_id,platform_filter,language_filter,revenue_filter,status_filter,inventory_filter);
    // });
    // //  script for language filter
    // $("body").on("change", "#language_filter", function(){
    //     language_filter = $(this).val();
    //     platform_filter = $('#platform_filter').val();
    //     website_id      = $('#website_id').val()
    //     revenue_filter  = $('#revenue_filter').val();
    //     status_filter   = $('#status_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     publisherAnalytics(website_id,platform_filter,language_filter,revenue_filter,status_filter,inventory_filter);
    // });
    // //  script for revenue filter
    // $("body").on("change", "#revenue_filter", function(){
    //     revenue_filter  = $(this).val();
    //     website_id      = $('#website_id').val()
    //     language_filter = $('#language_filter').val();
    //     platform_filter = $('#platform_filter').val();
    //     status_filter   = $('#status_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     publisherAnalytics(website_id,platform_filter,language_filter,revenue_filter,status_filter,inventory_filter);
    // });
    // //  script for status filter
    // $("body").on("change", "#status_filter", function(){
    //     status_filter   = $(this).val();
    //     revenue_filter  = $('#revenue_filter').val();
    //     website_id      = $('#website_id').val()
    //     language_filter = $('#language_filter').val();
    //     platform_filter = $('#platform_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     publisherAnalytics(website_id,platform_filter,language_filter,revenue_filter,status_filter,inventory_filter);
    // });
    // /*Website Id filter*/
    // $("#website_id").keyup(function(){
    //     website_id = $(this).val();
    //     revenue_filter  = $('#revenue_filter').val();
    //     language_filter = $('#language_filter').val();
    //     platform_filter = $('#platform_filter').val();
    //     status_filter   = $('#status_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     publisherAnalytics(website_id,platform_filter,language_filter,revenue_filter,status_filter,inventory_filter);
    // });
    //  /*Inventory Type*/
    // $("body").on("change", "#inventory_filter", function(){
    //     website_id      = $('#website_id').val()
    //     revenue_filter  = $('#revenue_filter').val();
    //     language_filter = $('#language_filter').val();
    //     platform_filter = $('#platform_filter').val();
    //     status_filter   = $('#status_filter').val();
    //     inventory_filter = $(this).val();
    //     publisherAnalytics(website_id,platform_filter,language_filter,revenue_filter,status_filter,inventory_filter);
    // });
});

// Getting Website Count
function getWebsiteCount(){
    $.ajax({
        "url": "{{ url('getWebsiteCount') }}",
        "type": "POST",
        "data": {
                _token: "{{csrf_token()}}"
            },
            "dataType": "json",
        success: function(response) {
            $("#total_count").html(response[0].total);
            $("#active_count").html(response[0].active);
            $("#inactive_count").html(response[0].inactive);

        }
    });
}

//all records displaying here
function publisherAnalytics(website_id=null,platform_filter=null,language_filter=null,revenue_filter=null,status_filter=null,inventory_filter=null,oemId_filter=null,channelType_filter=null) {
    $("#publisher-analytics-table").DataTable().clear().destroy();
    $('#publisher-analytics-table').DataTable({
        "processing": true,
        "serverSide": true,
        "paging": true,
        "searching": false,
        "scrollX": true,
        "pageLength": 50,
        "ordering": true,
        "autowidth":true,
        "lengthChange": false,
        "scrollY":  400,
        "scrollCollapse": true,
        "fixedHeader":{ header: true},
        language: { search: '', searchPlaceholder: "Search..." },
        "order": [
            [13, "desc"]
        ],
        "ajax": {
            "url": "{{ url('getPublisherAnalytics') }}",
            "type": "POST",
            "data": {
                    _token           : "{{csrf_token()}}",
                    "website_id"     :website_id,
                    "platform_filter":platform_filter,
                    "language_filter":language_filter,
                    "revenue_filter" :revenue_filter,
                    "status_filter"  :status_filter,
                    "inventory_filter": inventory_filter,
                    "oemId_filter"   :oemId_filter,
                    "channelType_filter":channelType_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: "publisher_token",
                render: function(data, type, row, meta){
                 return ((row.publisher_token)  ? row.publisher_token :  "NA")
                }
            },
            { data: "created_on",
                render: function(data, type, row, meta){
                 return ((row.created_on)  ? row.created_on :  "NA");
                }
            },
            { data: "website_id",
                render: function(data, type, row, meta){
                 return ((row.website_id)  ? 'WFP'+row.website_id :  "WFP")
                }
            },
            {
                data: "inventory_type",
                render:function(data, type, row, meta){
                return data = (row.inventory_type == 1 ? 'Text' : (row.inventory_type == 2 || row.inventory_type == 3 || row.inventory_type == 4 ? 'Tile' : (row.inventory_type == 5 ? 'Video Ads' : (row.inventory_type == 6 ? 'Banner Ads': (row.inventory_type == 7 ? 'Interstitial' : 'NA')))));
                }
            },
            { data: "is_app",
                render: function(data, type, row, meta){
                    if(row.is_app == 0){
                        data = `<span style="font-size:13px;font-weight:600;">Website</span>`
                    }else{
                        data = `<span style="font-size:13px;font-weight:600;">Mobile App</span>`
                    }
                    return data;
                }
            },
            { data: "language",
                render: function(data, type, row, meta){
                 return ((row.language)  ? row.language :  "NA")
                }
            },
            { data: "domain",
                render: function(data, type, row, meta){
                    if(row.is_app == 0){
                        data= '<a href = '+row.domain+' target="_blank"> '+ row.domain +' </a>';
                    }else{
                        data= '<a href = https://play.google.com/store/apps/details?id='+ row.domain +' target="_blank"> '+ row.domain +' </a>';
                    }
                    return data;
                }
            },
            { data: "username",
                render: function(data, type, row, meta){
                 return ((row.username)  ? row.username :  "NA")
                }
            },
            { data: "ad_request",
                render: function(data, type, row, meta) {
                return ((row.ad_request) ? row.ad_request : "0")
                }
            },
            { data: "non_viewable_impressions",
                render: function(data, type, row, meta) {
                return ((row.non_viewable_impressions) ? Number(row.non_viewable_impressions).toLocaleString() : "0")
                }
            },
            { data: "filled_rate",
                render: function(data, type, row, meta) {
                return ((row.filled_rate) ? row.filled_rate + ' %' : "0.00 %")
                }
            },
            { 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: "conversions",
                render: function(data, type, row, meta){
                 return ((row.conversions) ? Number(row.conversions).toLocaleString() : "0")
                }
            },
            { data: "revenue_type",
                render: function(data, type, row, meta){
                return ((row.revenue_type == 1 && row.variable_floor_price == 1) ? 'VCPM' : (row.revenue_type == 0 ? 'CPC' : (row.revenue_type == 1 ? 'CPM' : (row.revenue_type == 2 ? 'CPI' : 'RTB'))));
                }
            },
            { data: "revenue",
                render: function(data, type, row, meta){
                 return ((row.revenue) ? Number(row.revenue).toLocaleString() : "0")
                }
            },
            { data: "floor_price",
                render: function(data, type, row, meta) {
                return ((row.revenue_type && row.variable_floor_price) ?  (row.ecpm ? Number(row.ecpm).toLocaleString() : 0 ) : (row.floor_price ? Number(row.floor_price).toLocaleString() : 0 ));
                }
            },
            { data: "feed_revenue",
                render: function(data, type, row, meta) {
                return ((row.feed_revenue) ? Number(row.feed_revenue).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")
                }
            },
            { data: "last_seen",
                render: function(data, type, row, meta){
                 return ((row.last_seen)  ? row.last_seen :  "NA")
                }
            },
            { data: "status",
                render: function(data, type, row, meta){
                    if(row.status == 0){
                       data = '<label class="badge badge-danger">In-Active&nbsp;</label>';
                   }else if(row.status == 1){
                       data = '<label class="badge badge-success">&nbsp;&nbsp;Active&nbsp;&nbsp;</label>';
                   }else if(row.status == 2){
                    data = '<label class="badge badge-danger">&nbsp;&nbsp;In-Active&nbsp;&nbsp;</label>';
                   }
                   return data;
                }
            },
            { data: "load_time",
                render: function(data, type, row, meta){
                    return ((row.load_time)  ? row.load_time :  "NA")
                }
            },
            { data: "last_checked",
                render: function(data, type, row, meta){
                 return ((row.last_checked)  ? row.last_checked :  "NA")
                }
            },
            { data: "blocked_count",
                render: function(data, type, row, meta){
                 return ((row.blocked_count)  ? row.blocked_count + '&nbsp; <span class="custom-tooltip" data-toggle="tooltip" title="'+row.blocked_websites+'"><i class="fa fa-info-circle" aria-hidden="true"></i></span>' :  "NA")
                }
            },
        ],
        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(9).footer() ).html(api['ad_request']        ? numberFormatter.format(api['ad_request'])                             : 0);
                $( row.column(10).footer() ).html(api['non_viewable_impressions'] ? numberFormatter.format(api['non_viewable_impressions'])       : 0);
                $( row.column(11).footer() ).html(api['ad_request'] > 0   ? (api['non_viewable_impressions']*100/api['ad_request']).toFixed(2)    : 0);
                $( row.column(12).footer() ).html(api['impressionsTotal'] ? numberFormatter.format(api['impressionsTotal'])                       : 0);
                $( row.column(13).footer() ).html(api['clicksTotal']      ? numberFormatter.format(api['clicksTotal'])                            : 0);
                $( row.column(14).footer() ).html(api['conversionsTotal'] ? numberFormatter.format(api['conversionsTotal'])                       : 0);
                $( row.column(16).footer() ).html(api['revenueTotal']     ? numberFormatter.format(api['revenueTotal'])                           : 0);
                $( row.column(18).footer() ).html(api['feed_revenue']     ? numberFormatter.format(api['feed_revenue'])                           : 0);
                $( row.column(19).footer() ).html(api['impressionsTotal'] > 0 ? (api['clicksTotal']*100/api['impressionsTotal']).toFixed(2) + '%' : '0.00%');
                $( row.column(20).footer() ).html(api['clicksTotal']      > 0 ? (api['conversionsTotal']*100/api['clicksTotal']).toFixed(2) + '%' : '0.00%');
                $( row.column(21).footer() ).html(api['impressionsTotal'] > 0 ? (api['revenueTotal']*1000/api['impressionsTotal']).toFixed(2)     : '0.00');
                $( row.column(22).footer() ).html(api['clicksTotal']      > 0 ? (api['revenueTotal']/api['clicksTotal']).toFixed(2)               : '0.00');
                $( row.column(23).footer() ).html(api['conversionsTotal'] > 0 ? (api['revenueTotal']/api['conversionsTotal']).toFixed(2)          : '0.00');
            }
    });
}

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');
    if(campaign_type.length > 0){
        if(campaign_type == 1) {
           $(".oem_div").show()
           $(".inv_div").hide();
        }else if(campaign_type == 0){
           $(".inv_div").show();
           $(".oem_div").hide();
        }
    }else{
        $(".oem_div, .inv_div").hide();
    }
});

$('#oemIdFilter').on('change',function() {
    $('#inventory_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
});

$("body").on("change", "#inventory_filter", function(){
    $('#oemIdFilter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
});
</script>

<style>
    .dataTables_processing {
        margin-top: 4% !important;
    }

</style>
@endsection