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

@push('styles')
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
    <style>
        .flex.items-center.border input[type="number"] {
            text-align: center !important;
            line-height: 2rem !important;
            height: 2rem;
            padding: 0 !important;
            vertical-align: middle;
            display: inline-block;
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
@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">
                    @if (session('success'))
                        <div class="bg-green-50 border border-green-200 text-green-700 rounded-xl px-4 py-4 text-sm md:text-base text-center font-medium" role="alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-4 text-sm md:text-base text-center font-medium" role="alert">
                            {{ session('error') }}
                        </div>
                    @endif
                    <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 ring-4 ring-med-primary/20">
                                    1
                                </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-white text-gray-400 font-bold border-4 border-gray-200">
                                    2
                                </div>
                                <span class="mt-2 text-sm font-medium text-gray-400">{{ __('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-cart />
                </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