@extends('layouts.checkout')

@section('title', 'Order Received ' . $displayOrderNumber . ' | ' . ($storeConfig['brandName'] ?? 'Aangina'))

@section('content')
@php
    $insideCharge = (int) ($storeConfig['insideDhakaDelivery']['chargeBDT'] ?? 70);
    $insideTimeline = $storeConfig['insideDhakaDelivery']['timeline'] ?? '2 – 3 Business Days';
@endphp

<div
    x-data="{
        order: null,
        init() {
            try {
                const raw = sessionStorage.getItem('aangina_last_order');
                if (raw) {
                    this.order = JSON.parse(raw);
                }
            } catch (e) {}

            // Fallback preview data if visited directly via URL
            if (!this.order) {
                this.order = {
                    orderId: @js($orderId),
                    displayOrderNumber: @js($displayOrderNumber),
                    createdAt: new Date().toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }),
                    customer: {
                        fullName: 'Nusrat Jahan',
                        mobile: '01712345678',
                        email: null,
                        district: 'Dhaka',
                        area: 'Dhanmondi',
                        address: 'House 14, Road 5, Dhanmondi',
                        note: null,
                    },
                    delivery: {
                        zone: 'inside',
                        label: 'Inside Dhaka City',
                        timeline: @js($insideTimeline),
                        chargeBDT: {{ $insideCharge }},
                    },
                    items: [
                        {
                            id: 'prod-101',
                            title: 'Crimson Handwoven Dhakai Jamdani Saree',
                            qty: 1,
                            priceBDT: 5800,
                            blousePiece: 'Included (1 Yard Unstitched)',
                            image: @js(asset('images/sarees/saree-crimson-1.svg')),
                        }
                    ],
                    subtotalBDT: 5800,
                    discountBDT: 0,
                    couponCode: null,
                    totalPayableBDT: 5800 + {{ $insideCharge }},
                    paymentMethod: 'Cash on Delivery (COD)',
                };
            }
        }
    }"
    class="py-10 sm:py-16 px-4 sm:px-6"
