@extends('frontend::layouts.master')

@section('content')
    <div class="bg-med-gray">
        <div class="container mx-auto px-6 py-16">
            <div class="flex-grow flex items-center justify-center">
                <div class="max-w-2xl w-full">
                    <div class="max-w-2xl mx-auto text-center">
                        <div class="relative flex items-baseline justify-between w-full">
                            <div class="absolute left-0 top-1/2 transform -translate-y-1/2 w-full h-1 bg-gray-300 z-1"></div>
                            <div class="flex flex-col items-center bg-med-gray px-2 z-10">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center bg-med-primary text-white font-bold border-4 border-white shadow-sm">
                                    <i class="fa-solid fa-check"></i>
                                </div>
                                <span class="mt-2 text-sm font-semibold text-med-primary">{{ __('frontend::lang.label.cart') }}</span>
                            </div>
                            <div class="flex flex-col items-center bg-med-gray px-2 z-10">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center bg-med-primary text-white font-bold border-4 border-white shadow-sm">
                                    <i class="fa-solid fa-check"></i>
                                </div>
                                <span class="mt-2 text-sm font-semibold text-med-primary">
                                    {{ __('frontend::lang.label.shipping') }}<br>{{ __('frontend::lang.label.and') }}<br>{{ __('frontend::lang.label.payment') }}
                                </span>
                            </div>
                            <div class="flex flex-col items-center bg-med-gray px-2 z-10">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center bg-med-primary text-white font-bold border-4 border-white shadow-sm ring-4 ring-med-primary/20">
                                    <i class="fa-solid fa-check"></i>
                                </div>
                                <span class="mt-2 text-sm font-semibold text-med-primary">{{ __('frontend::lang.label.complete') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white p-8 md:p-12 rounded-2xl shadow-lg border border-gray-100 mt-8">
                        @if (!empty($slip_later))
                            <div class="flex flex-col items-center justify-center gap-4 mb-6">
                                <div class="flex items-center justify-center h-[6rem] w-[6rem] rounded-full bg-amber-100">
                                    <i class="fa-solid fa-circle-info text-amber-500 text-7xl"></i>
                                </div>
                                <div class="font-sm text-amber-600 text-center uppercase tracking-[0.15rem]">{{ __('frontend::lang.page.checkout_complete.wait_payment') }}</div>
                            </div>
                            <div class="text-center space-y-4">
                                <div class="text-gray-600 leading-relaxed space-y-2">
                                    <h1 class="text-2xl font-bold text-med-dark">{{ __('frontend::lang.page.checkout_complete.wait_payment_desc') }}</h1>
                                    <p>
                                        {{ __('frontend::lang.page.checkout_complete.wait_payment_desc_2') }}
                                    </p>
                                </div>
                            </div>
                        @elseif(!empty($slip_success))
                            <div class="flex flex-col items-center justify-center gap-4 mb-6">
                                <div class="flex items-center justify-center h-[6rem] w-[6rem] rounded-full bg-amber-100">
                                    <i class="fa-solid fa-clock text-amber-500 text-7xl"></i>
                                </div>
                                <div class="font-sm text-amber-600 text-center uppercase tracking-[0.15rem]">{{ __('frontend::lang.page.checkout_complete.receiped') }}</div>
                            </div>
                            <div class="text-center space-y-4">
                                <div class="text-gray-600 leading-relaxed space-y-2">
                                    <h1 class="text-2xl font-bold text-med-dark">{{ __('frontend::lang.page.checkout_complete.wait_for_check') }}</h1>
                                    <p>
                                        {{ __('frontend::lang.page.checkout_complete.wait_for_check_desc') }}
                                    </p>
                                </div>
                            </div>
                        @else
                            <div class="flex flex-col items-center justify-center gap-4 mb-6">
                                <div class="flex items-center justify-center h-[6rem] w-[6rem] rounded-full bg-green-100">
                                    <i class="fa-solid fa-check text-green-500 text-7xl"></i>
                                </div>
                                <div class="font-sm text-green-500 text-center uppercase tracking-[0.15rem]">{{ __('frontend::lang.page.checkout_complete.thank_you') }}!</div>
                                <div class="bg-gray-50 p-6 rounded-lg border border-gray-100 inline-block w-full text-center">
                                    <p class="text-sm text-gray-500 uppercase tracking-wide mb-1">{{ __('frontend::lang.page.checkout_complete.order_no') }}</p>
                                    <p class="text-2xl font-bold text-med-dark tracking-wider">#{{ $order->no ?? '' }}</p>
                                    <p class="text-xs text-gray-400 mt-2">{{ __('frontend::lang.page.checkout_complete.email_confirm') }} {{ $order->member->email ?? '' }}</p>
                                </div>
                            </div>
                            <div class="text-center space-y-4">
                                <div class="text-gray-600 leading-relaxed space-y-2">
                                    <h1 class="text-2xl font-bold text-med-dark">{{ __('frontend::lang.page.checkout_complete.order_success') }}</h1>
                                    <p>
                                        {{ __('frontend::lang.page.checkout_complete.order_success_desc') }}
                                    </p>
                                </div>
                            </div>
                        @endif
                        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center pt-6 mt-6 border-t border-gray-200">
                            <a class="w-full sm:w-auto px-8 py-3 rounded-full font-bold border-2 border-med-primary text-med-primary hover:bg-gray-50 transition-colors" href="{{ $link_products['url'] ?? 'javascript:void(0)' }}">
                                {{ __('frontend::lang.btn.shop_more') }}
                            </a>
                            <a class="w-full sm:w-auto px-8 py-3 rounded-full font-bold bg-med-primary text-white hover:bg-med-secondary transition-colors shadow-md" href="{{ mwz_route('frontend.profile_order_history') }}">
                                {{ __('frontend::lang.btn.my_order') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection