@extends('layouts.app')

@section('title', 'Executive Car Dashboard')

@section('content')
<!-- Top Page Header & Welcome Banner -->
<div class="page-header">
    <div>
        <h1 class="page-title">Executive Dashboard</h1>
        <div class="page-subtitle">
            <i class="bi bi-speedometer2 text-danger me-1" style="color: var(--accent-red) !important;"></i>
            Welcome back, <strong>{{ Auth::user()->name ?? 'Admin' }}</strong>. Real-time showroom analytics & inventory status.
        </div>
    </div>
    <div class="d-flex align-items-center gap-2">
        <button class="btn btn-luxury-outline" type="button">
            <i class="bi bi-calendar-event"></i>
            <span>{{ date('F Y') }}</span>
        </button>
        <a href="{{ route('admin.vehicles.create') }}" class="btn btn-luxury-red">
            <i class="bi bi-plus-circle-fill"></i>
            <span>Add Vehicle</span>
        </a>
    </div>
</div>

<!-- ==========================================================================
     FIRST SECTION: 6 INTERACTIVE STATISTICS CARDS
     ========================================================================== -->
<div class="row g-3.5 mb-4">
    <!-- Stat Card 1: Total Vehicles -->
    <div class="col-12 col-sm-6 col-xl-4 col-xxl-2">
        <a href="{{ route('admin.vehicles.index') }}" class="text-decoration-none">
            <div class="stat-card" style="transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer;">
                <div class="stat-header">
                    <span class="stat-title">Total Vehicles</span>
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-car-front-fill"></i>
                    </div>
                </div>
                <div>
                    <h3 class="stat-count">{{ number_format($stats['total_vehicles'] ?? 0) }}</h3>
                    <div class="stat-footer">
                        <span class="badge-trend-up">
                            <i class="bi bi-arrow-up-short"></i> +12%
                        </span>
                        <span class="text-muted">this month</span>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Stat Card 2: Total Services -->
    <div class="col-12 col-sm-6 col-xl-4 col-xxl-2">
        <a href="{{ route('admin.services.index') }}" class="text-decoration-none">
            <div class="stat-card" style="transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer;">
                <div class="stat-header">
                    <span class="stat-title">Total Services</span>
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-tools"></i>
                    </div>
                </div>
                <div>
                    <h3 class="stat-count">{{ number_format($stats['total_services'] ?? 0) }}</h3>
                    <div class="stat-footer">
                        <span class="badge-trend-neutral">
                            <i class="bi bi-activity"></i> +4 active
                        </span>
                        <span class="text-muted">packages</span>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Stat Card 3: Total Blogs -->
    <div class="col-12 col-sm-6 col-xl-4 col-xxl-2">
        <a href="{{ route('admin.blogs.index') }}" class="text-decoration-none">
            <div class="stat-card" style="transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer;">
                <div class="stat-header">
                    <span class="stat-title">Total Blogs</span>
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-journal-richtext"></i>
                    </div>
                </div>
                <div>
                    <h3 class="stat-count">{{ number_format($stats['total_blogs'] ?? 0) }}</h3>
                    <div class="stat-footer">
                        <span class="badge-trend-up">
                            <i class="bi bi-arrow-up-short"></i> +3 new
                        </span>
                        <span class="text-muted">published</span>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Stat Card 4: Testimonials -->
    <div class="col-12 col-sm-6 col-xl-4 col-xxl-2">
        <a href="{{ route('admin.testimonials.index') }}" class="text-decoration-none">
            <div class="stat-card" style="transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer;">
                <div class="stat-header">
                    <span class="stat-title">Testimonials</span>
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-star-fill"></i>
                    </div>
                </div>
                <div>
                    <h3 class="stat-count">{{ number_format($stats['testimonials'] ?? 0) }}</h3>
                    <div class="stat-footer">
                        <span class="badge-trend-up">
                            <i class="bi bi-star-fill" style="font-size: 0.7rem;"></i> 4.9 Avg
                        </span>
                        <span class="text-muted">rating</span>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Stat Card 5: Unread Messages -->
    <div class="col-12 col-sm-6 col-xl-4 col-xxl-2">
        <a href="{{ route('admin.messages.index') }}" class="text-decoration-none">
            <div class="stat-card" style="transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer;">
                <div class="stat-header">
                    <span class="stat-title">Unread Messages</span>
                    <div class="stat-icon-wrapper">
                        <i class="bi bi-envelope-exclamation-fill"></i>
                    </div>
                </div>
                <div>
                    <h3 class="stat-count">{{ number_format($stats['unread_messages'] ?? 0) }}</h3>
                    <div class="stat-footer">
                        <span class="badge-trend-urgent">
                            <i class="bi bi-exclamation-circle-fill"></i> {{ $stats['unread_messages'] ?? 0 }} Urgent
                        </span>
                        <span class="text-muted">inquiries</span>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Stat Card 6: Website Visitors -->
    <div class="col-12 col-sm-6 col-xl-4 col-xxl-2">
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Website Visitors</span>
                <div class="stat-icon-wrapper">
                    <i class="bi bi-graph-up-arrow"></i>
                </div>
            </div>
            <div>
                <h3 class="stat-count">{{ number_format($stats['website_visitors'] ?? 42850) }}</h3>
                <div class="stat-footer">
                    <span class="badge-trend-up">
                        <i class="bi bi-arrow-up-short"></i> +18.4%
                    </span>
                    <span class="text-muted">vs last wk</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ==========================================================================
     MAIN GRID: SECOND SECTION & RIGHT SIDE ACTIVITIES
     ========================================================================== -->
