@extends('layouts.portal')

@section('title', 'Order #' . $order->order_number . ' — Order Status Management')

@section('content')
<div class="space-y-8">
    
    <!-- Top Breadcrumb & Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center space-x-2 text-xs text-slate-400 mb-1">
                <a href="{{ route('admin.orders') }}" class="hover:text-white">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 flex items-center">
                {{ $order->vehicle_make }} {{ $order->vehicle_model }}
                <span class="ml-3 px-3 py-1 rounded-lg text-xs font-extrabold uppercase {{ $order->status_badge_class }}">
                    {{ $order->status_label }}
                </span>
            </h1>
        </div>

        <div class="flex items-center space-x-3">
            <a href="https://api.whatsapp.com/send?phone={{ preg_replace('/[^0-9]/', '', $order->client->phone) }}&text={{ urlencode('Hello ' . $order->client->name . ', regarding your vehicle ' . $order->vehicle_make . ' ' . $order->vehicle_model . ' (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 flex items-center">
                <svg class="w-4 h-4 mr-1.5 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 Client
            </a>
            <a href="{{ route('orders.track', ['search' => $order->order_number]) }}" target="_blank" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-sky-400 font-bold text-xs border border-slate-700 transition">
                Public Tracker View ➔
            </a>
        </div>
    </div>

    <!-- Live Progress Bar -->
    <div class="bg-slate-900 rounded-2xl border border-slate-800 p-6 shadow-xl space-y-4">
        <div class="flex justify-between items-center text-xs">
            <span class="font-bold uppercase tracking-wider text-slate-400">Workshop Progress Completion</span>
            <span class="font-black text-sky-400 text-sm">{{ $order->progress_percent }}%</span>
        </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>
    </div>

    <!-- Main Grid: Status Changer Form (Left) & Order Details (Right) -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        <!-- Left: ORDER STATUS CHANGER FORM -->
        <div class="lg:col-span-7 space-y-6">
            <div class="p-6 sm:p-8 rounded-3xl bg-slate-900 border border-sky-500/30 shadow-2xl relative overflow-hidden">
                <div class="flex items-center justify-between pb-4 mb-6 border-b border-slate-800">
                    <h2 class="text-base font-bold text-white flex items-center">
                        <svg class="w-5 h-5 mr-2 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                        Change Workshop Status Stage
                    </h2>
                    <span class="text-xs text-sky-400 font-semibold">Immediate Live Update</span>
                </div>

                <form action="{{ route('admin.orders.update_status', $order->id) }}" method="POST" class="space-y-5 text-xs">
                    @csrf

                    <!-- Status Selector -->
                    <div>
                        <label for="status" class="block font-bold text-slate-300 mb-1.5 uppercase tracking-wider text-[11px]">Select New Stage *</label>
                        <select name="status" id="status" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white font-bold text-sm focus:outline-none focus:border-sky-500">
                            @foreach($allStatuses as $key => $st)
                                <option value="{{ $key }}" {{ $order->status === $key ? 'selected' : '' }}>
                                    Step {{ $st['step'] }}: {{ $st['label'] }} ({{ $st['label_ar'] }})
                                </option>
                            @endforeach
                        </select>
                        <p class="text-[11px] text-slate-500 mt-1">Changing status updates the client tracking portal and logs milestone history.</p>
                    </div>

                    <!-- Milestone Note for Log -->
                    <div>
                        <label for="note" class="block font-bold text-slate-300 mb-1.5 uppercase tracking-wider text-[11px]">Stage Progress Note (Logged in History)</label>
                        <input type="text" name="note" id="note" placeholder="e.g. Surface sanded, baked primer cured, ready for base coat in booth" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                    </div>

                    <!-- Pricing & Payment Row -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="final_cost" class="block font-bold text-slate-300 mb-1.5 uppercase tracking-wider text-[11px]">Final Quotation / Invoice Cost (AED)</label>
                            <input type="number" step="0.01" name="final_cost" id="final_cost" value="{{ $order->final_cost ?: $order->estimated_cost }}" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-amber-400 font-extrabold text-sm focus:outline-none focus:border-sky-500">
                        </div>
                        <div>
                            <label for="payment_status" class="block font-bold text-slate-300 mb-1.5 uppercase tracking-wider text-[11px]">Payment Status</label>
                            <select name="payment_status" id="payment_status" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white font-semibold text-xs focus:outline-none focus:border-sky-500">
                                <option value="pending" {{ $order->payment_status === 'pending' ? 'selected' : '' }}>Pending Payment</option>
                                <option value="partial" {{ $order->payment_status === 'partial' ? 'selected' : '' }}>Partially Paid (Deposit Received)</option>
                                <option value="paid" {{ $order->payment_status === 'paid' ? 'selected' : '' }}>Fully Paid</option>
                            </select>
                        </div>
                    </div>

                    <!-- Assign Technician -->
                    <div>
                        <label for="assigned_technician_id" class="block font-bold text-slate-300 mb-1.5 uppercase tracking-wider text-[11px]">Assign Master Technician / Painter</label>
                        <select name="assigned_technician_id" id="assigned_technician_id" class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white font-semibold text-xs focus:outline-none focus:border-sky-500">
                            <option value="">-- Unassigned Workshop Queue --</option>
                            @foreach($technicians as $tech)
                                <option value="{{ $tech->id }}" {{ $order->assigned_technician_id === $tech->id ? 'selected' : '' }}>
                                    {{ $tech->name }} ({{ $tech->role_title }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Internal Notes -->
                    <div>
                        <label for="internal_notes" class="block font-bold text-slate-300 mb-1.5 uppercase tracking-wider text-[11px]">Internal Workshop Team Notes</label>
                        <textarea name="internal_notes" id="internal_notes" rows="2" class="w-full px-4 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">{{ $order->internal_notes }}</textarea>
                    </div>

                    <button type="submit" class="w-full py-3.5 rounded-xl bg-gradient-to-r from-sky-600 to-blue-600 hover:from-sky-500 hover:to-blue-500 text-white font-black text-sm shadow-xl shadow-sky-600/30 transition">
                        Update Order Stage & Log Milestone ➔
                    </button>
                </form>
            </div>

            <!-- Milestone History Logs Table -->
            <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800">
                <h3 class="text-sm font-bold text-white mb-4 flex items-center">
                    <svg class="w-4 h-4 mr-2 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Audit Trail & Milestone History ({{ $order->statusLogs->count() }})
                </h3>

                <div class="space-y-3">
                    @forelse($order->statusLogs as $log)
                        <div class="p-3 rounded-xl bg-slate-950 border border-slate-800 text-xs">
                            <div class="flex items-center justify-between mb-1">
                                <span class="font-bold text-sky-400">{{ $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-300 text-[11px]">{{ $log->note }}</p>
                            @endif
                            <div class="text-[10px] text-slate-500 mt-1">Logged by: {{ $log->user ? $log->user->name : 'System / Online Form' }}</div>
                        </div>
                    @empty
                        <p class="text-slate-500 text-xs">No stage transition logs recorded yet.</p>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Right: Client & Vehicle Details Breakdown -->
        <div class="lg:col-span-5 space-y-6">
            
            <!-- Client Card -->
            <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800 space-y-4">
                <div class="flex items-center justify-between pb-3 border-b border-slate-800">
                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Client Profile</h3>
                    <a href="{{ route('admin.clients.show', $order->client_id) }}" class="text-sky-400 text-xs hover:underline font-semibold">View Client History ➔</a>
                </div>

                <div class="space-y-2 text-xs">
                    <div>
                        <span class="text-slate-500 block">Name:</span>
                        <span class="text-white font-bold text-sm">{{ $order->client->name }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Phone:</span>
                        <span class="text-slate-200 font-semibold">{{ $order->client->phone }}</span>
                    </div>
                    @if($order->client->email)
                        <div>
                            <span class="text-slate-500 block">Email:</span>
                            <span class="text-slate-200">{{ $order->client->email }}</span>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Vehicle Details Card -->
            <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800 space-y-4">
                <div class="pb-3 border-b border-slate-800">
                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Vehicle Specifications</h3>
                </div>

                <div class="grid grid-cols-2 gap-3 text-xs">
                    <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">Body Category:</span>
                        <span class="text-white font-semibold">{{ $order->vehicle_category }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Plate Number:</span>
                        <span class="text-white font-semibold">{{ $order->vehicle_plate ?: 'N/A' }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Current Colour:</span>
                        <span class="text-white">{{ $order->current_color ?: 'Original' }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Target Colour:</span>
                        <span class="text-amber-400 font-bold">{{ $order->target_color ?: 'Same Factory Shade' }}</span>
                    </div>
                </div>

                @if($order->customer_notes)
                    <div class="pt-3 border-t border-slate-800 text-xs">
                        <span class="text-slate-500 block font-semibold mb-1">Customer Damage Request / Notes:</span>
                        <p class="text-slate-300 italic bg-slate-950 p-3 rounded-xl border border-slate-800">{{ $order->customer_notes }}</p>
                    </div>
                @endif
            </div>

            <!-- Logistics Card -->
            <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800 space-y-4">
                <div class="pb-3 border-b border-slate-800">
                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Pickup & Logistics</h3>
                </div>

                <div class="text-xs space-y-2">
                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">Free Abu Dhabi Pickup:</span>
                        <span class="font-bold {{ $order->pickup_required ? 'text-emerald-400' : 'text-slate-400' }}">
                            {{ $order->pickup_required ? 'YES (Requested)' : 'NO (Customer Drop-off)' }}
                        </span>
                    </div>
                    @if($order->pickup_location)
                        <div>
                            <span class="text-slate-500 block">Pickup Location:</span>
                            <span class="text-white font-semibold">{{ $order->pickup_location }}</span>
                        </div>
                    @endif
                    @if($order->preferred_date)
                        <div class="flex justify-between items-center">
                            <span class="text-slate-500">Scheduled Date:</span>
                            <span class="text-slate-200">{{ $order->preferred_date->format('M d, Y') }} ({{ $order->preferred_time ?: 'Standard Window' }})</span>
                        </div>
                    @endif
                </div>
            </div>

        </div>

    </div>

</div>
@endsection