@extends('b2bportal::storefront.layouts.app')

@php
    $primary = $orders->first();
    $totals = [
        'subtotal' => $orders->sum('subtotal'),
        'discount' => $orders->sum('discount_total'),
        'tax' => $orders->sum('tax_total'),
        'shipping' => $orders->sum('shipping_total'),
        'grand' => $orders->sum('grand_total'),
    ];
    $currency = config('constants.currency_symbol', '₹');
    $badgeMap = [
        'pending'=>'bg-yellow-100 text-yellow-800','confirmed'=>'bg-blue-100 text-blue-800',
        'processing'=>'bg-blue-100 text-blue-800','shipped'=>'bg-indigo-100 text-indigo-800',
        'delivered'=>'bg-green-100 text-green-800','cancelled'=>'bg-red-100 text-red-700',
        'refunded'=>'bg-gray-100 text-gray-700',
    ];
@endphp

@section('title', 'Order ' . ($primary->order_number ?? '') . ' — ' . ($business->name ?? 'B2B Portal'))

@section('content')
<div class="flex flex-col md:flex-row gap-6">
    @include('b2bportal::storefront.components.account-nav')

    <div class="grow space-y-6">
        <div>
            <a href="{{ url('/b2bportal/shop/'.$apiToken.'/account/orders') }}" class="text-sm text-ink-500 hover:text-brand-700">← All orders</a>
            <h1 class="text-2xl font-bold text-ink-900 mt-1">Order {{ $primary->order_number ?? '#'.$primary->id }}</h1>
            <div class="text-sm text-ink-500 mt-1">
                Placed {{ optional($primary->placed_at)->format('d M Y · H:i') }}
                · Payment: <strong>{{ strtoupper($primary->payment_method_used) }}</strong>
                @if($primary->transaction && $primary->transaction->payment_status)
                    · <span class="uppercase">{{ $primary->transaction->payment_status }}</span>
                @endif
            </div>
        </div>

        @if(session('status')) <div class="rounded bg-green-50 border border-green-200 text-green-800 p-3 text-sm">{{ session('status') }}</div> @endif
        @if($errors->any()) <div class="rounded bg-red-50 border border-red-200 text-red-800 p-3 text-sm"><ul>@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div> @endif

        {{-- ============================ SHIPPING TIMELINE ============================ --}}
        <section class="border border-ink-100 rounded p-5">
            <h2 class="font-semibold text-ink-800 mb-4">Order status</h2>
            <ol class="relative">
                @foreach($timeline as $step)
                    <li class="flex gap-3 py-2">
                        <div class="mt-1 w-3 h-3 rounded-full shrink-0
                            {{ $step['done'] ? 'bg-brand-600' : ($step['current'] ? 'bg-yellow-500 ring-4 ring-yellow-100' : 'bg-ink-200') }}"></div>
                        <div class="grow">
                            <div class="text-sm font-medium {{ $step['done'] || $step['current'] ? 'text-ink-800' : 'text-ink-400' }}">
                                {{ $step['label'] }}
                            </div>
                            @if($step['at'])
                                <div class="text-xs text-ink-500">{{ \Illuminate\Support\Carbon::parse($step['at'])->format('d M Y · H:i') }}</div>
                            @endif
                        </div>
                    </li>
                @endforeach
            </ol>

            @if($primary->tracking_number)
                <div class="mt-4 border-t border-ink-100 pt-4">
                    <div class="text-xs uppercase text-ink-500 tracking-wide">Shipment tracking</div>
                    <div class="text-ink-800 mt-1">
                        {{ $primary->carrier ?? 'Courier' }}: <strong>{{ $primary->tracking_number }}</strong>
                        @if($primary->tracking_url)
                            · <a href="{{ $primary->tracking_url }}" target="_blank" class="text-brand-700 hover:underline">Track shipment ↗</a>
                        @endif
                    </div>
                </div>
            @endif
        </section>

        {{-- ============================ PAYMENT ============================ --}}
        @if($primary->payment_method_used === 'upi' && optional($primary->transaction)->payment_status !== 'paid')
            <section class="border border-brand-200 bg-brand-50 rounded p-5">
                <h2 class="font-semibold text-brand-900 mb-3">💳 Complete UPI payment</h2>

                @if($paymentIntent && $paymentIntent['configured'])
                    <div class="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6">
                        <div class="bg-white rounded p-3 border border-ink-100 flex flex-col items-center">
                            <img src="{{ $paymentIntent['qr_image_url'] }}" alt="UPI QR" class="w-full h-auto max-w-[200px]">
                            <div class="text-xs text-ink-500 mt-2 text-center">Scan with any UPI app</div>
                        </div>
                        <div>
                            <div class="text-sm">
                                Pay <strong>{{ $currency }}{{ number_format($paymentIntent['amount'], 2) }}</strong>
                                to <strong>{{ $paymentIntent['upi_id'] }}</strong>
                                <span class="text-ink-600">({{ $paymentIntent['payee_name'] }})</span>
                            </div>
                            <div class="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2">
                                @foreach($paymentIntent['apps'] as $app)
                                    <a href="{{ $app['intent_uri'] }}"
                                       class="rounded border border-brand-200 bg-white p-2 text-center text-sm hover:bg-brand-100">
                                        <div class="font-medium text-ink-800">{{ $app['label'] }}</div>
                                        <div class="text-[10px] text-ink-500">Tap to open</div>
                                    </a>
                                @endforeach
                            </div>
                            <a href="{{ $paymentIntent['universal_uri'] }}"
                               class="mt-3 block text-sm text-brand-700 hover:underline">
                                Or open any installed UPI app →
                            </a>
                        </div>
                    </div>

                    <div class="mt-6 border-t border-brand-200 pt-4">
                        <p class="text-sm text-ink-700 mb-3">After paying, enter your UTR and upload the payment screenshot so we can verify quickly.</p>
                        <form method="POST" action="{{ url('/b2bportal/shop/'.$apiToken.'/account/orders/'.$primary->id.'/payment-proof') }}"
                              enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-3 gap-3">
                            @csrf
                            <label class="block md:col-span-1">
                                <span class="text-xs uppercase text-ink-500">UTR / Ref number</span>
                                <input type="text" name="utr" value="{{ $primary->upi_utr }}"
                                       class="w-full mt-1 rounded border-ink-200" placeholder="e.g. 402512345678">
                            </label>
                            <label class="block md:col-span-2">
                                <span class="text-xs uppercase text-ink-500">Payment screenshot (jpg/png/pdf, ≤5MB)</span>
                                <input required type="file" name="screenshot" accept="image/*,application/pdf"
                                       class="w-full mt-1 text-sm">
                            </label>
                            <div class="md:col-span-3 flex items-center justify-between">
                                @if($primary->payment_proof_path)
                                    <a href="{{ asset('storage/'.$primary->payment_proof_path) }}" target="_blank"
                                       class="text-xs text-brand-700 hover:underline">
                                        View previously uploaded proof
                                    </a>
                                @else
                                    <span></span>
                                @endif
                                <button class="b2b-btn">Submit proof</button>
                            </div>
                        </form>
                    </div>
                @else
                    <div class="text-sm text-red-700">UPI is enabled but the merchant hasn't configured a UPI ID. Contact support.</div>
                @endif
            </section>
        @elseif($primary->payment_method_used === 'upi' && optional($primary->transaction)->payment_status === 'paid')
            <section class="border border-green-200 bg-green-50 rounded p-4 text-green-800 text-sm">
                ✅ UPI payment verified. Thank you!
            </section>
        @endif

        {{-- ============================ SHIPMENTS ============================ --}}
        @foreach($orders as $order)
            <section class="border border-ink-100 rounded overflow-hidden">
                <header class="px-4 py-3 bg-ink-50 flex flex-wrap justify-between gap-2">
                    <div>
                        <div class="font-semibold text-ink-800">{{ $order->order_number ?? 'Shipment #'.$order->id }}</div>
                        <div class="text-xs text-ink-500">
                            Ships from location #{{ $order->location_id }}
                            · <span class="uppercase">{{ $order->status }}</span>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-semibold">{{ $currency }}{{ number_format($order->grand_total, 2) }}</div>
                        @if($order->transaction_id)
                            <a class="text-xs text-brand-700 hover:underline"
                               href="{{ url('/b2bportal/shop/'.$apiToken.'/orders/'.$order->id.'/invoice') }}"
                               target="_blank">Download invoice</a>
                        @endif
                    </div>
                </header>
                <div class="p-4">
                    <table class="w-full text-sm">
                        <thead class="text-left text-ink-500">
                            <tr>
                                <th class="pb-2">Item</th>
                                <th class="pb-2 text-center">Qty</th>
                                <th class="pb-2 text-right">Unit</th>
                                <th class="pb-2 text-right">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(($order->cart_snapshot ?? []) as $line)
                                <tr class="border-t border-ink-100">
                                    <td class="py-2">{{ $line['name'] ?? '—' }}</td>
                                    <td class="py-2 text-center">{{ $line['quantity'] ?? 0 }}</td>
                                    <td class="py-2 text-right">{{ $currency }}{{ number_format($line['unit_price'] ?? 0, 2) }}</td>
                                    <td class="py-2 text-right">{{ $currency }}{{ number_format($line['subtotal'] ?? 0, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="mt-3 text-xs text-ink-500 grid grid-cols-2 gap-1 max-w-xs ml-auto">
                        <div>Subtotal</div><div class="text-right">{{ $currency }}{{ number_format($order->subtotal, 2) }}</div>
                        @if($order->discount_total > 0)
                            <div class="text-green-700">Discount</div><div class="text-right text-green-700">−{{ $currency }}{{ number_format($order->discount_total, 2) }}</div>
                        @endif
                        <div>Tax</div><div class="text-right">{{ $currency }}{{ number_format($order->tax_total, 2) }}</div>
                        <div>Shipping</div><div class="text-right">{{ $currency }}{{ number_format($order->shipping_total, 2) }}</div>
                    </div>
                </div>
            </section>
        @endforeach

        <div class="border border-ink-100 rounded p-5 flex justify-between items-center bg-ink-50">
            <span class="text-sm text-ink-600 uppercase tracking-wide">Order total</span>
            <span class="text-xl font-bold text-ink-900">{{ $currency }}{{ number_format($totals['grand'], 2) }}</span>
        </div>

        {{-- Address --}}
        <section class="border border-ink-100 rounded p-5">
            <h2 class="font-semibold text-ink-800 mb-3">Shipping address</h2>
            @php
                $addr = is_array($primary->shipping_address) ? $primary->shipping_address : (json_decode($primary->shipping_address ?? '{}', true) ?: []);
            @endphp
            <address class="text-sm text-ink-700 leading-relaxed not-italic">
                <strong>{{ $addr['name'] ?? '' }}</strong><br>
                {{ $addr['line1'] ?? '' }}<br>
                @if(!empty($addr['line2'])) {{ $addr['line2'] }}<br> @endif
                {{ $addr['city'] ?? '' }}, {{ $addr['state'] ?? '' }} {{ $addr['pincode'] ?? '' }}<br>
                📞 {{ $addr['phone'] ?? '' }}
            </address>
        </section>
    </div>
</div>
@endsection