@extends('layouts.app')

@section('title', 'Track Your Vehicle Repair Status — Abu Dhabi Auto Care')

@section('content')
<div class="py-16 bg-slate-950 min-h-screen">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center mb-10">
            <span class="inline-block px-3.5 py-1 text-xs font-bold rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 mb-3">
                REAL-TIME WORKSHOP TRACKER
            </span>
            <h1 class="text-3xl sm:text-4xl font-black text-white tracking-tight">
                Live Vehicle Progress Tracker
            </h1>
            <p class="text-slate-400 text-sm mt-2 max-w-xl mx-auto">
                Enter your Order Number (e.g. AD-8401) or registered mobile number to see your car’s exact stage in our Mussafah M11 workshop.
            </p>
        </div>

        <!-- Search Box -->
        <div class="bg-slate-900 rounded-3xl border border-slate-800 p-6 sm:p-8 shadow-2xl mb-8">
            <form action="{{ route('orders.track') }}" method="GET" class="flex flex-col sm:flex-row gap-3">
                <div class="relative flex-grow">
                    <input type="text" name="search" value="{{ $query }}" placeholder="Enter Order # (e.g. AD-8401) or Phone (+971 55 432 1098)" required class="w-full px-5 py-3.5 rounded-2xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-sky-500 pl-11 rtl:pr-11 rtl:pl-4">
                    <svg class="w-5 h-5 text-slate-500 absolute left-4 rtl:right-4 rtl:left-auto top-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                </div>
                <button type="submit" class="px-8 py-3.5 rounded-2xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-sm transition shadow-lg shadow-sky-600/30">
                    Track Vehicle ➔
                </button>
            </form>

            <!-- Quick Demo Click Links -->
            <div class="mt-4 pt-4 border-t border-slate-800 flex flex-wrap items-center gap-2 text-xs text-slate-400">
                <span class="font-semibold text-slate-500">Quick Test Orders:</span>
                <a href="{{ route('orders.track', ['search' => 'AD-8401']) }}" class="px-2.5 py-1 rounded-lg bg-slate-950 hover:bg-slate-800 text-sky-400 border border-slate-800">Nissan Patrol (In Booth - AD-8401)</a>
                <a href="{{ route('orders.track', ['search' => 'AD-8402']) }}" class="px-2.5 py-1 rounded-lg bg-slate-950 hover:bg-slate-800 text-cyan-400 border border-slate-800">LC300 (Prep Stage - AD-8402)</a>
                <a href="{{ route('orders.track', ['search' => 'AD-8403']) }}" class="px-2.5 py-1 rounded-lg bg-slate-950 hover:bg-slate-800 text-emerald-400 border border-slate-800">Porsche 911 (Ready - AD-8403)</a>
            </div>
        </div>

        @if($order)
            <!-- Active Order Status Card -->
            <div class="bg-slate-900 rounded-3xl border border-slate-800 p-6 sm:p-10 shadow-2xl space-y-8">
                
                <!-- Card Header -->
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-800">
                    <div>
                        <div class="flex items-center space-x-3 rtl:space-x-reverse mb-1">
                            <span class="text-2xl font-black text-white">{{ $order->vehicle_make }} {{ $order->vehicle_model }}</span>
                            <span class="px-2.5 py-0.5 rounded text-xs font-semibold bg-slate-800 text-slate-300 border border-slate-700">{{ $order->vehicle_year ?? '2023' }}</span>
                        </div>
                        <div class="text-xs text-slate-400">
                            Order Number: <strong class="text-sky-400 font-mono text-sm">{{ $order->order_number }}</strong> • Client: {{ $order->client->name }}
                        </div>
                    </div>

                    <div>
                        <span class="px-4 py-2 rounded-xl text-xs font-extrabold tracking-wide uppercase {{ $order->status_badge_class }}">
                            {{ $order->status_label }}
                        </span>
                    </div>
                </div>

                <!-- Visual 8-Step Garage Progress Timeline -->
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Workshop Stage Progress</span>
                        <span class="text-xs font-black text-sky-400">{{ $order->progress_percent }}% Completed</span>
                    </div>

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

                    <!-- Steps Timeline -->
                    <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-2 text-center text-[10px]">
                        @php
                            $currentStep = $order->status_info['step'] ?? 1;
                            $stepNames = [
                                1 => 'Pending Review',
                                2 => 'Confirmed',
                                3 => 'Vehicle In',
                                4 => 'Inspection',
                                5 => 'Prep / Sand',
                                6 => 'Paint Booth',
                                7 => 'Polishing QC',
                                8 => 'Ready Delivery',
                            ];
                        @endphp

                        @foreach($stepNames as $stepIndex => $stepName)
                            <div class="p-2 rounded-xl border transition {{ $stepIndex <= $currentStep ? 'bg-sky-950/60 border-sky-500/40 text-white font-bold' : 'bg-slate-950 border-slate-800/80 text-slate-600' }}">
                                <div class="w-5 h-5 rounded-full mx-auto mb-1 flex items-center justify-center font-bold text-[9px] {{ $stepIndex < $currentStep ? 'bg-emerald-500 text-white' : ($stepIndex == $currentStep ? 'bg-sky-500 text-white animate-pulse' : 'bg-slate-800 text-slate-500') }}">
                                    @if($stepIndex < $currentStep) ✓ @else {{ $stepIndex }} @endif
                                </div>
                                <span class="truncate block">{{ $stepName }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Current Stage Highlight Box -->
                <div class="p-6 rounded-2xl bg-slate-950 border border-slate-800 space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold uppercase text-sky-400 flex items-center">
                            <span class="w-2 h-2 rounded-full bg-sky-400 mr-2 rtl:ml-2 rtl:mr-0 animate-ping"></span>
                            Current Activity: {{ $order->status_label }}
                        </span>
                        <span class="text-[11px] text-slate-500">Updated: {{ $order->updated_at->diffForHumans() }}</span>
                    </div>

                    <p class="text-slate-300 text-xs leading-relaxed">
                        {{ $order->status_info['desc'] ?? 'Vehicle is currently in service.' }}
                    </p>

                    @if($order->internal_notes)
                        <div class="p-3.5 rounded-xl bg-slate-900 border border-slate-800/80 text-xs text-slate-300">
                            <strong class="text-slate-200">Technician Note:</strong> {{ $order->internal_notes }}
                        </div>
                    @endif
                </div>

                <!-- Vehicle & Service Specifications -->
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs">
                    <div class="p-4 rounded-xl bg-slate-950 border border-slate-800">
                        <span class="text-slate-500 block mb-1">Service Type</span>
                        <span class="font-bold text-white">{{ $order->service_title }}</span>
                    </div>
                    <div class="p-4 rounded-xl bg-slate-950 border border-slate-800">
                        <span class="text-slate-500 block mb-1">Target Colour</span>
                        <span class="font-bold text-white">{{ $order->target_color ?: ($order->current_color ?: 'Factory Match') }}</span>
                    </div>
                    <div class="p-4 rounded-xl bg-slate-950 border border-slate-800">
                        <span class="text-slate-500 block mb-1">Estimated Cost</span>
                        <span class="font-bold text-amber-400">AED {{ number_format($order->final_cost ?: $order->estimated_cost) }}</span>
                    </div>
                    <div class="p-4 rounded-xl bg-slate-950 border border-slate-800">
                        <span class="text-slate-500 block mb-1">Pickup & Drop</span>
                        <span class="font-bold text-emerald-400">{{ $order->pickup_required ? 'Abu Dhabi Free Pickup' : 'Mussafah M11 Drop' }}</span>
                    </div>
                </div>

                <!-- Stage History Logs -->
                @if($order->statusLogs && $order->statusLogs->count() > 0)
                    <div class="pt-4 border-t border-slate-800">
                        <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-4">Milestone Logs & History</h3>
                        <div class="space-y-3">
                            @foreach($order->statusLogs as $log)
                                <div class="flex items-start space-x-3 rtl:space-x-reverse text-xs">
                                    <div class="w-2 h-2 rounded-full bg-sky-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-[11px] 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

                <!-- Contact Workshop Button -->
                <div class="pt-4 border-t border-slate-800 flex flex-wrap items-center justify-between gap-4">
                    <span class="text-xs text-slate-400">Questions about this job? Talk directly with our workshop desk.</span>
                    <a href="https://api.whatsapp.com/send?phone=971545143060&text={{ urlencode('Hello Abu Dhabi Auto Care, checking on status of Order #' . $order->order_number) }}" target="_blank" class="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs transition flex items-center">
                        <svg class="w-4 h-4 mr-1.5 rtl:ml-1.5 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>
                        WhatsApp Inquire
                    </a>
                </div>

            </div>
        @elseif($query)
            <div class="p-8 rounded-3xl bg-slate-900 border border-slate-800 text-center space-y-3">
                <span class="text-amber-400 font-bold text-base block">No order found matching "{{ $query }}"</span>
                <p class="text-slate-400 text-xs">Please verify your Order Number (e.g. AD-8401) or try searching with your mobile number.</p>
                <div class="pt-2">
                    <a href="{{ route('orders.create') }}" class="px-5 py-2.5 rounded-xl bg-sky-600 text-white font-bold text-xs inline-block">
                        Create New Service Booking
                    </a>
                </div>
            </div>
        @endif

    </div>
</div>
@endsection