@extends('layouts.app')

@section('head')
    
@endsection
@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Back Button -->
        <div class="mb-4">
            <a href="{{ route('bookings.index') }}" class="text-blue-600 hover:text-blue-800 flex items-center">
                <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                Kembali ke booking
            </a>
        </div>

        <!-- Booking Details Card -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- Header with Status -->
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
                <div class="flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-white">Booking #{{ $booking->id }}</h1>
                        <p class="text-blue-100">Buat {{ $booking->created_at->format('d M Y, H:i') }}</p>
                    </div>
                    <span class="px-4 py-2 inline-flex text-sm leading-5 font-semibold rounded-full 
                        bg-{{ $booking->status_color }}-100 text-{{ $booking->status_color }}-800">
                        {{ ucfirst(str_replace('_', ' ', $booking->status)) }}
                    </span>
                </div>
            </div>

            <!-- Service Details -->
            <div class="p-6 border-b">
                <h2 class="text-lg font-semibold mb-4 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                    </svg>
                    Informasi Service 
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-500">Tipe Service</p>
                        <p class="font-medium">{{ $booking->service_type }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Tanggal & Waktu Pertemuan</p>
                        <p class="font-medium">{{ $booking->booking_date->format('D, d M Y') }} at {{ date('h:i A', strtotime($booking->booking_time)) }}</p>
                    </div>
                    @if($booking->description)
                        <div class="md:col-span-2">
                            <p class="text-sm text-gray-500">Deskripsi</p>
                            <p class="font-medium">{{ $booking->description }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Vehicle Details -->
            <div class="p-6 border-b">
                <h2 class="text-lg font-semibold mb-4 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                    Informasi kendaraan
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-500">Merek</p>
                        <p class="font-medium">{{ $booking->vehicle_brand }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Model</p>
                        <p class="font-medium">{{ $booking->vehicle_model }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Tahun</p>
                        <p class="font-medium">{{ $booking->vehicle_year }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Plat Nomer</p>
                        <p class="font-medium">{{ $booking->vehicle_plate }}</p>
                    </div>
                </div>
            </div>

            <!-- Payment Details (if available) -->
            @if($booking->total_price)
                <div class="p-6 border-b">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                       Information kendaraan
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-gray-500">Total keseluruhan</p>
                            <p class="font-medium text-lg">Rp {{ number_format($booking->total_price, 0, ',', '.') }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Status Pembayaran</p>
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                bg-{{ $booking->payment_color }}-100 text-{{ $booking->payment_color }}-800">
                                {{ ucfirst($booking->payment_status) }}
                            </span>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Notes (if available) -->
            @if($booking->notes)
                <div class="p-6 border-b">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        Catatan
                    </h2>
                    <p class="text-gray-700">{{ $booking->notes }}</p>
                </div>
            @endif

            <!-- Actions -->
            <div class="p-6 bg-gray-50">
                <div class="flex justify-between items-center">
                    <div class="text-sm text-gray-500">
                        Butuh Bantuan? Hubungi Kami <span class="font-medium">088977357618-BENGKEL</span>
                    </div>
                    @if(in_array($booking->status, ['pending', 'confirmed']))
                        <form action="{{ route('bookings.cancel', $booking) }}" 
                              method="POST" 
                              onsubmit="return confirm('Are you sure you want to cancel this booking?');">
                            @csrf
                            @method('PATCH')
                            <button type="submit" 
                                    class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
                                Cancel Booking
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>

        <!-- Status Timeline -->
        <div class="mt-8 bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold mb-4">Waktu Pemesanan</h2>
            <div class="space-y-4">
                <!-- Created -->
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="font-medium">Buat Booking</p>
                        <p class="text-sm text-gray-500">{{ $booking->created_at->format('d M Y, H:i') }}</p>
                    </div>
                </div>

                <!-- Current Status -->
                @if($booking->status != 'pending')
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-{{ $booking->status_color }}-500 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="ml-4">
                            <p class="font-medium">{{ ucfirst(str_replace('_', ' ', $booking->status)) }}</p>
                            <p class="text-sm text-gray-500">{{ $booking->updated_at->format('d M Y, H:i') }}</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection