@extends('shared.front_without_header')
@section('content')
    <script src="https://www.google.com/recaptcha/api.js?render=6LfCZNQbAAAAAI2dChejG90G--QAdoVUR4N9jzBA"></script>
    <script src="https://ap-gateway.mastercard.com/checkout/version/62/checkout.js"
        data-cancel="{{ Illuminate\Support\Facades\URL::route('home.index') }}"></script>
    <div class="container cart cart-payment">
        <div class="cart__content">
            <!-- cart col left -->
            <div class="cart__col-left">
                <!-- cart stepper -->
                <div class="cart__stepper">
                    <!-- step -->
                    <div class="step prev-step">
                        <!-- step -->
                        <span class="step__number">
                            1
                        </span>
                        <!-- step -->
                        <span class="step__context">
                            {{ __('messages.checkout.delivery') }}
                        </span>
                    </div>
                    <!-- step -->
                    <div class="line"></div>
                    <!-- step -->
                    <div class="step current">
                        <!-- step -->
                        <span class="step__number">
                            2
                        </span>
                        <!-- step -->
                        <span class="step__context">
                            {{ __('messages.checkout.payment') }}
                        </span>
                    </div>
                    <!-- step -->
                </div>

                <!-- CTA Holder -->
                <a href="{{ url()->previous() }}" class="common-link cta-back-to-cart hidden-xs">
                    <!-- Icon -->
                    <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                            fill="none">
                            <path
                                d="M6.46967 9.46967C6.17678 9.76256 6.17678 10.2374 6.46967 10.5303L11.2426 15.3033C11.5355 15.5962 12.0104 15.5962 12.3033 15.3033C12.5962 15.0104 12.5962 14.5355 12.3033 14.2426L8.06066 10L12.3033 5.75736C12.5962 5.46447 12.5962 4.98959 12.3033 4.6967C12.0104 4.40381 11.5355 4.40381 11.2426 4.6967L6.46967 9.46967ZM8 9.25L7 9.25L7 10.75L8 10.75L8 9.25Z"
                                fill="#A6A6A6" />
                        </svg>
                    </span>

                    <!-- Context -->
                    <span class="context">
                        {{ __('messages.checkout.back-step') }}
                    </span>
                </a>

                <h2 class="page-title">{{ __('messages.checkout.payment') }}</h2>
                <!-- payment form -->
                <form class="" id="cart-payment-form" method="POST" action="/">
                    <div class="payment__form">
                        <div class="payment__form__label" id="slidedown-payment-info">
                            {{ __('messages.checkout.delivery_information_1') }}
                            <span class="icon mb-show">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                                    fill="none">
                                    <path
                                        d="M7.99902 11.0003L2.99902 6.00029L3.69902 5.30029L7.99902 9.60029L12.299 5.30029L12.999 6.00029L7.99902 11.0003Z"
                                        fill="#0E0E0E" />
                                </svg>
                            </span>
                        </div>
                        <!-- Group Info Payment -->
                        <div class="payment__form-info group" id="content-payment-info">
                            <div class="row">
                                <div class="info">{{ __('messages.checkout.fullname') }}: <b class="info-name"></b></div>
                                <div class="info">{{ __('messages.checkout.phone_number') }}: <b class="info-phone"></b>
                                </div>
                            </div>
                            <div class="info">{{ __('messages.checkout.address') }}: <b class="info-address"></b></div>
                        </div>
                        <div class="payment__form__label">{{ __('messages.checkout.delivery_information_2') }}</div>
                        <div class="form-radio group">
                            <label>
                                <input class="payment-method" type="radio" name="payment-method" id="cod"
                                    value="{{ \App\Enums\OrderPaymentMethod::COD }}" checked />
                                {{ __('messages.checkout.cod') }}
                                <span class="checkmark"></span>
                            </label>
                            <label>
                                <input class="payment-method" type="radio" name="payment-method" id="banking"
                                    value="{{ \App\Enums\OrderPaymentMethod::BANK }}" />
                                {{ __('messages.checkout.bank_transfer') }}
                                <span class="checkmark"></span>
                            </label>
                            <label>
                                <input class="payment-method" type="radio" name="payment-method" id="momo"
                                    value="{{ \App\Enums\OrderPaymentMethod::MOMO }}" />
                                {{ __('messages.checkout.momo') }}
                                <img src="{{ asset('front/app/assets/img/icon-momo.svg') }}" alt="momo" />
                                <span class="checkmark"></span>
                            </label>
                            <label>
                                <input class="payment-method" type="radio" name="payment-method" id="Mastercard"
                                    value="{{ \App\Enums\OrderPaymentMethod::MASTERCARD }}" />
                                {{ __('messages.checkout.mastercard') }}
                                <img width="30" src="{{ asset('front/app/assets/img/icon-visa.png') }}"
                                    alt="visa" />
                                <img width="30" src="{{ asset('front/app/assets/img/icon-mastercard.png') }}"
                                    alt="mastercard" />
                                <span class="checkmark"></span>
                            </label>
                            <label>
                                <input class="payment-method" type="radio" name="payment-method" id="Napas"
                                    value="{{ \App\Enums\OrderPaymentMethod::NAPAS }}" />
                                {{ __('messages.checkout.napas') }}
                                <img width="40" src="{{ asset('front/app/assets/img/icon-napas.png') }}"
                                    alt="napas" />
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        {{-- @include('home.elements.invoice') --}}

                        <!-- cart note -->
                        <div class="mb-show">
                            <div class="cart__note">
                                <div class="cart__note__row">
                                    <span class="icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none">
                                            <path
                                                d="M22.44 12.4575L20.19 7.2075C20.1326 7.07194 20.0365 6.95627 19.9138 6.87492C19.7911 6.79356 19.6472 6.75012 19.5 6.75H17.25V5.25C17.25 5.05109 17.171 4.86032 17.0303 4.71967C16.8897 4.57902 16.6989 4.5 16.5 4.5H2.25C2.05109 4.5 1.86032 4.57902 1.71967 4.71967C1.57902 4.86032 1.5 5.05109 1.5 5.25V18C1.5 18.1989 1.57902 18.3897 1.71967 18.5303C1.86032 18.671 2.05109 18.75 2.25 18.75H3.855C4.02771 19.3855 4.40475 19.9466 4.92795 20.3465C5.45114 20.7465 6.09142 20.9632 6.75 20.9632C7.40858 20.9632 8.04886 20.7465 8.57205 20.3465C9.09525 19.9466 9.47229 19.3855 9.645 18.75H14.355C14.5277 19.3855 14.9048 19.9466 15.4279 20.3465C15.9511 20.7465 16.5914 20.9632 17.25 20.9632C17.9086 20.9632 18.5489 20.7465 19.0721 20.3465C19.5952 19.9466 19.9723 19.3855 20.145 18.75H21.75C21.9489 18.75 22.1397 18.671 22.2803 18.5303C22.421 18.3897 22.5 18.1989 22.5 18V12.75C22.4998 12.6495 22.4794 12.55 22.44 12.4575ZM17.25 8.25H19.005L20.61 12H17.25V8.25ZM6.75 19.5C6.45333 19.5 6.16332 19.412 5.91665 19.2472C5.66997 19.0824 5.47771 18.8481 5.36418 18.574C5.25065 18.2999 5.22094 17.9983 5.27882 17.7074C5.3367 17.4164 5.47956 17.1491 5.68934 16.9393C5.89912 16.7296 6.16639 16.5867 6.45736 16.5288C6.74834 16.4709 7.04994 16.5006 7.32403 16.6142C7.59811 16.7277 7.83238 16.92 7.9972 17.1666C8.16203 17.4133 8.25 17.7033 8.25 18C8.25 18.3978 8.09196 18.7794 7.81066 19.0607C7.52936 19.342 7.14782 19.5 6.75 19.5ZM14.355 17.25H9.645C9.47229 16.6145 9.09525 16.0534 8.57205 15.6534C8.04886 15.2535 7.40858 15.0367 6.75 15.0367C6.09142 15.0367 5.45114 15.2535 4.92795 15.6534C4.40475 16.0534 4.02771 16.6145 3.855 17.25H3V6H15.75V15.42C15.4085 15.6182 15.1095 15.8819 14.8701 16.1959C14.6307 16.51 14.4556 16.8682 14.355 17.25ZM17.25 19.5C16.9533 19.5 16.6633 19.412 16.4166 19.2472C16.17 19.0824 15.9777 18.8481 15.8642 18.574C15.7506 18.2999 15.7209 17.9983 15.7788 17.7074C15.8367 17.4164 15.9796 17.1491 16.1893 16.9393C16.3991 16.7296 16.6664 16.5867 16.9574 16.5288C17.2483 16.4709 17.5499 16.5006 17.824 16.6142C18.0981 16.7277 18.3324 16.92 18.4972 17.1666C18.662 17.4133 18.75 17.7033 18.75 18C18.75 18.3978 18.592 18.7794 18.3107 19.0607C18.0294 19.342 17.6478 19.5 17.25 19.5ZM21 17.25H20.145C19.9791 16.6076 19.6051 16.0384 19.0812 15.6313C18.5574 15.2242 17.9134 15.0022 17.25 15V13.5H21V17.25Z"
                                                fill="#6C6C6C" />
                                        </svg>
                                    </span>
                                    <span class="context">
                                        {{ __('messages.cart.note-delivery') }}
                                    </span>
                                </div>
    
                                <span class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        viewBox="0 0 16 16" fill="none">
                                        <path
                                            d="M10.8494 8.15039L5.84941 3.15039L5.14941 3.85039L9.44941 8.15039L5.14941 12.4504L5.84941 13.1504L10.8494 8.15039Z"
                                            fill="#6C6C6C" />
                                    </svg>
                                </span>
                            </div>
                        </div>

                        @if (($checkoutOff ?? 0) == 0)
                            <div class="custom-control custom-checkbox">
                                <input class="custom-control-input" style="z-index: 100" required id="agreement-checkbox"
                                    type="checkbox" value="" name="agree">
                                <label class="custom-control-label" for="agreement-checkbox">
                                    {{ __('messages.checkout.agree_with') }} <a
                                        href="https://giaobianhanh.com/chinh-sach-bao-mat-thong-tin-ca-nhan.html"
                                        target="_blank">{{ __('messages.checkout.privacy_policy') }}</a>
                                    {{ __('messages.checkout.and') }}
                                    <a href="https://giaobianhanh.com/chinh-sach-bao-hanh-va-doi-tra-hang.html"
                                        target="_blank">{{ __('messages.checkout.buy_condition') }}</a>
                                </label>
                            </div>



                            <small id="err-agreement-msg" class="fade" style="display: none; color:#eb5757 ">
                                {{ __('messages.checkout.err_agreement_msg') }}
                            </small>
                            @if(!$isMobile)
                                <button class="btn submit-btn mt-3 g-recaptcha mb-hide" id="submit-payment-btn"
                                        data-sitekey="6LfCZNQbAAAAAI2dChejG90G--QAdoVUR4N9jzBA" data-callback='onSubmit'
                                        data-action='submit'>
                                    {{ __('messages.checkout.pay-now') }}
                                </button>
                            @endif
                        @endif
                    </div>
                </form>
            </div>

            <!-- cart col right -->
            <div class="cart__col-right" id="cart-info-detail">
                <!-- cart note -->
                <div class="mb-hide">
                    <div class="cart__note">
                        <div class="cart__note__row">
                            <span class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <path
                                        d="M22.44 12.4575L20.19 7.2075C20.1326 7.07194 20.0365 6.95627 19.9138 6.87492C19.7911 6.79356 19.6472 6.75012 19.5 6.75H17.25V5.25C17.25 5.05109 17.171 4.86032 17.0303 4.71967C16.8897 4.57902 16.6989 4.5 16.5 4.5H2.25C2.05109 4.5 1.86032 4.57902 1.71967 4.71967C1.57902 4.86032 1.5 5.05109 1.5 5.25V18C1.5 18.1989 1.57902 18.3897 1.71967 18.5303C1.86032 18.671 2.05109 18.75 2.25 18.75H3.855C4.02771 19.3855 4.40475 19.9466 4.92795 20.3465C5.45114 20.7465 6.09142 20.9632 6.75 20.9632C7.40858 20.9632 8.04886 20.7465 8.57205 20.3465C9.09525 19.9466 9.47229 19.3855 9.645 18.75H14.355C14.5277 19.3855 14.9048 19.9466 15.4279 20.3465C15.9511 20.7465 16.5914 20.9632 17.25 20.9632C17.9086 20.9632 18.5489 20.7465 19.0721 20.3465C19.5952 19.9466 19.9723 19.3855 20.145 18.75H21.75C21.9489 18.75 22.1397 18.671 22.2803 18.5303C22.421 18.3897 22.5 18.1989 22.5 18V12.75C22.4998 12.6495 22.4794 12.55 22.44 12.4575ZM17.25 8.25H19.005L20.61 12H17.25V8.25ZM6.75 19.5C6.45333 19.5 6.16332 19.412 5.91665 19.2472C5.66997 19.0824 5.47771 18.8481 5.36418 18.574C5.25065 18.2999 5.22094 17.9983 5.27882 17.7074C5.3367 17.4164 5.47956 17.1491 5.68934 16.9393C5.89912 16.7296 6.16639 16.5867 6.45736 16.5288C6.74834 16.4709 7.04994 16.5006 7.32403 16.6142C7.59811 16.7277 7.83238 16.92 7.9972 17.1666C8.16203 17.4133 8.25 17.7033 8.25 18C8.25 18.3978 8.09196 18.7794 7.81066 19.0607C7.52936 19.342 7.14782 19.5 6.75 19.5ZM14.355 17.25H9.645C9.47229 16.6145 9.09525 16.0534 8.57205 15.6534C8.04886 15.2535 7.40858 15.0367 6.75 15.0367C6.09142 15.0367 5.45114 15.2535 4.92795 15.6534C4.40475 16.0534 4.02771 16.6145 3.855 17.25H3V6H15.75V15.42C15.4085 15.6182 15.1095 15.8819 14.8701 16.1959C14.6307 16.51 14.4556 16.8682 14.355 17.25ZM17.25 19.5C16.9533 19.5 16.6633 19.412 16.4166 19.2472C16.17 19.0824 15.9777 18.8481 15.8642 18.574C15.7506 18.2999 15.7209 17.9983 15.7788 17.7074C15.8367 17.4164 15.9796 17.1491 16.1893 16.9393C16.3991 16.7296 16.6664 16.5867 16.9574 16.5288C17.2483 16.4709 17.5499 16.5006 17.824 16.6142C18.0981 16.7277 18.3324 16.92 18.4972 17.1666C18.662 17.4133 18.75 17.7033 18.75 18C18.75 18.3978 18.592 18.7794 18.3107 19.0607C18.0294 19.342 17.6478 19.5 17.25 19.5ZM21 17.25H20.145C19.9791 16.6076 19.6051 16.0384 19.0812 15.6313C18.5574 15.2242 17.9134 15.0022 17.25 15V13.5H21V17.25Z"
                                        fill="#6C6C6C" />
                                </svg>
                            </span>
                            <span class="context">
                                {{ __('messages.cart.note-delivery') }}
                            </span>
                        </div>

                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                                fill="none">
                                <path
                                    d="M10.8494 8.15039L5.84941 3.15039L5.14941 3.85039L9.44941 8.15039L5.14941 12.4504L5.84941 13.1504L10.8494 8.15039Z"
                                    fill="#6C6C6C" />
                            </svg>
                        </span>
                    </div>
                </div>
                <!-- cart total -->
                <div class="cart__total">
                    <ul>
                        <li id="show-list-product">
                            <span id="show-list-product-number">1 </span> &nbsp;{{ __('messages.cart.product') }}
                            <span class="icon mb-hide">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                    viewBox="0 0 16 16" fill="none">
                                    <path
                                        d="M7.99902 11.0003L2.99902 6.00029L3.69902 5.30029L7.99902 9.60029L12.299 5.30029L12.999 6.00029L7.99902 11.0003Z"
                                        fill="#6C6C6C" />
                                </svg>
                            </span>
                            <!-- btn close -->
                            <span class="icon mb-show btn-close" id="btn-close-cart-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 14 14" fill="none">
                                    <path
                                        d="M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z"
                                        fill="#6C6C6C" />
                                </svg>
                            </span>
                            <!-- List Product -->
                            <ul class="list-product">
                            </ul>
                        </li>
                        <li>
                            {{ __('messages.cart.sub_total') }}
                            <b><span class="cart__total-temp-value"></span> VNĐ</b>
                        </li>
                        <li>
                            {{ __('messages.cart.discount') }}
                            <b><span class="cart__discount-value">0</span> VNĐ</b>
                        </li>
                        <li>
                            {{ __('messages.cart.shipping_fee') }}
                            <b><span class="cart__delivery-fee-value">0</span> VNĐ</b>
                        </li>
                        <li>
                            {{ __('messages.cart.shipping_fee_discount') }}
                            <b><span class="cart__delivery-fee-discount-value">0</span> VNĐ</b>
                        </li>
                    </ul>

                    <div class="line"></div>

                    <div class="cart__total-final">
                        <div class="row">
                            <span class="label">
                                {{ __('messages.cart.total_bill') }}
                            </span>
                            <span class="value">
                                <b class="cart__total-final">
                                    <span class="cart__total-value"></span> VNĐ
                                </b>
                            </span>
                        </div>
                        <div class="cart__total-vat">{{ __('messages.cart.include_vat') }}</div>
                    </div>
                </div>
            </div>

            <!-- cart floating bottom -->
            <div class="cart-floating-bottom mb-show">
                <div class="wrapper">
                    <div class="left-col">
                        <div class="label">{{ __('messages.cart.total_floating') }}
                            <div class="cart__total-see-detail" id="cta-see-detail-cart-info">
                                <span class="context">
                                    {{ __('messages.cart.see_detail') }}
                                </span>
                                <span class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        viewBox="0 0 16 16" fill="none">
                                        <path d="M8 5.3L13 10.3L12.3 11L8 6.7L3.7 11L3 10.3L8 5.3Z" fill="#FAAD4B" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <div class="value">
                            <span class="cart__total-value"></span> VNĐ
                        </div>
                    </div>
                    <div class="right-col">
                        @if($isMobile)
                            <button class="btn submit-btn payment-btn btnInformationCheckout" id="submit-payment-btn"
                                    data-sitekey="6LfCZNQbAAAAAI2dChejG90G--QAdoVUR4N9jzBA" data-callback='onSubmit'
                                    data-action='submit'>
                                {{ __('messages.checkout.pay-now') }}
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal Confirm Delete Product --}}
    @include('home.elements.shipment-note')
@endsection