@extends('layouts.admin-layout')
@section('content')
@section('title')
    Dashboard
@endsection

<style>
    .dashboard-header {
        background: linear-gradient(120deg, #2c3e50 0%, #34495e 100%);
        color: white;
        padding: 1.5rem 0;
        border-radius: 0 0 10px 10px;
        margin-bottom: 2rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .dashboard-title {
        font-weight: 700;
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    .dashboard-subtitle {
        opacity: 0.9;
        font-size: 1rem;
    }

    .stats-card {
        border-radius: 12px;
        border: none;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        margin-bottom: 25px;
        height: 100%;
        background: white;
        border: 1px solid #e0e0e0;
    }

    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        border-color: #bdbdbd;
    }

    .stats-card .card-body {
        padding: 1.75rem;
        position: relative;
    }

    .stats-icon {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 2.5rem;
        opacity: 0.3;
        transition: all 0.3s ease;
        color: #333;
    }

    .stats-card:hover .stats-icon {
        opacity: 0.4;
        transform: scale(1.1);
    }

    .stats-value {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #2c3e50;
    }

    .stats-label {
        font-size: 0.95rem;
        color: #7f8c8d;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stats-change {
        font-size: 0.85rem;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
    }

    .stats-change.positive {
        color: #27ae60;
    }

    .stats-change.negative {
        color: #c0392b;
    }

    .data-section {
        background: white;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        padding: 1.5rem;
        margin-top: 1rem;
        height: 100%;
        border: 1px solid #e0e0e0;
    }

    .section-title {
        font-weight: 600;
        margin-bottom: 1.2rem;
        font-size: 1.2rem;
        color: #2c3e50;
        border-bottom: 2px solid #ecf0f1;
        padding-bottom: 0.7rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .view-all {
        font-size: 0.85rem;
        color: #7f8c8d;
        text-decoration: none;
        font-weight: 500;
    }

    .view-all:hover {
        color: #2c3e50;
        text-decoration: underline;
    }

    .data-item {
        display: flex;
        align-items: center;
        padding: 0.8rem 0;
        border-bottom: 1px solid #f8f9fa;
        transition: background-color 0.2s ease;
    }

    .data-item:hover {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .data-item:last-child {
        border-bottom: none;
    }

    .data-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        flex-shrink: 0;
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
    }

    .data-content {
        flex-grow: 1;
    }

    .data-text {
        margin-bottom: 0.2rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: #2c3e50;
    }

    .data-meta {
        font-size: 0.8rem;
        color: #7f8c8d;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .data-time {
        font-size: 0.8rem;
        color: #95a5a6;
        margin-top: 0.2rem;
    }

    .empty-state {
        text-align: center;
        padding: 2rem 0;
        color: #7f8c8d;
    }

    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .preloader {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: white;
    }

    .preloader img {
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid;
    }

    .status-pending {
        background-color: #fff3cd;
        color: #856404;
        border-color: #ffeaa7;
    }

    .status-completed {
        background-color: #d1ecf1;
        color: #0c5460;
        border-color: #a3e4d7;
    }

    .status-processing {
        background-color: #d4edda;
        color: #155724;
        border-color: #a3e4d7;
    }

    .progress {
        background-color: #ecf0f1;
        border-radius: 10px;
        overflow: hidden;
    }

    .progress-bar {
        background: linear-gradient(90deg, #2c3e50, #34495e);
        border-radius: 10px;
    }

    .sales-overview {
        text-align: center;
        padding: 1.5rem 0;
    }

    .sales-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .sales-label {
        font-size: 1rem;
        color: #7f8c8d;
        margin-bottom: 1rem;
    }

    .content-wrapper {
        background-color: #f8f9fa;
    }

    .data-icon i {
        color: #2c3e50;
    }

    .user-name {
        font-weight: 600;
        color: #2c3e50;
    }
</style>

<!-- Preloader -->
<div class="preloader flex-column justify-content-center align-items-center">
    <img class="animation__shake"
         src="{{isset($setting) ? $setting->settingImage('logo') : asset('upload/No-Image.png')}}" alt="AdminLTELogo"
         height="60" width="60">
</div>

<div class="content-wrapper">
    <!-- Dashboard Header -->
    <div class="dashboard-header mt-2 ml-2 mr-2" style="border-radius:30px">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-md-12 ml-3">
                    <h1 class="dashboard-title">Admin Dashboard</h1>
                    <p class="dashboard-subtitle">Welcome back! Here's what's happening today.</p>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <!-- Stats Cards -->
            <div class="row">
                <div class="col-md-3">
                    <div class="card stats-card">
                        <div class="card-body">
                            <i class="fas fa-shopping-cart stats-icon"></i>
                            <div class="stats-value">{{ number_format($totalOrders) }}</div>
                            <div class="stats-label">Total Orders</div>
                            <div class="stats-change positive">
                                <i class="fas fa-arrow-up mr-1"></i> All Time Orders
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card stats-card">
                        <div class="card-body">
                            <i class="fas fa-users stats-icon"></i>
                            <div class="stats-value">{{ number_format($totalUsers) }}</div>
                            <div class="stats-label">Registered Users</div>
                            <div class="stats-change positive">
                                <i class="fas fa-arrow-up mr-1"></i> Total Registered Users
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card stats-card">
                        <div class="card-body">
                            <i class="fas fa-dollar-sign stats-icon"></i>
                            <div class="stats-value">${{ number_format($currentMonthSales, 2) }} CAD</div>
                            <div class="stats-label">Current Month Sales</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card stats-card">
                        <div class="card-body">
                            <i class="fas fa-envelope stats-icon"></i>
                            <div class="stats-value">{{ number_format($totalContactRequests) }}</div>
                            <div class="stats-label">Contact Requests</div>
                            <div class="stats-change positive">
                                <i class="fas fa-arrow-up mr-1"></i> Total Messages
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Data Sections -->
            <div class="row">
                <!-- Recent Orders -->
                <div class="col-lg-6">
                    <div class="data-section">
                        <h3 class="section-title">
                            Recent Orders
                            <a href="{{ route('admin.order.list') }}" class="view-all">View All</a>
                        </h3>

                        @if($recentOrders->count() > 0)
                            @foreach($recentOrders as $order)
                                <div class="data-item">
                                    <div class="data-icon">
                                        <i class="fas fa-shopping-cart"></i>
                                    </div>
                                    <div class="data-content">
                                        <div class="data-text">Order #{{ $order->order_number }}</div>
                                        <div class="data-meta">
                                            <span class="user-name">
                                                {{ $order->user ? $order->user->first_name . ' ' . $order->user->last_name : 'Guest User' }}
                                            </span>
                                            <span class="status-badge status-{{ $order->status }}">
                                                {{ ucfirst($order->status) }}
                                            </span>
                                        </div>
                                        <div class="data-time">{{ $order->created_at->diffForHumans() }}</div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="empty-state">
                                <i class="fas fa-shopping-cart"></i>
                                <p>No orders found</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Recent Users -->
                <div class="col-lg-6">
                    <div class="data-section">
                        <h3 class="section-title">
                            Recently Registered Users
                            <a href="{{ route('admin.user.list') }}" class="view-all">View All</a>
                        </h3>

                        @if($recentUsers->count() > 0)
                            @foreach($recentUsers as $user)
                                <div class="data-item">
                                    <div class="data-icon">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="data-content">
                                        <div class="data-text">{{ $user->first_name }} {{ $user->last_name }}</div>
                                        <div class="data-meta">
                                            <span>{{ $user->email }}</span>
                                        </div>
                                        <div class="data-time">Registered {{ $user->created_at->diffForHumans() }}</div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="empty-state">
                                <i class="fas fa-users"></i>
                                <p>No users found</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Additional Sections -->
            <div class="row mt-4">
                <!-- Current Month Sales -->
                <div class="col-lg-6">
                    <div class="data-section">
                        <h3 class="section-title">
                            Current Month Sales Overview
                        </h3>
                        <div class="sales-overview">
                            <div class="sales-value">${{ number_format($currentMonthSales, 2) }} CAD</div>
                            <div class="sales-label">Total Sales This Month</div>
                        </div>
                    </div>
                </div>

                <!-- Contact Requests -->
                <div class="col-lg-6">
                    <div class="data-section">
                        <h3 class="section-title">
                            Recent Contact Requests
                            <a href="{{ route('admin.contact.list') }}" class="view-all">View All</a>
                        </h3>

                        @if($recentContacts->count() > 0)
                            @foreach($recentContacts as $contact)
                                <div class="data-item">
                                    <div class="data-icon">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div class="data-content">
                                        <div class="data-text">{{ $contact->subject }}</div>
                                        <div class="data-meta">
                                            <span>{{ $contact->first_name }} {{ $contact->last_name }}</span>
                                        </div>
                                        <div class="data-time">Received {{ $contact->created_at->diffForHumans() }}</div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="empty-state">
                                <i class="fas fa-envelope"></i>
                                <p>No contact requests found</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@endsection