@extends('layouts.vendor')

@section('title', 'Vendor Dashboard')

@section('content')
<div class="space-y-6">
    <!-- Welcome Banner -->
    <div class="bg-gradient-to-r from-red-600 to-black text-white rounded-lg p-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2">Welcome back, {{ auth()->user()->name }}! 👋</h1>
                <p class="text-red-100">Here's what's happening with your business today.</p>
            </div>
            <div class="text-right">
                <p class="text-sm text-red-200">Business: {{ auth()->user()->business_name }}</p>
                <p class="text-sm text-red-200">Member since: {{ auth()->user()->created_at->format('M Y') }}</p>
            </div>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Vehicles Card -->
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Vehicles</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ $stats['total_vehicles'] }}</p>
                </div>
                <div class="p-3 bg-red-100 rounded-lg">
                    <i class="fas fa-car text-red-600 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex space-x-4 text-xs">
                <span class="text-green-600">
                    <i class="fas fa-check-circle"></i> {{ $stats['approved_vehicles'] }} Approved
                </span>
                <span class="text-yellow-600">
                    <i class="fas fa-clock"></i> {{ $stats['pending_vehicles'] }} Pending
                </span>
            </div>
        </div>

        <!-- Spare Parts Card -->
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Spare Parts</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ $stats['total_spare_parts'] }}</p>
                </div>
                <div class="p-3 bg-blue-100 rounded-lg">
                    <i class="fas fa-cogs text-blue-600 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex space-x-4 text-xs">
                <span class="text-green-600">
                    <i class="fas fa-check-circle"></i> {{ $stats['approved_spare_parts'] }} Approved
                </span>
                <span class="text-yellow-600">
                    <i class="fas fa-clock"></i> {{ $stats['pending_spare_parts'] }} Pending
                </span>
            </div>
        </div>

        <!-- Featured Items Card -->
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Featured Items</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ $stats['featured_vehicles'] + $stats['featured_spare_parts'] }}</p>
                </div>
                <div class="p-3 bg-green-100 rounded-lg">
                    <i class="fas fa-star text-green-600 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 text-xs text-gray-600">
                {{ $stats['featured_vehicles'] }} vehicles • {{ $stats['featured_spare_parts'] }} parts
            </div>
        </div>

        <!-- Quick Actions Card -->
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-purple-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Quick Actions</p>
                    <p class="text-lg font-semibold text-gray-900">Manage Inventory</p>
                </div>
                <div class="p-3 bg-purple-100 rounded-lg">
                    <i class="fas fa-bolt text-purple-600 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex space-x-2">
                <a href="{{ route('vendor.vehicles.create') }}" class="flex-1 bg-red-600 text-white text-center py-2 rounded text-sm hover:bg-red-700 transition duration-300">
                    Add Vehicle
                </a>
                <a href="{{ route('vendor.spare-parts.create') }}" class="flex-1 bg-gray-600 text-white text-center py-2 rounded text-sm hover:bg-gray-700 transition duration-300">
                    Add Part
                </a>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Vehicles -->
        <div class="bg-white rounded-lg shadow-md">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-900">Recent Vehicles</h3>
                    <a href="{{ route('vendor.vehicles.index') }}" class="text-red-600 hover:text-red-700 text-sm font-medium">
                        View All
                    </a>
                </div>
            </div>
            <div class="p-6">
                @if($recentVehicles->count() > 0)
                    <div class="space-y-4">
                        @foreach($recentVehicles as $vehicle)
                        <div class="flex items-center space-x-4 p-3 hover:bg-gray-50 rounded-lg transition duration-300">
                            <img src="{{ $vehicle->images ? asset('storage/' . $vehicle->images[0]) : 'https://via.placeholder.com/50?text=No+Image' }}" 
                                 alt="{{ $vehicle->title }}" 
                                 class="w-12 h-12 object-cover rounded">
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-gray-900 truncate">{{ $vehicle->title }}</p>
                                <p class="text-sm text-gray-600">KSh {{ number_format($vehicle->price) }}</p>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs rounded-full {{ $vehicle->is_approved ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                    {{ $vehicle->is_approved ? 'Approved' : 'Pending' }}
                                </span>
                                <a href="{{ route('vendor.vehicles.edit', $vehicle->id) }}" class="text-gray-400 hover:text-red-600 transition duration-300">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <i class="fas fa-car text-gray-300 text-4xl mb-3"></i>
                        <p class="text-gray-500">No vehicles listed yet</p>
                        <a href="{{ route('vendor.vehicles.create') }}" class="text-red-600 hover:text-red-700 text-sm font-medium mt-2 inline-block">
                            Add your first vehicle
                        </a>
                    </div>
                @endif
            </div>
        </div>

        <!-- Recent Spare Parts -->
        <div class="bg-white rounded-lg shadow-md">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-900">Recent Spare Parts</h3>
                    <a href="{{ route('vendor.spare-parts.index') }}" class="text-red-600 hover:text-red-700 text-sm font-medium">
                        View All
                    </a>
                </div>
            </div>
            <div class="p-6">
                @if($recentSpareParts->count() > 0)
                    <div class="space-y-4">
                        @foreach($recentSpareParts as $part)
                        <div class="flex items-center space-x-4 p-3 hover:bg-gray-50 rounded-lg transition duration-300">
                            <img src="{{ $part->images ? asset('storage/' . $part->images[0]) : 'https://via.placeholder.com/50?text=No+Image' }}" 
                                 alt="{{ $part->name }}" 
                                 class="w-12 h-12 object-cover rounded">
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-gray-900 truncate">{{ $part->name }}</p>
                                <p class="text-sm text-gray-600">KSh {{ number_format($part->price) }} • Stock: {{ $part->quantity }}</p>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs rounded-full {{ $part->is_approved ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                    {{ $part->is_approved ? 'Approved' : 'Pending' }}
                                </span>
                                <a href="{{ route('vendor.spare-parts.edit', $part->id) }}" class="text-gray-400 hover:text-red-600 transition duration-300">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <i class="fas fa-cogs text-gray-300 text-4xl mb-3"></i>
                        <p class="text-gray-500">No spare parts listed yet</p>
                        <a href="{{ route('vendor.spare-parts.create') }}" class="text-red-600 hover:text-red-700 text-sm font-medium mt-2 inline-block">
                            Add your first part
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Performance Overview</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center p-4 border border-gray-200 rounded-lg">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-eye text-blue-600"></i>
                </div>
                <p class="text-2xl font-bold text-gray-900">1,234</p>
                <p class="text-sm text-gray-600">Total Views</p>
            </div>
            <div class="text-center p-4 border border-gray-200 rounded-lg">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-envelope text-green-600"></i>
                </div>
                <p class="text-2xl font-bold text-gray-900">56</p>
                <p class="text-sm text-gray-600">Inquiries</p>
            </div>
            <div class="text-center p-4 border border-gray-200 rounded-lg">
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-shopping-cart text-purple-600"></i>
                </div>
                <p class="text-2xl font-bold text-gray-900">12</p>
                <p class="text-sm text-gray-600">Sales</p>
            </div>
        </div>
    </div>
</div>
@endsection