2026-02-19 22:05:20 +00:00

102 lines
5.0 KiB
PHP

@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