@extends('layouts.portal')

@section('title', 'My Vehicle Services — Abu Dhabi Auto Care Client Portal')

@section('content')
<div class="space-y-8">
    
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-white tracking-tight">Welcome, {{ $user->name }}</h1>
            <p class="text-xs text-slate-400 mt-1">Live tracking of your vehicles currently inside Abu Dhabi Auto Care.</p>
        </div>
        <a href="{{ route('orders.create') }}" class="px-5 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs shadow-lg shadow-sky-600/30 transition flex items-center">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            Book Another Vehicle
        </a>
    </div>

    <!-- Active Orders Section -->
    <div class="space-y-4">
        <h2 class="text-sm font-bold uppercase tracking-wider text-sky-400 flex items-center">
            <span class="w-2 h-2 rounded-full bg-emerald-400 mr-2 animate-ping"></span>
            Active Vehicles in Workshop ({{ $activeOrders->count() }})
        </h2>

        @forelse($activeOrders as $order)
            <div class="p-6 sm:p-8 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-6">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-slate-800">
                    <div>
                        <div class="flex items-center space-x-2">
                            <span class="text-white font-extrabold text-lg">{{ $order->vehicle_make }} {{ $order->vehicle_model }}</span>
                            <span class="px-2 py-0.5 rounded text-[11px] font-semibold bg-slate-800 text-slate-300">{{ $order->vehicle_year ?: '2023' }}</span>
                        </div>
                        <div class="text-xs text-slate-400 mt-1">
                            Order ID: <strong class="text-sky-400 font-mono">{{ $order->order_number }}</strong> • {{ $order->service_title }}
                        </div>
                    </div>
                    <div>
                        <span class="px-3.5 py-1.5 rounded-xl text-xs font-extrabold uppercase {{ $order->status_badge_class }}">
                            {{ $order->status_label }}
                        </span>
                    </div>
                </div>

                <!-- Progress Bar -->
                <div>
                    <div class="flex justify-between items-center text-xs mb-2">
                        <span class="font-bold text-slate-400">Current Progress</span>
                        <span class="font-bold text-sky-400">{{ $order->progress_percent }}% Completed</span>
                    </div>
                    <div class="w-full h-3 rounded-full bg-slate-950 border border-slate-800 overflow-hidden mb-4">
                        <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">
                        <strong>Workshop Status:</strong> {{ $order->status_info['desc'] ?? 'In service.' }}
                    </p>
                </div>

                <!-- Details & Actions -->
                <div class="pt-4 border-t border-slate-800 flex flex-wrap items-center justify-between gap-4 text-xs">
                    <div class="flex items-center space-x-4">
                        <div>
                            <span class="text-slate-500 block">Quotation:</span>
                            <span class="font-bold text-amber-400">AED {{ number_format($order->final_cost ?: $order->estimated_cost) }}</span>
                        </div>
                        <div>
                            <span class="text-slate-500 block">Pickup:</span>
                            <span class="font-bold text-emerald-400">{{ $order->pickup_required ? 'Abu Dhabi Free Pickup' : 'Mussafah Drop' }}</span>
                        </div>
                    </div>

                    <div class="flex items-center space-x-3">
                        <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-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs transition">
                            WhatsApp Workshop
                        </a>
                        <a href="{{ route('client.orders.show', $order->id) }}" class="px-4 py-2 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs transition">
                            View Detailed Timeline ➔
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="p-8 rounded-3xl bg-slate-900 border border-slate-800 text-center space-y-3">
                <span class="text-slate-400 text-xs block">No active repair orders found in your client portal.</span>
                <a href="{{ route('orders.create') }}" class="px-5 py-2.5 rounded-xl bg-sky-600 text-white font-bold text-xs inline-block">
                    Book A Car Service Now
                </a>
            </div>
        @endforelse
    </div>

    <!-- Completed History -->
    @if($pastOrders->count() > 0)
        <div class="pt-6 space-y-4">
            <h2 class="text-sm font-bold uppercase tracking-wider text-slate-400">Past Completed Vehicle Services ({{ $pastOrders->count() }})</h2>
            
            <div class="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden shadow-xl">
                <table class="w-full text-xs text-left">
                    <thead class="bg-slate-950/70 border-b border-slate-800 text-slate-400 uppercase font-bold">
                        <tr>
                            <th class="px-5 py-3">Order #</th>
                            <th class="px-5 py-3">Vehicle</th>
                            <th class="px-5 py-3">Service</th>
                            <th class="px-5 py-3">Amount Paid</th>
                            <th class="px-5 py-3">Completion Date</th>
                            <th class="px-5 py-3 text-right">Details</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/80 text-slate-300">
                        @foreach($pastOrders as $past)
                            <tr class="hover:bg-slate-800/40 transition">
                                <td class="px-5 py-3.5 font-mono font-bold text-sky-400">{{ $past->order_number }}</td>
                                <td class="px-5 py-3.5 font-bold text-white">{{ $past->vehicle_make }} {{ $past->vehicle_model }}</td>
                                <td class="px-5 py-3.5">{{ $past->service_title }}</td>
                                <td class="px-5 py-3.5 font-bold text-amber-400">AED {{ number_format($past->final_cost ?: $past->estimated_cost) }}</td>
                                <td class="px-5 py-3.5 text-slate-400">{{ $past->updated_at->format('M d, Y') }}</td>
                                <td class="px-5 py-3.5 text-right">
                                    <a href="{{ route('client.orders.show', $past->id) }}" class="text-sky-400 hover:underline font-bold">View</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

</div>
@endsection