@extends('layouts.admin-panel')

@section('title', 'Laporan Penjualan')
@section('header', 'Laporan & Statistik')
@section('subheader', 'Analisis performa toko Anda dalam 7 hari terakhir.')

@section('content')
<div class="space-y-8">
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40">
            <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Total Pendapatan</p>
            <h3 class="text-2xl font-black text-slate-900">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</h3>
            <div class="mt-4 flex items-center gap-2 text-green-600">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                <span class="text-xs font-bold">Lifetime Sales</span>
            </div>
        </div>

        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40">
            <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Total Pesanan</p>
            <h3 class="text-2xl font-black text-slate-900">{{ number_format($totalOrders) }}</h3>
            <div class="mt-4 flex items-center gap-2 text-blue-600">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 11h14l1 12H4L5 11z"/></svg>
                <span class="text-xs font-bold">{{ number_format($successfulOrders) }} Sukses</span>
            </div>
        </div>

        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40">
            <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Total Pelanggan</p>
            <h3 class="text-2xl font-black text-slate-900">{{ number_format($totalCustomers) }}</h3>
            <div class="mt-4 flex items-center gap-2 text-purple-600">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                <span class="text-xs font-bold">Registered Users</span>
            </div>
        </div>

        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40">
            <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Rata-rata Pesanan</p>
            <h3 class="text-2xl font-black text-slate-900">Rp {{ $totalOrders > 0 ? number_format($totalRevenue / $totalOrders, 0, ',', '.') : 0 }}</h3>
            <div class="mt-4 flex items-center gap-2 text-amber-600">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                <span class="text-xs font-bold">Average Order Value</span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Chart Section -->
        <div class="lg:col-span-2 bg-white rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40 p-8">
            <h3 class="font-bold text-slate-900 mb-8">Tren Penjualan (7 Hari Terakhir)</h3>
            <div class="h-[300px]">
                <canvas id="salesChart"></canvas>
            </div>
        </div>

        <!-- Top Products -->
        <div class="bg-white rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40 p-8">
            <h3 class="font-bold text-slate-900 mb-8">Produk Terlaris</h3>
            <div class="space-y-6">
                @foreach($topProducts as $product)
                    <div class="flex items-center justify-between gap-4">
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-bold text-slate-900 truncate">{{ $product->product_name }}</p>
                            <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-0.5">{{ $product->total_qty }} Terjual</p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-black text-purple-600">Rp {{ number_format($product->total_sales, 0, ',', '.') }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Recent Sales Table -->
    <div class="bg-white rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40 overflow-hidden">
        <div class="p-8 border-b border-slate-50">
            <h3 class="font-bold text-slate-900">Transaksi Terbaru</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50/50 border-b border-slate-100">
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Order ID</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Pelanggan</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Metode</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach($recentSales as $sale)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-8 py-6 font-bold text-slate-900 text-sm">#{{ $sale->order_number }}</td>
                            <td class="px-8 py-6">
                                <span class="block text-sm font-bold text-slate-700">{{ $sale->user->name }}</span>
                                <span class="block text-[10px] text-slate-400">{{ $sale->created_at->format('d M, H:i') }}</span>
                            </td>
                            <td class="px-8 py-6 uppercase text-[10px] font-black text-slate-500 tracking-wider">
                                {{ str_replace('_', ' ', $sale->payment_method) }}
                            </td>
                            <td class="px-8 py-6 text-right font-black text-slate-900 text-sm">
                                Rp {{ number_format($sale->total, 0, ',', '.') }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('salesChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode(array_column($salesData, 'date')) !!},
            datasets: [{
                label: 'Penjualan (Rp)',
                data: {!! json_encode(array_column($salesData, 'total')) !!},
                borderColor: '#7c3aed',
                backgroundColor: 'rgba(124, 58, 237, 0.1)',
                borderWidth: 4,
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointBackgroundColor: '#fff',
                pointBorderColor: '#7c3aed',
                pointBorderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: '#f1f5f9' },
                    ticks: {
                        callback: function(value) {
                            return 'Rp ' + (value / 1000) + 'k';
                        }
                    }
                },
                x: {
                    grid: { display: false }
                }
            }
        }
    });
</script>
@endpush