@extends('layouts.app')

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

@section('content')
@section('page_title')
    Whistle Feed Monthly 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;
    }
    .monPubFeedReport{
        height : 29px;
        float  : right;
    }
    .clearFilterMarBottom{
        margin-top: 25px !important;
    }
</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>
    <div class="col-md-9">
        <button type="submit" id="runReport" class="monPubFeedReport btn btn-sm border-0 excel-btn border-radius-0"> Run Report</button>
        @can('hasExcelPermission')
        <form class="pull-right mr-3" action="{{ url('exportmonthlypublisherReport') }}">
            @csrf
            <button type="submit" class="export-monhtlypublisher 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="month_value" id="month_value_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">
    <form>
        <div class="row d-flex align-items-center">
            <div class="form-group col-md-2">
                <label for="monthly_filter">Choose Month</label>
                <select id="monthly_filter" class="form-control">
                    <option value=''>All</option>
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
            </div>
            <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">
                <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">
                <label for="platform_filter">Platform Filter</label>
                <select id="platform_filter" name="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="domain_filter">Domain Filter</label>
                <select id="domain_filter" class="form-control selectpicker" data-live-search="true">
                    <option value=''>All</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>
    </form>
    <div class="col-8 pl-0  custom-z-index">
        @include('whistle_feed.feed_reports.clearFilter')
    </div>
    <table class="table-bordered table-hover" id="monthly-publisher-table">
        <thead>
            <tr>
                <th>Sl. No.</th>
                <th>Month</th>
                <!-- <th>Accou/nt ID</th> -->
                <th>Publisher</th>
                <th>User Name</th>
                <th>Email</th>
                <th>Mobile Number</th>
                <th>On-Boarded Date</th>
                <th>Website ID</th>
                <th>Inventory Type</th>
                <th>Platform</th>
                <th>Website/App</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>Likes</th>
                <th>Shares</th>
                <th>Clicks From Shares</th>
                <th>Conversions From Shares</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>
            </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>
            </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 month_value= '';
    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.*/
    monthlypublisherList();
    getInventories();

    // clear all filter script
    $('.clear_filter').on('click',function(){
        $('#website_id').val('')
        $('#monthly_filter   option:first').prop('selected',true);
        $('#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");
        monthlypublisherList();
    });
     /*return start and end date for  excel export*/
    $(".export-monhtlypublisher").click(function(){
        website_id = $('#website_id').val();
        month_value = $('#monthly_filter').val();   
        year_value = $('#yearly_filter').val();
        domain_filter = $('#domain_filter').val(); 
        platform_filter = $('#platform_filter').val();
        inventory_filter = $('#inventory_filter').val();
        search           = $('#monthly-publisher-table_filter input[type="search"]').val();
        $("#website_id_hidden").val(website_id);
        $("#month_value_hidden").val(month_value);
        $("#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();
    });

    /** Run Report On Click */
    $("body").on('click','#runReport', function(){
        website_id = $('#website_id').val();
        month_value = $('#monthly_filter').val();
        year_value = $('#yearly_filter').val();
        domain_filter = $('#domain_filter').val();   
        platform_filter = $('#platform_filter').val();
        inventory_filter = $('#inventory_filter').val();
        monthlypublisherList(website_id,month_value,year_value,domain_filter,platform_filter,inventory_filter);   
    });

    /*Website Id filter*/
    // $("#website_id").keyup(function(){
    //     website_id = $(this).val();
    //     month_value = $('#monthly_filter').val();
    //     year_value = $('#yearly_filter').val();
    //     domain_filter = $('#domain_filter').val();   
    //     platform_filter = $('#platform_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     monthlypublisherList(website_id,month_value,year_value,domain_filter,platform_filter,inventory_filter);   
    // });
    // $("body").on("change", "#monthly_filter", function(){
    //     month_value = $(this).val();   
    //     website_id = $('#website_id').val();  
    //     domain_filter = $('#domain_filter').val();   
    //     platform_filter = $('#platform_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     monthlypublisherList(website_id,month_value,year_value,domain_filter,platform_filter,inventory_filter);
    // });
    // $("body").on("change", "#yearly_filter", function(){
    //     year_value = $(this).val();
    //     website_id = $('#website_id').val();
    //     month_value = $('#monthly_filter').val();
    //     domain_filter = $('#domain_filter').val();
    //     platform_filter = $('#platform_filter').val();
    //     inventory_filter = $('#inventory_filter').val();
    //     monthlypublisherList(website_id,month_value,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()
    //         month_value = $('#monthly_filter').val();   
    //         platform_filter = $('#platform_filter').val();
    //         inventory_filter = $('#inventory_filter').val();
    //         monthlypublisherList(website_id,month_value,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()
    //         month_value = $('#monthly_filter').val();
    //         year_value = $('#yearly_filter').val();
    //         domain_filter = $('#domain_filter').val();
    //         inventory_filter = $('#inventory_filter').val();
    //         monthlypublisherList(website_id,month_value,year_value,domain_filter,platform_filter,inventory_filter);
    //  });
     /*Inventory Type*/
    //  $("body").on("change", "#inventory_filter", function(){
    //     website_id = $('#website_id').val()
    //     month_value = $('#monthly_filter').val();
    //     year_value = $('#yearly_filter').val();
    //     domain_filter = $('#domain_filter').val();
    //     platform_filter = $('#platform_filter').val();
    //     inventory_filter = $(this).val();
    //     monthlypublisherList(website_id,month_value,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 monthlypublisherList(website_id=null , month_value=null,year_value=null,domain_filter=null, platform_filter=null,inventory_filter=null) {
    $("#monthly-publisher-table").DataTable().clear().destroy();
    $('#monthly-publisher-table').DataTable({
        "processing": true,
        "serverSide": true,
        "paging": true,
        "searching": true,
        "pageLength": 50,
        "autoWidth": false,
        "scrollX": true,
        "ordering": true,
        "lengthChange": false,
        "scrollY":  400,
        "scrollCollapse": true,
        "fixedHeader":{ header: true},
        language: { search: '', searchPlaceholder: "Search..." },
        "order": [
            [15, "desc"]
        ],
        "ajax": {
            "url": "{{ url('getMonthlyPublisherReport') }}",
            "type": "POST",
            "data": {
                    _token             : "{{csrf_token()}}",
                    "website_id"       : website_id,
                    "month_value"      : month_value,
                    "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: "DATE_FORMAT(`date`,'%Y%m')",
                render: function (data, type, row, meta) {
                 return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            // { data: "DATE_FORMAT(`created_date`,'%Y%m')",
            { data: "date",
                render: function(data, type, row, meta){
                 return ((row.date)  ? row.date :  "NA")
                }
            },
            { data: "account_name",
                render: function(data, type, row, meta){
                 return ((row.account_name)  ? row.account_name :  "NA")
                }
            },
            { data: "username",
                render: function(data, type, row, meta){
                 return ((row.username)  ? row.username :  "NA")
                }
            },
            { data: "email",
                render: function(data, type, row, meta){
                 return ((row.email)  ? row.email :  "NA")
                }
            },
            { data: "mobile_number",
                render: function(data, type, row, meta){
                 return ((row.mobile_number)  ? row.mobile_number :  "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){
                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: "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: "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: "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: "shared_clicks",
                render: function(data, type, row, meta){
                 return Number(row.shared_clicks).toLocaleString()
                }
            },
            { data: "shared_conversions",
                render: function(data, type, row, meta){
                 return Number(row.shared_conversions).toLocaleString()
                }
            },
            { 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 == 1 && row.variable_floor_price == 1) ?  (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")
                }
            }
        ],
        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(11).footer() ).html(api['ad_request']               ? numberFormatter.format(api['ad_request'])               : 0);
                $( row.column(12).footer() ).html(api['non_viewable_impressions'] ? numberFormatter.format(api['non_viewable_impressions']) : 0);
                $( row.column(13).footer() ).html(api['ad_request']       > 0 ? (api['non_viewable_impressions']*100/api['ad_request']).toFixed(2)   : 0);
                $( row.column(14).footer() ).html(api['impressionsTotal']     ? numberFormatter.format(api['impressionsTotal']) : 0);
                $( row.column(15).footer() ).html(api['clicksTotal']          ? numberFormatter.format(api['clicksTotal'])      : 0);
                $( row.column(16).footer() ).html(api['conversionsTotal']     ? numberFormatter.format(api['conversionsTotal']) : 0);
                $( row.column(17).footer() ).html(api['sumLikes']             ? numberFormatter.format(api['sumLikes'])         : 0);
                $( row.column(18).footer() ).html(api['sumShares']            ? numberFormatter.format(api['sumShares'])        : 0);
                $( row.column(19).footer() ).html(api['sumSharedClicks']      ? numberFormatter.format(api['sumSharedClicks'])  : 0);
                $( row.column(20).footer() ).html(api['sumSharedConversions'] ? numberFormatter.format(api['sumSharedConversions']) : 0);
                $( row.column(22).footer() ).html(api['revenueTotal']         ? numberFormatter.format(api['revenueTotal'])     : 0);
                $( row.column(24).footer() ).html(api['feed_revenue']         ? numberFormatter.format(api['feed_revenue'])     : 0);
                $( row.column(25).footer() ).html(api['impressionsTotal'] > 0 ? (api['clicksTotal']*100/api['impressionsTotal']).toFixed(2) + '%' : '0.00%');
                $( row.column(26).footer() ).html(api['clicksTotal']      > 0 ? (api['conversionsTotal']*100/api['clicksTotal']).toFixed(2) + '%' : '0.00%');
                $( row.column(27).footer() ).html(api['impressionsTotal'] > 0 ? (api['revenueTotal']*1000/api['impressionsTotal']).toFixed(2) : '0.00');
                $( row.column(28).footer() ).html(api['clicksTotal']      > 0 ? (api['revenueTotal']/api['clicksTotal']).toFixed(2)           : '0.00');
                $( row.column(29).footer() ).html(api['conversionsTotal'] > 0 ? (api['revenueTotal']/api['conversionsTotal']).toFixed(2)      : '0.00');
            }
    });
}

</script>
@endsection