@extends('layouts.admin')

@section('title', 'Visits Dashboard')

@section('content')
    <div class="container mt-5">
        <h1>Visits Dashboard</h1>

        <div class="d-flex justify-content-center mb-4">
            <div class="btn-group" role="group">
                <a href="?timeframe=12H" class="btn btn-primary {{ $timeframe == '12H' ? 'active' : '' }}">12H</a>
                <a href="?timeframe=1D" class="btn btn-primary {{ $timeframe == '1D' ? 'active' : '' }}">1D</a>
                <a href="?timeframe=1W" class="btn btn-primary {{ $timeframe == '1W' ? 'active' : '' }}">1W</a>
                <a href="?timeframe=1M" class="btn btn-primary {{ $timeframe == '1M' ? 'active' : '' }}">1M</a>
                <a href="?timeframe=1Y" class="btn btn-primary {{ $timeframe == '1Y' ? 'active' : '' }}">1Y</a>
                <a href="?timeframe=2Y" class="btn btn-primary {{ $timeframe == '2Y' ? 'active' : '' }}">2Y</a>
                <a href="?timeframe=5Y" class="btn btn-primary {{ $timeframe == '5Y' ? 'active' : '' }}">5Y</a>
                <a href="?timeframe=10Y" class="btn btn-primary {{ $timeframe == '10Y' ? 'active' : '' }}">10Y</a>
            </div>
        </div>

        <div class="mb-4">
            <h4>Total Visits in Selected Timeframe: {{ $totalVisits }}</h4>
        </div>

        <canvas id="visitsChart" width="400" height="200"></canvas>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var ctx = document.getElementById('visitsChart').getContext('2d');

            var visitsChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: {!! json_encode($visits->pluck('date')) !!},
                    datasets: [{
                        label: 'Visits',
                        data: {!! json_encode($visits->pluck('count')) !!},
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: true,
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: '{{ $timeframeUnit }}'
                            },
                            title: {
                                display: true,
                                text: 'Date'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Visits'
                            }
                        }
                    }
                }
            });
        });
    </script>
@endsection