@extends('layouts.app')

@section('title', 'Service Details')

@section('content')
<div class="mb-6">
    <a href="{{ route('services.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 Services
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-gray-800">Service #{{ $service->id }}</h2>
                <span class="px-3 py-1 rounded-full text-sm font-medium
                    {{ $service->status == 'completed' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700' }}">
                    {{ ucfirst($service->status) }}
                </span>
            </div>
            
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-500 text-sm">Car</p>
                    <p class="font-semibold text-gray-800">{{ $service->car->brand }} {{ $service->car->model }}</p>
                    <p class="text-gray-500 text-sm">{{ $service->car->license_plate }}</p>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-500 text-sm">Service Type</p>
                    <p class="font-semibold text-gray-800 capitalize">{{ str_replace('_', ' ', $service->type) }}</p>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-500 text-sm">Service Date</p>
                    <p class="font-semibold text-gray-800">{{ $service->service_date->format('M d, Y') }}</p>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-500 text-sm">Cost</p>
                    <p class="font-semibold text-gray-800"> BHD {{ number_format($service->cost, 0) }}</p>
                </div>
                @if($service->next_service_date)
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-500 text-sm">Next Service</p>
                    <p class="font-semibold text-gray-800">{{ $service->next_service_date->format('M d, Y') }}</p>
                </div>
                @endif
                @if($service->mileage_at_service)
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-500 text-sm">Mileage</p>
                    <p class="font-semibold text-gray-800">{{ number_format($service->mileage_at_service) }} km</p>
                </div>
                @endif
            </div>
            
            <div class="border-t pt-4">
                <p class="text-gray-500 text-sm mb-1">Description</p>
                <p class="text-gray-700">{{ $service->description }}</p>
            </div>
            
            <div class="flex gap-3 mt-6">
                <a href="{{ route('services.edit', $service) }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm">Edit Service</a>
                <form action="{{ route('services.destroy', $service) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 text-sm" onclick="return confirm('Delete this service?')">Delete Service</button>
                </form>
            </div>
        </div>
    </div>
    
    <div>
        <a href="{{ route('cars.show', $service->car) }}" class="block bg-white rounded-xl shadow-sm border border-gray-200 p-4 hover:border-blue-400 transition">
            <h3 class="font-semibold text-gray-800 mb-2">Car Details</h3>
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
                    <i class="fas fa-car text-blue-600"></i>
                </div>
                <div>
                    <p class="font-medium text-gray-800">{{ $service->car->brand }} {{ $service->car->model }}</p>
                    <p class="text-sm text-gray-500">{{ $service->car->license_plate }}</p>
                </div>
            </div>
        </a>
    </div>
</div>
@endsection