@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;
}
.filter-table-inline .form-group {
    flex-grow: 1;
    width: auto;
    max-width: 170px;
}

.col-md-2 {
    max-width: 172px !important;
}
.exportFeedSspSubReport{
    height: 29px;
}
.max_width{
    padding-bottom: 16px;
    display: flex;
    align-items: end;
    justify-content: end;
}
.advSspSubReport{
    height       : 29px;
    float        : right;
    margin-right : 10px;
    margin-left  : 12px;
}
</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-1 mr-0 mt-3 mb-n4">
            <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.report')</div>
            <div class="col-md-6">
            </div>
            <div class="col-md-3 max_width">
                <button type="submit" class="advSspSubReport btn excel-btn btn-sm border-0 border-radius-0 ">Run Report</button>
            @can('hasExcelPermission')
                    <button type="submit" class="exportFeedSspSubReport btn excel-btn btn-sm border-0 border-radius-0"> <i class="fa fa-download"> </i> &nbsp; Export</button>
            @endif
            </div>
        </div>
        <div class="card-body table-responsive">
        <div>
        <div class="filter-table-inline pl-0 d-flex flex-wrap">
            <div class="form-group col-md-2 pl-0 mr-3">
                <label for="period_filter">Choose Time Period</label>
                <select id="period_filter" class="form-control">
                    <option value=''>Select</option>
                    <option value="1" selected>Today</option>
                    <option value="2">Yesterday</option>
                    <option value="3">This Month</option>
                    <option value="4">Last Month</option>
                    <option value="5">Last 6 Months</option>
                    <option value="6">This Year</option>
                    <option value="7">Last Year</option>
                </select>
            </div>
            <div class="form-group col-md-2 mr-3 pl-0">
                <label for="start_date">From Date</label>
                <input type="text" class="form-control" id="start_date" name="start_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
            </div>

            <div class="form-group col-md-2 mr-3 pl-0">
                <label for="end_date">To Date</label>
                <input type="text" class="form-control" id="end_date" name="end_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
            </div>
        </div>
            <table class="table-bordered table-hover text-center" id="feedSsp-report-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>DSP</th>
                        <th>Bids Won</th>
                        <th>Impressions</th>
                        <th>Clicks</th>
                        <th>Conversions</th>
                        <th>View Rate %</th>
                        <th>CPM Spends</th>
                        <th>CPC Spends</th>
                        <th>CPA Spends</th>
                        <th>Total Spends</th>
                        <th>CTR % <span data-toggle="tooltip" title="(clicks * (100 / Impressions))"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CR % <span data-toggle="tooltip" title="(Conversions / Clicks) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPM <span data-toggle="tooltip" title="(Spends / Impressions) x 1000"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPC <span data-toggle="tooltip" title="(Spends / Clicks)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPA <span data-toggle="tooltip" title="(Spends / Conversions)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script type="application/javascript">
