@extends('layout.app')

@section('content')
<div class="app-content main-content">
    <div class="side-app main-container">
        <!-- Page header -->
        <div class="page-header d-xl-flex d-block">
            <div class="page-leftheader">
                <div class="page-title"> Dashboard </div>
            </div>
        </div>
        <!-- End Page header -->
        <div class="container">
            <!-- Stats Cards -->
            <div class="row">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <h5 class="card-title">Total Orders</h5>
                            <h2>{{ $totalOrders }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <h5 class="card-title">Today Orders</h5>
                            <h2>{{ $todayOrders }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <h5 class="card-title">Total Revenue</h5>
                            <h2>${{ number_format($totalRevenue, 2) }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <h5 class="card-title">Today Revenue</h5>
                            <h2>${{ number_format($todayRevenue, 2) }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Orders by Status -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header border-bottom-0">
                            <h4 class="card-title">Orders by Status</h4>
                        </div>
                        <div class="card-body">
                            <div class="d-flex flex-wrap gap-2">
                                @php
                                $statusColors = [
                                    'pending' => 'warning',
                                    'confirmed' => 'info',
                                    'preparing' => 'secondary',
                                    'on_the_way' => 'primary',
                                    'delivered' => 'success',
                                    'cancelled' => 'danger',
                                ];
                                @endphp
                                @foreach (['pending', 'confirmed', 'preparing', 'on_the_way', 'delivered', 'cancelled'] as $status)
                                <div class="badge bg-{{ $statusColors[$status] }} fs-6 p-2">
                                    {{ ucfirst(str_replace('_', ' ', $status)) }}: {{ $ordersByStatus[$status] ?? 0 }}
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Monthly Revenue Chart -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header border-bottom-0">
                            <h4 class="card-title">Monthly Revenue (Last 12 Months)</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="revenueChart" height="100"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Top Products & Customers -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header border-bottom-0">
                            <h4 class="card-title">Top 5 Products</h4>
                        </div>
                        <div class="card-body">
                            @if ($topProducts->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Product</th>
                                            <th>Sold</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($topProducts as $index => $product)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $product->title }}</td>
                                            <td>{{ $product->total_sold }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @else
                            <p class="text-muted">No data available.</p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header border-bottom-0">
                            <h4 class="card-title">Top 5 Customers</h4>
                        </div>
                        <div class="card-body">
                            @if ($topCustomers->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Customer</th>
                                            <th>Orders</th>
                                            <th>Total Spent</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($topCustomers as $index => $customer)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $customer->name }}</td>
                                            <td>{{ $customer->total_orders }}</td>
                                            <td>${{ number_format($customer->total_spent, 2) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @else
                            <p class="text-muted">No data available.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('revenueChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($chartLabels),
            datasets: [{
                label: 'Revenue ($)',
                data: @json($chartData),
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endsection