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

@push('styles')
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
@endpush

@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-5xl w-full space-y-8">
                    <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 ring-4 ring-med-primary/20">
                                    2
                                </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-white text-gray-400 font-bold border-4 border-gray-200">
                                    3
                                </div>
                                <span class="mt-2 text-sm font-medium text-gray-400">{{ __('frontend::lang.label.complete') }}</span>
                            </div>
                        </div>
                    </div>
                    <livewire:frontend::section.checkout-payment order_uid="{{ $order_uid ?? '' }}" :chk_gateway="$chk_gateway" />
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('toastMessageSuccess', (e) => {
                toastr.success(e[0] ?? '');
            });
            Livewire.on('toastMessageError', (e) => {
                toastr.error(e[0] ?? '');
            });
        });
    </script>
@endpush