<div class="row g-4">
    <!-- Left Column (8 cols): Recent Vehicles Table, Messages & Blogs -->
    <div class="col-12 col-xl-8">
        
        <!-- SECTION 2: RECENT VEHICLES TABLE -->
        <div class="content-card">
            <div class="content-card-header">
                <h5 class="content-card-title">
                    <i class="bi bi-car-front text-danger"></i>
                    Recent Vehicles Inventory
                </h5>
                <a href="{{ route('admin.vehicles.index') }}" class="btn btn-sm btn-luxury-outline">View All Vehicles</a>
            </div>
            <div class="table-responsive">
                <table class="luxury-table">
                    <thead>
                        <tr>
                            <th>Vehicle</th>
                            <th>Category / Brand</th>
                            <th>Price</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentVehicles as $vehicle)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="vehicle-thumb-box">
                                        <img src="{{ $vehicle->image }}" alt="{{ $vehicle->name }}">
                                    </div>
                                    <div>
                                        <a href="{{ route('admin.vehicles.edit', $vehicle->id) }}" class="car-title-link">{{ $vehicle->year }} {{ $vehicle->name }}</a>
                                        <div class="text-muted" style="font-size: 0.76rem;">VIN: {{ $vehicle->vin ?: 'WP0ZZZ99ZPS2941' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="fw-bold" style="font-size: 0.84rem;">{{ $vehicle->brand }}</div>
                                <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">{{ $vehicle->category }}</span>
                            </td>
                            <td>
                                <span class="price-tag">${{ number_format($vehicle->price) }}</span>
                            </td>
                            <td>
                                @if($vehicle->status === 'Available')
                                    <span class="badge-status badge-status-available">
                                        <i class="bi bi-check-circle-fill"></i> Available
                                    </span>
                                @elseif($vehicle->status === 'Reserved')
                                    <span class="badge-status badge-status-reserved">
                                        <i class="bi bi-clock-fill"></i> Reserved
                                    </span>
                                @else
                                    <span class="badge-status badge-status-sold">
                                        <i class="bi bi-tag-fill"></i> Sold
                                    </span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('admin.vehicles.edit', $vehicle->id) }}" class="btn btn-light border" title="Edit Vehicle"><i class="bi bi-pencil"></i></a>
                                    <a href="{{ route('inventory') }}" target="_blank" class="btn btn-light border" title="View Details on Website"><i class="bi bi-eye"></i></a>
                                    <form action="{{ route('admin.vehicles.destroy', $vehicle->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete {{ $vehicle->name }}?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-light border text-danger" title="Delete"><i class="bi bi-trash"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">No vehicles found in showroom inventory.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- TWO COLUMN ROW: LATEST BLOGS & RECENT CONTACT MESSAGES -->
        <div class="row g-4 mb-4">
            <!-- Latest Blogs -->
            <div class="col-12 col-md-6">
                <div class="content-card h-100">
                    <div class="content-card-header">
                        <h5 class="content-card-title">
                            <i class="bi bi-journal-text text-danger"></i>
                            Latest Articles
                        </h5>
                        <a href="{{ route('admin.blogs.index') }}" class="text-danger fw-bold" style="font-size: 0.8rem; color: var(--accent-red) !important;">Manage</a>
                    </div>
                    <div class="content-card-body pt-2 pb-2">
                        @forelse($latestBlogs as $blog)
                        <div class="blog-mini-item">
                            <img src="{{ $blog->image }}" alt="Blog Thumb" class="blog-mini-thumb">
                            <div class="flex-grow-1">
                                <div class="badge bg-danger-subtle text-danger mb-1" style="font-size: 0.68rem; background-color: rgba(225,6,0,0.08) !important; color: var(--accent-red) !important;">
                                    {{ $blog->category ?: 'Article' }}
                                </div>
                                <a href="{{ route('admin.blogs.index') }}" class="d-block fw-bold text-dark text-truncate" style="font-size: 0.85rem; max-width: 220px;" title="{{ $blog->title }}">
                                    {{ $blog->title }}
                                </a>
                                <div class="text-muted" style="font-size: 0.72rem;">{{ $blog->views ?: rand(500,2500) }} views</div>
                            </div>
                        </div>
                        @empty
                        <div class="text-center py-3 text-muted" style="font-size: 0.8rem;">No blog articles published.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Recent Contact Messages -->
            <div class="col-12 col-md-6">
                <div class="content-card h-100">
                    <div class="content-card-header">
                        <h5 class="content-card-title">
                            <i class="bi bi-chat-left-dots text-danger"></i>
                            Recent Inquiries
                        </h5>
                        <a href="{{ route('admin.messages.index') }}" class="badge bg-danger rounded-pill text-decoration-none" style="font-size: 0.7rem; background-color: var(--accent-red) !important;">
                            {{ $stats['unread_messages'] ?? 0 }} New
                        </a>
                    </div>
                    <div class="content-card-body pt-2 pb-2">
                        @forelse($recentMessages as $msg)
                        <div class="msg-item">
                            <img src="{{ $msg->avatar ?: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=80&q=80' }}" alt="{{ $msg->name }}" class="msg-avatar">
                            <div class="msg-content-box">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="msg-sender-name">{{ $msg->name }}</span>
                                    <span class="msg-time">{{ $msg->created_at ? $msg->created_at->diffForHumans() : 'Recent' }}</span>
                                </div>
                                <div class="msg-subject">{{ $msg->inquiry_type ?: 'General Inquiry' }}</div>
                                <div class="d-flex align-items-center gap-2">
                                    <a href="{{ route('admin.messages.index') }}" class="btn btn-xs btn-luxury-red py-0 px-2" style="font-size: 0.7rem;">Reply</a>
                                    <span class="text-muted" style="font-size: 0.72rem;">{{ $msg->phone ?: $msg->email }}</span>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="text-center py-3 text-muted" style="font-size: 0.8rem;">No customer messages.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- ==========================================================================
             THIRD SECTION: QUICK ACTIONS GRID
             ========================================================================== -->
        <div class="content-card mb-0">
            <div class="content-card-header">
                <h5 class="content-card-title">
                    <i class="bi bi-lightning-charge-fill text-danger"></i>
                    Showroom Quick Actions
                </h5>
            </div>
            <div class="content-card-body">
                <div class="row g-3">
                    <div class="col-6 col-md-3">
                        <a href="{{ route('admin.vehicles.create') }}" class="quick-action-card">
                            <i class="bi bi-plus-circle-fill action-icon"></i>
                            <span class="action-label">Add Vehicle</span>
                        </a>
                    </div>
                    <div class="col-6 col-md-3">
                        <a href="{{ route('admin.blogs.index') }}" class="quick-action-card">
                            <i class="bi bi-file-earmark-plus-fill action-icon"></i>
                            <span class="action-label">Add Blog</span>
                        </a>
                    </div>
                    <div class="col-6 col-md-3">
                        <a href="{{ route('admin.services.index') }}" class="quick-action-card">
                            <i class="bi bi-wrench-adjustable-circle-fill action-icon"></i>
                            <span class="action-label">Add Service</span>
                        </a>
                    </div>
                    <div class="col-6 col-md-3">
                        <a href="{{ route('admin.messages.index') }}" class="quick-action-card">
                            <i class="bi bi-chat-left-text-fill action-icon"></i>
                            <span class="action-label">View Messages</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Side Column (4 cols): Recent Activities Timeline -->
    <div class="col-12 col-xl-4">
        <div class="content-card h-100">
            <div class="content-card-header">
                <h5 class="content-card-title">
                    <i class="bi bi-clock-history text-danger"></i>
                    Recent Activities Timeline
                </h5>
                <i class="bi bi-three-dots-vertical text-muted"></i>
            </div>
            <div class="content-card-body">
                <div class="timeline-container">
                    @forelse($activityTimeline as $activity)
                    <div class="timeline-item {{ $activity['type'] ?? 'info' }}">
                        <div class="timeline-badge"></div>
                        <h6 class="timeline-title">{{ $activity['title'] }}</h6>
                        <div class="timeline-desc">{{ $activity['description'] }}</div>
                        <div class="timeline-time">
                            <i class="bi bi-alarm me-1"></i> {{ $activity['time'] }}
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-4 text-muted">No timeline activity logged.</div>
                    @endforelse
                </div>

                <div class="mt-4 pt-3 border-top text-center">
                    <a href="{{ route('admin.messages.index') }}" class="btn btn-sm btn-luxury-outline w-100">View Full Audit Logs & Messages &rarr;</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection