@extends('frontend.layouts.master')
@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.5.5/css/intlTelInput.css"
          integrity="sha512-Hjsts+5q0OWXb6jem9SwlTyJKJpnAXrTtoKIzKeekwUFG6QesBqmr/5+NBXiimtCEUphi7Os72nrefhPbCYqtA=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <style>
        .iti {
            width: 100% !important;
        }
        .iti__selected-flag {
            background: transparent !important;
        }
    </style>
@endsection
@section('content')
    <section class="section border-0 m-0 p-0">
        <div class="container-xxl">

            <div class="row">
                <div class="col">
                    <ul class="breadcrumb font-weight-bold text-6 justify-content-center my-5" dir="ltr">
                        <li class="text-transform-none me-2">
                            <span
                                class="text-decoration-none text-color-primary">{{ __('routes.Shopping Cart') }}</span>
                        </li>
                        <li class="text-transform-none text-color-grey-lighten me-2">
                            <span
                                class="text-decoration-none text-color-primary">{{ __('routes.Shipping info') }}</span>
                        </li>
                        <li class="text-transform-none text-color-grey-lighten me-2">
                            <span class="text-decoration-none text-color-primary">{{ __('routes.Checkout') }}</span>
                        </li>
                        <li class="text-transform-none text-color-grey-lighten">
                            <span
                                class="text-decoration-none text-color-grey-lighten text-color-hover-primary">{{ __('routes.Order Complete') }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="section border-0 m-0 py-0 pb-5">
        <div class="container-xxl">
            <div class="row">
                <div class="col">
                    <livewire:frontend.checkout />
                </div>
            </div>
        </div>
    </section>
@endsection