@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')

@section('page_title')
    Bidder Health
@endsection
<style>
    .mb-n5 {
        margin-bottom: -5rem !important;
    }
    .chart-container {
        width: 80%;
        height: 350px;
        margin-bottom: 2rem;
    }
</style>

<div class="container-fluid">
    <div class="card mt-4">
        <div class="card-body table-responsive">
            <div class="row">
                <div class="form-group col-md-2">
                    @include('whistle_feed.menu_dropdown.troubleshooting')
                </div>
            </div>
            <div class="row mb-n3">
                <div class="form-group col-md-12" style="display:flex;justify-content: end;align-items: end;">
                    <div class="form-group col-md-2 oem_div" style="padding-left: 1px;">
                        <label class="labelText">Time</label>
                        <select id="hour_filter" class="form-control">
                            <option value="1" selected>Last Hour</option>
                            <option value="3">Last 3 Hours</option>
                            <option value="6">Last 6 Hours</option>
                            <option value="12">Last 12 Hours</option>
                            <option value="24">Last 24 Hours</option>
                        </select>
                    </div>
                    <div class="form-group col-md-1">
                        <button type="button" id="refresh_button" class="btn btn-primary w-100">
                            Refresh
                        </button>
                    </div>
                </div>
            </div>

            <!-- Multiple Chart Containers -->
            <div class="chart-container" id="chart-all"></div>
            <div class="chart-container" id="chart-google"></div>
            <div class="chart-container" id="chart-oppo-icon"></div>
            <div class="chart-container" id="chart-oppo-banner"></div>
        </div>
    </div>
</div>

<link href="{{ asset('css/jquery-ui.css') }}" rel="stylesheet">
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="application/javascript" src="{{ asset('js/loader.js') }}"></script>

<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(() => drawAllCharts(1));

    function drawAllCharts(hours = 1) {
        $.ajax({
            url: "{{ url('bidder-health') }}",
            dataType: "json",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                hours: hours
            },
            success: function(data) {
                // Draw charts one by one
                drawSingleChart(data["All"], "chart-all", "All Publishers");
                drawSingleChart(data["Google"], "chart-google", "Google");
                drawSingleChart(data["Oppo Icon"], "chart-oppo-icon", "Oppo Icon");
                drawSingleChart(data["Oppo Banner"], "chart-oppo-banner", "Oppo Banner");
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error: ", error);
            }
        });
    }

    function drawSingleChart(routeData, elementId, title) {
        if (!routeData) return;

        const times = Object.keys(routeData).sort();
        const header = ['Time', 'Request', 'Response'];

        const rows = times.map(time => {
            const entry = routeData[time] || { req: 0, res: 0 };
            return [time, entry.req, entry.res];
        });

        const chartData = google.visualization.arrayToDataTable([header, ...rows]);

        const options = {
            title: title,
            curveType: 'function',
            legend: { position: 'right' },
            hAxis: {
                title: 'Time',
                slantedText: true,
                slantedTextAngle: 45
            },
            vAxis: { title: 'Count' }
        };

        const chart = new google.visualization.LineChart(document.getElementById(elementId));
        chart.draw(chartData, options);
    }

    // Events
    $(document).on('change', "#hour_filter", function() {
        const hour = $(this).val();
        drawAllCharts(hour);
    });

    $(document).on('click', "#refresh_button", function() {
        const hour = $('#hour_filter').val();
        drawAllCharts(hour);
    });
</script>
@endsection