@extends('layouts.admin')

@section('title', 'Orders & Import Tracking – Admin CRM')
@section('page_title', 'Import Logistics & Orders')

@section('content')
<div class="space-y-6">
    
    <!-- Top Filter Header -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl p-4 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-xl">
        <form method="GET" action="{{ route('admin.orders.index') }}" class="w-full sm:w-auto flex items-center gap-2 flex-1">
            <div class="relative flex-1">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-2.5 text-slate-400 text-xs"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search order #, customer, B/L #..." class="w-full bg-slate-950 border border-white/10 rounded-xl pl-8 pr-3 py-1.5 text-white text-xs focus:border-red-500 focus:outline-none">
            </div>
            <select name="status" class="bg-slate-950 border border-white/10 rounded-xl px-3 py-1.5 text-white text-xs">
                <option value="">All Tracking Stages</option>
                @foreach($trackingSteps as $key => $step)
                    <option value="{{ $key }}" {{ request('status') === $key ? 'selected' : '' }}>{{ $step['title'] }}</option>
                @endforeach
            </select>
            <button type="submit" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                Filter
            </button>
        </form>
    </div>

    <!-- Orders Table -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-950 text-slate-400 uppercase tracking-wider text-[10px] border-b border-white/10">
                    <tr>
                        <th class="p-4">Order # & Customer</th>
                        <th class="p-4">Vehicle Details</th>
                        <th class="p-4">Chassis & B/L</th>
                        <th class="p-4">12-Step Current Stage</th>
                        <th class="p-4">ETA Chittagong</th>
                        <th class="p-4">Payments (BDT)</th>
                        <th class="p-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5 text-slate-300">
                    @forelse($orders as $order)
                        @php
                            $stepIndex = $order->current_step_index;
                            $percent = min(100, round((($stepIndex + 1) / 12) * 100));
                        @endphp
                        <tr class="hover:bg-white/5 transition">
                            <td class="p-4">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="font-bold text-white hover:text-red-400 block text-sm">
                                    #{{ $order->order_number }}
                                </a>
                                <span class="text-[11px] text-slate-400">{{ $order->user->name ?? 'Client' }}</span>
                            </td>
                            <td class="p-4">
                                <p class="font-bold text-white">{{ $order->car_title }}</p>
                                <span class="text-[10px] bg-white/10 text-slate-300 px-2 py-0.5 rounded uppercase">{{ $order->order_type }}</span>
                            </td>
                            <td class="p-4 font-mono text-[11px]">
                                <span class="text-slate-300 block">{{ $order->chassis_number ?? 'Pending Allocation' }}</span>
                                <span class="text-emerald-400 text-[10px]">{{ $order->bl_number ? 'B/L: ' . $order->bl_number : 'B/L: In Process' }}</span>
                            </td>
                            <td class="p-4">
                                <div class="w-36">
                                    <div class="flex justify-between text-[10px] mb-1">
                                        <span class="font-bold text-emerald-400">{{ $trackingSteps[$order->status]['title'] ?? $order->status }}</span>
                                        <span class="text-slate-500">{{ $stepIndex + 1 }}/12</span>
                                    </div>
                                    <div class="w-full h-1.5 rounded-full bg-slate-950 overflow-hidden">
                                        <div class="bg-gradient-to-r from-red-600 to-emerald-500 h-full" style="width: {{ $percent }}%"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4">
                                <span class="font-semibold text-white">{{ $order->eta_chittagong ? $order->eta_chittagong->format('M d, Y') : 'Estimating' }}</span>
                                <span class="text-[10px] text-slate-500 block">{{ $order->vessel_name ?? 'Vessel TBD' }}</span>
                            </td>
                            <td class="p-4">
                                <span class="font-bold text-white block">৳{{ number_format($order->total_amount_bdt) }}</span>
                                <span class="text-[10px] text-emerald-400">Paid: ৳{{ number_format($order->paid_amount_bdt) }}</span>
                            </td>
                            <td class="p-4 text-right">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="px-3 py-1.5 rounded-lg bg-red-600 hover:bg-red-700 text-white font-bold transition">
                                    Manage
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="p-8 text-center text-slate-400">
                                No vehicle orders found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-white/10">
            {{ $orders->links() }}
        </div>
    </div>

</div>
@endsection