@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection

@section('content')
@section('page_title')
Whistle Feed Report
@endsection
<style>
    .dataTables_scroll {
        overflow: auto;
    }
    .rtbFeedSubReport{
        height      : 29px;
        float       : right;
        margin-left : 10px;
    }
    #barChart {
      max-width: 500px;
      max-height: 300px;
      width: 100%;
      height: auto;
      margin:20px;
    }
    .bid_price_input{
        display: block;
        border: 1px solid #d7d6d6;
        background:rgb(251, 251, 251);
        padding-left:70px;
    }
</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.opsLogs')</div>
            <!-- count section end -->
                @can('hasExcelPermission')
            <div class="col-md-9">
                <button type="submit" class="rtbFeedSubReport btn excel-btn btn-sm border-0 border-radius-0 ">Run Report</button>
                <form action="{{ url('exportRTBSubReport') }}" 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" />
                    <input type="hidden" name="reportValue" id="report_hidden" />
                    <input type="hidden" name="publisher" id="publisher_hidden" />
                    <input type="hidden" name="bid_price" id="bid_price_hidden" />
                    <input type="hidden" name="display_manager" id="display_manager_hidden" />
                    <input type="hidden" name="country" id="country_hidden" />
                    <input type="hidden" name="region" id="region_hidden" />
                    <input type="hidden" name="city" id="city_hidden" />
                    <input type="hidden" name="connectionType" id="connectionType_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">
                <div class="d-flex flex-wrap" id="nav-home" aria-labelledby="nav-home-tab">
                    <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='' disabled>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="report_filter">Report Type</label>
                        <select id="report_filter" class="form-control">
                            <option value='' disabled>Select</option>
                            <option value="1">All bids</option>
                            <option value="2">Failed bids</option>
                            <!-- <option value="3">Queried bids</option> -->
                        </select>
                    </div>
                    <div class="form-group col-md-2 pl-0">
                        <label for="publisher_filter">Publisher</label>
                        <input id="publisher_filter" class="form-control" placeholder='Enter Publisher Name' type="text">
                    </div>
                    <div class="form-group col-md-2 pl-0">
                        <label for="display_manager">Display Manager</label>
                        <input id="display_manager" class="form-control" placeholder='Enter Display Manager Name' type="text">
                    </div>
                    <div class="form-group col-md-2 pl-0">
                        <label for="bid_price">Bid Price</label>
                        <div class="form-group prepend d-flex ">
                        <span class="prefix bid" style="font-size:0.8rem !important;">Less than -&nbsp;</span>
                        <input id="bid_price" class="form-control bid_price_input" placeholder="Enter bid price">
                        </div>
                    </div>

                    <div class="form-group col-md-2 pl-0">
                        <label for="country_filter">Country</label>
                        <input id="country_filter" class="form-control" placeholder='Enter Country' type="text">
                    </div>

                    <div class="form-group col-md-2 pl-0">
                        <label for="region_filter">Region</label>
                        <input id="region_filter" class="form-control" placeholder='Enter Region' type="text">
                    </div>

                    <div class="form-group col-md-2 pl-0">
                        <label for="city_filter">City</label>
                        <input id="city_filter" class="form-control" placeholder='Enter City' type="text">
                    </div>

                    <div class="form-group col-md-2 pl-0">
                    <label for="connection_type_filter">Connection Type</label>
                    <select id="connection_type_filter" class="form-control">
                        <option value='' disabled selected>Select Connnection Type</option>
                        <option value="1">1 - Ethernet; Wired Connection</option>
                        <option value="2">2 - WIFI</option>
                        <option value="3">3 - Cellular Network - Unknown Generation</option>
                        <option value="4">4 - Cellular Network - 2G</option>
                        <option value="5">5 - Cellular Network - 3G</option>
                        <option value="6">6 - Cellular Network - 4G</option>
                        <option value="7">7 - Cellular Network - 5G</option>
                    </select>
                    </div>
                </div>
            <table class="table-bordered table-hover text-center" id="rtb-report-main-table">
            <thead>
                    <tr>
                        <th>Publisher</th>
                        <th>Display Manager</th>
                        <th>Bid Price</th>
                        <th>Country</th>
                        <th>Region</th>
                        <th>City</th>
                        <th>Connection Type</th>
                        <th>Language</th>
                        <th>Ad Type</th>
                        <th>Date</th>
                        <th>Count</th>
                        <th class="reason">Reason</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <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 class="reason">NA</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="mt-5" id="nav-profile">
            <div class="row justify-content-start">
                <div class="col-md-8">
                    <canvas id="barChart"></canvas>
                </div>
            </div>
        </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);
    getBarChartCounts();
    var reportValue = $("#report_filter option:selected").val();
    rtbSubReportList(start_date, end_date, reportValue);
    // $("body").on("change", "#period_filter", function() {
    //     var periodValue   = $(this).val();
    //     if (periodValue) {
    //         var date = getDates(periodValue);
    //         rtbSubReportList(date.start_date, date.end_date);
    //     }else{
    //         rtbSubReportList(start_date, end_date);
    //     }
    // });

    $("body").on('click',".rtb_report_excel",function(e){
        e.preventDefault()
        var periodValue = $("#period_filter option:selected").val();
        var date = getDates(periodValue);
        var start_date = date.start_date;
        var end_date = date.end_date;
        var reportValue = $("#report_filter option:selected").val();
        var search      = $('#rtb-report-main-table_filter input[type="search"]').val();
        let page_name   = $("#sub_report_dropdown option:selected").text();
        var publisher = $("#publisher_filter").val();
        var display_manager = $("#display_manager").val();
        var bid_price = $("#bid_price").val();
        var country = $("#country_filter").val();
        var region = $("#region_filter").val();
        var city = $("#city_filter").val();
        var connectionType = $("#connection_type_filter").val();
        // $('#from_date_hidden').val(date.start_date);
        // $('#to_date_hidden').val(date.end_date);
        // $('#search_hidden').val(search);
        // $('#report_hidden').val(reportValue);
        var selectedColumnArray = $("input:checkbox:checked[data-column-name]").map(function() {
            return $(this).data('column-name');
        }).get();

        $.ajax({
            "url" : "{{ url('exportRTBSubReport') }}",
            "type": "GET",
            "data": {
                _token              : "{{csrf_token()}}",
                fromdate            : start_date,
                todate              : end_date,
                reportValue         : reportValue,
                search              : search,
                page_name           : page_name,
                publisher           : publisher,
                display_manager     : display_manager,
                bid_price           : bid_price,
                country             : country,
                region              : region,
                city                : city,
                connectionType      : connectionType
            },
            "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');
                }
            }
        });
    });

    $("body").on('click', ".rtbFeedSubReport", function(e) {
    var periodValue = $("#period_filter option:selected").val();
    var date = getDates(periodValue);
    var reportValue = $("#report_filter option:selected").val();
    var publisher = $("#publisher_filter").val();
    var bid_price = $("#bid_price").val();
    var display_manager= $("#display_manager").val();
    var country = $("#country_filter").val();
    var region = $("#region_filter").val();
    var city = $("#city_filter").val();
    var connectionType = $("#connection_type_filter").val();
    rtbSubReportList(date.start_date, date.end_date, reportValue, publisher, display_manager,bid_price, country, region, city, connectionType);
});

});

