@extends('admin_layout.main')

@section('content')
<div class="container-fluid p-4">
    <h2 class="mb-4 fw-bold text-primary">📊 Order Analytics Dashboard</h2>

    <!-- Metrics Summary -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-body text-center">
                    <h5 class="card-title text-muted">Total Orders</h5>
                    <h3 class="text-dark fw-bold">{{ $totalOrders }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-body text-center">
                    <h5 class="card-title text-muted">Total Revenue</h5>
                    <h3 class="text-success fw-bold">₹{{ number_format($totalRevenue, 2) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-body text-center">
                    <h5 class="card-title text-muted">Average Order Value</h5>
                    <h3 class="text-info fw-bold">₹{{ number_format($averageOrderValue, 2) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header bg-light fw-bold">🗓 Orders by Month</div>
                <div class="card-body">
                    <canvas id="ordersByMonthChart" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header bg-light fw-bold">📍 Orders by Location</div>
                <div class="card-body">
                    <canvas id="ordersByLocationChart" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header bg-light fw-bold">👥 Top 5 Users</div>
                <div class="card-body">
                    <canvas id="topUsersChart" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header bg-light fw-bold">🎉 Total Amount by Event</div>
                <div class="card-body">
                    <canvas id="eventChart" height="250"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-header bg-light fw-bold">💳 Payment Methods</div>
                <div class="card-body">
                    <canvas id="paymentMethodChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Referral Rewards -->
   
</div>

<!-- Chart JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Orders by Month
    new Chart(document.getElementById('ordersByMonthChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($labels) !!},
            datasets: [{
                label: 'Orders per Month',
                data: {!! json_encode($data) !!},
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
            }]
        },
        options: { scales: { y: { beginAtZero: true } } }
    });

    // Payment Methods
    new Chart(document.getElementById('paymentMethodChart'), {
        type: 'pie',
        data: {
            labels: {!! json_encode($paymentMethods->pluck('payment_method')) !!},
            datasets: [{
                data: {!! json_encode($paymentMethods->pluck('total')) !!},
                backgroundColor: ['#f87979', '#36a2eb', '#ffcd56', '#4bc0c0'],
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    // Orders by Location
    new Chart(document.getElementById('ordersByLocationChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($locationLabels) !!},
            datasets: [{
                label: 'Orders per Location',
                data: {!! json_encode($locationCounts) !!},
                backgroundColor: 'rgba(75, 192, 192, 0.6)',
            }]
        },
        options: { scales: { y: { beginAtZero: true } } }
    });

    // Top Users
    new Chart(document.getElementById('topUsersChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($userLabels) !!},
            datasets: [{
                label: 'Top Users by Spend',
                data: {!! json_encode($userSpend) !!},
                backgroundColor: 'rgba(153, 102, 255, 0.6)',
            }]
        },
        options: {
            indexAxis: 'y',
            scales: { x: { beginAtZero: true } }
        }
    });

    // Event Spend Chart
    new Chart(document.getElementById('eventChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($eventLabels) !!},
            datasets: [{
                label: 'Total Amount by Event',
                data: {!! json_encode($eventSpend) !!},
                backgroundColor: ['#f87979', '#36a2eb', '#ffcd56', '#4bc0c0', '#ff9f40', '#66ff66'],
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });
</script>
@endsection