@extends('admin.layout') 
@section('title', 'Dashboard Overview') 
@section('heading', 'Dashboard Overview') 

@section('content')
<!-- METRIC CARDS GRID -->
<div class="row g-4 mb-4">
    <!-- Total Revenue Card -->
    <div class="col-md-3">
        <div class="metric-card">
            <div>
                <div class="metric-label">Total Revenue</div>
                <div class="metric-value text-danger" style="font-size: 1.7rem;">₹{{ number_format($totalRevenue, 2) }}</div>
                <div class="small text-muted mt-2 d-flex align-items-center gap-1">
                    <span class="badge" style="background: rgba(239, 40, 83, 0.1); color: var(--ul-primary);">Earnings</span>
                    <span>Completed sales</span>
                </div>
            </div>
            <div class="metric-icon-box">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="12" y1="1" x2="12" y2="23"></line>
                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                </svg>
            </div>
        </div>
    </div>

    <!-- Total Orders Card -->
    <div class="col-md-3">
        <div class="metric-card">
            <div>
                <div class="metric-label">Customer Orders</div>
                <div class="metric-value">{{ number_format($orderCount) }}</div>
                <div class="small text-muted mt-2 d-flex align-items-center gap-1">
                    <span class="badge" style="background: rgba(13, 110, 253, 0.1); color: #0d6efd;">Orders</span>
                    <span>Total saree purchases</span>
                </div>
            </div>
            <div class="metric-icon-box" style="background: rgba(13, 110, 253, 0.1); color: #0d6efd;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="9" cy="21" r="1"></circle>
                    <circle cx="20" cy="21" r="1"></circle>
                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                </svg>
            </div>
        </div>
    </div>

    <!-- Total Products Card -->
    <div class="col-md-3">
        <div class="metric-card">
            <div>
                <div class="metric-label">Catalogue Sarees</div>
                <div class="metric-value">{{ number_format($productCount) }}</div>
                <div class="small text-muted mt-2 d-flex align-items-center gap-1">
                    <span class="badge" style="background: rgba(25, 135, 84, 0.1); color: #198754;">Live: {{ $activeCount }}</span>
                    <span>Total listed</span>
                </div>
            </div>
            <div class="metric-icon-box" style="background: rgba(25, 135, 84, 0.1); color: #198754;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                    <line x1="3" y1="6" x2="21" y2="6"></line>
                    <path d="M16 10a4 4 0 0 1-8 0"></path>
                </svg>
            </div>
        </div>
    </div>

    <!-- Registered Customers Card -->
    <div class="col-md-3">
        <div class="metric-card">
            <div>
                <div class="metric-label">Registered Customers</div>
                <div class="metric-value">{{ number_format($customerCount) }}</div>
                <div class="small text-muted mt-2 d-flex align-items-center gap-1">
                    <span class="badge" style="background: rgba(255, 163, 26, 0.15); color: #B36B00;">Accounts</span>
                    <span>Active users</span>
                </div>
            </div>
            <div class="metric-icon-box" style="background: rgba(255, 163, 26, 0.15); color: #D98200;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                </svg>
            </div>
        </div>
    </div>
</div>

<!-- RECENT CUSTOMER ORDERS TABLE -->
<div class="card-custom p-4 mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h5 class="fw-bold mb-1" style="color: var(--text-dark);">Recent Customer Orders</h5>
            <div class="small text-muted">Latest saree purchases placed by customers</div>
        </div>
        <a href="{{ route('admin.orders.index') }}" class="btn-brand-outline">
            <span>View All Orders</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
        </a>
    </div>

    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead>
                <tr class="text-muted small">
                    <th>Order Number</th>
                    <th>Customer</th>
                    <th>Items</th>
                    <th>Total Amount</th>
                    <th>Status</th>
                    <th>Date</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentOrders as $ord)
                    <tr>
                        <td><strong class="text-dark">{{ $ord->order_number }}</strong></td>
                        <td>
                            <strong class="d-block text-dark small">{{ $ord->user->name ?? 'Customer' }}</strong>
                            <span class="small text-muted">{{ $ord->user->email ?? 'N/A' }}</span>
                        </td>
                        <td><span class="badge bg-light text-dark border">{{ $ord->items->count() }} items</span></td>
                        <td><strong class="text-danger">₹{{ number_format($ord->total_amount, 2) }}</strong></td>
                        <td>
                            <span class="badge rounded-pill {{ $ord->status == 'Delivered' ? 'bg-success' : ($ord->status == 'Shipped' ? 'bg-info text-dark' : 'bg-warning text-dark') }} px-3 py-1">
                                ● {{ $ord->status }}
                            </span>
                        </td>
                        <td class="small text-muted">{{ $ord->created_at ? $ord->created_at->format('d M Y') : 'N/A' }}</td>
                        <td class="text-end">
                            <a href="{{ route('admin.orders.show', $ord) }}" class="btn btn-sm btn-outline-danger rounded-3 fw-semibold">
                                View Details →
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-4 text-muted">
                            No recent customer orders found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection