@extends('admin.layouts.app')

@section('title', 'Admin Dashboard')
@section('header_title', 'Overview Dashboard')

@section('content')
<div class="space-y-8">
    
    <!-- Welcome Banner Card -->
    <div class="relative bg-gradient-to-r from-obsidian-900 via-obsidian-800 to-amber-950/60 rounded-3xl p-6 lg:p-8 text-white shadow-xl border border-gold-500/20 overflow-hidden">
        <div class="absolute -right-10 -top-10 w-60 h-60 rounded-full bg-gold-500/10 blur-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div>
                <span class="inline-block px-3 py-1 rounded-full bg-gold-500/20 text-gold-400 text-xs font-semibold uppercase tracking-wider mb-2 border border-gold-500/30">
                    Welcome Back
                </span>
                <h2 class="font-serif text-2xl lg:text-3xl font-bold mb-2">
                    Hello, <span class="gold-gradient-text">{{ Auth::user()->name ?? 'Administrator' }}</span> 👋
                </h2>
                <p class="text-xs lg:text-sm text-slate-300 max-w-xl leading-relaxed">
                    Here is your live e-commerce overview for Dwaraka Collection. Monitor catalog status, inventory levels, order flows, and revenue metrics.
                </p>
            </div>
            
            <div class="flex items-center space-x-3">
                <a href="{{ route('admin.products.create') }}" class="px-5 py-3 rounded-xl gold-gradient-bg text-obsidian-900 font-bold text-xs shadow-lg hover:scale-[1.02] transition-transform flex items-center space-x-2">
                    <i class="fa-solid fa-plus text-sm"></i>
                    <span>ADD NEW PRODUCT</span>
                </a>
                <a href="{{ route('admin.products.index') }}" class="px-5 py-3 rounded-xl bg-obsidian-700 hover:bg-obsidian-600 text-white font-medium text-xs border border-slate-700 transition-colors">
                    MANAGE CATALOG
                </a>
            </div>
        </div>
    </div>

    <!-- STATISTICS CARDS GRID -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-5">
        
        <!-- Total Products Card -->
        <div class="bg-white rounded-2xl p-5 border border-amber-900/10 shadow-xs hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Total Products</span>
                <div class="w-9 h-9 rounded-xl bg-amber-50 text-gold-600 flex items-center justify-center text-sm border border-amber-200">
                    <i class="fa-solid fa-box-archive"></i>
                </div>
            </div>
            <div class="text-2xl font-serif font-bold text-slate-900 mb-1">{{ number_format($totalProducts) }}</div>
            <div class="flex items-center text-[11px] text-emerald-600 font-medium">
                <i class="fa-solid fa-arrow-trend-up mr-1"></i>
                <span>Active in catalog</span>
            </div>
        </div>

        <!-- Active Products Card -->
        <div class="bg-white rounded-2xl p-5 border border-amber-900/10 shadow-xs hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Active</span>
                <div class="w-9 h-9 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-sm border border-emerald-200">
                    <i class="fa-solid fa-circle-check"></i>
                </div>
            </div>
            <div class="text-2xl font-serif font-bold text-slate-900 mb-1">{{ number_format($activeProducts) }}</div>
            <div class="text-[11px] text-slate-400 font-medium">Available on shop</div>
        </div>

        <!-- Out of Stock Card -->
        <div class="bg-white rounded-2xl p-5 border border-amber-900/10 shadow-xs hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Out of Stock</span>
                <div class="w-9 h-9 rounded-xl bg-red-50 text-red-600 flex items-center justify-center text-sm border border-red-200">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
            </div>
            <div class="text-2xl font-serif font-bold text-slate-900 mb-1">{{ number_format($outOfStock) }}</div>
            <div class="text-[11px] text-red-500 font-medium">Needs restocking</div>
        </div>

        <!-- Total Orders Card -->
        <div class="bg-white rounded-2xl p-5 border border-amber-900/10 shadow-xs hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Total Orders</span>
                <div class="w-9 h-9 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-sm border border-blue-200">
                    <i class="fa-solid fa-cart-shopping"></i>
                </div>
            </div>
            <div class="text-2xl font-serif font-bold text-slate-900 mb-1">{{ number_format($totalOrders) }}</div>
            <div class="text-[11px] text-blue-600 font-medium">+14% this month</div>
        </div>

        <!-- Total Customers Card -->
        <div class="bg-white rounded-2xl p-5 border border-amber-900/10 shadow-xs hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Customers</span>
                <div class="w-9 h-9 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center text-sm border border-purple-200">
                    <i class="fa-solid fa-users"></i>
                </div>
            </div>
            <div class="text-2xl font-serif font-bold text-slate-900 mb-1">{{ number_format($totalCustomers) }}</div>
            <div class="text-[11px] text-purple-600 font-medium">Registered accounts</div>
        </div>

        <!-- Total Revenue Card -->
        <div class="bg-white rounded-2xl p-5 border border-amber-900/10 shadow-xs hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Total Revenue</span>
                <div class="w-9 h-9 rounded-xl bg-gold-50 text-gold-700 flex items-center justify-center text-sm border border-gold-200">
                    <i class="fa-solid fa-indian-rupee-sign"></i>
                </div>
            </div>
            <div class="text-xl font-serif font-bold text-gold-700 mb-1">₹{{ number_format($revenue, 2) }}</div>
            <div class="text-[11px] text-emerald-600 font-medium">+18.5% growth</div>
        </div>

    </div>

    <!-- MAIN TWO COLUMN GRID -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        <!-- Left: Recent Products & Orders Tables -->
        <div class="lg:col-span-8 space-y-8">
            
            <!-- Recent Orders Table -->
            <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs">
                <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
                    <div>
                        <h3 class="font-serif text-lg font-bold text-slate-900">Recent Customer Orders</h3>
                        <p class="text-xs text-slate-500">Latest purchases placed through the website</p>
                    </div>
                    <a href="{{ route('admin.orders.index') }}" class="text-xs font-semibold text-gold-600 hover:text-gold-700 flex items-center space-x-1">
                        <span>View All Orders</span>
                        <i class="fa-solid fa-arrow-right text-[10px]"></i>
                    </a>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="text-[11px] font-bold text-slate-400 uppercase tracking-wider border-b border-slate-100 pb-3">
                                <th class="pb-3 px-2">Order #</th>
                                <th class="pb-3 px-2">Customer</th>
                                <th class="pb-3 px-2">Amount</th>
                                <th class="pb-3 px-2">Status</th>
                                <th class="pb-3 px-2">Date</th>
                                <th class="pb-3 px-2 text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 text-xs">
                            @forelse($recentOrders as $order)
                                <tr class="hover:bg-amber-50/30 transition-colors">
                                    <td class="py-3 px-2 font-mono font-bold text-slate-900">
                                        <a href="{{ route('admin.orders.show', $order->id) }}" class="text-gold-700 hover:underline">
                                            {{ $order->order_number }}
                                        </a>
                                    </td>
                                    <td class="py-3 px-2 font-semibold text-slate-800">{{ $order->customer_name }}</td>
                                    <td class="py-3 px-2 font-serif font-bold text-slate-900">₹{{ number_format($order->total_amount, 2) }}</td>
                                    <td class="py-3 px-2">
                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold border {{ $order->order_status_badge }}">
                                            {{ strtoupper($order->order_status) }}
                                        </span>
                                    </td>
                                    <td class="py-3 px-2 text-slate-500 text-[11px]">{{ $order->created_at ? $order->created_at->format('M d, Y') : 'N/A' }}</td>
                                    <td class="py-3 px-2 text-right">
                                        <a href="{{ route('admin.orders.show', $order->id) }}" class="p-1.5 rounded-lg bg-obsidian-900 text-white hover:bg-gold-600 transition-colors text-[10px] font-bold px-2.5">
                                            VIEW
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="py-6 text-center text-slate-400">No orders recorded yet. Place an order from the shop to test!</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Recent Products Added Table -->
            <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs">
                <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
                    <div>
                        <h3 class="font-serif text-lg font-bold text-slate-900">Recent Products Added</h3>
                        <p class="text-xs text-slate-500">Latest additions to the Dwaraka jewellery catalog</p>
                    </div>
                    <a href="{{ route('admin.products.index') }}" class="text-xs font-semibold text-gold-600 hover:text-gold-700 flex items-center space-x-1">
                        <span>View All</span>
                        <i class="fa-solid fa-arrow-right text-[10px]"></i>
                    </a>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="text-[11px] font-bold text-slate-400 uppercase tracking-wider border-b border-slate-100 pb-3">
                                <th class="pb-3 px-2">Product</th>
                                <th class="pb-3 px-2">SKU</th>
                                <th class="pb-3 px-2">Category</th>
                                <th class="pb-3 px-2">Price</th>
                                <th class="pb-3 px-2">Stock</th>
                                <th class="pb-3 px-2 text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 text-xs">
                            @forelse($recentProducts as $product)
                                <tr class="hover:bg-amber-50/30 transition-colors">
                                    <td class="py-3 px-2">
                                        <div class="flex items-center space-x-3">
                                            <img src="{{ $product->primary_image_url }}" 
                                                 alt="{{ $product->name }}" 
                                                 class="w-10 h-10 rounded-xl object-cover border border-amber-900/10"
                                                 onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=800&q=80';"
                                            >
                                            <div>
                                                <p class="font-semibold text-slate-900">{{ $product->name }}</p>
                                                @if($product->is_featured)
                                                    <span class="text-[9px] font-bold text-amber-700 bg-amber-100 px-1.5 py-0.5 rounded">FEATURED</span>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-3 px-2 text-slate-500 font-mono">{{ $product->sku ?? 'N/A' }}</td>
                                    <td class="py-3 px-2 text-slate-600">{{ $product->category->name ?? 'Uncategorized' }}</td>
                                    <td class="py-3 px-2 font-semibold text-slate-900">₹{{ number_format($product->price, 2) }}</td>
                                    <td class="py-3 px-2">
                                        @if($product->stock > 0)
                                            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-100 text-emerald-700">
                                                {{ $product->stock }} in stock
                                            </span>
                                        @else
                                            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-red-100 text-red-700">
                                                Out of stock
                                            </span>
                                        @endif
                                    </td>
                                    <td class="py-3 px-2 text-right">
                                        <a href="{{ route('admin.products.edit', $product->id) }}" class="p-2 rounded-lg text-slate-400 hover:text-gold-600 hover:bg-gold-50 transition-colors">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="py-8 text-center text-slate-400">No products available.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Right: Quick Navigation & Catalog Stats -->
        <div class="lg:col-span-4 space-y-6">
            
            <!-- Quick Actions Card -->
            <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs space-y-4">
                <h3 class="font-serif text-lg font-bold text-slate-900 border-b border-slate-100 pb-3">Quick Actions</h3>
                
                <a href="{{ route('admin.products.create') }}" class="w-full flex items-center justify-between p-3.5 rounded-2xl bg-amber-50/60 border border-amber-200/80 text-gold-800 hover:bg-amber-100/70 transition-colors group">
                    <div class="flex items-center space-x-3">
                        <div class="w-9 h-9 rounded-xl gold-gradient-bg text-obsidian-900 flex items-center justify-center font-bold text-sm">
                            <i class="fa-solid fa-plus"></i>
                        </div>
                        <span class="text-xs font-bold">Add New Jewellery Item</span>
                    </div>
                    <i class="fa-solid fa-chevron-right text-xs text-gold-600 group-hover:translate-x-1 transition-transform"></i>
                </a>

                <a href="{{ route('admin.categories.index') }}" class="w-full flex items-center justify-between p-3.5 rounded-2xl bg-slate-50 border border-slate-200/80 text-slate-700 hover:bg-slate-100 transition-colors group">
                    <div class="flex items-center space-x-3">
                        <div class="w-9 h-9 rounded-xl bg-slate-200 text-slate-700 flex items-center justify-center font-bold text-sm">
                            <i class="fa-solid fa-layer-group"></i>
                        </div>
                        <span class="text-xs font-bold">Manage Categories</span>
                    </div>
                    <i class="fa-solid fa-chevron-right text-xs text-slate-400 group-hover:translate-x-1 transition-transform"></i>
                </a>

                <a href="{{ route('admin.orders.index') }}" class="w-full flex items-center justify-between p-3.5 rounded-2xl bg-slate-50 border border-slate-200/80 text-slate-700 hover:bg-slate-100 transition-colors group">
                    <div class="flex items-center space-x-3">
                        <div class="w-9 h-9 rounded-xl bg-slate-200 text-slate-700 flex items-center justify-center font-bold text-sm">
                            <i class="fa-solid fa-bag-shopping"></i>
                        </div>
                        <span class="text-xs font-bold">View Customer Orders</span>
                    </div>
                    <i class="fa-solid fa-chevron-right text-xs text-slate-400 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>

            <!-- Categories Overview -->
            <div class="bg-obsidian-900 rounded-3xl p-6 text-slate-200 border border-gold-500/20 shadow-xl space-y-4">
                <div class="flex items-center justify-between border-b border-obsidian-700 pb-3">
                    <h3 class="font-serif text-base font-bold text-white">Dwaraka Collection Specs</h3>
                    <span class="text-[10px] font-bold text-gold-400 bg-gold-500/10 px-2 py-0.5 rounded border border-gold-500/20">18K MICRO GOLD</span>
                </div>
                <div class="space-y-3 text-xs text-slate-400">
                    <div class="flex justify-between items-center">
                        <span>Database Driver</span>
                        <span class="text-slate-200 font-mono">MySQL 8.0</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span>Framework Version</span>
                        <span class="text-gold-400 font-semibold">Laravel 12.x</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span>Security Protocol</span>
                        <span class="text-emerald-400 font-semibold">Bcrypt / Hashed Session</span>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>
@endsection