@extends('admin.layouts.app')

@section('title', __('dashboard.dashboard'))

@section('content')
<div class="container-fluid">
    {{-- Welcome Header --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                <div class="flex-grow-1">
                    <h4 class="fs-16 mb-1">{{ __('dashboard.welcome') }},
                        {{ auth()->guard('admin')->user()->name ?? 'Admin' }}!</h4>
                    <p class="text-muted mb-0">{{ __('dashboard.dashboard_subtitle') }}</p>
                </div>
            </div>
        </div>
    </div>

    
</div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    {{--  <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Users & Vendors Chart
            let usersVendorsChart;
            const usersVendorsOptions = {
                series: [],
                chart: {
                    type: 'bar',
                    height: 350,
                    toolbar: { show: false }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 4
                    },
                },
                dataLabels: { enabled: false },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                colors: ['#405189', '#0ab39c'],
                xaxis: { categories: [] },
                yaxis: {
                    title: { text: '{{ __("dashboard.count") }}' }
                },
                fill: { opacity: 1 },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val;
                        }
                    }
                }
            };

            usersVendorsChart = new ApexCharts(document.querySelector("#users-vendors-chart"), usersVendorsOptions);
            usersVendorsChart.render();

            function loadUsersVendorsChart(period) {
                fetch('{{ route("admin.dashboard.usersVendorsChart") }}?period=' + period)
                    .then(response => response.json())
                    .then(data => {
                        usersVendorsChart.updateOptions({
                            xaxis: { categories: data.labels }
                        });
                        usersVendorsChart.updateSeries(data.datasets.map(ds => ({
                            name: ds.label,
                            data: ds.data
                        })));
                    });
            }

            loadUsersVendorsChart('week');

            document.querySelectorAll('#usersVendorsPeriod button').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('#usersVendorsPeriod button').forEach(b => {
                        b.classList.remove('btn-soft-primary', 'active');
                        b.classList.add('btn-soft-secondary');
                    });
                    this.classList.remove('btn-soft-secondary');
                    this.classList.add('btn-soft-primary', 'active');
                    loadUsersVendorsChart(this.dataset.period);
                });
            });

            // Orders Chart
            let ordersChart;
            const ordersOptions = {
                series: [],
                chart: {
                    type: 'bar',
                    height: 350,
                    toolbar: { show: false }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '45%',
                        borderRadius: 4
                    },
                },
                dataLabels: { enabled: false },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                colors: ['#299cdb', '#f06548'],
                xaxis: { categories: [] },
                yaxis: [
                    {
                        title: { text: '{{ __("dashboard.orders") }}' }
                    },
                    {
                        opposite: true,
                        title: { text: '{{ __("dashboard.revenue") }}' }
                    }
                ],
                fill: { opacity: 1 },
                tooltip: {
                    y: {
                        formatter: function(val, { seriesIndex }) {
                            if (seriesIndex === 1) {
                                return val.toLocaleString() + ' {{ __("dashboard.currency") }}';
                            }
                            return val;
                        }
                    }
                }
            };

            ordersChart = new ApexCharts(document.querySelector("#orders-chart"), ordersOptions);
            ordersChart.render();

            function loadOrdersChart(period) {
                fetch('{{ route("admin.dashboard.ordersChart") }}?period=' + period)
                    .then(response => response.json())
                    .then(data => {
                        ordersChart.updateOptions({
                            xaxis: { categories: data.labels }
                        });
                        ordersChart.updateSeries(data.datasets.map((ds, index) => ({
                            name: ds.label,
                            type: ds.type || 'bar',
                            data: ds.data
                        })));
                    });
            }

            loadOrdersChart('week');

            document.querySelectorAll('#ordersPeriod button').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('#ordersPeriod button').forEach(b => {
                        b.classList.remove('btn-soft-primary', 'active');
                        b.classList.add('btn-soft-secondary');
                    });
                    this.classList.remove('btn-soft-secondary');
                    this.classList.add('btn-soft-primary', 'active');
                    loadOrdersChart(this.dataset.period);
                });
            });

            // Products Status Donut Chart
            const productsStatusOptions = {
                series: [{{ $stats['products_active'] }}, {{ $stats['products_inactive'] }}],
                chart: {
                    type: 'donut',
                    height: 300
                },
                labels: ['{{ __("dashboard.active") }}', '{{ __("dashboard.inactive") }}'],
                colors: ['#0ab39c', '#f06548'],
                legend: {
                    position: 'bottom'
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '70%',
                            labels: {
                                show: true,
                                total: {
                                    show: true,
                                    label: '{{ __("dashboard.total") }}',
                                    formatter: function(w) {
                                        return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                    }
                                }
                            }
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val, opts) {
                        return opts.w.globals.series[opts.seriesIndex];
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            const productsStatusChart = new ApexCharts(document.querySelector("#products-status-chart"), productsStatusOptions);
            productsStatusChart.render();
        });
    </script>  --}}
@endpush