function getBarChartCounts() {
    var countryval;
    var countval;

    $.ajax({
        "url": "{{ url('getBarChartCounts') }}",
        "type": "GET",
        "dataType": "json",
        "data": {
            _token: "{{csrf_token()}}"
        },
        "success": function(response) {
            countryval = response.map(item => item.country);
            countval = response.map(item => parseInt(item.count))
            generateBarChart(countryval, countval);
        },
        "error": function(xhr, status, error) {
            console.log('Error:', error);
        }
    });
}
function generateBarChart(countries, counts) {
    const ctx = document.getElementById('barChart').getContext('2d');
    const barColors = [
        'rgba(6, 57, 112,1)', 
        'rgba(14, 112, 6, 1)',
        'rgba(6, 81, 112, 1)', 
        'rgba(112, 6, 103, 1)', 
        'rgba(112, 6, 29, 1)', 
        'rgba(6, 103, 112, 1)',
        'rgba(99, 6, 112, 1)',
        'rgba(6, 112, 87, 1)' 
    ];

    const labelColors = [
        'rgba(6, 57, 112,1)', 
        'rgba(14, 112, 6, 1)',
        'rgba(6, 81, 112, 1)', 
        'rgba(112, 6, 103, 1)', 
        'rgba(112, 6, 29, 1)', 
        'rgba(6, 103, 112, 1)',
        'rgba(99, 6, 112, 1)',
        'rgba(6, 112, 87, 1)' 
    ];
    const barColorArray = countries.map((country, index) => barColors[index % barColors.length]);
    const barChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: countries, // X-axis labels (country names)
            datasets: [{
                label: 'Total Requests',
                data: counts, // Y-axis data (request counts)
                backgroundColor: barColorArray, // Set different color for each bar
                borderColor: barColors,
                borderWidth: 1,
                barThickness: 8
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: false
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        color: function(context) {
                            const index = context.index;
                            return labelColors[index % labelColors.length];
                        },
                        autoSkip: false,
                        maxRotation: 0
                    }
                }
            }
        }
    });
}