$(document).ready(function() {
    feedSspSubReportList();

    function feedSspSubReportList() {
        const numberFormatter = Intl.NumberFormat('en-IN');
        $('.exportFeedSspSubReport').removeAttr('disabled');
        $('.exportFeedSspSubReport').removeClass('bg-secondary');
        var start_date = $('#start_date').val();
        var end_date   = $('#end_date').val();
        $("#feedSsp-report-table").DataTable().clear().destroy();
        $('#feedSsp-report-table').DataTable({
            "processing": true,
            "lengthChange": false,
            "serverSide": true,
            "paging": false,
            "searching": false,
            "scrollX": true,
            "pageLength": 2,
            "ordering": true,
            "lengthChange": false,
            "scrollY":  400,
            "scrollCollapse": true,
            "fixedHeader":{ header: true},
            "info": false, // Hide the info display
            "order" : [
                [1, "desc"]
            ],
            "ajax": {
                "url"  : "{{ url('getFeedSspSubReport') }}",
                "type" : "POST",
                "data" : {
                        _token             : "{{csrf_token()}}",
                        "start_date"       : start_date,
                        "end_date"         : end_date
                    },
                "dataType" : "json",
            },
            "columnDefs"    : [
                { orderable : false, targets: '_all' }
                   ],
            "columns": [
                { data: "id",
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: "Dsp",
                    render: function(data, type, row, meta){
                        return ((row.Dsp) ? row.Dsp : "NA")
                    }
                },
                { data: "Bids_Won",
                    render: function(data, type, row, meta){
                     return ((row.Bids_Won) ? numberFormatter.format(Number(row.Bids_Won)) : "0")
                    }
                },
                { data: "Impressions",
                    render: function(data, type, row, meta){
                     return ((row.Impressions) ? numberFormatter.format(row.Impressions) : "0")
                    }
                },
                { data: "Clicks",
                    render: function(data, type, row, meta){
                     return ((row.Clicks) ? numberFormatter.format(row.Clicks) : "0")
                    }
                },
                { data: "Conversions",
                    render: function(data, type, row, meta){
                     return ((row.Conversions) ? numberFormatter.format(row.Conversions) : "0")
                    }
                },
                { data: "View_Rate",
                    render: function(data, type, row, meta){
                     return ((row.View_Rate) ? row.View_Rate+' %':"0 %")
                    }
                },
                { data: "Cpm_Spends",
                    render: function(data, type, row, meta){
                     return ((row.Cpm_Spends) ? numberFormatter.format(row.Cpm_Spends) :  "0")
                    }
                },
                { data: "Cpc_Spends",
                    render: function(data, type, row, meta){
                     return ((row.Cpc_Spends) ? numberFormatter.format(row.Cpc_Spends) :  "0")
                    }
                },
                { data: "Cpa_Spends",
                    render: function(data, type, row, meta){
                     return ((row.Cpa_Spends) ? numberFormatter.format(row.Cpa_Spends) :  "0")
                    }
                },
                { data: "Total_Spends",
                    render: function(data, type, row, meta){
                     return ((row.Total_Spends) ? numberFormatter.format(row.Total_Spends) :  "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);
                })
            }
        });
        $('.advSelectedOption').each(function() {
                if($(this).is(':checked')){
                    $("#report-main-table").DataTable().column( $(this).data('column') ).visible(  true );
                }else{
                    $("#report-main-table").DataTable().column( $(this).data('column') ).visible(  false );
                }
        });
    }

    $(document).on("click",".exportFeedSspSubReport",function(e){
        e.preventDefault()
        let page_name         = $("#sub_report_dropdown option:selected").text();
        var start_date        = $('#start_date').val();
        var end_date          = $('#end_date').val();
        $('.exportFeedSspSubReport').attr('disabled','disabled');
        $('.exportFeedSspSubReport').addClass('bg-secondary');
        $.ajax({
            "url": "{{ url('exportFeedSspReport') }}",
            "type": "GET",
            "data": {
                page_name        : page_name,
                fromdate         : start_date,
                todate           : end_date
            },
            "dataType": "json",
            success: function(response) {
                if(response){
                    toastr.success('File Will Be Sent To Your Registered Email Id');
                }else{
                    toastr.error('Something Went Wrong or File Is Already Being Created');
                }
            }
        });
    });

    /**select from date here***/
    $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        endDate: 'today',
        onSelect: function (selectedDate) {
            var startDate = $('#start_date').datepicker('getDate');
            var todaysDate = new Date();
            var client_id = $('#client_filter').val();
            if (todaysDate.setHours(0,0,0,0) == startDate.setHours(0,0,0,0)) {
                $('#end_date').datepicker('option', 'maxDate', startDate);
            } else {
                $('#end_date').datepicker('option', 'maxDate', todaysDate);
            }
            $('#end_date').datepicker('option', 'minDate', startDate);
            $('#end_date').datepicker('setDate', startDate);
            $('#period_filter').val('');
        }
    });

    /**select to date here***/
    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        // minDate: $("#start_date").datepicker("getDate"),
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        onClose: function() {
            var startDate = $('#start_date').datepicker('getDate');
            var endDate = $('#end_date').datepicker('getDate');
            if (startDate == null) {
                $('#start_date').datepicker('setDate', endDate);
            }
            if (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', minDate);
            }
        },
        onSelect: function() {
            $('#period_filter').val('');
        }
    });
    
    $("body").on("change", "#period_filter", function(){
        var periodValue = $(this).val();           
        $("#start_date").val('');
        $("#end_date").val('');
        if(periodValue!=''){
        //filter by today
        if(periodValue=='1'){
            var start_date = new Date().toJSON().slice(0,10);
            var end_date = new Date().toJSON().slice(0,10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'maxDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
        }

        //filter by yesterday
        else if(periodValue=='2'){
            var start_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
            var end_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'maxDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
        }

        //filter by this month
        else if(periodValue=='3'){
            var start_date = new Date();
            var end_date = new Date();
            end_date =   end_date.setDate(end_date.getDate());
            end_date = new Date(end_date).toJSON().slice(0, 10);
            start_date = new Date(start_date.setMonth(start_date.getMonth()));
            start_date = new Date(start_date.setDate(1));
            start_date = start_date.toJSON().slice(0,10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('option', 'maxDate', end_date); // Set maxDate to today
            $('#end_date').datepicker('setDate', end_date);
            $('#end_date').val(end_date); // Ensure end date is set in the input field
        }

        //filter by last month
        else if(periodValue=='4'){
            var start_date = new Date();
            var end_date = new Date();
            start_date = new Date(start_date.setDate(1));
            start_date = new Date(start_date.setMonth(start_date.getMonth() - 1));
            start_date = start_date.toJSON().slice(0,10);
            end_date = new Date(end_date.setDate(1)-864e5);
            end_date = end_date.toJSON().slice(0,10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
        }

        //filter by last 6 month
        else if(periodValue=='5')
        {
            var start_date = new Date();
            var end_date = new Date();
            end_date = new Date(end_date.setDate(1)-864e5);
            end_date = end_date.toJSON().slice(0,10);
            start_date = new Date(start_date.setDate(1));
            start_date = new Date(start_date.setMonth(start_date.getMonth() - 6));
            start_date = start_date.toJSON().slice(0,10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
        }

        //filter by this year
        else if(periodValue=='6')
        {
            var end_date = new Date().toJSON().slice(0,10);
            var makeDate = new Date(end_date);
            var start_date = new Date(makeDate.setMonth(0));
            start_date = new Date(makeDate.setDate(1));
            start_date = start_date.toJSON().slice(0,10);
            end_date = new Date();
            end_date =   end_date.setDate(end_date.getDate());
            end_date = new Date(end_date).toJSON().slice(0, 10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('option', 'maxDate', end_date); // Set maxDate to today
            $('#end_date').datepicker('setDate', end_date);
            $('#end_date').val(end_date); // Ensure end date is set in the input field
        }
        //filter by previous year
        else if(periodValue=='7'){
            var end_date = new Date();
            var start_date = new Date();
            end_date = new Date(end_date.setMonth(0));
            end_date = new Date(end_date.setDate(1)-864e5).toJSON().slice(0,10);
            start_date = new Date(start_date.setMonth(start_date.getMonth() - 12));
            start_date = new Date(start_date.setMonth(0));
            start_date = new Date(start_date.setDate(1)).toJSON().slice(0,10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
        }
        }
    });

    $(document).on("click",".advSspSubReport",function(e){
        e.preventDefault()
        feedSspSubReportList();
    });
});
</script>
@endsection