@extends('layouts.app')

@section('title', 'Booking Received — Order #' . $order->order_number . ' — Abu Dhabi Auto Care')

@section('content')
<div class="py-16 bg-slate-950 min-h-screen">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="bg-slate-900 rounded-3xl border border-slate-800 p-8 sm:p-10 shadow-2xl text-center space-y-6">
            
            <!-- Success Icon -->
            <div class="w-16 h-16 rounded-full bg-emerald-500/15 text-emerald-400 mx-auto flex items-center justify-center border border-emerald-500/30">
                <svg class="w-8 h-8" 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>
                <span class="inline-block px-3 py-1 text-xs font-bold rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 mb-2">
                    BOOKING REQUEST RECEIVED
                </span>
                <h1 class="text-3xl font-black text-white">Thank You, {{ $order->client->name }}!</h1>
                <p class="text-slate-400 text-sm mt-1">Your service order has been logged into our workshop system.</p>
            </div>

            <!-- Order Number Badge -->
            <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 inline-block px-8">
                <span class="text-xs text-slate-500 uppercase tracking-wider block font-semibold">Your Tracking / Order ID</span>
                <span class="text-2xl sm:text-3xl font-extrabold text-sky-400 tracking-wider">{{ $order->order_number }}</span>
            </div>

            <!-- WhatsApp Direct Dispatch Button -->
            @if(session('whatsapp_url'))
                <div class="p-6 rounded-2xl bg-emerald-950/40 border border-emerald-500/30 text-center space-y-3">
                    <p class="text-xs text-emerald-300 font-semibold">
                        Next Step: Send your photos or videos directly to our workshop manager on WhatsApp to finalize your quotation and pickup time!
                    </p>
                    <a href="{{ session('whatsapp_url') }}" target="_blank" class="inline-flex items-center justify-center px-8 py-3.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm shadow-xl shadow-emerald-600/30 transition">
                        <svg class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0 fill-current" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
                        Open WhatsApp to Confirm & Send Photos
                    </a>
                </div>
            @endif

            <!-- Summary Details -->
            <div class="rounded-2xl bg-slate-950 border border-slate-800 p-6 text-left text-xs space-y-3">
                <h3 class="font-bold text-white text-sm pb-2 border-b border-slate-800">Booking Summary</h3>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <span class="text-slate-500 block">Vehicle:</span>
                        <span class="text-white font-semibold">{{ $order->vehicle_make }} {{ $order->vehicle_model }} ({{ $order->vehicle_year ?? 'N/A' }})</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Service:</span>
                        <span class="text-white font-semibold">{{ $order->service_title }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Pickup Option:</span>
                        <span class="text-sky-400 font-semibold">{{ $order->pickup_required ? 'Free Abu Dhabi Pickup Requested' : 'Customer Drop-off at Mussafah M11' }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Estimated Baseline:</span>
                        <span class="text-amber-400 font-bold">AED {{ number_format($order->estimated_cost) }}</span>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex flex-wrap justify-center gap-4 pt-4">
                <a href="{{ route('orders.track', ['search' => $order->order_number]) }}" class="px-6 py-3 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs transition">
                    View Live Vehicle Tracker ➔
                </a>
                <a href="{{ route('home') }}" class="px-6 py-3 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold text-xs transition">
                    Return to Homepage
                </a>
            </div>

        </div>

    </div>
</div>
@endsection