function rtbSubReportList(start_date, end_date, reportValue, publisher,display_manager, bid_price, country, region, city, connectionType) {
    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('getRTBSubReport') }}",
            "dataType" : "json",
            "type"     : "POST",
            "data"     : {
                _token       : "{{csrf_token()}}",
                "start_date" : start_date,
                "end_date"   : end_date,
                "reportValue": reportValue,
                "publisher"  : publisher,
                "bid_price"  : bid_price,
                "display_manager": display_manager,
                "country"    : country,
                "region"     : region,
                "city"       : city,
                "connectionType": connectionType
            },
        },
        "columnDefs"   : [
              { orderable: false, targets: 0 }
        ],
        "columns": [
            { 
                data   : "publisher",
                render : function(data, type, row, meta){
                    return ((row.publisher)  ? row.publisher :  "NA")
                }
            },
            { 
                data   : "display_manager",
                render : function(data, type, row, meta){
                    return ((row.display_manager)  ? row.display_manager :  "NA")
                }
            },
            { 
                data   : "bid",
                render : function(data, type, row, meta){
                    return ((row.bid)  ? row.bid :  "NA")
                }
            },
            { 
                data   : "country",
                render : function(data, type, row, meta){
                    return ((row.country)  ? row.country :  "NA")
                }
            },
            { 
                data   : "region",
                render : function(data, type, row, meta){
                    return ((row.region)  ? row.region :  "NA")
                }
            },
            { 
                data   : "city",
                render : function(data, type, row, meta){
                    return ((row.city)  ? row.city :  "NA")
                }
            },
            { 
                data   : "connectionType",
                render : function(data, type, row, meta){
                    return ((row.connectionType)  ? row.connectionType:  "NA")
                }
            },
            { 
                data   : "language",
                render : function(data, type, row, meta){
                    return ((row.language)  ? row.language :  "NA")
                }
            },
            { 
                data   : "ad_type",
                render : function(data, type, row, meta){
                    return ((row.ad_type)  ? row.ad_type:  "NA")
                }
            },
            { 
                data   : "date",
                render : function(data, type, row, meta){
                    return ((row.date)  ? row.date :  "NA")
                }
            },
            { 
                data   : "count",
                render : function(data, type, row, meta){
                    return ((row.count)  ? row.count:  "0")
                }
            },
            { 
                data   : "reason",
                render : function(data, type, row, meta){
                    return ((row.reason)  ? row.reason:  "NA")
                }
            }
        ],
        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(8).footer() ).html(api['count_total'] ? numberFormatter.format(api['count_total']) : 0);
        }
    });
    var table = $("#rtb-report-main-table").DataTable();
    if(reportValue == 1){
        table.columns([11]).visible(false);
        $(".reason").hide();
    } 
    else{
        table.columns([9]).visible(true);
        $(".reason").show();
    }
}

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