@extends('storefront.layout')

@section('title', 'Your orders')

@section('content')
@php
$statusStyle = [
    'open'                       => 'bg-amber-50 text-amber-700 border border-amber-200',
    'payment_pending'            => 'bg-amber-50 text-amber-700 border border-amber-200',
    'partially_paid'             => 'bg-rose-50 text-rose-700 border border-rose-200',
    'paid_awaiting_fulfillment'  => 'bg-sky-50 text-sky-700 border border-sky-200',
    'shipped'                    => 'bg-blue-50 text-blue-700 border border-blue-200',
    'completed'                  => 'bg-emerald-50 text-emerald-700 border border-emerald-200',
    'cancelled'                  => 'bg-red-50 text-red-600 border border-red-200',
    'refunded'                   => 'bg-red-50 text-red-600 border border-red-200',
];
$statusDot = [
    'open'                       => 'bg-amber-400',
    'payment_pending'            => 'bg-amber-400',
    'partially_paid'             => 'bg-rose-500',
    'paid_awaiting_fulfillment'  => 'bg-sky-400',
    'shipped'                    => 'bg-blue-500',
    'completed'                  => 'bg-emerald-500',
    'cancelled'                  => 'bg-red-400',
    'refunded'                   => 'bg-red-400',
];
$totalDisplayed = $orders->total();
@endphp
<div class="min-h-[80vh] bg-[#f7f6f2] px-4 py-10">
<div class="mx-auto max-w-6xl">

    <a href="{{ url('/account') }}" class="mb-4 inline-flex items-center gap-2 text-sm font-semibold text-stone-500 transition hover:text-stone-950">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
        My account
    </a>

    <section class="mb-6 overflow-hidden rounded-3xl border border-stone-200 bg-white shadow-[0_24px_70px_rgba(28,25,23,0.10)]">
        <div class="grid lg:grid-cols-[1.35fr_0.95fr]">
            <div class="bg-[#007a55] p-6 text-white md:p-8">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-100/80">Orders overview</p>
                <h1 class="mt-4 text-4xl font-semibold tracking-tight md:text-5xl">Orders</h1>
                <p class="mt-4 max-w-2xl text-sm leading-6 text-emerald-50/90 md:text-base">
                    Track wholesale purchases, payment status, fulfillment updates, and order history in one place.
                </p>
                <div class="mt-7 flex flex-wrap gap-3">
                    <a href="{{ url('/products') }}"
                       class="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-[#007a55] shadow-lg shadow-emerald-950/20 transition hover:-translate-y-0.5 hover:bg-emerald-50">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/></svg>
                        Browse catalog
                    </a>
                </div>
            </div>

            <div class="grid divide-y divide-stone-200 bg-stone-50/80 sm:grid-cols-3 sm:divide-x sm:divide-y-0 lg:grid-cols-1 lg:divide-x-0 lg:divide-y">
                <div class="p-5">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Total orders</p>
                    <p class="mt-2 text-3xl font-semibold text-stone-950 tabular-nums">{{ $totalOrders }}</p>
                </div>
                <div class="p-5">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Net paid total</p>
                    <p class="mt-2 text-3xl font-semibold text-stone-950 tabular-nums">${{ number_format($totalSpent, 0) }}</p>
                </div>
                <div class="p-5">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Active orders</p>
                    <p class="mt-2 text-3xl font-semibold text-stone-950 tabular-nums">{{ $activeCount }}</p>
                </div>
            </div>
        </div>
    </section>

    @if ($orders->isEmpty())
        <section class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
            <div class="h-2 bg-[#ffd400]"></div>
            <div class="flex flex-col items-center px-6 py-14 text-center">
                <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-50 text-[#007a55] ring-1 ring-emerald-100">
                    <svg class="h-8 w-8" fill="none" stroke="currentColor" stroke-width="1.7" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2.25 4.5h-10.5A2.25 2.25 0 0 1 4.5 18.25V5.75A2.25 2.25 0 0 1 6.75 3.5h6.879c.597 0 1.169.237 1.591.659l2.621 2.621c.422.422.659.994.659 1.591v9.879a2.25 2.25 0 0 1-2.25 2.25Z"/>
                    </svg>
                </div>
                <p class="mt-5 text-xl font-semibold text-stone-950">No orders yet</p>
                <p class="mt-2 max-w-sm text-sm leading-6 text-stone-500">Your wholesale order history will appear here after your first checkout is completed.</p>
                <a href="{{ url('/products') }}" class="mt-6 inline-flex items-center gap-2 rounded-xl bg-[#007a55] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-emerald-800">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13 5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/></svg>
                    Browse catalog
                </a>
            </div>
        </section>
    @else
        <section class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
            <div class="flex flex-col gap-3 border-b border-stone-100 bg-white px-5 py-5 sm:flex-row sm:items-center sm:justify-between md:px-6">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Purchase history</p>
                    <h2 class="mt-1 text-xl font-semibold text-stone-950">{{ $totalDisplayed }} order{{ $totalDisplayed !== 1 ? 's' : '' }}</h2>
                </div>
                <span class="inline-flex w-fit items-center gap-2 rounded-full bg-stone-100 px-3 py-1.5 text-sm font-semibold text-stone-600">
                    <span class="h-2 w-2 rounded-full bg-[#007a55]"></span>
                    {{ $activeCount }} active
                </span>
            </div>

            <div class="hidden border-b border-stone-100 bg-stone-50 px-6 py-3 text-xs font-semibold uppercase tracking-[0.16em] text-stone-400 md:grid md:grid-cols-[1.35fr_0.9fr_1.2fr_0.9fr_0.9fr_auto] md:gap-x-4">
                <span>Order</span>
                <span>Date</span>
                <span>Status</span>
                <span>Payment</span>
                <span class="text-right">Gross total</span>
                <span></span>
            </div>

            <div class="divide-y divide-stone-100">
                @foreach ($orders as $order)
                    @php
                        $st = $order->status->value;
                        $style = $statusStyle[$st] ?? 'bg-stone-100 text-stone-700 border border-stone-200';
                        $dot = $statusDot[$st] ?? 'bg-stone-400';
                        $itemsCount = $order->items_count ?? 0;
                    @endphp
                    <article class="grid gap-4 px-5 py-5 transition hover:bg-[#fbfaf7] md:grid-cols-[1.35fr_0.9fr_1.2fr_0.9fr_0.9fr_auto] md:items-center md:gap-x-4 md:px-6">
                        <div>
                            <a href="{{ route('storefront.order.show-id', ['order' => $order]) }}"
                               class="text-lg font-semibold tracking-tight text-stone-950 transition hover:text-[#007a55] md:text-base">
                                {{ $order->number }}
                            </a>
                            <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-stone-500">
                                <span>{{ $itemsCount }} item{{ $itemsCount !== 1 ? 's' : '' }}</span>
                                @if ($order->po_number)
                                    <span class="hidden h-1 w-1 rounded-full bg-stone-300 sm:inline-block"></span>
                                    <span>PO {{ $order->po_number }}</span>
                                @endif
                            </div>
                        </div>

                        <div class="text-sm text-stone-600">
                            <span class="md:hidden text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">Date </span>
                            {{ optional($order->placed_at)->format('M j, Y') ?? '-' }}
                        </div>

                        <div>
                            <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold {{ $style }}">
                                <span class="h-1.5 w-1.5 rounded-full {{ $dot }}"></span>
                                {{ $order->status->getLabel() }}
                            </span>
                            @if ($order->tracking_number)
                                <p class="mt-1.5 text-xs text-stone-500">
                                    <span class="font-semibold text-stone-700">{{ $order->tracking_carrier }}</span>
                                    <span class="text-stone-300">/</span>
                                    {{ $order->tracking_number }}
                                </p>
                            @endif
                        </div>

                        <div class="text-sm font-semibold text-stone-700">
                            <span class="md:hidden text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">Payment </span>
                            {{ $order->payment_method->getLabel() }}
                        </div>

                        <div class="text-sm font-semibold text-stone-950 tabular-nums md:text-right">
                            ${{ number_format((float) $order->grand_total, 2) }}
                            <span class="text-xs font-normal text-stone-400">{{ $order->currency }}</span>
                        </div>

                        <div>
                            <a href="{{ route('storefront.order.show-id', ['order' => $order]) }}"
                               class="inline-flex items-center gap-2 rounded-xl border border-stone-200 bg-white px-3.5 py-2 text-sm font-semibold text-stone-900 shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-200 hover:text-[#007a55]">
                                View order
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>

            @if ($orders->hasPages())
                <div class="border-t border-stone-100 bg-stone-50 px-6 py-4">
                    {{ $orders->links() }}
                </div>
            @endif
        </section>
    @endif

</div>
</div>
@endsection