@extends('admin.layout.app')
@section('content')
    <style>
        body {
            background: #f4f7fb;
        }

        /* PAGE TITLE */
        .dashboard-title {
            font-size: 32px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 25px;
        }

        /* CARD */
        .dashboard-card {
            background: #fff;
            border-radius: 22px;
            padding: 25px;
            position: relative;
            overflow: hidden;
            transition: .3s;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
            height: 100%;
        }

        .dashboard-card:hover {
            transform: translateY(-5px);
        }

        /* ICON */
        .card-icon {
            width: 65px;
            height: 65px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            margin-bottom: 18px;
            color: #fff;
        }

        /* COLORS */
        .bg-products {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
        }

        .bg-orders {
            background: linear-gradient(135deg, #10b981, #059669);
        }

        .bg-cart {
            background: linear-gradient(135deg, #f59e0b, #d97706);
        }

        .bg-users {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        }

        /* LABEL */
        .card-label {
            color: #6b7280;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 0px;
        }

        /* VALUE */
        .card-value {
            font-size: 30px;
            font-weight: 600;
            color: #111827;
            line-height: 1;
        }

      .dashboard-card thead tr th {
    background: #F5F4FC;
    color: #5A4FD6;
    border: none;
}
.dashboard-card thead tr {
        border-bottom: none;
}
        .dashboard-card thead tr th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .dashboard-card thead tr th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
     .dashboard-card tbody tr td:first-child {
    color: #5A4FD6;
    font-weight: 700;
}

        /* MINI TEXT */
        .card-mini {
            /* margin-top: 12px; */
            color: #6b7280;
            font-size: 16px;
            font-weight: 600;
        }

        /* WELCOME BOX */
        .welcome-box {
            background: linear-gradient(135deg, #6d5dfc, #3b82f6);
            border-radius: 25px;
            padding: 35px;
            margin-bottom: 30px;
            color: #fff;
        }

        .welcome-title {
            font-size: 34px;
            font-weight: 800;
        }

  .welcome-text {
    /* margin-top: 10px; */
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

        /* MOBILE */
        @media(max-width:768px) {
            .dashboard-title {
                font-size: 26px;
            }

            .welcome-title {
                font-size: 28px;
            }

            .card-value {
                font-size: 30px;
            }
        }
    </style>

    <div class="container-fluid py-4">
        {{-- WELCOME --}}
        <div class="welcome-box">
            <div class="welcome-title">
                Welcome back, {{ auth()->user()->name ?? 'Admin' }}!

            </div>
            <div class="welcome-text">
                Here's what's happening in your store today.
            </div>
        </div>
        {{-- TITLE --}}
        <div class="dashboard-title">
            Overview
        </div>
        <div class="row g-4">
            {{-- TOTAL PRODUCTS --}}
            <div class="col-lg-3 col-md-6">
                <div class="dashboard-card">
                    <div class="d-flex gap-4">
                        <div class="card-icon bg-products">
                            <i class="fas fa-gem"></i>
                        </div>
                        <div class="d-flex flex-column">
                            <div class="card-label">
                                Total Products
                            </div>
                            <div class="card-value">
                                {{ $totalProducts ?? 0 }}
                            </div>
                        </div>
                    </div>
                    <div class="card-mini">
                        Available store products
                    </div>
                </div>
            </div>
            {{-- TOTAL ORDERS --}}
            <div class="col-lg-3 col-md-6">
                <div class="dashboard-card">
                    <div class="d-flex gap-4">
                        <div class="card-icon bg-orders">
                            <i class="fas fa-shopping-bag"></i>
                        </div>
                        <div class="d-flex flex-column">
                            <div class="card-label">
                                Total Orders
                            </div>
                            <div class="card-value">
                                {{ $totalOrders ?? 0 }}
                            </div>
                        </div>
                    </div>
                    <div class="card-mini">
                        Customer placed orders
                    </div>
                </div>
            </div>
            {{-- TOTAL CART ITEMS --}}
            <div class="col-lg-3 col-md-6">
                <div class="dashboard-card">
                    <div class="d-flex gap-4">
                        <div class="card-icon bg-cart">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <div class="d-flex flex-column">
                            <div class="card-label">
                                Cart Items
                            </div>
                            <div class="card-value">
                                {{ $totalCartItems ?? 0 }}
                            </div>
                        </div>
                    </div>
                    <div class="card-mini">
                        Products added in cart
                    </div>
                </div>
            </div>
            {{-- TOTAL USERS --}}
            <div class="col-lg-3 col-md-6">
                <div class="dashboard-card">
                    <div class="d-flex gap-4">
                        <div class="card-icon bg-users">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="d-flex flex-column">
                            <div class="card-label">
                                Total Users
                            </div>
                            <div class="card-value">
                                {{ $totalUsers ?? 0 }}
                            </div>
                        </div>
                    </div>
                    <div class="card-mini">
                        Registered customers
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="row">
        <div class="col-md-6">
            <div class="card shadow border-0">
                <div class="card-header">
                    Latest Orders
                </div>
                <div class="card-body table-responsive">
                    <table class="table">
                        ...
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow border-0">
                <div class="card-header">
                    Latest Cart Items
                </div>
                <div class="card-body table-responsive">
                    <table class="table">
                        ...
                    </table>
                </div>
            </div>
        </div>
    </div> --}}
    <div class="container-fluid">
    <div class="row mt-4">
        {{-- RECENT ORDERS --}}
        <div class="col-lg-6 mb-4">
            <div class="dashboard-card">
                <h4 class="mb-4">
                    Recent Orders
                </h4>
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($latestOrders as  $key => $order)
                                <tr>
                                    <td>
                                        {{ $key + 1 }}
                                    </td>
                                    <td>
                                        {{ $order->name ?? 'N/A' }}
                                    </td>
                                    <td>
                                        ${{ number_format($order->total_amount ?? 0) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3">
                                        No Orders Found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {{-- RECENT CART ITEMS --}}
        <div class="col-lg-6 mb-4">
            <div class="dashboard-card">
                <h4 class="mb-4">
                    Recent Cart Items
                </h4>
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Product</th>
                                <th>User</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($latestCarts as  $key => $cart)
                                <tr>
                                    <td>
                                        {{ $key + 1 }}
                                    </td>
                                    <td>
                                        {{ $cart->product->collection ?? 'N/A' }}
                                    </td>
                                    <td>
                                        {{ $cart->user->name ?? 'N/A' }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3">
                                        No Cart Items Found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
