@extends('layouts.admin')

@section('title', 'Order #' . $order->order_number . ' Management – Admin CRM')
@section('page_title', 'Order #' . $order->order_number . ' Logistics')

@section('content')
<div class="space-y-6 max-w-7xl">
    
    <!-- Top Back Navigation -->
    <div class="flex items-center justify-between">
        <a href="{{ route('admin.orders.index') }}" class="text-xs font-bold text-slate-400 hover:text-white flex items-center gap-1.5">
            <i class="fa-solid fa-arrow-left"></i>
            <span>Back to Orders</span>
        </a>
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-400">Current Milestone:</span>
            <span class="px-3 py-1 rounded-full text-xs font-bold uppercase bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
                {{ $trackingSteps[$order->status]['title'] ?? $order->status }}
            </span>
        </div>
    </div>

    <!-- Order Summary Banner -->
    <div class="bg-gradient-to-br from-slate-900 via-slate-900 to-[#1b1424] border border-white/10 rounded-2xl p-6 shadow-xl">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
            <div class="flex items-center gap-4">
                <div class="w-16 h-14 rounded-xl overflow-hidden bg-slate-800 shrink-0 border border-white/10">
                    <img src="{{ $order->car_image }}" alt="Car" class="w-full h-full object-cover">
                </div>
                <div>
                    <h2 class="text-lg font-extrabold text-white font-heading">{{ $order->car_title }}</h2>
                    <p class="text-xs text-slate-400 mt-0.5">
                        Client: <a href="{{ route('admin.customers.show', $order->user->customer->id ?? 1) }}" class="text-red-400 font-bold hover:underline">{{ $order->user->name ?? 'Customer' }}</a>
                        ({{ $order->user->phone ?? '' }})
                        · Chassis: <span class="font-mono text-slate-200">{{ $order->chassis_number ?? 'Awaiting' }}</span>
                    </p>
                </div>
            </div>

            <div class="flex items-center gap-6 bg-slate-950/80 p-3.5 rounded-xl border border-white/5 shrink-0 text-xs">
                <div>
                    <span class="text-slate-500 font-bold block">Total BDT</span>
                    <span class="font-extrabold text-white text-base">৳{{ number_format($order->total_amount_bdt) }}</span>
                </div>
                <div class="border-l border-white/10 pl-4">
                    <span class="text-slate-500 font-bold block">Paid BDT</span>
                    <span class="font-extrabold text-emerald-400 text-base">৳{{ number_format($order->paid_amount_bdt) }}</span>
                </div>
                <div class="border-l border-white/10 pl-4">
                    <span class="text-slate-500 font-bold block">Balance Due</span>
                    <span class="font-extrabold text-amber-400 text-base">৳{{ number_format($order->due_amount_bdt) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 2 Column Layout: Update Milestone & Shipping Manifest -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        
        <!-- Left 6 Cols: Advance 12-Step Import Status -->
        <div class="lg:col-span-6 space-y-6">
            
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl space-y-5">
                <div class="border-b border-white/10 pb-4">
                    <h3 class="text-sm font-bold text-white font-heading uppercase tracking-wider flex items-center gap-2">
                        <i class="fa-solid fa-arrow-progress text-red-500"></i> Advance 12-Step Import Milestone
                    </h3>
                    <p class="text-xs text-slate-400 mt-1">Updates customer portal in real-time and dispatches SMS/in-app alert.</p>
                </div>

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

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1.5">Select Import Milestone *</label>
                        <select name="status" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none">
                            @foreach($trackingSteps as $key => $step)
                                <option value="{{ $key }}" {{ $order->status === $key ? 'selected' : '' }}>
                                    Step {{ sprintf('%02d', array_search($key, array_keys($trackingSteps)) + 1) }}: {{ $step['title'] }} ({{ $step['desc'] }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1.5">Milestone Event Title *</label>
                        <input type="text" name="title" value="{{ old('title', $trackingSteps[$order->status]['title'] ?? '') }}" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. Vessel Berthing at Chittagong Port Yard 4">
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1.5">Location (Optional)</label>
                        <input type="text" name="location" class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. Yokohama Port / Chittagong CCT / Dhaka Showroom">
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1.5">Customer Description Notes</label>
                        <textarea name="description" rows="3" class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="Provide reassuring progress details for the customer..."></textarea>
                    </div>

                    <button type="submit" class="w-full py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow transition flex items-center justify-center gap-2">
                        <i class="fa-solid fa-check"></i>
                        <span>Publish Milestone & Notify Customer</span>
                    </button>
                </form>
            </div>

            <!-- Milestone Activity History Log -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl">
                <h4 class="text-xs font-bold uppercase tracking-wider text-slate-400 border-b border-white/10 pb-3 mb-4">
                    Milestone Audit Timeline
                </h4>
                <div class="space-y-4 max-h-80 overflow-y-auto text-xs">
                    @forelse($order->statusHistory as $hist)
                        <div class="flex items-start gap-3">
                            <div class="w-2 h-2 rounded-full bg-emerald-500 mt-1.5 shrink-0"></div>
                            <div class="flex-1">
                                <div class="flex justify-between">
                                    <span class="font-bold text-white">{{ $hist->title ?? ucwords(str_replace('_', ' ', $hist->status)) }}</span>
                                    <span class="text-[10px] text-slate-500">{{ $hist->created_at->format('M d, h:i A') }}</span>
                                </div>
                                <p class="text-[11px] text-slate-400 mt-0.5">{{ $hist->description }}</p>
                                @if($hist->location)
                                    <span class="text-[10px] text-emerald-400 block mt-0.5"><i class="fa-solid fa-location-dot mr-1"></i>{{ $hist->location }}</span>
                                @endif
                            </div>
                        </div>
                    @empty
                        <p class="text-slate-500 text-xs">No status updates logged yet.</p>
                    @endforelse
                </div>
            </div>

        </div>

        <!-- Right 6 Cols: Shipping Details & Invoices -->
        <div class="lg:col-span-6 space-y-6">
            
            <!-- Shipping Manifest Form -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl space-y-4">
                <div class="border-b border-white/10 pb-3">
                    <h3 class="text-sm font-bold text-white font-heading uppercase tracking-wider flex items-center gap-2">
                        <i class="fa-solid fa-ship text-blue-400"></i> Marine Shipping & Vessel Manifest
                    </h3>
                </div>

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

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-400 mb-1 uppercase text-[10px]">Vessel Name</label>
                            <input type="text" name="vessel_name" value="{{ old('vessel_name', $order->vessel_name) }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-400 mb-1 uppercase text-[10px]">Voyage Number</label>
                            <input type="text" name="voyage_number" value="{{ old('voyage_number', $order->voyage_number) }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-400 mb-1 uppercase text-[10px]">Bill of Lading (B/L) #</label>
                            <input type="text" name="bl_number" value="{{ old('bl_number', $order->bl_number) }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs font-mono">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-400 mb-1 uppercase text-[10px]">Container / Lot #</label>
                            <input type="text" name="container_number" value="{{ old('container_number', $order->container_number) }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-400 mb-1 uppercase text-[10px]">Shipping Carrier</label>
                            <input type="text" name="shipping_line" value="{{ old('shipping_line', $order->shipping_line) }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-400 mb-1 uppercase text-[10px]">Port of Discharge</label>
                            <input type="text" name="port_of_discharge" value="{{ old('port_of_discharge', $order->port_of_discharge ?? 'Chittagong Port') }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-400 mb-1 uppercase text-[10px]">ETD Japan Date</label>
                            <input type="date" name="etd_japan" value="{{ old('etd_japan', $order->etd_japan ? $order->etd_japan->format('Y-m-d') : '') }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-400 mb-1 uppercase text-[10px]">ETA Chittagong Date</label>
                            <input type="date" name="eta_chittagong" value="{{ old('eta_chittagong', $order->eta_chittagong ? $order->eta_chittagong->format('Y-m-d') : '') }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs">
                        </div>
                    </div>

                    <button type="submit" class="w-full py-2 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-bold text-xs transition">
                        Save Shipping & B/L Details
                    </button>
                </form>
            </div>

            <!-- Invoices Ledger -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl space-y-4">
                <div class="flex items-center justify-between border-b border-white/10 pb-3">
                    <h4 class="text-xs font-bold uppercase tracking-wider text-slate-300">Milestone Invoices & Payments</h4>
                    <a href="{{ route('admin.payments.index') }}" class="text-xs text-red-400 font-bold hover:underline">Reconcile &rarr;</a>
                </div>

                <div class="space-y-3 text-xs">
                    @forelse($order->invoices as $inv)
                        <div class="p-3 rounded-xl bg-slate-950 border border-white/5 flex items-center justify-between">
                            <div>
                                <span class="font-bold text-white block">#{{ $inv->invoice_number }}</span>
                                <span class="text-[10px] text-slate-400">{{ $inv->title }}</span>
                            </div>
                            <div class="text-right">
                                <span class="font-extrabold text-white">৳{{ number_format($inv->amount_bdt) }}</span>
                                <span class="text-[10px] font-bold uppercase block {{ $inv->status === 'paid' ? 'text-emerald-400' : 'text-amber-400' }}">{{ $inv->status }}</span>
                            </div>
                        </div>
                    @empty
                        <p class="text-slate-500 text-xs">No invoices on file.</p>
                    @endforelse
                </div>
            </div>

        </div>

    </div>

</div>
@endsection