@extends('layouts.admin')

@section('title', $vehicle->title)

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-900">{{ $vehicle->title }}</h1>
        <div class="flex space-x-3">
            <a href="{{ route('admin.vehicles.index') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition duration-300">
                <i class="fas fa-arrow-left mr-2"></i>Back to Vehicles
            </a>
            <a href="{{ route('admin.vehicles.edit', $vehicle->id) }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
                <i class="fas fa-edit mr-2"></i>Edit
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Images -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Images</h3>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                    @if($vehicle->images && count($vehicle->images) > 0)
                        @foreach($vehicle->images as $image)
                            <img src="{{ asset('storage/' . $image) }}" alt="{{ $vehicle->title }}" 
                                 class="w-full h-48 object-cover rounded-lg">
                        @endforeach
                    @else
                        <div class="col-span-3 text-center py-12">
                            <i class="fas fa-car text-gray-400 text-6xl mb-4"></i>
                            <p class="text-gray-500">No images available</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Description -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Description</h3>
                <p class="text-gray-700 whitespace-pre-line">{{ $vehicle->description }}</p>
            </div>

            <!-- Vehicle Details -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Vehicle Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Make & Model:</span>
                            <span class="font-medium">{{ $vehicle->make }} {{ $vehicle->model }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Year:</span>
                            <span class="font-medium">{{ $vehicle->year }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Condition:</span>
                            <span class="font-medium capitalize">{{ $vehicle->condition }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Mileage:</span>
                            <span class="font-medium">{{ $vehicle->mileage ?? 'N/A' }}</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Transmission:</span>
                            <span class="font-medium capitalize">{{ $vehicle->transmission ?? 'N/A' }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Fuel Type:</span>
                            <span class="font-medium capitalize">{{ $vehicle->fuel_type ?? 'N/A' }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Engine Size:</span>
                            <span class="font-medium">{{ $vehicle->engine_size ?? 'N/A' }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Color:</span>
                            <span class="font-medium capitalize">{{ $vehicle->color ?? 'N/A' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Status Card -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Status</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Approval:</span>
                        <span class="px-3 py-1 rounded-full text-sm font-medium {{ $vehicle->is_approved ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                            {{ $vehicle->is_approved ? 'Approved' : 'Pending' }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Availability:</span>
                        <span class="px-3 py-1 rounded-full text-sm font-medium {{ $vehicle->is_available ? 'bg-blue-100 text-blue-800' : 'bg-red-100 text-red-800' }}">
                            {{ $vehicle->is_available ? 'Available' : 'Sold' }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Featured:</span>
                        <span class="px-3 py-1 rounded-full text-sm font-medium {{ $vehicle->is_featured ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800' }}">
                            {{ $vehicle->is_featured ? 'Featured' : 'Regular' }}
                        </span>
                    </div>
                </div>

                <div class="mt-4 space-y-2">
                    @if(!$vehicle->is_approved)
                    <form action="{{ route('admin.vehicles.approve', $vehicle->id) }}" method="POST" class="inline w-full">
                        @csrf
                        <button type="submit" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition duration-300">
                            <i class="fas fa-check mr-2"></i>Approve Vehicle
                        </button>
                    </form>
                    @endif

                    <form action="{{ route('admin.vehicles.toggle-featured', $vehicle->id) }}" method="POST" class="inline w-full">
                        @csrf
                        <button type="submit" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition duration-300">
                            <i class="fas fa-star mr-2"></i>{{ $vehicle->is_featured ? 'Remove Featured' : 'Mark as Featured' }}
                        </button>
                    </form>
                </div>
            </div>

            <!-- Pricing Card -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Pricing</h3>
                <div class="text-center">
                    <p class="text-3xl font-bold text-red-600">KSh {{ number_format($vehicle->price) }}</p>
                    <p class="text-gray-600 mt-2">Asking Price</p>
                </div>
            </div>

            <!-- Vendor Information -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Vendor Information</h3>
                <div class="space-y-2">
                    <p class="text-gray-700"><strong>Name:</strong> {{ $vehicle->vendor->name }}</p>
                    <p class="text-gray-700"><strong>Email:</strong> {{ $vehicle->vendor->email }}</p>
                    <p class="text-gray-700"><strong>Location:</strong> {{ $vehicle->location }}</p>
                </div>
            </div>

            <!-- Category Information -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Category</h3>
                <p class="text-gray-700">{{ $vehicle->category->name }}</p>
            </div>
        </div>
    </div>
</div>
@endsection