@extends('layouts.layout-admin')

@section('title', 'Dashboard')

@section('header_title', 'Dashboard Overview')
@section('header_subtitle', 'Monitor your store performance')

@section('content')
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-emerald-50 rounded-lg">
                        <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h3 class="text-gray-600 font-medium">Total Revenue</h3>
                </div>
            </div>
            <div class="flex items-baseline">
                <p class="text-3xl font-bold text-gray-900">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</p>
            </div>
        </div>

        <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-blue-50 rounded-lg">
                        <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                        </svg>
                    </div>
                    <h3 class="text-gray-600 font-medium">Total Orders</h3>
                </div>
            </div>
            <div class="flex items-baseline">
                <p class="text-3xl font-bold text-gray-900">{{ $totalOrders }}</p>
                <span class="ml-2 text-sm text-gray-500">orders</span>
            </div>
            <div class="mt-4 grid grid-cols-4 gap-2">
                @foreach (['unpaid', 'paid', 'verify', 'dikirim'] as $s)
                    <div class="text-center p-1 bg-gray-50 rounded-lg">
                        <p class="text-xs text-gray-500">{{ ucfirst($s) }}</p>
                        <p class="font-semibold text-gray-900">{{ $ordersByStatus[$s] ?? 0 }}</p>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-purple-50 rounded-lg">
                        <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                        </svg>
                    </div>
                    <h3 class="text-gray-600 font-medium">Products</h3>
                </div>
            </div>
            <div class="flex items-baseline">
                <p class="text-3xl font-bold text-gray-900">{{ $totalProducts }}</p>
                <span class="ml-2 text-sm text-gray-500">total items</span>
            </div>
            <div class="mt-4 grid grid-cols-2 gap-4">
                <div class="text-center p-2 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-500">In Stock</p>
                    <p class="font-semibold text-gray-900">{{ $productsInStock }}</p>
                </div>
                <div class="text-center p-2 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-500">Low Stock</p>
                    <p class="font-semibold text-red-500">{{ $productsLowStock }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-amber-50 rounded-lg">
                        <svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                    </div>
                    <h3 class="text-gray-600 font-medium">Customers</h3>
                </div>
            </div>
            <div class="flex items-baseline">
                <p class="text-3xl font-bold text-gray-900">{{ $totalCustomers }}</p>
                <span class="ml-2 text-sm text-gray-500">registered</span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-8">
        <div class="bg-white rounded-2xl shadow-sm p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Sales This Week</h3>
            </div>
            <div class="h-80">
                <canvas id="salesChart"></canvas>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Top Products</h3>
            </div>
            <div class="space-y-4">
                @forelse ($topProducts as $item)
                    <div class="p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <img src="{{ $item->product->getPrimaryImage() ?? '' }}" alt="{{ $item->product->name ?? 'Deleted' }}"
                                class="w-12 h-12 rounded-lg object-cover" onerror="this.style.display='none'">
                            <div class="ml-4 flex-1">
                                <h4 class="text-gray-900 font-medium">{{ $item->product->name ?? 'Deleted' }}</h4>
                                <p class="text-sm text-gray-500">{{ $item->total_qty }} sold</p>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-4">No sales data yet</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
        <div class="p-6 border-b border-gray-100">
            <h2 class="text-lg font-semibold text-gray-900">Recent Orders</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-50">
                        <th class="text-left px-6 py-4 text-sm font-medium text-gray-500">Order Code</th>
                        <th class="text-left px-6 py-4 text-sm font-medium text-gray-500">Customer</th>
                        <th class="text-left px-6 py-4 text-sm font-medium text-gray-500">Items</th>
                        <th class="text-left px-6 py-4 text-sm font-medium text-gray-500">Total</th>
                        <th class="text-left px-6 py-4 text-sm font-medium text-gray-500">Status</th>
                        <th class="text-left px-6 py-4 text-sm font-medium text-gray-500">Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($recentOrders as $order)
                        <tr class="border-b border-gray-100 hover:bg-gray-50/50 transition-colors">
                            <td class="px-6 py-4 text-sm text-gray-900">{{ $order->order_code }}</td>
                            <td class="px-6 py-4 text-sm text-gray-900">{{ $order->user->name }}</td>
                            <td class="px-6 py-4 text-sm text-gray-500">
                                @foreach ($order->items as $item)
                                    <div>{{ $item->product->name ?? 'Deleted' }} x {{ $item->quantity }}</div>
                                @endforeach
                            </td>
                            <td class="px-6 py-4 text-sm font-medium text-gray-900">Rp {{ number_format($order->total_amount, 0, ',', '.') }}</td>
                            <td class="px-6 py-4">
                                <span class="px-3 py-1 rounded-full text-sm font-medium
                                    @if ($order->status === 'unpaid') bg-yellow-100 text-yellow-800
                                    @elseif ($order->status === 'paid') bg-blue-100 text-blue-800
                                    @elseif ($order->status === 'verify') bg-green-100 text-green-800
                                    @elseif ($order->status === 'dikirim') bg-purple-100 text-purple-800
                                    @elseif ($order->status === 'cancelled') bg-red-100 text-red-800
                                    @else bg-gray-100 @endif">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500">{{ $order->created_at->format('d/m/Y') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-8 text-gray-500">No orders yet</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('salesChart').getContext('2d');
            const salesData = @json($salesDaily);
            const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            const today = new Date();
            const dayOfWeek = today.getDay();
            const weekDates = [];
            const weekLabels = [];

            for (let i = 0; i < 7; i++) {
                const d = new Date(today);
                d.setDate(today.getDate() - dayOfWeek + i);
                const dateStr = d.toISOString().split('T')[0];
                weekDates.push(dateStr);
                weekLabels.push(days[d.getDay()]);
            }

            const data = weekDates.map(date => salesData[date] || 0);

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: weekLabels,
                    datasets: [{
                        label: 'Sales',
                        data: data,
                        borderColor: '#10B981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#10B981',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { borderDash: [5, 5], drawBorder: false },
                            ticks: {
                                callback: function(value) {
                                    return 'Rp ' + (value / 1000) + 'K';
                                }
                            }
                        },
                        x: {
                            grid: { display: false }
                        }
                    }
                }
            });
        });
    </script>
@endpush