@extends('theme::layouts.app', ['title' => __('checkout.title|Order Success')])

@section('content')
<main class="flex-grow w-full max-w-4xl mx-auto px-6 py-12 lg:py-20">

    @if($order->status == getConstant('ORDER_STATUS_PROCESSING'))
        {{-- Order Processing State (from order-processing.html) --}}
        <div class="text-center mb-12">
            <div class="relative inline-block mb-6">
                <div
                    class="size-20 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="material-symbols-outlined text-[48px] animate-spin" style="font-size: 48px;">sync</span>
                </div>
            </div>
            <h1 class="text-4xl font-bold text-text-main dark:text-white mb-3">{{ __('checkout.heading|Processing Your Order') }}</h1>
            <p class="text-lg text-text-muted dark:text-gray-400">{{ __('checkout.Please wait while we finalize your payment and prepare your digital assets.') }}</p>
        </div>
    @else
        {{-- Order Completed State (from order-completed.html) --}}
        <div class="text-center mb-12">
            <div class="relative inline-block mb-6">
                <div class="size-20 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="material-symbols-outlined" style="font-size: 48px;">check_circle</span>
                </div>
                <div class="absolute -top-2 -right-2 size-6 bg-accent text-white rounded-full flex items-center justify-center animate-bounce">
                    <span class="material-symbols-outlined" style="font-size: 14px;">celebration</span>
                </div>
            </div>
            <h1 class="text-4xl font-bold text-text-main dark:text-white mb-3">{{ __('checkout.heading|Thank You for Your Order!') }}</h1>
            <p class="text-lg text-text-muted dark:text-gray-400">{{ __('checkout.Your payment was successful and your digital assets are ready.') }}</p>
        </div>
    @endif

    <div class="bg-white dark:bg-surface-dark border border-gray-100 dark:border-gray-800 rounded-2xl shadow-soft overflow-hidden mb-10">
        {{-- Order Header Info --}}
        <div class="px-8 py-6 border-b border-gray-100 dark:border-gray-800 flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-gray-50/50 dark:bg-gray-800/30">
            <div>
                <p class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">{{ __('checkout.Order Number') }}</p>
                <p class="text-sm font-bold text-text-main dark:text-white">#{{ $order->order_reference }}</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">{{ __('checkout.Order Date') }}</p>
                <p class="text-sm font-bold text-text-main dark:text-white">{{ $order->created_at->format('F d, Y') }}</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">{{ __('checkout.Status') }}</p>
                @if($order->status == getConstant('ORDER_STATUS_PROCESSING'))
                    <p class="text-sm font-bold text-blue-600 dark:text-blue-400 flex items-center gap-2">
                        <span class="size-2 bg-blue-600 rounded-full animate-pulse"></span>
                        {{ __('checkout.Processing') }}
                    </p>
                @else
                    <p class="text-sm font-bold text-green-600 dark:text-green-400 flex items-center gap-2">
                        <span class="size-2 bg-green-600 rounded-full"></span>
                        {{ __('checkout.Completed') }}
                    </p>
                @endif
            </div>
        </div>

        <div class="p-8 {{ $order->status == getConstant('ORDER_STATUS_PROCESSING') ? 'opacity-75 grayscale-[20%] pointer-events-none select-none' : '' }}">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-sm font-bold text-text-main dark:text-white uppercase tracking-tight">{{ __('checkout.heading|Order Details') }}</h3>
                @if($order->status == getConstant('ORDER_STATUS_PROCESSING'))
                    <span class="px-2.5 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-[10px] font-bold rounded-full uppercase tracking-wider">{{ __('checkout.Awaiting Confirmation') }}</span>
                @else
                    <span class="px-2.5 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-[10px] font-bold rounded-full uppercase tracking-wider">{{ __('checkout.Payment Verified') }}</span>
                @endif
            </div>

            <div class="space-y-6">
                <!-- Main Product Items (excluding addons) -->
                @foreach($order->main_items as $item)
                <div class="flex items-start gap-4">
                    <div class="size-20 rounded-xl overflow-hidden flex-shrink-0 bg-gray-100 dark:bg-gray-800 border border-gray-100 dark:border-gray-700 flex items-center justify-center">
                        @if($item->product_image)
                            <img alt="{{ $item->name }}" class="w-full h-full object-cover" src="{{ $item->product_image }}" />
                        @else
                            <span class="material-symbols-outlined text-gray-400 text-3xl">inventory_2</span>
                        @endif
                    </div>
                    <div class="flex-grow">
                        <div class="flex items-center gap-2 mb-1">
                            <h4 class="text-base font-bold text-text-main dark:text-white">{!! $item->name !!}</h4>
                            @if($item->billing_cycle_label)
                                <span class="px-2 py-0.5 bg-primary/10 text-primary text-[10px] font-bold rounded uppercase tracking-wider">{{ $item->billing_cycle_label }}</span>
                            @endif
                        </div>
                        @if($item->description)
                            <p class="text-sm text-text-muted mb-3">{{ $item->description }}</p>
                        @endif

                        {{-- Included Add-ons Pills --}}
                        @if($order->addon_items->count() > 0)
                            <div class="mt-3">
                                <p class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">{{ __('checkout.Included Add-ons') }}</p>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($order->addon_items as $addon)
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full text-xs text-text-main dark:text-white">
                                            <span class="material-symbols-outlined text-[14px] text-primary">extension</span>
                                            {{ $addon->name }} <span class="text-text-muted">({!! ch_format_price($addon->price, $order->currency) !!})</span>
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="text-right">
                        <span class="text-base font-bold text-text-main dark:text-white">{!! ch_format_price($item->price, $order->currency) !!}</span>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Price Breakdown -->
            <div class="mt-8 pt-8 border-t border-gray-100 dark:border-gray-800 space-y-3">
                <div class="flex justify-between text-sm">
                    <span class="text-text-muted">{{ __('checkout.Subtotal') }}</span>
                    <span class="font-medium text-text-main dark:text-white">{!! ch_format_price($order->subtotal, $order->currency) !!}</span>
                </div>

                @if($order->discount_amount > 0)
                <div class="flex justify-between text-sm">
                    <span class="text-text-muted flex items-center gap-2">{{ __('checkout.Discount') }}</span>
                    <span class="font-medium text-green-600">-{!! ch_format_price($order->discount_amount, $order->currency) !!}</span>
                </div>
                @endif

                @if($order->tax_amount > 0)
                <div class="flex justify-between text-sm">
                    <span class="text-text-muted">{{ __('checkout.Tax') }}</span>
                    <span class="font-medium text-text-main dark:text-white">{!! ch_format_price($order->tax_amount, $order->currency) !!}</span>
                </div>
                @endif

                <div class="flex justify-between items-center pt-4 border-t border-gray-100 dark:border-gray-800 mt-4">
                    <span class="text-base font-bold text-text-main dark:text-white">{{ __('checkout.Total Amount') }}</span>
                    <span class="text-2xl font-black text-primary">{!! ch_format_price($order->total, $order->currency) !!}</span>
                </div>
            </div>
        </div>
        @if($order->status == getConstant('ORDER_STATUS_PROCESSING'))
            <div class="px-8 pb-8">
                <div class="p-4 bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20 rounded-xl flex items-center gap-3">
                    <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">info</span>
                    <p class="text-sm text-blue-800 dark:text-blue-300">{{ __('checkout.Your downloads will be available in My Downloads in your account once your payment is confirmed.') }}</p>
                </div>
            </div>
        @else
            <div class="p-8 pt-0">
                <div class="mt-10 flex flex-col sm:flex-row gap-4">
                    <a class="flex-1 px-8 py-4 bg-primary hover:bg-primary-dark text-white rounded-xl font-bold transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-2"
                        href="{{ route('frontend.account.downloads') }}">
                        <span class="material-symbols-outlined">download</span>
                        {{ __('checkout.Access Your Downloads') }}
                    </a>
                    <a href="{{ route('ch_order_view', [$order->encrypted_id]) }}"
                        class="px-8 py-4 bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 text-text-main dark:text-white rounded-xl font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-center gap-2">
                        <span class="material-symbols-outlined">receipt_long</span>
                        {{ __('checkout.View Order') }}
                    </a>
                </div>
            </div>
        @endif
    </div>

    @if($order->status == getConstant('ORDER_STATUS_PROCESSING'))
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-20">
            <div class="p-6 bg-blue-50/50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20 rounded-xl">
                <div class="size-10 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg flex items-center justify-center mb-4">
                    <span class="material-symbols-outlined">mail</span>
                </div>
                <h4 class="font-bold text-text-main dark:text-white mb-2">{{ __('checkout.heading|Order Summary Sent') }}</h4>
                <p class="text-sm text-text-muted dark:text-gray-400 leading-relaxed">{{ __('checkout.We\'ve sent a summary of this pending order to your email address.') }}</p>
            </div>
            <div class="p-6 bg-gray-50/50 dark:bg-white/5 border border-gray-200 dark:border-gray-800 rounded-xl">
                <div class="size-10 bg-gray-100 dark:bg-gray-800 text-gray-400 rounded-lg flex items-center justify-center mb-4">
                    <span class="material-symbols-outlined">support_agent</span>
                </div>
                <h4 class="font-bold text-text-main dark:text-white mb-2">{{ __('checkout.heading|Need Help?') }}</h4>
                <p class="text-sm text-text-muted dark:text-gray-400 leading-relaxed">{{ __('checkout.If processing takes more than a minute, please contact our support team.') }}</p>
            </div>
        </div>
    @endif

</main>
@endsection