@extends('layouts.portal')

@section('title', 'Manage Orders & Statuses — Abu Dhabi Auto Care')

@section('content')
<div class="space-y-6">
    
    <!-- Header -->
    <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">Work Orders & Booking Requests</h1>
            <p class="text-xs text-slate-400 mt-1">Track vehicle stages from intake through spray booth to final handover.</p>
        </div>
        <div>
            <a href="{{ route('admin.orders.create') }}" class="px-4 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>
                Create New Work Order
            </a>
        </div>
    </div>

    <!-- Filter Tabs & Search Bar -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-slate-900 p-4 rounded-2xl border border-slate-800">
        <!-- Tabs -->
        <div class="flex flex-wrap items-center gap-1.5 text-xs font-semibold">
            <a href="{{ route('admin.orders', ['status' => 'all', 'search' => $search]) }}" class="px-3 py-1.5 rounded-lg transition {{ $statusFilter === 'all' ? 'bg-sky-600 text-white font-bold' : 'text-slate-400 hover:text-white hover:bg-slate-800' }}">All Orders</a>
            <a href="{{ route('admin.orders', ['status' => 'pending_review', 'search' => $search]) }}" class="px-3 py-1.5 rounded-lg transition {{ $statusFilter === 'pending_review' ? 'bg-amber-600 text-white font-bold' : 'text-slate-400 hover:text-white hover:bg-slate-800' }}">Pending Review</a>
            <a href="{{ route('admin.orders', ['status' => 'in_progress', 'search' => $search]) }}" class="px-3 py-1.5 rounded-lg transition {{ $statusFilter === 'in_progress' ? 'bg-blue-600 text-white font-bold' : 'text-slate-400 hover:text-white hover:bg-slate-800' }}">In Workshop</a>
            <a href="{{ route('admin.orders', ['status' => 'ready_for_delivery', 'search' => $search]) }}" class="px-3 py-1.5 rounded-lg transition {{ $statusFilter === 'ready_for_delivery' ? 'bg-emerald-600 text-white font-bold' : 'text-slate-400 hover:text-white hover:bg-slate-800' }}">Ready for Delivery</a>
            <a href="{{ route('admin.orders', ['status' => 'completed', 'search' => $search]) }}" class="px-3 py-1.5 rounded-lg transition {{ $statusFilter === 'completed' ? 'bg-purple-600 text-white font-bold' : 'text-slate-400 hover:text-white hover:bg-slate-800' }}">Completed</a>
        </div>

        <!-- Search -->
        <form action="{{ route('admin.orders') }}" method="GET" class="flex items-center gap-2">
            <input type="hidden" name="status" value="{{ $statusFilter }}">
            <input type="text" name="search" value="{{ $search }}" placeholder="Search by Order #, Client, Plate..." class="px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500 w-56">
            <button type="submit" class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold transition border border-slate-700">Filter</button>
            @if($search)
                <a href="{{ route('admin.orders', ['status' => $statusFilter]) }}" class="text-xs text-rose-400 hover:underline">Clear</a>
            @endif
        </form>
    </div>

    <!-- Orders Table -->
    <div class="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <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.5">Order #</th>
                        <th class="px-5 py-3.5">Client & Phone</th>
                        <th class="px-5 py-3.5">Vehicle</th>
                        <th class="px-5 py-3.5">Service Requested</th>
                        <th class="px-5 py-3.5">Current Stage Status</th>
                        <th class="px-5 py-3.5">Price & Payment</th>
                        <th class="px-5 py-3.5">Pickup Required?</th>
                        <th class="px-5 py-3.5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/80 text-slate-300">
                    @forelse($orders as $order)
                        <tr class="hover:bg-slate-800/40 transition">
                            <td class="px-5 py-4 font-mono font-bold text-sky-400">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="hover:underline">
                                    {{ $order->order_number }}
                                </a>
                            </td>
                            <td class="px-5 py-4">
                                <div class="font-bold text-white">{{ $order->client->name }}</div>
                                <div class="text-[11px] text-slate-400 flex items-center space-x-1 mt-0.5">
                                    <span>{{ $order->client->phone }}</span>
                                    <a href="https://api.whatsapp.com/send?phone={{ preg_replace('/[^0-9]/', '', $order->client->phone) }}" target="_blank" class="text-emerald-400 hover:text-emerald-300 ml-1">
                                        <svg class="w-3.5 h-3.5 inline 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>
                                    </a>
                                </div>
                            </td>
                            <td class="px-5 py-4">
                                <div class="font-semibold text-white">{{ $order->vehicle_make }} {{ $order->vehicle_model }}</div>
                                <div class="text-[11px] text-slate-400">{{ $order->vehicle_category }} • Plate: {{ $order->vehicle_plate ?: 'N/A' }}</div>
                            </td>
                            <td class="px-5 py-4">
                                <span class="font-medium text-slate-300">{{ $order->service_title }}</span>
                            </td>
                            <td class="px-5 py-4">
                                <span class="px-2.5 py-1 rounded text-[11px] font-bold uppercase {{ $order->status_badge_class }}">
                                    {{ $order->status_label }}
                                </span>
                            </td>
                            <td class="px-5 py-4">
                                <div class="font-extrabold text-amber-400">AED {{ number_format($order->final_cost ?: $order->estimated_cost) }}</div>
                                <div class="text-[10px] text-slate-500 uppercase">{{ $order->payment_status }}</div>
                            </td>
                            <td class="px-5 py-4">
                                @if($order->pickup_required)
                                    <span class="inline-flex items-center text-emerald-400 font-semibold">
                                        <svg class="w-3.5 h-3.5 mr-1" 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>
                                        Free Pickup
                                    </span>
                                @else
                                    <span class="text-slate-500">Mussafah Drop</span>
                                @endif
                            </td>
                            <td class="px-5 py-4 text-right">
                                <div class="flex items-center justify-end space-x-2">
                                    <a href="{{ route('admin.orders.show', $order->id) }}" class="px-3 py-1.5 rounded-lg bg-sky-600 hover:bg-sky-500 text-white text-xs font-bold transition">
                                        Status & Details
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="p-8 text-center text-slate-500">
                                No orders found matching criteria.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($orders->hasPages())
            <div class="p-4 border-t border-slate-800">
                {{ $orders->links() }}
            </div>
        @endif
    </div>

</div>
@endsection