@extends('storefront.layout')

@section('title', 'Order Confirmed — ' . ($settings->company_name ?? 'Shop'))

@section('content')

    <div class="max-w-2xl mx-auto">

        {{-- Success header --}}
        <div class="text-center mb-8">
            <div class="text-6xl mb-4">✅</div>
            <h1 class="text-2xl font-bold text-gray-900">Order Confirmed!</h1>
            <p class="text-gray-500 mt-2">Thank you, {{ $order->contact_name }}. Your order has been received.</p>
            <p class="text-sm text-gray-400 mt-1">Order #{{ $order->id }}</p>
        </div>

        {{-- Order summary --}}
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
            <div class="px-6 py-4 border-b bg-gray-50">
                <h2 class="font-semibold text-gray-900">Items Ordered</h2>
            </div>
            <div class="divide-y">
                @foreach($order->items as $item)
                    <div class="px-6 py-4 flex justify-between items-start">
                        <div>
                            <p class="font-medium text-gray-900">{{ $item->product_name }}</p>
                            @if($item->variant_label)
                                <p class="text-sm text-gray-500">{{ $item->variant_label }}</p>
                            @endif
                            <p class="text-sm text-gray-500">Qty: {{ $item->quantity }} × {{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $item->unit_price, 2) }}</p>
                        </div>
                        <p class="font-medium text-gray-900">{{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $item->subtotal, 2) }}</p>
                    </div>
                @endforeach
            </div>
            <div class="px-6 py-4 border-t bg-gray-50 space-y-1">
                <div class="flex justify-between text-sm text-gray-600">
                    <span>Subtotal</span>
                    <span>{{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $order->subtotal, 2) }}</span>
                </div>
                <div class="flex justify-between text-sm text-gray-600">
                    <span>Shipping ({{ $order->shipping_method }})</span>
                    <span>{{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $order->freight, 2) }}</span>
                </div>
                @if((float) $order->discount_amount > 0)
                    <div class="flex justify-between text-sm text-green-700">
                        <span>Discount{{ $order->coupon_code ? ' (' . $order->coupon_code . ')' : '' }}</span>
                        <span>−{{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $order->discount_amount, 2) }}</span>
                    </div>
                @endif
                @if((float) $order->tax_charged > 0)
                    <div class="flex justify-between text-sm text-gray-600">
                        <span>Tax</span>
                        <span>{{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $order->tax_charged, 2) }}</span>
                    </div>
                    @if(!empty($settings->tax_number))
                        <div class="text-xs text-gray-400">Reg: {{ $settings->tax_number }}</div>
                    @endif
                @endif
                <div class="flex justify-between font-semibold text-gray-900 border-t pt-2 mt-1">
                    <span>Total</span>
                    <span>{{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $order->total, 2) }}</span>
                </div>
            </div>
        </div>

        {{-- Shipping address --}}
        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 class="font-semibold text-gray-900 mb-3">Shipping To</h2>
            <p class="text-sm text-gray-700">{{ $order->ship_name }}</p>
            <p class="text-sm text-gray-600">{{ $order->ship_address1 }}</p>
            @if($order->ship_address2)
                <p class="text-sm text-gray-600">{{ $order->ship_address2 }}</p>
            @endif
            <p class="text-sm text-gray-600">{{ $order->ship_city }}, {{ $order->ship_province }} {{ $order->ship_postal_code }}</p>
            <p class="text-sm text-gray-600">{{ $order->ship_country }}</p>
        </div>

        {{-- Payment status --}}
        @if($order->stripe_payment_intent_id)
            <div class="bg-green-50 border border-green-200 rounded-xl p-5 mb-8 text-sm text-green-800">
                <p class="font-medium mb-1">Payment Received</p>
                <p>Your payment of <strong>{{ $settings->currency_symbol ?? '$' }}{{ number_format((float) $order->total, 2) }}</strong> was processed successfully. A confirmation will be sent to <strong>{{ $order->contact_email }}</strong>.</p>
            </div>
        @else
            <div class="bg-amber-50 border border-amber-200 rounded-xl p-5 mb-8 text-sm text-amber-800">
                <p class="font-medium mb-1">Payment Pending</p>
                <p>The store will be in touch at <strong>{{ $order->contact_email }}</strong> to arrange payment.</p>
            </div>
        @endif

        <div class="text-center">
            <a href="{{ route('storefront.index') }}"
               class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
                Continue Shopping
            </a>
        </div>

    </div>

@endsection