@extends('layouts.app')

@section('title', $car->brand . ' ' . $car->model)

@section('content')
<div class="mb-8">
    <a href="{{ route('cars.index') }}" class="text-blue-600 hover:text-blue-800 flex items-center gap-2 mb-4">
        <i class="fas fa-arrow-left"></i> Back to Fleet
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Car Details -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
            <div class="flex items-center gap-4 mb-6">
                <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
                    <i class="fas fa-car text-white text-2xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold text-gray-800">{{ $car->brand }} {{ $car->model }}</h2>
                    <p class="text-gray-500">{{ $car->year }} • {{ $car->color }} • {{ $car->license_plate }}</p>
                </div>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-gray-50 rounded-lg p-4 text-center">
                    <p class="text-sm text-gray-500">Daily Rate</p>
                    <p class="text-xl font-bold text-gray-800"> BHD {{ number_format($car->daily_rate, 0) }}</p>
                </div>
                <div class="bg-gray-50 rounded-lg p-4 text-center">
                    <p class="text-sm text-gray-500">Mileage</p>
                    <p class="text-xl font-bold text-gray-800">{{ number_format($car->mileage) }} km</p>
                </div>
                <div class="bg-gray-50 rounded-lg p-4 text-center">
                    <p class="text-sm text-gray-500">Status</p>
                    <span class="px-3 py-1 rounded-full text-sm font-medium
                        {{ $car->status == 'available' ? 'bg-green-100 text-green-700' : 
                          ($car->status == 'rented' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
                        {{ ucfirst($car->status) }}
                    </span>
                </div>
            </div>
            
            @if($car->notes)
            <div class="border-t pt-4">
                <p class="text-sm text-gray-500 mb-1">Notes</p>
                <p class="text-gray-700">{{ $car->notes }}</p>
            </div>
            @endif
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div>
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
            <h3 class="font-semibold text-gray-800 mb-4">Quick Actions</h3>
            <a href="{{ route('rentals.create') }}?car_id={{ $car->id }}" class="block w-full bg-amber-500 text-white text-center py-3 rounded-xl mb-3 hover:bg-amber-600">New Rental</a>
            <a href="{{ route('services.create') }}?car_id={{ $car->id }}" class="block w-full bg-purple-500 text-white text-center py-3 rounded-xl mb-3 hover:bg-purple-600">Schedule Service</a>
            <a href="{{ route('cars.edit', $car) }}" class="block w-full bg-gray-100 text-gray-700 text-center py-3 rounded-xl hover:bg-gray-200">Edit Car</a>
        </div>
    </div>
</div>

<!-- Rentals & Services -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
        <h3 class="font-semibold text-gray-800 mb-4">Recent Rentals</h3>
        @forelse($car->rentals->take(5) as $rental)
        <div class="flex justify-between items-center py-3 border-b last:border-0">
            <div>
                <p class="font-medium text-gray-800">{{ $rental->customer->name }}</p>
                <p class="text-sm text-gray-500">{{ $rental->start_date->format('M d') }} - {{ $rental->end_date->format('M d, Y') }}</p>
            </div>
            <span class="px-2 py-1 rounded text-xs font-medium
                {{ $rental->status == 'active' ? 'bg-green-100 text-green-700' : 
                  ($rental->status == 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-gray-100 text-gray-700') }}">
                {{ $rental->status }}
            </span>
        </div>
        @empty
        <p class="text-gray-500 text-center py-4">No rentals yet</p>
        @endforelse
    </div>
    
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
        <h3 class="font-semibold text-gray-800 mb-4">Service History</h3>
        @forelse($car->services->take(5) as $service)
        <div class="flex justify-between items-center py-3 border-b last:border-0">
            <div>
                <p class="font-medium text-gray-800 capitalize">{{ str_replace('_', ' ', $service->type) }}</p>
                <p class="text-sm text-gray-500">{{ $service->service_date->format('M d, Y') }}</p>
            </div>
            <span class="text-gray-800 font-medium"> BHD {{ number_format($service->cost, 0) }}</span>
        </div>
        @empty
        <p class="text-gray-500 text-center py-4">No services yet</p>
        @endforelse
    </div>
</div>
@endsection