@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-8">
    
    <!-- Page Title Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight">Overview Dashboard</h1>
            <p class="text-xs text-gray-500 font-medium">Welcome back! Here is what's happening with your store today.</p>
        </div>
        <div class="flex items-center space-x-3">
            <button onclick="fetchDashboardData()" class="bg-white border border-gray-200 text-slate-700 hover:bg-gray-50 font-bold px-4 py-2 rounded-lg text-xs flex items-center gap-2 shadow-sm transition-colors">
                <i class="fa-solid fa-rotate text-xs text-gray-400"></i>
                <span>Refresh Data</span>
            </button>
            <a href="/admin/products" class="bg-noko-navy hover:bg-noko-navydark text-white font-bold px-4 py-2 rounded-lg text-xs flex items-center gap-2 shadow transition-colors">
                <i class="fa-solid fa-plus text-xs"></i>
                <span>Add Product</span>
            </a>
        </div>
    </div>

    <!-- METRIC SUMMARY CARDS -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        
        <!-- Card 1: Total Sales / Revenue -->
        <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm relative overflow-hidden flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-xs font-extrabold uppercase tracking-wider text-gray-400">TOTAL SALES</span>
                <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-600 flex items-center justify-center font-bold">
                    <i class="fa-solid fa-coins text-lg"></i>
                </div>
            </div>
            <div class="mt-4">
                <div class="text-2xl font-black text-slate-900" id="total-revenue">
                    LKR 1,845,000
                </div>
                <div class="text-xs text-emerald-600 font-bold flex items-center gap-1 mt-1">
                    <i class="fa-solid fa-arrow-trend-up"></i>
                    <span>+14.2% from last month</span>
                </div>
            </div>
        </div>

        <!-- Card 2: Total Orders -->
        <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm relative overflow-hidden flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-xs font-extrabold uppercase tracking-wider text-gray-400">TOTAL ORDERS</span>
                <div class="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-600 flex items-center justify-center font-bold">
                    <i class="fa-solid fa-cart-shopping text-lg"></i>
                </div>
            </div>
            <div class="mt-4">
                <div class="text-2xl font-black text-slate-900" id="total-orders">
                    1,248
                </div>
                <div class="text-xs text-emerald-600 font-bold flex items-center gap-1 mt-1">
                    <i class="fa-solid fa-arrow-trend-up"></i>
                    <span>+8.5% new orders</span>
                </div>
            </div>
        </div>

        <!-- Card 3: Total Products -->
        <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm relative overflow-hidden flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-xs font-extrabold uppercase tracking-wider text-gray-400">TOTAL PRODUCTS</span>
                <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center font-bold">
                    <i class="fa-solid fa-box text-lg"></i>
                </div>
            </div>
            <div class="mt-4">
                <div class="text-2xl font-black text-slate-900" id="total-products">
                    342
                </div>
                <div class="text-xs text-slate-500 font-medium flex items-center gap-1 mt-1">
                    <span class="text-amber-600 font-bold" id="low-stock-count">12 Low Stock</span>
                </div>
            </div>
        </div>

        <!-- Card 4: Pending Orders -->
        <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm relative overflow-hidden flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-xs font-extrabold uppercase tracking-wider text-gray-400">PENDING ORDERS</span>
                <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-600 flex items-center justify-center font-bold">
                    <i class="fa-solid fa-clock text-lg"></i>
                </div>
            </div>
            <div class="mt-4">
                <div class="text-2xl font-black text-slate-900" id="pending-orders">
                    18
                </div>
                <div class="text-xs text-amber-600 font-bold flex items-center gap-1 mt-1">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    <span>Requires processing</span>
                </div>
            </div>
        </div>

    </div>

    <!-- RECENT ORDERS TABLE SECTION -->
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden space-y-4">
        
        <div class="p-6 border-b border-gray-100 flex items-center justify-between">
            <div>
                <h3 class="font-extrabold text-slate-900 text-lg">Recent Orders</h3>
                <p class="text-xs text-gray-500 font-medium">Latest customer transactions across your store.</p>
            </div>
            <a href="/admin/orders" class="text-xs font-bold text-noko-navy hover:underline flex items-center gap-1">
                View All Orders <i class="fa-solid fa-chevron-right text-[10px]"></i>
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-50 text-slate-500 font-bold uppercase tracking-wider border-b border-gray-200">
                    <tr>
                        <th class="py-3.5 px-6">Order ID</th>
                        <th class="py-3.5 px-6">Customer</th>
                        <th class="py-3.5 px-6">Total Amount</th>
                        <th class="py-3.5 px-6">Payment Status</th>
                        <th class="py-3.5 px-6">Order Status</th>
                        <th class="py-3.5 px-6">Date</th>
                        <th class="py-3.5 px-6 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 font-medium text-slate-800" id="recent-orders-tbody">
                    <!-- Default Mock Rows (Overridden dynamically by JS fetch) -->
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="py-4 px-6 font-bold text-noko-navy">#ORD-1048</td>
                        <td class="py-4 px-6 font-semibold">Kasun Perera</td>
                        <td class="py-4 px-6 font-extrabold text-slate-900">LKR 45,000</td>
                        <td class="py-4 px-6">
                            <span class="bg-emerald-100 text-emerald-800 font-bold px-2.5 py-1 rounded-full text-[10px]">PAID</span>
                        </td>
                        <td class="py-4 px-6">
                            <span class="bg-amber-100 text-amber-800 font-bold px-2.5 py-1 rounded-full text-[10px]">PENDING</span>
                        </td>
                        <td class="py-4 px-6 text-gray-500">2026-08-20</td>
                        <td class="py-4 px-6 text-right">
                            <button class="bg-slate-100 hover:bg-slate-200 text-slate-800 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors">Details</button>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="py-4 px-6 font-bold text-noko-navy">#ORD-1047</td>
                        <td class="py-4 px-6 font-semibold">Nuwan Fernando</td>
                        <td class="py-4 px-6 font-extrabold text-slate-900">LKR 88,750</td>
                        <td class="py-4 px-6">
                            <span class="bg-emerald-100 text-emerald-800 font-bold px-2.5 py-1 rounded-full text-[10px]">PAID</span>
                        </td>
                        <td class="py-4 px-6">
                            <span class="bg-blue-100 text-blue-800 font-bold px-2.5 py-1 rounded-full text-[10px]">SHIPPED</span>
                        </td>
                        <td class="py-4 px-6 text-gray-500">2026-08-19</td>
                        <td class="py-4 px-6 text-right">
                            <button class="bg-slate-100 hover:bg-slate-200 text-slate-800 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors">Details</button>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="py-4 px-6 font-bold text-noko-navy">#ORD-1046</td>
                        <td class="py-4 px-6 font-semibold">Dilshan Wickrama</td>
                        <td class="py-4 px-6 font-extrabold text-slate-900">LKR 140,250</td>
                        <td class="py-4 px-6">
                            <span class="bg-emerald-100 text-emerald-800 font-bold px-2.5 py-1 rounded-full text-[10px]">PAID</span>
                        </td>
                        <td class="py-4 px-6">
                            <span class="bg-emerald-100 text-emerald-800 font-bold px-2.5 py-1 rounded-full text-[10px]">DELIVERED</span>
                        </td>
                        <td class="py-4 px-6 text-gray-500">2026-08-18</td>
                        <td class="py-4 px-6 text-right">
                            <button class="bg-slate-100 hover:bg-slate-200 text-slate-800 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors">Details</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        fetchDashboardData();
    });

    async function fetchDashboardData() {
        try {
            const response = await fetch('/api/admin/dashboard');
            if (!response.ok) return;

            const data = await response.json();
            
            if (data.summary) {
                if (data.summary.total_revenue !== undefined) {
                    document.getElementById('total-revenue').textContent = 'LKR ' + Number(data.summary.total_revenue).toLocaleString();
                }
                if (data.summary.total_orders !== undefined) {
                    document.getElementById('total-orders').textContent = Number(data.summary.total_orders).toLocaleString();
                }
                if (data.summary.low_stock_items !== undefined) {
                    document.getElementById('low-stock-count').textContent = data.summary.low_stock_items + ' Low Stock';
                }
            }

            if (data.orders_by_status && data.orders_by_status.pending !== undefined) {
                document.getElementById('pending-orders').textContent = data.orders_by_status.pending;
            }

        } catch (err) {
            console.log('Using default dashboard stats fallback:', err);
        }
    }
</script>
@endpush
@endsection