@extends('front.layouts.admin-layout')
@section('title', 'Admin Dashboard')

@section('content')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Dashboard Content -->
    <div class="container-fluid" style="margin-left: 250px; margin-top: 50px; max-width: calc(100% - 250px);">
        <div class="row">
            <!-- Orders Received Section -->
            <div class="col-md-3 col-xl-3 mb-4">
                <div class="card shadow-sm bg-primary text-white">
                    <div class="card-body">
                        <h6 class="m-b-20">Today Orders</h6>
                        <h2 class="text-right">
                            <i class="fa fa-cart-plus f-left"></i>
                            <span>{{ $todayOrders }}</span>
                        </h2>
                        <p class="m-b-0">Completed Orders <span class="f-right">{{ $completedOrders }}</span></p>
                    </div>
                </div>
            </div>

            <!-- User Registrations Section -->
            <div class="col-md-3 col-xl-3 mb-4">
                <div class="card shadow-sm bg-success text-white">
                    <div class="card-body">
                        <h6 class="m-b-20">User Registrations</h6>
                        <h2 class="text-right">
                            <i class="fas fa-users f-left"></i>
                            <span>{{ $users_count }}</span>
                        </h2>
                        <p class="m-b-0">Verified Users <span class="f-right">{{ $users_count }}</span></p>
                    </div>
                </div>
            </div>

            <!-- Bounce Rate Section -->
            <div class="col-md-3 col-xl-3 mb-4">
                <div class="card shadow-sm bg-warning text-white">
                    <div class="card-body">
                        <h6 class="m-b-20">Total Orders</h6>
                        <h2 class="text-right">
                            <i class="fa fa-refresh f-left"></i>
                            <span>{{ $totalOrders }}</span>
                        </h2>
                        <p class="m-b-0">Completed Orders <span class="f-right">{{ $totalCompleteOrders }}</span></p>
                    </div>
                </div>
            </div>

            <!-- Unique Visitors Section -->
            <div class="col-md-3 col-xl-3 mb-4">
                <div class="card shadow-sm bg-danger text-white">
                    <div class="card-body">
                        <h6 class="m-b-20">Last Month's Sale</h6>
                        <h2 class="text-right">
                            <i class="fa fa-dollar-sign f-left"></i>
                            <span>{{ number_format($sales) }}</span>
                        </h2>
                        <p class="m-b-0">Total Sales <span class="f-right">${{ number_format($sales) }}</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Analytics Section -->
        <div style="display: flex; justify-content: space-between; width: 100%; margin: 20px auto; gap: 20px;">
            <div style="display: flex; justify-content: space-between; width: 100%; margin: 20px auto; gap: 20px;">
                <!-- Filters Section -->
                <div
                    style="width: 48%; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h3 style="text-align: center; font-weight: bold;">Filters</h3>

                    <!-- Year Filter -->
                    <label for="yearFilter" style="display: block; margin-bottom: 10px;">Select Year:</label>
                    <select id="yearFilter"
                            style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px;">
                        <option value="">All Years</option>
                        <option value="this_year">This Year</option>
                        <option value="last_year">Last Year</option>
                    </select>

                    <!-- Month Filter -->
                    <label for="monthFilter" style="display: block; margin-bottom: 10px;">Select Month:</label>
                    <select id="monthFilter"
                            style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px;">
                        <option value="">All Months</option>
                        <option value="this_month">This Month</option>
                        <option value="last_month">Last Month</option>
                    </select>

                    <!-- Custom Date Range Filter -->
                    <form id="dateRangeFilter" style="margin-top: 15px;">
                        <label for="startDate" style="display: block; margin-bottom: 5px;">Start Date:</label>
                        <input type="date" id="startDate"
                               style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px;"
                               required>

                        <label for="endDate" style="display: block; margin-bottom: 5px;">End Date:</label>
                        <input type="date" id="endDate"
                               style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px;"
                               required>

                        <button type="submit"
                                style="width: 100%; padding: 10px; background-color: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer;">
                            Apply Date Range
                        </button>
                    </form>
                </div>

                <!-- Sales Chart Section -->
                <div
                    style="width: 48%; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    <h3 style="text-align: center; font-weight: bold; margin-bottom: 20px;">Sales Chart</h3>
                    <canvas id="salesChart" style="width: 100%; max-height: 400px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('salesChart').getContext('2d');
        let salesChart;

        const getSalesData = (year = '', month = '', startDate = '', endDate = '') => {
            const url = `{{ route('admin.sales.data') }}?year=${year}&month=${month}&start_date=${startDate}&end_date=${endDate}`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    const labels = data.map(item => new Date(item.date).toLocaleDateString('en-US', {
                        month: 'short',
                        day: 'numeric'
                    }));
                    const sales = data.map(item => item.total_sales);
                    console.log(sales)
                    const chartData = {
                        labels: labels,
                        datasets: [{
                            label: 'Sales Data',
                            data: sales,
                            backgroundColor: sales.map(sale => sale > 0 ? 'blue' : '#d1d1d1'),
                            borderRadius: 5,
                        }],
                    };

                    if (salesChart) {
                        salesChart.destroy();
                    }

                    salesChart = new Chart(ctx, {
                        type: 'bar',
                        data: chartData,
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {position: 'bottom'},
                                title: {display: true, text: 'Sales Over Time'}
                            },
                            scales: {
                                x: {
                                    beginAtZero: true,
                                },
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        callback: value => value === 0 ? '$0' : `$${(value).toFixed(1)}`,
                                    }
                                }
                            }
                        }
                    });
                });
        };

        document.getElementById('yearFilter').addEventListener('change', function () {
            getSalesData(this.value, '');
        });

        document.getElementById('monthFilter').addEventListener('change', function () {
            getSalesData('', this.value);
        });

        document.getElementById('dateRangeFilter').addEventListener('submit', function (event) {
            event.preventDefault();
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            getSalesData('', '', startDate, endDate);
        });

        getSalesData('', 'this_month'); // Default to 'This Year' on load
    </script>


@endsection