<x-admin-layout title="Reports">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <ul class="nav nav-pills">
            <li class="nav-item"><a class="nav-link active" href="{{ route('admin.reports.index', request()->query()) }}">Overview</a></li>
            <li class="nav-item"><a class="nav-link" href="{{ route('admin.reports.drivers', request()->query()) }}">Driver Performance</a></li>
            <li class="nav-item"><a class="nav-link" href="{{ route('admin.reports.customers', request()->query()) }}">Customers</a></li>
        </ul>

        <div class="d-flex gap-2 flex-wrap">
            <form method="GET" class="d-flex gap-2">
                <select name="range" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="today" @selected($range === 'today')>Today</option>
                    <option value="this_week" @selected($range === 'this_week')>This Week</option>
                    <option value="this_month" @selected($range === 'this_month')>This Month</option>
                    <option value="last_month" @selected($range === 'last_month')>Last Month</option>
                    <option value="this_year" @selected($range === 'this_year')>This Year</option>
                    <option value="custom" @selected($range === 'custom')>Custom range…</option>
                </select>
                <input type="date" name="from" value="{{ $range === 'custom' ? $from->format('Y-m-d') : '' }}" class="form-control form-control-sm" style="max-width:150px;">
                <input type="date" name="to" value="{{ $range === 'custom' ? $to->format('Y-m-d') : '' }}" class="form-control form-control-sm" style="max-width:150px;">
                <button type="submit" class="btn btn-sm btn-outline-dark">Apply</button>
            </form>
            <a href="{{ route('admin.reports.export', request()->query()) }}" class="btn btn-sm btn-dark">
                <i class="bi bi-download me-1"></i>Export CSV
            </a>
        </div>
    </div>

    @php
        $comparisonBadge = function ($key) use ($comparison) {
            $value = $comparison[$key] ?? null;
            if ($value === null) {
                return '<span class="badge is-blue">New</span>';
            }
            $up = $value >= 0;
            $color = $key === 'cancelled_bookings' ? ($up ? 'is-rose' : 'is-green') : ($up ? 'is-green' : 'is-rose');
            $icon = $up ? 'bi-arrow-up-short' : 'bi-arrow-down-short';
            return '<span class="badge '.$color.'"><i class="bi '.$icon.'"></i>'.number_format(abs($value), 1).'%</span>';
        };
    @endphp

    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="stat-card">
                <div>
                    <div class="text-muted small fw-semibold text-uppercase mb-1">Total Bookings</div>
                    <div class="fs-3 fw-bold">{{ $stats['total_bookings'] }}</div>
                    <div class="mt-1">{!! $comparisonBadge('total_bookings') !!} <span class="text-muted small">vs. previous period</span></div>
                </div>
                <div class="stat-card-icon is-blue"><i class="bi bi-taxi-front-fill"></i></div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card">
                <div>
                    <div class="text-muted small fw-semibold text-uppercase mb-1">Completed</div>
                    <div class="fs-3 fw-bold">{{ $stats['completed_bookings'] }}</div>
                    <div class="mt-1">{!! $comparisonBadge('completed_bookings') !!} <span class="text-muted small">vs. previous period</span></div>
                </div>
                <div class="stat-card-icon is-green"><i class="bi bi-check-circle-fill"></i></div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card">
                <div>
                    <div class="text-muted small fw-semibold text-uppercase mb-1">Cancelled</div>
                    <div class="fs-3 fw-bold">{{ $stats['cancelled_bookings'] }}</div>
                    <div class="mt-1">{!! $comparisonBadge('cancelled_bookings') !!} <span class="text-muted small">vs. previous period</span></div>
                </div>
                <div class="stat-card-icon is-rose"><i class="bi bi-x-circle-fill"></i></div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card">
                <div>
                    <div class="text-muted small fw-semibold text-uppercase mb-1">Revenue</div>
                    <div class="fs-3 fw-bold">{{ number_format($stats['total_revenue'], 2) }}</div>
                    <div class="mt-1">{!! $comparisonBadge('total_revenue') !!} <span class="text-muted small">vs. previous period</span></div>
                </div>
                <div class="stat-card-icon is-violet"><i class="bi bi-cash-stack"></i></div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">Revenue Trend</h5>
                    @if ($revenueByDay->isEmpty())
                        <div class="text-center text-muted py-5">No completed bookings in this range.</div>
                    @else
                        <canvas id="revenueChart" height="90"></canvas>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">Status Breakdown</h5>
                    @if ($statusBreakdown->isEmpty())
                        <div class="text-center text-muted py-5">No bookings in this range.</div>
                    @else
                        <canvas id="statusChart" height="220"></canvas>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">Top Vehicle Types</h5>
                    @if ($topVehicleTypes->isEmpty())
                        <div class="text-center text-muted py-4">No bookings in this range.</div>
                    @else
                        <canvas id="vehicleChart" height="80"></canvas>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if ($revenueByDay->isNotEmpty() || $statusBreakdown->isNotEmpty() || $topVehicleTypes->isNotEmpty())
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const revenueByDay = @json($revenueByDay);
                const statusBreakdown = @json($statusBreakdown);
                const topVehicleTypes = @json($topVehicleTypes);

                if (Object.keys(revenueByDay).length) {
                    new Chart(document.getElementById('revenueChart'), {
                        type: 'line',
                        data: {
                            labels: Object.keys(revenueByDay),
                            datasets: [{
                                label: 'Revenue',
                                data: Object.values(revenueByDay),
                                borderColor: '#f4c20d',
                                backgroundColor: 'rgba(244, 194, 13, 0.15)',
                                fill: true,
                                tension: 0.3,
                            }],
                        },
                        options: { plugins: { legend: { display: false } } },
                    });
                }

                if (Object.keys(statusBreakdown).length) {
                    new Chart(document.getElementById('statusChart'), {
                        type: 'doughnut',
                        data: {
                            labels: Object.keys(statusBreakdown),
                            datasets: [{
                                data: Object.values(statusBreakdown),
                                backgroundColor: ['#f4c20d', '#0d6efd', '#6f42c1', '#20c997', '#dc3545', '#adb5bd', '#fd7e14', '#198754'],
                            }],
                        },
                    });
                }

                if (Object.keys(topVehicleTypes).length) {
                    new Chart(document.getElementById('vehicleChart'), {
                        type: 'bar',
                        data: {
                            labels: Object.keys(topVehicleTypes),
                            datasets: [{
                                label: 'Bookings',
                                data: Object.values(topVehicleTypes),
                                backgroundColor: '#111827',
                            }],
                        },
                        options: { indexAxis: 'y', plugins: { legend: { display: false } } },
                    });
                }
            });
        </script>
    @endif
</x-admin-layout>
