@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;
    }
</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-0 mr-0 mt-4 mb-n4">
            <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.report')</div>
            <!-- count section end -->
                @can('hasExcelPermission')
            <div class="col-md-9">
                <form action="{{ url('exportRTBReport') }}" class="pull-right" method="post">
                    @csrf
                    @csrf
                    <input type="hidden" name="fromdate" id="from_date_hidden" />
                    <input type="hidden" name="todate" id="to_date_hidden" />
                    <input type="hidden" name="search" id="search_hidden" />
                    <button type="submit" class="rtb_report_excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                </form>
            </div>
                @endif
        </div>
        <div class="card-body table-responsive">
            <form>
                <div class="d-flex flex-wrap">
                    <div class="form-group col-md-2 pl-0">
                        <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>
            </form>
            <table class="table-bordered table-hover text-center" id="rtb-report-main-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Website Id</th>
                        <th>Website Name</th>
                        <th>Date</th>
                        <th>Bid Request</th>
                        <th>Participated</th>
                        <th>Billable Bids</th>
                        <th>Bids Won</th>
                        <th>Bids Lost</th>
                        <th>Maximum Bid</th>
                        <th>Minimum Bid</th>
                        <th>Average Bid</th>
                        <th>RTB Revenue</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Total</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                    </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 start_date = new Date().toJSON().slice(0, 10);
    var end_date = new Date().toJSON().slice(0, 10);
    rtbReportList(start_date, end_date);
    
    $("body").on("change", "#period_filter", function() {
        var periodValue   = $(this).val();
        if (periodValue) {
            var date = getDates(periodValue);
            rtbReportList(date.start_date, date.end_date);
        }else{
            rtbReportList(start_date, end_date);
        }
    });

    $("body").on('click',".rtb_report_excel",function(e){
        var periodValue = $("#period_filter option:selected").val();
        var date        = getDates(periodValue);
        var search      = $('#rtb-report-main-table_filter input[type="search"]').val();
        $('#from_date_hidden').val(date.start_date);
        $('#to_date_hidden').val(date.end_date);
        $('#search_hidden').val(search);
    });
});

function rtbReportList(start_date, end_date) {
    const numberFormatter = Intl.NumberFormat('en-IN');
    $('.rtb_report_excel').removeAttr('disabled');
    $('.rtb_report_excel').removeClass('bg-secondary border-0');
    
    $("#rtb-report-main-table").DataTable().clear().destroy();
    $('#rtb-report-main-table').DataTable({
        "bautoWidth"   : false,
        "processing"   : true,
        "serverSide"   : true,
        "paging"       : true,
        "lengthChange" : false,
        "searching"    : true,
        "scrollX"      : true,
        "lengthChange" : false,
        "pageLength"   : 50,
        "ordering"     : true,
        "language"     : { search: '', searchPlaceholder: "Search..." },
        "order"        : [
            [0, "desc"]
        ],
    
        "ajax": {
            "url"      : "{{ url('getRTBReport') }}",
            "dataType" : "json",
            "type"     : "POST",
            "data"     : {
                _token       : "{{csrf_token()}}",
                "start_date" : start_date, 
                "end_date"   : end_date
            },
        },
        "columnDefs"   : [
              { orderable: false, targets: 0 }
        ],
        "columns": [
            {
                data   : "website_id",
                render : function(data, type, row, meta){
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data   : "website_id",
                render : function(data, type, row, meta){
                    return ((row.website_id) ? row.website_id : "NA")
                }
            },
            {
                data   : "website_name",
                render : function(data, type, row, meta){
                    return ((row.website_name) ? row.website_name : "NA")
                }
            },
            { 
                data   : "created_date",
                render : function(data, type, row, meta){
                    return ((row.created_date)  ? row.created_date :  "NA")
                }
            },
            { 
                data   : "request",
                render : function(data, type, row, meta){
                    return ((row.request)  ? numberFormatter.format(row.request) :  "0")
                }
            },
            { 
                data   : "participated",
                render : function(data, type, row, meta){
                    return ((row.participated)  ? numberFormatter.format(row.participated) :  "0")
                }
            },
            { 
                data   : "billable_bids",
                render : function(data, type, row, meta){
                    return ((row.billable_bids)  ? numberFormatter.format(row.billable_bids) :  "0")
                }
            },
            { 
                data   : "bids_won",
                render : function(data, type, row, meta){
                    return ((row.bids_won)  ? numberFormatter.format(row.bids_won) :  "0")
                }
            },
            { 
                data   : "bids_lost",
                render : function(data, type, row, meta){
                    return ((row.bids_lost)  ? numberFormatter.format(row.bids_lost) :  "0")
                }
            },
            { 
                data   : "max_bid_price",
                render : function(data, type, row, meta){
                    return ((row.max_bid_price)  ? numberFormatter.format(row.max_bid_price) :  "0")
                }
            }, 
            { 
                data   : "min_bid_price",
                render : function(data, type, row, meta){
                    return ((row.min_bid_price)  ? numberFormatter.format(row.min_bid_price) :  "0")
                }
            },
            { 
                data   : "avg_bid_price",
                render : function(data, type, row, meta){
                    return ((row.avg_bid_price)  ? numberFormatter.format(row.avg_bid_price) :  "0")
                }
            },          
            { 
                data   : "rtb_revenue",
                render : function(data, type, row, meta){
                    return ((row.rtb_revenue)  ? numberFormatter.format(row.rtb_revenue) :  "0")
                }
            }
        ],
        fnDrawCallback: function( settings ) {
            $('.paginate_button').click(function(){
            $('.dataTables_scrollBody').scrollTop(0);
            })
        },
        footerCallback: function(row, start, end, display) {
                    var row = this.api();
                    var api = this.api().ajax.json().footer_total[0];
                    $( row.column(4).footer() ).html(api['request_total']     ? numberFormatter.format(api['request_total'])     : 0);
                    $( row.column(5).footer() ).html(api['totalParticipated'] ? numberFormatter.format(api['totalParticipated']) : 0);
                    $( row.column(6).footer() ).html(api['totalBillableBids'] ? numberFormatter.format(api['totalBillableBids']) : 0);
                    $( row.column(7).footer() ).html(api['totalBidsWon']      ? numberFormatter.format(api['totalBidsWon'])      : 0);
                    $( row.column(8).footer() ).html(api['totalBidsLost']     ? numberFormatter.format(api['totalBidsLost'])     : 0);
                    $( row.column(12).footer() ).html(api['totalRTBRevenue']  ? numberFormatter.format(api['totalRTBRevenue'])   : 0);
        }
    }); 
}

function getDates(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);
        return { start_date: start_date, end_date: end_date };
    }
    //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);
        return { start_date: start_date, end_date: end_date };
    }
    //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() - 1);
        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);
        return { start_date: start_date, end_date: end_date };
    }
    //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);
        return { start_date: start_date, end_date: end_date };
    }
    //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);
        return { start_date: start_date, end_date: end_date };
    }
    //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() - 1);
        end_date = new Date(end_date).toJSON().slice(0, 10);
        return { start_date: start_date, end_date: end_date };
    }
    //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);
        return { start_date: start_date, end_date: end_date };
    }
}     
</script>
@endsection