@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;
    }
    .postback_report{
        float        : right !important;
        margin-right : 0px;
        margin-left  : 12px;
    }
    .max_wid{
        margin-left: auto;
        margin-right: 5px !important;
    }
</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>
            <div class="col-md-3 max_wid">
                <button type="submit" class="excel-btn btn btn-sm border-radius-0 postback_report">Run Report</button>
                @can('hasExcelPermission')
                <form action="{{ url('exportPostBackSubReport') }}" class="pull-right" method="POST">
                    @csrf
                    <input type="hidden" name="fromdate" id="from_date_hidden" />
                    <input type="hidden" name="todate" id="to_date_hidden" />
                    <input type="hidden" name="searchValue" id="search_value_hidden" />
                    <input type="hidden" name="creative_id" id="creative_id_hidden" />
                    <input type="hidden" name="website_id" id="website_id_hidden" />
                    <button type="submit" class="postback_report_excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                </form>
                @endif
            </div>
        </div>
        <div class="card-body table-responsive">
            <form>
                <div class="d-flex flex-wrap" style="margin-top:15px;">
                    <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 class="form-group col-md-2 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 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 class="form-group col-md-2 pl-0">
                        <label>Creative ID</label>
                        <input type="text" class="form-control" id="creative_id" name="creative_id" placeholder="Search Creative ID" onkeypress="return validateInput(event)"> 
                    </div>
                    <div class="form-group col-md-2 pl-0">
                        <label>Website ID</label>
                        <div class="form-group prepend d-flex">
                            <span class="prefix" style="font-size:0.8rem !important;">WFP -</span>
                            <input type="text" class="form-control pencil-input" id="website_id" name="website_id" placeholder="Search Website ID" onkeypress="return validateInput(event)">
                        </div>
                    </div>
                </div>
            </form>
            <table class="table-bordered table-hover text-center" id="postback-report-main-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Campaign Id</th>
                        <th>Creative Id</th>
                        <th>Website Id</th>
                        <th>Goal Name</th>
                        <th>Created Date</th>
                        <th>Current Hour</th>
                        <th>City</th>
                        <th>Region</th>
                        <th>Country</th>
                        <th>Postback Url</th>
                        <th>Postback Response</th>
                        <th>Payout</th>
                        <th>Manual Postback Trigger Count</th>
                        <th>Action</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>
                    </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);
    postBackSubReport(start_date, end_date);
    
    //on change of time period filter function
    $("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);
                $('#end_date').datepicker('setDate', end_date);
                $('#end_date').val(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);
                $('#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);
                $('#end_date').datepicker('setDate', end_date);
                $('#end_date').val(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);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
            }
        }
    });
    /**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',
        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('');
        }
    });

    $(document).on("click",".postback_report",function(e){
        e.preventDefault()
        var start_date        = $('#start_date').val();
        var end_date          = $('#end_date').val();
        var website_id         = $('#website_id').val();
        var creative_id       = $('#creative_id').val();
        let page_name         = $("#sub_report_dropdown option:selected").text();
        var optionalFilter    = $('.advSelectedOption:checked').length;
        postBackSubReport(start_date, end_date, creative_id, website_id);
    });

    $("body").on("click","#postback_action",function(e){
        e.preventDefault()
        var rowUrl = $(this).attr('row-url');
        var rowId  = $(this).attr('row-id');
        $.ajax({
            url      : "{{ url('triggerPostbackUrl') }}",
            type     : "POST",
            dataType : "json",
            data     : {
                _token       : "{{csrf_token()}}",
                postback_url : rowUrl,
                id           : rowId
            },
            success  : function(response) {
                if (response.status === 'error') {
                    toastr.error(response.data);
                } else if(response.data){
                    toastr.success(response.data);
                    setTimeout(function() {
                        $(".postback_report").trigger("click");
                    }, 5000);
                }
            }
        });
    });
    //export button on click
    $("body").on('click',".postback_report_excel",function(e){
        var searchValue = $('#postback-report-main-table_filter input[type="search"]').val();
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var website_id  = $('#website_id').val();
        var creative_id = $('#creative_id').val();
        $('#from_date_hidden').val(start_date);
        $('#to_date_hidden').val(end_date);
        $('#search_value_hidden').val(searchValue);
        $('#creative_id_hidden').val(creative_id);
        $('#website_id_hidden').val(website_id);
    });
});

function postBackSubReport(start_date, end_date, creative_id=0, website_id=0) {
    const numberFormatter = Intl.NumberFormat('en-IN');
    $('.postback_report_excel').removeAttr('disabled');
    $('.postback_report_excel').removeClass('bg-secondary border-0');
    
    $('#postback-report-main-table').DataTable().clear().destroy();
    $('#postback-report-main-table').DataTable({
        "bautoWidth"   : false,
        "processing"   : true,
        "serverSide"   : true,
        "paging"       : true,
        "lengthChange" : false,
        "searching"    : true,
        "scrollX"      : true,
        "lengthChange" : false,
        "pageLength"   : 50,
        "ordering"     : true,
        "scrollY"      :  400,
        "scrollCollapse": true,
        "fixedHeader"  :{ header: true},
        "language"     : { search: '', searchPlaceholder: "Search..." },
        "order"        : [
                            [0, "desc"]
                         ],
        "ajax": {
            "url"      : "{{ url('getPostBackSubReport') }}",
            "dataType" : "json",
            "type"     : "POST",
            "data"     : {
                _token       : "{{csrf_token()}}",
                "start_date" : start_date, 
                "end_date"   : end_date,
                "creative_id": creative_id,
                "website_id" : website_id
            },
        },
        "columnDefs"   : [
              { orderable: false, targets: 0 }
        ],
        "columns": [
            {
                data   : "campaign_id",
                render : function(data, type, row, meta){
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data   : "campaign_id",
                render : function(data, type, row, meta){
                    return (row.campaign_id ? row.campaign_id : "NA")
                }
            },
            { 
                data   : "creative_id",
                render : function(data, type, row, meta){
                    return (row.creative_id ? row.creative_id : "NA")
                }
            },
            { 
                data   : "website_id",
                render : function(data, type, row, meta){
                    return (row.website_id ? row.website_id : "NA")
                }
            },
            { 
                data   : "goal_name",
                render : function(data, type, row, meta){
                    return (row.goal_name ? row.goal_name : "NA")
                }
            },
            {
                data   : "created_date",
                render : function(data, type, row, meta){
                    return (row.created_date ? row.created_date : "NA")
                }
            },
            {
                data   : "current_hour",
                render : function(data, type, row, meta){
                    return (row.current_hour ? row.current_hour : "0")
                }
            },
            {
                data   : "city",
                render : function(data, type, row, meta){
                    return (row.city ? row.city : "NA")
                }
            },
            {
                data   : "region",
                render : function(data, type, row, meta){
                    return (row.region ? row.region : "NA")
                }
            },
            {
                data   : "country",
                render : function(data, type, row, meta){
                    return (row.country ? row.country : "NA")
                }
            },
            { 
                data   : "postback_url",
                render : function(data, type, row, meta){
                    const url = row.postback_url || "NA";
                    const displayText = url.length > 40 ? url.substring(0, 40) + "..." : url;
                    return `<span title="${url}">${displayText}</span>`
                }
            },
            { 
                data   : "postback_response",
                render : function(data, type, row, meta){
                    return (row.postback_response ? row.postback_response : "NA")
                }
            },
            { 
                data   : "payout",
                render : function(data, type, row, meta){
                    return (row.payout ? row.payout : "NA")
                }
            },
            { 
                data   : "postback_trigger_count",
                render : function(data, type, row, meta){
                    return (row.postback_trigger_count ? row.postback_trigger_count : 0)
                }
            },
            @can('hasAddPermission') {
                data: "postback_response",
                render: function(data, type, row, meta) {
                    var btn_enable = row.postback_response != 'No Postback' ? '' : 'disabled';
                    data = `<button type='button' class='btn btn-success btn-sm shadow-sm' row-url='${row.postback_url}' row-id='${row.id}' id='postback_action' ${btn_enable} style='background-color: green; border-color: green;'>Trigger Postback</button>`;
                    return data;
                }
            }
            @endcan
        ],
        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(11).footer() ).html(api['postbackResponseTotal'] ? numberFormatter.format(api['postbackResponseTotal']) : 0);
            $( row.column(12).footer() ).html(api['payoutTotal'] ? numberFormatter.format(api['payoutTotal']) : 0);
            $( row.column(13).footer() ).html(api['postbackTriggerTotal'] ? numberFormatter.format(api['postbackTriggerTotal']) : 0);
        }
    });
}

function validateInput(event) {
    var inputValue = event.key;
    if (inputValue === '0' && event.target.value === '') {
        // If '0' is the first character and the input is empty, prevent entering '0'
        event.preventDefault();
        return false;
    }
    return event.charCode >= 48 && event.charCode <= 57; // Allow only digits (0-9)
}
</script>
@endsection