@extends('customer.layout')

@section('title','Dashboard')

@section('content')

<style>
/* ===== GRADIENTS ===== */
.bg-gradient-primary{
    background:linear-gradient(135deg,#2563eb,#1e40af);
}
.bg-gradient-warning{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}
.bg-gradient-success{
    background:linear-gradient(135deg,#22c55e,#15803d);
}

/* ===== STAT CARDS ===== */
.stat-card{
    transition:.25s ease;
}
.stat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

/* ===== ICON CIRCLE ===== */
.icon-circle{
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}
</style>

<!-- PAGE HEADER -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold mb-1">Dashboard</h3>
        <p class="text-muted mb-0">Overview of your recent activity</p>
    </div>

    <span class="badge bg-primary px-3 py-2 rounded-pill">
        <i class="bi bi-clock-history me-1"></i>
        Updated just now
    </span>
</div>

<!-- ================= STATS ================= -->
<div class="row g-4 mb-4">

    <!-- TOTAL ORDERS -->
    <div class="col-md-4">
        <div class="card border-0 shadow stat-card bg-gradient-primary text-white h-100">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                    <small class="opacity-75">Total Orders</small>
                    <h2 class="fw-bold mb-0">{{ $stats['total_orders'] ?? 0 }}</h2>
                </div>
                <div class="icon-circle">
                    <i class="bi bi-box-seam"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- PENDING ORDERS -->
    <div class="col-md-4">
        <div class="card border-0 shadow stat-card bg-gradient-warning text-white h-100">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                    <small class="opacity-75">Pending Orders</small>
                    <h2 class="fw-bold mb-0">{{ $stats['pending_orders'] ?? 0 }}</h2>
                </div>
                <div class="icon-circle">
                    <i class="bi bi-hourglass-split"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- TOTAL SPENT -->
    <div class="col-md-4">
        <div class="card border-0 shadow stat-card bg-gradient-success text-white h-100">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                    <small class="opacity-75">Total Spent</small>
                    <h2 class="fw-bold mb-0">
                        LKR {{ number_format($stats['total_spent'] ?? 0,2) }}
                    </h2>
                </div>
                <div class="icon-circle">
                    <i class="bi bi-cash-coin"></i>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- ================= RECENT ORDERS ================= -->
<div class="card border-0 shadow-sm">

    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
        <h6 class="fw-bold mb-0">
            <i class="bi bi-receipt me-2 text-primary"></i>
            Recent Orders
        </h6>

        <a href="{{ route('customer.orders') }}"
           class="btn btn-sm btn-outline-primary rounded-pill">
            View All
        </a>
    </div>

    <div class="card-body p-0">

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">

                <thead class="table-light">
                    <tr>
                        <th>Order</th>
                        <th>Status</th>
                        <th>Amount</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>

                <tbody>
                @forelse($orders as $order)

                    @php
                        $statusColors = [
                            'pending' => 'warning',
                            'processing' => 'info',
                            'delivered' => 'success',
                            'cancelled' => 'danger',
                        ];
                        $color = $statusColors[$order->status] ?? 'secondary';
                    @endphp

                    <tr>
                        <td>
                            <strong>#{{ $order->order_no }}</strong>
                            <div class="small text-muted">
                                {{ $order->created_at?->format('d M Y') }}
                            </div>
                        </td>

                        <td>
                            <span class="badge bg-{{ $color }} rounded-pill px-3">
                                {{ ucfirst($order->status) }}
                            </span>
                        </td>

                        <td>
                            <strong>
                                LKR {{ number_format($order->amount,2) }}
                            </strong>
                        </td>

                        <td class="text-end">
                            <a href="{{ route('customer.orders.track',$order->id) }}"
                               class="btn btn-sm btn-outline-primary rounded-pill">
                                <i class="bi bi-geo-alt me-1"></i>
                                Track
                            </a>
                        </td>
                    </tr>

                @empty
                    <tr>
                        <td colspan="4" class="text-center text-muted py-4">
                            <i class="bi bi-inbox fs-4 d-block mb-2"></i>
                            No orders found
                        </td>
                    </tr>
                @endforelse
                </tbody>

            </table>
        </div>

    </div>
</div>

@endsection