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

@section('title', 'My Account — ' . ($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">
        <h1 class="text-2xl font-bold text-ink-900">Welcome back{{ $customer->name ? ', '.$customer->name : '' }}</h1>

        @if(session('status')) <div class="rounded bg-green-50 border border-green-200 text-green-800 p-3 text-sm">{{ session('status') }}</div> @endif

        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="rounded border border-ink-100 p-4">
                <div class="text-xs uppercase text-ink-500">Total orders</div>
                <div class="text-2xl font-bold text-ink-900 mt-1">{{ $stats['total_orders'] }}</div>
            </div>
            <div class="rounded border border-ink-100 p-4">
                <div class="text-xs uppercase text-ink-500">In progress</div>
                <div class="text-2xl font-bold text-brand-700 mt-1">{{ $stats['pending_orders'] }}</div>
            </div>
            <div class="rounded border border-ink-100 p-4">
                <div class="text-xs uppercase text-ink-500">In transit</div>
                <div class="text-2xl font-bold text-blue-700 mt-1">{{ $stats['in_transit'] }}</div>
            </div>
            <div class="rounded border border-ink-100 p-4">
                <div class="text-xs uppercase text-ink-500">Lifetime spend</div>
                <div class="text-2xl font-bold text-ink-900 mt-1">{{ config('constants.currency_symbol','₹') }}{{ number_format($stats['lifetime_value'], 0) }}</div>
            </div>
        </div>

        <section>
            <div class="flex items-baseline justify-between mb-3">
                <h2 class="font-semibold text-ink-800">Recent orders</h2>
                <a href="{{ url('/b2bportal/shop/'.$apiToken.'/account/orders') }}" class="text-sm text-brand-700 hover:underline">All orders →</a>
            </div>
            @if($orders->isEmpty())
                <div class="border border-dashed border-ink-200 rounded p-8 text-center text-ink-500">
                    No orders yet.
                    <a href="{{ url('/b2bportal/shop/'.$apiToken) }}" class="b2b-btn mt-3 inline-flex">Browse products</a>
                </div>
            @else
                <div class="space-y-2">
                    @foreach($orders as $o)
                        <a href="{{ url('/b2bportal/shop/'.$apiToken.'/account/orders/'.$o->group_uid) }}"
                           class="block border border-ink-100 rounded p-4 hover:border-brand-500 hover:bg-brand-50/40">
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <div>
                                    <div class="font-semibold">{{ $o->order_number ?? '#'.$o->id }}</div>
                                    <div class="text-xs text-ink-500">
                                        {{ optional($o->placed_at)->format('d M Y, H:i') }} · {{ strtoupper($o->payment_method_used) }}
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="font-semibold text-brand-700">{{ config('constants.currency_symbol','₹') }}{{ number_format($o->grand_total, 2) }}</div>
                                    @php
                                        $badge = ['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'][$o->status] ?? 'bg-gray-100 text-gray-700';
                                    @endphp
                                    <span class="text-xs uppercase px-2 py-0.5 rounded-full {{ $badge }}">{{ $o->status }}</span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            @endif
        </section>
    </div>
</div>
@endsection