@extends('layouts.portal')

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

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    
    <div class="flex items-center justify-between">
        <div>
            <div class="flex items-center space-x-2 text-xs text-slate-400 mb-1">
                <a href="{{ route('client.dashboard') }}" class="hover:text-white">My Orders</a>
                <span>/</span>
                <span class="text-sky-400 font-bold">{{ $order->order_number }}</span>
            </div>
            <h1 class="text-2xl font-black text-white tracking-tight">{{ $order->vehicle_make }} {{ $order->vehicle_model }}</h1>
        </div>
        <a href="{{ route('client.dashboard') }}" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold border border-slate-700 transition">
            Back to Dashboard
        </a>
    </div>

    <!-- Live Stage Banner -->
    <div class="p-6 sm:p-8 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-5">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">Current Workshop Status</span>
                <span class="px-4 py-2 rounded-xl text-xs font-black uppercase tracking-wide inline-block {{ $order->status_badge_class }}">
                    {{ $order->status_label }}
                </span>
            </div>
            <div class="text-right">
                <span class="text-xs text-slate-400 block">Progress</span>
                <span class="text-xl font-black text-sky-400">{{ $order->progress_percent }}%</span>
            </div>
        </div>

        <div class="w-full h-3 rounded-full bg-slate-950 border border-slate-800 overflow-hidden">
            <div class="h-full bg-gradient-to-r from-sky-500 via-blue-500 to-emerald-400 rounded-full transition-all duration-500" style="width: {{ $order->progress_percent }}%"></div>
        </div>

        <p class="text-xs text-slate-300 leading-relaxed bg-slate-950 p-4 rounded-2xl border border-slate-800">
            {{ $order->status_info['desc'] ?? 'Vehicle is currently in service.' }}
        </p>
    </div>

    <!-- Vehicle Specs & Cost -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800 space-y-3 text-xs">
            <h3 class="font-bold text-white uppercase tracking-wider text-[11px] pb-2 border-b border-slate-800">Vehicle Specifications</h3>
            <div class="grid grid-cols-2 gap-2">
                <div>
                    <span class="text-slate-500 block">Make & Model:</span>
                    <span class="text-white font-semibold">{{ $order->vehicle_make }} {{ $order->vehicle_model }}</span>
                </div>
                <div>
                    <span class="text-slate-500 block">Model Year:</span>
                    <span class="text-white font-semibold">{{ $order->vehicle_year ?: 'N/A' }}</span>
                </div>
                <div>
                    <span class="text-slate-500 block">Plate:</span>
                    <span class="text-white font-semibold">{{ $order->vehicle_plate ?: 'N/A' }}</span>
                </div>
                <div>
                    <span class="text-slate-500 block">Category:</span>
                    <span class="text-white font-semibold">{{ $order->vehicle_category }}</span>
                </div>
                <div>
                    <span class="text-slate-500 block">Target Shade:</span>
                    <span class="text-amber-400 font-bold">{{ $order->target_color ?: 'Same Shade Refresh' }}</span>
                </div>
            </div>
        </div>

        <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800 space-y-3 text-xs">
            <h3 class="font-bold text-white uppercase tracking-wider text-[11px] pb-2 border-b border-slate-800">Quotation & Pickup</h3>
            <div class="space-y-2">
                <div class="flex justify-between items-center">
                    <span class="text-slate-500">Service:</span>
                    <span class="text-white font-semibold">{{ $order->service_title }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-slate-500">Price Amount:</span>
                    <span class="text-amber-400 font-black text-sm">AED {{ number_format($order->final_cost ?: $order->estimated_cost) }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-slate-500">Payment Status:</span>
                    <span class="text-slate-300 font-semibold uppercase">{{ $order->payment_status }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-slate-500">Free Abu Dhabi Pickup:</span>
                    <span class="text-emerald-400 font-semibold">{{ $order->pickup_required ? 'Yes' : 'No (Mussafah Drop)' }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Timeline History -->
    @if($order->statusLogs && $order->statusLogs->count() > 0)
        <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800">
            <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-4">Milestone Progress History</h3>
            <div class="space-y-3 text-xs">
                @foreach($order->statusLogs as $log)
                    <div class="flex items-start space-x-3 rtl:space-x-reverse">
                        <div class="w-2 h-2 rounded-full bg-emerald-400 mt-1.5 shrink-0"></div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between">
                                <span class="font-bold text-white">{{ $log->to_status_label }}</span>
                                <span class="text-[10px] text-slate-500">{{ $log->created_at->format('M d, Y • h:i A') }}</span>
                            </div>
                            @if($log->note)
                                <p class="text-slate-400 text-[11px] mt-0.5">{{ $log->note }}</p>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <div class="pt-4 text-center">
        <a href="https://api.whatsapp.com/send?phone=971545143060&text={{ urlencode('Hello Abu Dhabi Auto Care, checking on Order #' . $order->order_number) }}" target="_blank" class="px-6 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs inline-flex items-center">
            Chat with Workshop Manager on WhatsApp
        </a>
    </div>

</div>
@endsection