@extends('layouts.admin')
@section('title', 'Order '.$order->order_number)
@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Order {{ $order->order_number }}</h1>
    <a href="{{ route('admin.orders.invoice', $order) }}" target="_blank" class="border rounded-lg px-4 py-2 text-sm">View / Print Invoice</a>
</div>

<div class="grid md:grid-cols-3 gap-6">
    <div class="md:col-span-2 space-y-4">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h2 class="font-semibold mb-3">Items</h2>
            <table class="w-full text-sm">
                <thead><tr class="text-left text-gray-500 border-b"><th class="py-2">Product</th><th>Variant</th><th>Qty</th><th>Price</th></tr></thead>
                <tbody>
                @foreach($order->items as $item)
                <tr class="border-b"><td class="py-2">{{ $item->product_title }}</td><td>{{ is_array($item->variant_info) ? implode(', ', $item->variant_info) : '' }}</td><td>{{ $item->quantity }}</td><td>৳{{ number_format($item->price, 2) }}</td></tr>
                @endforeach
                </tbody>
            </table>
        </div>

        @if($order->customer_lat && $order->customer_lng)
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h2 class="font-semibold mb-3">Customer Location</h2>
            <iframe class="w-full h-64 rounded-lg" src="https://maps.google.com/maps?q={{ $order->customer_lat }},{{ $order->customer_lng }}&z=15&output=embed"></iframe>
        </div>
        @endif
    </div>

    <div class="space-y-4">
        <div class="bg-white rounded-xl shadow-sm p-4 text-sm space-y-1">
            <div><strong>{{ $order->customer_name }}</strong></div>
            <div>{{ $order->customer_phone }}</div>
            <div>{{ $order->address }}</div>
            @if($order->checkout_data)
                @foreach($order->checkout_data as $k => $v)
                    @if(!is_array($v) && $v)<div class="text-gray-500">{{ $k }}: {{ $v }}</div>@endif
                @endforeach
            @endif
        </div>

        <form method="POST" action="{{ route('admin.orders.status', $order) }}" class="bg-white rounded-xl shadow-sm p-4">
            @csrf
            <label class="text-sm font-medium">Status</label>
            <select name="status" onchange="this.form.submit()" class="w-full border rounded-lg px-3 py-2 mt-1 text-sm">
                @foreach(['pending','processing','shipped','delivered','canceled'] as $st)
                <option value="{{ $st }}" {{ $order->status === $st ? 'selected' : '' }}>{{ ucfirst($st) }}</option>
                @endforeach
            </select>
        </form>

        <div class="bg-white rounded-xl shadow-sm p-4 space-y-2">
            <div class="font-semibold text-sm mb-2">Send to Courier</div>
            @if($order->courier)
                <p class="text-sm text-green-600">Sent via {{ ucfirst($order->courier) }} — #{{ $order->courier_consignment_id }}</p>
            @else
                <form method="POST" action="{{ route('admin.orders.send-courier', $order) }}" class="flex gap-2">
                    @csrf
                    <button name="courier" value="pathao" class="flex-1 border rounded-lg py-2 text-sm">Pathao</button>
                    <button name="courier" value="steadfast" class="flex-1 border rounded-lg py-2 text-sm">Steadfast</button>
                </form>
            @endif
        </div>

        <div class="bg-white rounded-xl shadow-sm p-4 text-sm space-y-1">
            <div class="flex justify-between"><span>Subtotal</span><span>৳{{ number_format($order->subtotal, 2) }}</span></div>
            <div class="flex justify-between"><span>Delivery</span><span>৳{{ number_format($order->delivery_charge, 2) }}</span></div>
            <div class="flex justify-between"><span>Discount</span><span>-৳{{ number_format($order->discount, 2) }}</span></div>
            <div class="flex justify-between font-bold border-t pt-1"><span>Total</span><span>৳{{ number_format($order->total, 2) }}</span></div>
        </div>
    </div>
</div>
@endsection