@extends('Admin.layout.app')


@section('content')
<div class="container-fluid py-4">

    <!-- Page Title -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold">Dashboard</h3>
        <span class="text-muted">{{ now()->format('d M Y') }}</span>
    </div>

    <!-- Statistics Cards -->
    <div class="row g-3 mb-4">

        <div class="col-md-3">
            <div class="card border-0 shadow-sm bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6>Total Orders</h6>
                            <h3>{{ $totalOrders }}</h3>
                        </div>
                        <i class="las la-shopping-cart la-3x"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6>Total Revenue</h6>
                            <h3>Rs {{ number_format($totalRevenue) }}</h3>
                        </div>
                        <i class="las la-wallet la-3x"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm bg-warning text-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6>Pending Orders</h6>
                            <h3>{{ $pendingOrders }}</h3>
                        </div>
                        <i class="las la-clock la-3x"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6>Total Customers</h6>
                            <h3>{{ $totalCustomers }}</h3>
                        </div>
                        <i class="las la-users la-3x"></i>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Second Row -->
    <div class="row g-3 mb-4">

        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body text-center">
                    <i class="las la-box text-info la-3x"></i>
                    <h4 class="mt-2">{{ $totalProducts }}</h4>
                    <p class="mb-0">Products</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body text-center">
                    <i class="las la-check-circle text-success la-3x"></i>
                    <h4 class="mt-2">{{ $deliveredOrders }}</h4>
                    <p class="mb-0">Delivered Orders</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body text-center">
                    <i class="las la-times-circle text-danger la-3x"></i>
                    <h4 class="mt-2">{{ $cancelledOrders }}</h4>
                    <p class="mb-0">Cancelled Orders</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow-sm border-0">
                <div class="card-body text-center">
                    <i class="las la-money-bill-wave text-warning la-3x"></i>
                    <h4 class="mt-2">{{ $todayOrders }}</h4>
                    <p class="mb-0">Today's Orders</p>
                </div>
            </div>
        </div>

    </div>

    <!-- Recent Orders -->
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white">
            <h5 class="mb-0">Recent Orders</h5>
        </div>

        <div class="card-body p-0">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Order Code</th>
                        <th>Customer</th>
                        <th>Amount</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th>Date</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($recentOrders as $order)
                    <tr>
                        <td>{{ $order->id }}</td>
                        <td>{{ $order->code }}</td>
                        <td>{{ $order->user->full_name ?? 'Guest' }}</td>
                        <td>Rs {{ number_format($order->grand_total) }}</td>

                        <td>
                            @if($order->payment_status == 'paid')
                                <span class="badge bg-success">Paid</span>
                            @else
                                <span class="badge bg-danger">Unpaid</span>
                            @endif
                        </td>

                        <td>
                            @if($order->delivery_status == 'delivered')
                                <span class="badge bg-success">Delivered</span>
                            @elseif($order->delivery_status == 'cancelled')
                                <span class="badge bg-danger">Cancelled</span>
                            @else
                                <span class="badge bg-warning">Pending</span>
                            @endif
                        </td>

                        <td>{{ $order->created_at->format('d M Y') }}</td>
                    </tr>
                    @endforeach
                </tbody>

            </table>
        </div>
    </div>

</div>
@endsection