@extends('layouts.app')

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

@section('content')
@section('page_title')
    Whistle Feed Yearly Publisher Report
@endsection
<style>
    .dataTables_scroll {
        overflow: auto;
    }
    .btn-light, .btn-light:hover, .btn-light:focus,
    .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle {
        background-color: #fff;
        border-color: #ced4da;
    }
    .bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: #495057!important;
    }
    .bootstrap-select .dropdown-menu{
        min-width: 100%!important;
    }
    .pencil-input{
        width: 100% !important;
    }
    .yearPubFeedSubReport{
        height : 29px;
        float  : right;
    }
</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.sub_report')</div>
    <div class="form-group col-md-9">
        @can('hasExcelPermission')
        <button class="yearPubFeedSubReport btn excel-btn btn-sm border-0 border-radius-0 ">Run Report</button>
        <form class="pull-right mr-3" action="{{ url('exportYearlypublisherSubReport') }}">
            @csrf
            <button type="submit" class="export-yearlypublishersub btn-sm btn 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="year_value" id="year_value_hidden"/>
            <input type="hidden" name="domain_filter" id="domain_filter_hidden"/>
            <input type="hidden" name="platform_filter" id="platform_filter_hidden"/>
            <input type="hidden" name="inventory_filter" id="inventory_filter_hidden"/>
            <input type="hidden" name="search" id="search_filter_hidden"/>
        </form>
        @endcan
    </div>
</div>

<div class="card-body table-responsive">
        <div class="row d-flex align-items-center">
            <div class="form-group col-md-2 ">
                <label for="yearly_filter">Choose Year</label>
                <select id="yearly_filter" class="form-control">
                    <option value=''>All</option>
                                    </select>
            </div>
            <div class="form-group col-md-2 pl-0">
                <label>Website ID</label>
                <div class="prepend">
                    <span class="prefix">WFP -</span>
                    <input type="text" class="form-control pencil-input" 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-md-2 pl-0">
                <label for="platform_filter">Platform Filter</label>
                <select id="platform_filter" class="form-control" data-live-search="true" multiple>
                    <option value='0'>Website</option>
                    <option value='1'>Mobile App</option>
                </select>
            </div>
            <div class="form-group col-md-2">
                <label for="inventory_filter">Inventory Type</label>
                    <select class="form-control" name="inventory_filter[]" multiple id="inventory_filter"> </select>
            </div>
        </div>
    <div class="col-8 pl-0  custom-z-index">
        @include('whistle_feed.feed_reports.clearFilter')
    </div>
    <table class="table-bordered table-hover" id="yearly-publisher-table">
        <thead>
            <tr>
                <th>Sl. No.</th>
                <th>Year</th>
                <th>Website ID</th>
                <th>Inventory Type</th>
                <th>Platform</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>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>
            </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>
            </tr>
        </tfoot>
    </table>
</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 year_value= '';
    var website_id = '';
    var domain_filter = '';
    var platform_filter = '';
    var inventory_filter = '';

    /* call function while DOM get ready to get all records.*/
    yearlypublishersubList();
    getInventories();

    // clear all filter script
    $('.clear_filter').on('click',function(){
        $('#website_id').val('')
        $('#yearly_filter   option:first').prop('selected',true);
        $("#platform_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#inventory_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#domain_filter").val('').selectpicker("refresh");
        yearlypublishersubList();
    });
     /*return start and end date for  excel export*/
    $(".export-yearlypublishersub").click(function(){
        website_id = $('#website_id').val();
        year_value = $('#yearly_filter').val();   
        domain_filter = $('#domain_filter').val(); 
        platform_filter = $('#platform_filter').val();
        inventory_filter = $('#inventory_filter').val();
        search           = $('#yearly-publisher-table_filter input[type="search"]').val();
        $("#website_id_hidden").val(website_id);
        $("#year_value_hidden").val(year_value);
        $("#domain_filter_hidden").val(domain_filter);
        $("#platform_filter_hidden").val(platform_filter);
        $('#inventory_filter_hidden').val(inventory_filter);
        $('#search_filter_hidden').val(search);
        $(this).submit();
    });

    $('.yearPubFeedSubReport').on('click',function(){
        website_id       = $("#website_id").val();
        year_value       = $('#yearly_filter').val();   
        domain_filter    = $('#domain_filter').val();  
        platform_filter  = $('#platform_filter').val();
        inventory_filter = $('#inventory_filter').val();
        yearlypublishersubList(website_id,year_value,domain_filter,platform_filter,inventory_filter);
    });

    /*Website Id filter*/
    // $("#website_id").keyup(function(){
    //     website_id = $(this).val();
    //     year_value = $('#yearly_filter').val();   
    //     domain_filter = $('#domain_filter').val();  
    //     platform_filter = $('#platform_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     yearlypublishersubList(website_id,year_value,domain_filter,platform_filter,inventory_filter);

    // });
    // $("body").on("change", "#yearly_filter", function(){
    //     year_value = $(this).val();   
    //     website_id = $('#website_id').val();  
    //     domain_filter = $('#domain_filter').val();   
    //     platform_filter = $('#platform_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     yearlypublishersubList(website_id,year_value,domain_filter,platform_filter,inventory_filter);
    // });
    //  /*Domain filter on change*/
    //  $("body").on("change", "#domain_filter", function(){
    //         domain_filter = $(this).val();
    //         website_id = $('#website_id').val()
    //         year_value = $('#yearly_filter').val();   
    //         platform_filter = $('#platform_filter').val();
    //         inventory_filter = $('#inventory_filter').val();
    //         yearlypublishersubList(website_id,year_value,domain_filter,platform_filter,inventory_filter);
    //  });
    //  /*platform filter on change*/
    //  $("body").on("change", "#platform_filter", function(){
    //         platform_filter = $(this).val();
    //         website_id = $('#website_id').val()
    //         domain_filter = $('#domain_filter').val();
    //         year_value = $('#yearly_filter').val();   
    //         inventory_filter = $('#inventory_filter').val();
    //         yearlypublishersubList(website_id,year_value,domain_filter,platform_filter,inventory_filter);
    //  });
    //  /*Inventory Type*/
    //  $("body").on("change", "#inventory_filter", function(){
    //         platform_filter = $('#platform_filter').val();
    //         website_id = $('#website_id').val()
    //         domain_filter = $('#domain_filter').val();
    //         year_value = $('#yearly_filter').val();   
    //         inventory_filter = $(this).val();
    //         yearlypublishersubList(website_id,year_value,domain_filter,platform_filter,inventory_filter);
    //         });

    $('#inventory_filter').multiselect({
        nonSelectedText        : 'Select Inventory',
        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',
    });
});

