@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title')
Whistle Fill Rate Report
@endsection
@include('whistle_feed.feed_reports.feed_log_header')
<div class="container-fluid">
    <div class="card-header">
        <h4> <b>Fill Rate Report</b>
            <form class="pull-right mb-0" action="{{ url('exportfillratereport') }}" method="POST">
                @csrf
                <button type="submit" class="export_fill_rate_report btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                <input type="hidden" name="from_date" id="from_date_hidden" />
                <input type="hidden" name="to_date" id="to_date_hidden" />
            </form>
        </h4>
    </div>
    <div class="card p-3">
        <div class="card-body table-responsive">
            <div class="d-flex">
                <div class="form-group col-2">
                    <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-2">
                    <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 table-bordered table-hover" id="fill_rate_report_table">
                <thead>
                    <tr>
                        <th>S.no</th>
                        <th>Website Id</th>
                        <th>Website</th>
                        <th>Ad Request</th>
                        <th>Ad Response</th>
                        <th>Empty Response</th>
                        <th>Total impressions</th>
                        <th>Viewable Impressions</th>
                        <th>Fill Rate Miss <span data-toggle="tooltip" title="(Ad Response - Total Impressions)/ Ad Response x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </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">
    var url_regex = /^(http|https)/;
    $(document).ready(function() {

        // fetch all data in data-table
        getFeedDailyReport();

        /**select from date here***/
        $("#start_date").datepicker({
            dateFormat: 'yy-mm-dd',
            maxDate: 0,
            autoclose: true,
            todayHighlight: true,
            to_date: 'today',
            onSelect: function(selectedDate) {
                var from_date = $('#start_date').datepicker('getDate');
                var todaysDate = new Date();
                if (todaysDate.setHours(0, 0, 0, 0) == from_date.setHours(0, 0, 0, 0)) {
                    $('#end_date').datepicker('option', 'maxDate', from_date);
                } else {
                    $('#end_date').datepicker('option', 'maxDate', "-1D");
                    $('#end_date').datepicker('option', 'minDate', from_date);
                }
                $('#end_date').datepicker('setDate', from_date);
                getFeedDailyReport();
            }
        });
        /**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 from_date = $('#start_date').datepicker('getDate');
                var to_date = $('#end_date').datepicker('getDate');
                if (from_date == null) {
                    $('#start_date').datepicker('setDate', to_date);
                }
                if (to_date < from_date) {
                    var minDate = $('#end_date').datepicker('option', 'minDate', from_date);
                    $('#end_date').datepicker('setDate', minDate);
                }
                getFeedDailyReport();
            },
        });
        // export for fill rate report
        $(".export_fill_rate_report").click(function() {
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            $('#from_date_hidden').val(start_date);
            $('#to_date_hidden').val(end_date);
            $(this).submit();
        });
    })
    // function for populating the datatable on load 
    function getFeedDailyReport() {
        var from_date = $('#start_date').val();
        var to_date = $('#end_date').val();
        $("#fill_rate_report_table").DataTable().clear().destroy();
        $('#fill_rate_report_table').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": true,
            "ordering": true,
            "scrollX": true,
            "lengthChange": false,
            "order": [
                [3, "desc"]
            ],
            "language": {
                search: '',
                searchPlaceholder: "Search...",
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="margin-top:50px;"></i><span class="sr-only">Loading...</span> ',
                "infoFiltered": ""
            },
            "ajax": {
                "url": "{{ url('getFillRateReport') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                    "from_date": from_date,
                    "to_date": to_date
                },
            },
            aoColumns: [{
                    data: "ad_request",
                    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",
                    render: function(data, type, row, meta) {
                        let url = url_regex.test(String(row.website).toLowerCase()) == true ? row.website : 'https://' + row.website;
                        data = '<a href = ' + url + ' target="_blank" class="text-dark"> ' + row.website + ' </a>';
                        return data
                    }
                },
                {
                    data: "ad_request",
                    render: function(data, type, row, meta) {
                        return ((row.ad_request) ? row.ad_request : "0")
                    }
                },
                {
                    data: "ad_response",
                    render: function(data, type, row, meta) {
                        return ((row.ad_response) ? row.ad_response : "0")
                    }
                },
                {
                    data: "empty_response",
                    render: function(data, type, row, meta) {
                        return ((row.empty_response) ? row.empty_response : "0")
                    }
                },
                {
                    data: "total_imp",
                    render: function(data, type, row, meta) {
                        return ((row.total_imp) ? row.total_imp : "0")
                    }
                },
                {
                    data: "viewable_imp",
                    render: function(data, type, row, meta) {
                        return ((row.viewable_imp) ? row.viewable_imp : "0")
                    }
                },
                {
                    data: "fill_rate_miss",
                    render: function(data, type, row, meta) {
                        if ((row.fill_rate_miss < 0 || row.fill_rate_miss > 5)) {
                            data = `<label class="bg-light-red-trigger"> ${row.fill_rate_miss ? row.fill_rate_miss : 0} </label>`;
                        } else {
                            data = `<label> ${row.fill_rate_miss ? row.fill_rate_miss : 0} </label>`;
                        }
                        setTimeout(() => {
                            var tr_close = $(".bg-light-red-trigger").closest('tr');
                            tr_close.addClass('bg-light-red');
                        }, 10);
                        return data;
                    }
                },
            ]
        });
    }
</script>
@endsection