@extends('backend.layouts.app')

@section('title')
    Dashboard
@endsection

@push('style')
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            @php
                $statConfig = [
                    [
                        'key' => 'today',
                        'label' => "Today's Visitors",
                        'icon' => 'bx bx-user',
                        'color' => 'primary',
                        'bg' => 'bg-label-primary',
                    ],
                    [
                        'key' => 'yesterday',
                        'label' => 'Yesterday Visitors',
                        'icon' => 'bx bx-history',
                        'color' => 'warning',
                        'bg' => 'bg-label-warning',
                    ],
                    [
                        'key' => 'last7days',
                        'label' => 'Last 7 Days Visitors',
                        'icon' => 'bx bx-calendar-week',
                        'color' => 'info',
                        'bg' => 'bg-label-info',
                    ],
                    [
                        'key' => 'thisMonth',
                        'label' => 'This Month Visitors',
                        'icon' => 'bx bx-calendar',
                        'color' => 'success',
                        'bg' => 'bg-label-success',
                    ],
                    [
                        'key' => 'thisYear',
                        'label' => 'This Year Visitors',
                        'icon' => 'bx bx-calendar-star',
                        'color' => 'danger',
                        'bg' => 'bg-label-danger',
                    ],
                    [
                        'key' => 'total',
                        'label' => 'Total All Visitors',
                        'icon' => 'bx bx-group',
                        'color' => 'dark',
                        'bg' => 'bg-label-dark',
                    ],
                ];
            @endphp

            <div class="row g-4 mb-6">
                @foreach ($statConfig as $item)
                    <div class="col-sm-6 col-xl-4">
                        <div class="card h-100 card-hover">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="content-left">
                                        <span class="text-heading fw-bold d-block mb-1">{{ $item['label'] }}</span>
                                        <div class="d-flex align-items-center my-1">
                                            <h3 class="mb-0 me-2">{{ number_format($stats[$item['key']] ?? 0) }}</h3>
                                        </div>
                                    </div>
                                    <div class="avatar">
                                        <span
                                            class="avatar-initial rounded {{ $item['bg'] ?? 'bg-light' }} text-{{ $item['color'] }}">
                                            <i class="{{ $item['icon'] }}"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row mt-5">

                <div class="col-md-8 col-12 mb-4">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="card-title mb-0">Visitors Comparison</h5>
                                <small class="text-muted">Daily vs Monthly growth</small>
                            </div>
                        </div>
                        <div class="card-body">
                            <div style="height: 350px;">
                                <canvas id="barChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-12 mb-4">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="card-title m-0 me-2">Session Distribution</h5>
                        </div>
                        <div class="card-body">
                            <div style="height: 300px; display: flex; align-items: center; justify-content: center;">
                                <canvas id="doughnutChart"></canvas>
                            </div>
                            <div class="d-flex justify-content-around mt-4 pt-1">
                                <div class="text-center">
                                    <span class="badge bg-label-primary rounded p-1"><i class="bx bx-user"></i></span>
                                    <p class="mb-0 mt-1">Today</p>
                                </div>
                                <div class="text-center">
                                    <span class="badge bg-label-warning rounded p-1"><i class="bx bx-history"></i></span>
                                    <p class="mb-0 mt-1">Yesterday</p>
                                </div>
                                <div class="text-center">
                                    <span class="badge bg-label-info rounded p-1"><i class="bx bx-calendar-week"></i></span>
                                    <p class="mb-0 mt-1">Week</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const barCtx = document.getElementById('barChart').getContext('2d');

            let barGradient = barCtx.createLinearGradient(0, 0, 0, 400);
            barGradient.addColorStop(0, '#696cff');
            barGradient.addColorStop(1, '#696cff80');

            new Chart(barCtx, {
                type: 'bar',
                data: {
                    labels: ['Today', 'Yesterday', 'Last 7 Days', 'This Month'],
                    datasets: [{
                        label: 'Visitors',
                        data: [
                            {{ $stats['today'] ?? 0 }},
                            {{ $stats['yesterday'] ?? 0 }},
                            {{ $stats['last7days'] ?? 0 }},
                            {{ $stats['thisMonth'] ?? 0 }}
                        ],
                        backgroundColor: barGradient,
                        borderRadius: 8,
                        barThickness: 40,
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: '#333',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            padding: 10,
                            cornerRadius: 5
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: '#eceef1',
                                borderDash: [5, 5]
                            },
                            ticks: {
                                color: '#a1acb8',
                                stepSize: 1,
                                precision: 0
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#a1acb8'
                            }
                        }
                    }
                }
            });

            const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');

            new Chart(doughnutCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Today', 'Yesterday', 'Last 7 Days'],
                    datasets: [{
                        data: [
                            {{ $stats['today'] ?? 0 }},
                            {{ $stats['yesterday'] ?? 0 }},
                            {{ $stats['last7days'] ?? 0 }}
                        ],
                        backgroundColor: [
                            '#696cff',
                            '#ffab00',
                            '#03c3ec'
                        ],
                        borderWidth: 0,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '75%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    let value = context.parsed;
                                    let total = context.chart._metasets[context.datasetIndex].total;
                                    let percentage = ((value / total) * 100).toFixed(1) + "%";
                                    return label + value + ' (' + percentage + ')';
                                }
                            }
                        }
                    }
                }
            });

        });
    </script>
@endpush