function getInventories (){
    var website_id = $('.campaignId-slot-WebsiteID').text();
    var campaignId = $('#blockedCampaignId').val();
    $.ajax({
        url      : "{{ url('getInventories') }}",
        type     : 'GET',
        dataType : 'json',
        success: function(data) {
            $('#inventory_filter').empty();
            $.each(data, function(key, value) {
                $('#inventory_filter').append($('<option>', {
                    value : value.id,
                    text  : value.inventory_name
                }));
            });
            $('#inventory_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        }
    });
}

//all records displaying here
function yearlypublishersubList(website_id=null,year_value=null,domain_filter=null,platform_filter=null,inventory_filter=null) {
    $("#yearly-publisher-table").DataTable().clear().destroy();
    $('#yearly-publisher-table').DataTable({
        "processing": true,
        "serverSide": true,
        "paging": true,
        "searching": true,
        "pageLength": 50,
        "scrollX": true,
        "ordering": true,
        "autoWidth": false,
        "lengthChange": false,
        "scrollY":  400,
        "scrollCollapse": true,
        "fixedHeader":{ header: true},
        language: { search: '', searchPlaceholder: "Search..." },
        "order": [
            [15, "desc"]
        ],
        "ajax": {
            "url": "{{ url('getYearlyPublisherSubReport') }}",
            "type": "POST",
            "data": {
                    _token             : "{{csrf_token()}}",
                    "website_id"       : website_id,
                    "year_value"       : year_value,
                    "domain_filter"    : domain_filter,
                    "platform_filter"  : platform_filter,
                    "inventory_filter" : inventory_filter
                },
            "dataType": "json",
        },
        "columnDefs": [
            { orderable: false, targets: 0 }
               ],
        "columns": [
            {data: "year",
                render: function (data, type, row, meta) {
                return meta.row + 1;
                }
            },
            { data: "year",
                render: function(data, type, row, meta){
                 return ((row.year)  ? row.year :  "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){
                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: "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: "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: "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")
                }
            }
        ],
        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(5).footer() ).html(api['ad_request'] ? numberFormatter.format(api['ad_request'])                                     : 0);
                $( row.column(6).footer() ).html(api['non_viewable_impressions'] ? numberFormatter.format(api['non_viewable_impressions'])         : 0);
                $( row.column(7).footer() ).html(api['ad_request'] > 0    ? (api['non_viewable_impressions']*100/api['ad_request']).toFixed(2)      : 0);
                $( row.column(8).footer() ).html(api['impressionsTotal']  ? numberFormatter.format(api['impressionsTotal'])                         : 0);
                $( row.column(9).footer() ).html(api['clicksTotal']       ? numberFormatter.format(api['clicksTotal'])                              : 0);
                $( row.column(10).footer() ).html(api['conversionsTotal'] ? numberFormatter.format(api['conversionsTotal'])                        : 0);
                $( row.column(12).footer() ).html(api['revenueTotal']     ? numberFormatter.format(api['revenueTotal'])                            : 0);
                $( row.column(13).footer() ).html(api['feed_revenue']     ? numberFormatter.format(api['feed_revenue'])                            : 0);
                $( row.column(14).footer() ).html(api['impressionsTotal'] > 0 ? (api['clicksTotal']*100/api['impressionsTotal']).toFixed(2)  + '%' : '0%');
                $( row.column(15).footer() ).html(api['clicksTotal']      > 0 ? (api['conversionsTotal']*100/api['clicksTotal']).toFixed(2)  + '%' : '0%');
                $( row.column(16).footer() ).html(api['impressionsTotal'] > 0 ? (api['revenueTotal']*1000/api['impressionsTotal']).toFixed(2)      : '0.00');
                $( row.column(17).footer() ).html(api['clicksTotal']      > 0 ? (api['revenueTotal']/api['clicksTotal']).toFixed(2)                : '0.00');
                $( row.column(18).footer() ).html(api['conversionsTotal'] > 0 ? (api['revenueTotal']/api['conversionsTotal']).toFixed(2)           : '0.00');
            }
    });
}

</script>
@endsection