>
    <div class="max-w-[660px] mx-auto bg-surface border border-border-subtle p-5 sm:p-8">
        {{-- =================================================================
             1. SUCCESS ICON, HEADING & ORDER ID PILL
             ================================================================= --}}
        <div class="text-center">
            <div class="w-[56px] h-[56px] mx-auto rounded-full bg-main border-2 border-state-success text-state-success flex items-center justify-center text-[24px] font-bold">
                ✓
            </div>

            <h1 class="mt-4 font-heading font-bold text-[26px] sm:text-[36px] text-brand-primary leading-tight">
                Thank You! Your Order Has Been Received
            </h1>

            <div class="mt-3 inline-flex items-center px-3.5 py-1.5 bg-brand-accent text-text-primary font-body font-semibold text-[13px] tracking-wide">
                Order ID: <span class="ml-1 font-bold" x-text="order ? order.displayOrderNumber : '{{ $displayOrderNumber }}'"></span>
            </div>
        </div>

        {{-- =================================================================
             2. ACCURATE EMAIL & PHONE CONFIRMATION NOTE
             ================================================================= --}}
        <template x-if="order">
            <div class="mt-5 text-center max-w-[54ch] mx-auto">
                <template x-if="order.customer && order.customer.email">
                    <p class="text-[14px] text-text-muted leading-relaxed">
                        We have sent your order confirmation receipt to
                        <strong class="text-text-primary font-semibold" x-text="order.customer.email"></strong>.
                        As soon as your saree is handed over to the courier, we will email your live delivery tracking link.
                        Our team will also call <strong class="text-text-primary font-semibold" x-text="order.customer.mobile"></strong> prior to dispatch.
                    </p>
                </template>

                <template x-if="!order.customer || !order.customer.email">
                    <p class="text-[14px] text-text-muted leading-relaxed">
                        Your order is registered under mobile number
                        <strong class="text-text-primary font-semibold" x-text="order.customer ? order.customer.mobile : '017XXXXXXXX'"></strong>.
                        Our operations team will call you shortly to confirm your order and before doorstep delivery.
                    </p>
                </template>
            </div>
        </template>

        {{-- =================================================================
             3. ORDER & COD SUMMARY BOX (--bg-main Inner Card, 1px --border-subtle)
             ================================================================= --}}
        <template x-if="order">
            <div class="mt-6 bg-main border border-border-subtle divide-y divide-border-subtle">
                {{-- Receiver & Delivery Details --}}
                <div class="p-4 sm:p-5 space-y-2.5 text-[14px]">
                    <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span class="text-text-muted">Receiver Name &amp; Mobile:</span>
                        <span class="font-semibold text-text-primary" x-text="order.customer.fullName + ' — ' + order.customer.mobile"></span>
                    </div>

                    <template x-if="order.customer.email">
                        <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
                            <span class="text-text-muted">Confirmation Email:</span>
                            <span class="font-medium text-text-primary" x-text="order.customer.email"></span>
                        </div>
                    </template>

                    <div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:text-right">
                        <span class="text-text-muted shrink-0">Delivery Address &amp; Zone:</span>
                        <span class="font-medium text-text-primary">
                            <span x-text="order.customer.address + ', ' + order.customer.area + ', ' + order.customer.district"></span>
                            <span class="block text-[12px] text-text-muted" x-text="'(' + order.delivery.label + ': ' + order.delivery.timeline + ')'"></span>
                        </span>
                    </div>

                    <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span class="text-text-muted">Payment Method:</span>
                        <span class="font-semibold text-text-primary">Cash on Delivery (COD)</span>
                    </div>
                </div>

                {{-- Ordered Sarees List --}}
                <div class="p-4 sm:p-5 space-y-3">
                    <div class="text-[12px] font-semibold uppercase tracking-wider text-text-muted">
                        Ordered Sarees
                    </div>

                    <template x-for="item in order.items" :key="item.id">
                        <div class="flex items-center justify-between gap-3">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="w-[44px] h-[58px] shrink-0 bg-surface border border-border-subtle overflow-hidden">
                                    <img :src="item.image" :alt="item.title" class="w-full h-full object-cover object-top">
                                </div>
                                <div class="min-w-0">
                                    <div class="text-[14px] font-medium text-text-primary truncate" x-text="item.title"></div>
                                    <div class="text-[12px] text-text-muted" x-text="'Qty: ' + item.qty + ' • ' + item.blousePiece"></div>
                                </div>
                            </div>
                            <div class="text-[14px] font-bold text-text-primary shrink-0" x-text="$store.cart.formatBDT(item.priceBDT * item.qty)"></div>
                        </div>
                    </template>
                </div>

                {{-- Cost Breakdown & Total Cash to Keep Ready --}}
                <div class="p-4 sm:p-5 space-y-2 text-[14px]">
                    <div class="flex justify-between">
                        <span class="text-text-muted">Subtotal</span>
                        <span class="font-medium text-text-primary" x-text="$store.cart.formatBDT(order.subtotalBDT)"></span>
                    </div>

                    <template x-if="order.discountBDT > 0">
                        <div class="flex justify-between text-state-success font-semibold">
                            <span>Promo Discount (<span x-text="order.couponCode"></span>)</span>
                            <span x-text="'− ' + $store.cart.formatBDT(order.discountBDT)"></span>
                        </div>
                    </template>

                    <div class="flex justify-between">
                        <span class="text-text-muted">Delivery Charge</span>
                        <span class="font-medium text-text-primary" x-text="$store.cart.formatBDT(order.delivery.chargeBDT)"></span>
                    </div>

                    <div class="pt-3 border-t border-border-subtle flex items-baseline justify-between">
                        <span class="font-semibold text-text-primary">
                            Total Cash to Keep Ready on Delivery:
                        </span>
                        <span class="font-body font-bold text-[18px] sm:text-[20px] text-brand-primary" x-text="$store.cart.formatBDT(order.totalPayableBDT)"></span>
                    </div>
                </div>
            </div>
        </template>

        {{-- =================================================================
             4. BOTTOM CTA BUTTON (CONTINUE SHOPPING ->)
             ================================================================= --}}
        <div class="mt-7 text-center">
            <a href="{{ route('home') }}" class="btn-primary w-full sm:w-auto px-10">
                CONTINUE SHOPPING →
            </a>
        </div>
    </div>
</div>
@endsection