@extends('layouts.app')
@section('seo')
<title>Datos Personales | {{infoEmail()->host}}</title>
    <meta name="description" content="Datos Personales." />
    <meta name="keywords" content="Datos Personales.">
@stop
@section('content')
    <!-- Page Banner Section Start -->
    <div class="page-banner-section section bg-image" data-bg="/assets/images/bg/breadcrumb.png">
        <div class="container">
            <div class="row">
                <div class="col">

                    <div class="page-banner text-left">
                        <h1>Datos Personales</h1>
                        <ul class="page-breadcrumb">
                            <li><a href="/">Inicio</a></li>
                            <li>Dirección de envío</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- Page Banner Section End -->
    <!--Checkout section start-->
    <div class="checkout-section section pt-90 pt-lg-70 pt-md-60 pt-sm-50 pt-xs-40  pb-70 pb-lg-50 pb-md-40 pb-sm-30 pb-xs-20">
        <div class="container">
            <div class="row">
                <div class="col-12">

                    <!-- Checkout Form Start-->
                    <form action="{{ url('api/create-order') }}" class="checkout-form" id="pay-form">
                        @csrf
                        <input type="hidden" name="type" value="form">
                        <div class="row row-40">

                            <div class="col-lg-7">

                                <!-- Billing Address -->
                                <div id="billing-form" class="mb-10">
                                    <h4 class="checkout-title">Detalles de envío</h4>

                                    <div class="row">
                                        <div class="col-md-6 col-12 mb-20">
                                            <label>País/región <span class="text-danger">*</span></label>
                                            <select class="nice-select" name="country" >
                                                <option value="ES" selected="selected">España</option>
                                    <option value="AU">Australia</option>
                                    <option value="AT">Austria</option>
                                    <option value="DE">Alemania</option>
                                    <option value="BE">Bélgica</option>
                                    <option value="BG">Bulgaria</option>
                                    <option value="BY">Bielorrusia</option>
                                    <option value="CA">Canadá</option>
                                    <option value="HR">Croacia</option>
                                    <option value="CY">Chipre</option>
                                    <option value="KR">Corea del Sur</option>
                                    <option value="CO">Colombia</option>
                                    <option value="CL">Chile</option>
                                    <option value="DK">Dinamarca</option>
                                    <option value="SK">Eslovaquia</option>
                                    <option value="SI">Eslovenia</option>
                                    <option value="US">Estados Unidos</option>
                                    <option value="FI">Finlandia</option>
                                    <option value="PH">Filipinas</option>
                                    <option value="FR">Francia</option>
                                    <option value="GR">Grecia</option>
                                    <option value="HU">Hungría</option>
                                    <option value="IE">Irlanda</option>
                                    <option value="IT">Italia</option>
                                    <option value="IL">Israel</option>
                                    <option value="JP">Japón</option>
                                    <option value="KZ">Kazajistán</option>
                                    <option value="LV">Letonia</option>
                                    <option value="LU">Luxemburgo</option>
                                    <option value="MX">México</option>
                                    <option value="MY">Malasia</option>
                                    <option value="NO">Noruega</option>
                                    <option value="NL">Países Bajos</option>
                                    <option value="PE">Perú</option>
                                    <option value="PT">Portugal</option>
                                    <option value="PL">Polonia</option>
                                    <option value="GB">Reino Unido</option>
                                    <option value="CZ">República Checa</option>
                                    <option value="RU">Rusia</option>
                                    <option value="RO">Rumanía</option>
                                    <option value="SG">Singapur</option>
                                    <option value="SE">Suecia</option>
                                    <option value="CH">Suiza</option>
                                    <option value="TH">Tailandia</option>
                                    <option value="UA">Ucrania</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 col-12 mb-20">
                                            <label>Nombre y Apellidos <span class="text-danger">*</span></label>
                                            <input type="text" name="name" data-validate="required" >
                                        </div>

                                        <div class="col-md-6 col-12 mb-20">
                                            <label>Ciudad <span class="text-danger">*</span></label>
                                            <input type="text" name="city" data-validate="required" >
                                        </div>



                                        <div class="col-md-6 col-12 mb-20">
                                            <label>Correo electrónico <span class="text-danger">*</span></label>
                                            <input type="email" name="email" data-validate="required" >
                                        </div>

                                        <div class="col-md-12 col-12 mb-20">
                                            <label>Número de teléfono <span class="text-danger">*</span></label>
                                            <input type="text" name="phone" data-validate="required" >
                                        </div>


                                        <div class="col-12 mb-20">
                                            <label>Línea de dirección 1 <span class="text-danger">*</span></label>
                                            <input type="text" name="street1" data-validate="required" >

                                        </div>



                                        <div class="col-md-6 col-12 mb-20">
                                            <label>Provincia/Ciudad autónoma <span class="text-danger">*</span></label>
                                            <input type="text" name="state" data-validate="required" >
                                        </div>

                                        <div class="col-md-6 col-12 mb-20">
                                            <label>Código postal <span class="text-danger">*</span></label>
                                            <input type="text" name="postal" data-validate="required" >
                                        </div>


                                    </div>

                                </div>



                            </div>

                            <div class="col-lg-5">
                                <div class="row">

                                    <!-- Cart Total -->
                                    <div class="col-12 mb-60">

                                        <h4 class="checkout-title">Resumen de la compra</h4>

                                        <div class="checkout-cart-total">

                                            <h4>Producto <span>Subtotal</span></h4>

                                            <ul>
                                                @foreach($carts as $cart)
                                                    <li>Batería {{ $cart->product->jianjie2 }} {{ $cart->product->dl }} - ({{ $cart->product->jianjie1 }}) X {{ $cart->numbers }} <span>{{ symbol($cart->singletotal) }}</span></li>
                                                @endforeach

                                            </ul>

                                            <p>Subtotal <span>{{ $subtotal }} €</span></p>
                                            <p>Coste de envío <span>Gratis</span></p>
                                            <p>Impuestos <span>{{ symbol($tax) }}</span></p>
                                            <h4>Total (impuestos inc.) <span>{{ $total }} €</span></h4>

                                        </div>

                                    </div>

                                    <!-- Payment Method -->
                                    <div class="col-12 mb-30">
                                        <div class="checkout-payment" style="margin-top: 30px;">
                                            <h4 class="mb-3">Forma de pago</h4>
                                            <span style="color: #818ea0;">Todas las transacciones son seguras y están encriptadas.</span>
                                            <span class="spacer" style="margin-bottom: 20px;"></span>
                                            <div>
                                                <div class="d-flex align-items-start">
                                                    <label>
                                                        <input type="radio" name="payment-option" value="paypal" id="paypal-radio" checked/>
                                                        <p style="text-align: center;">PayPal</p>
                                                        <svg style="width: 100px;" class="w-12 h-12 mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 26"><path fill="transparent" d="M0 0h40v26H0z"></path><path fill="transparent" d="M0 0h40v26H0z"></path><path fill="#003086" d="M25.36 5.36c-.84-.95-2.34-1.35-4.27-1.35H15.5a.8.8 0 0 0-.79.67L12.4 19.44a.48.48 0 0 0 .47.56h3.45l.87-5.5-.03.17a.8.8 0 0 1 .79-.67h1.64c3.22 0 5.74-1.31 6.48-5.1l.05-.32a3.57 3.57 0 0 0-.75-3.22"></path><path fill="#003086" d="M25.36 5.36c-.84-.95-2.34-1.35-4.27-1.35H15.5a.8.8 0 0 0-.79.67L12.4 19.44a.48.48 0 0 0 .47.56h3.45l.87-5.5-.03.17a.8.8 0 0 1 .79-.67h1.64c3.22 0 5.74-1.31 6.48-5.1l.05-.32a3.57 3.57 0 0 0-.75-3.22"></path><path fill="#002f85" d="M18.1 8.6a.7.7 0 0 1 .7-.6h4.38a9.15 9.15 0 0 1 1.45.11l.37.07.34.09.17.05a3.96 3.96 0 0 1 .6.26 3.57 3.57 0 0 0-.75-3.22c-.84-.95-2.34-1.35-4.27-1.35H15.5a.8.8 0 0 0-.79.67L12.4 19.44a.48.48 0 0 0 .47.56h3.45l.87-5.5.93-5.9z"></path><path fill="#009bdd" d="m26.11 8.58-.05.32c-.74 3.79-3.26 5.1-6.48 5.1h-1.64a.8.8 0 0 0-.79.67L16.31 20l-.24 1.5a.42.42 0 0 0 .42.5h2.9a.7.7 0 0 0 .7-.6l.02-.15.55-3.47.04-.2a.7.7 0 0 1 .69-.58h.43c2.82 0 5.03-1.15 5.67-4.46a3.8 3.8 0 0 0-.58-3.35 2.78 2.78 0 0 0-.8-.61"></path><path fill="#012069" d="M25.34 8.27 25 8.18a6.55 6.55 0 0 0-.37-.07 9.1 9.1 0 0 0-1.45-.1H18.8a.7.7 0 0 0-.7.59l-.92 5.9-.03.17a.8.8 0 0 1 .79-.67h1.64c3.22 0 5.74-1.31 6.48-5.1l.05-.32a3.98 3.98 0 0 0-.6-.26z"></path></svg>
                                                    </label>
                                                    <label>
                                                        <input id="card-radio" value="card" name="payment-option" type="radio"/>
                                                        <p style="text-align: center;">Tarjeta de crédito</p>
                                                        <svg style="width: 100px;" class="w-12 h-12 mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 35">
                                                            <defs>
                                                                <style>
                                                                    .cls-1 {
                                                                        fill: #faa61a;
                                                                    }

                                                                    .cls-2 {
                                                                        fill: #016fd0;
                                                                    }

                                                                    .cls-3 {
                                                                        fill: #fff;
                                                                    }

                                                                    .cls-4 {
                                                                        fill: #eb001b;
                                                                    }

                                                                    .cls-5 {
                                                                        fill: #00579f;
                                                                    }

                                                                    .cls-6 {
                                                                        fill: #ff5f00;
                                                                    }

                                                                    .cls-7 {
                                                                        fill: #f79e1b;
                                                                    }
                                                                </style>
                                                            </defs>
                                                            <g>
                                                                <polygon id="polygon9" class="cls-5" points="12.49 12.59 10.62 12.59 11.79 5.37 13.66 5.37 12.49 12.59"></polygon>
                                                                <path id="path11" class="cls-5" d="M19.26,5.54c-.37-.15-.95-.31-1.68-.31-1.84,0-3.14.98-3.15,2.39-.02,1.04.93,1.61,1.64,1.96.72.35.97.58.97.9,0,.48-.58.71-1.12.71-.75,0-1.15-.12-1.75-.38l-.25-.12-.26,1.62c.44.2,1.25.38,2.08.38,1.96,0,3.24-.97,3.25-2.47,0-.82-.49-1.45-1.57-1.97-.65-.33-1.05-.55-1.05-.89,0-.31.34-.62,1.08-.62.61-.02,1.05.13,1.39.28l.17.08.25-1.56h0Z"></path>
                                                                <path id="path13" class="cls-5" d="M21.75,10.03c.15-.42.75-2.02.75-2.02,0,.02.15-.42.25-.69l.13.62s.35,1.73.43,2.09h-1.55ZM24.05,5.37h-1.44c-.45,0-.78.13-.98.6l-2.77,6.63h1.96s.32-.89.39-1.08h2.4c.05.25.22,1.08.22,1.08h1.73l-1.51-7.22h0Z"></path>
                                                                <path id="path15" class="cls-5" d="M9.06,5.37l-1.83,4.93-.2-1c-.34-1.15-1.4-2.41-2.58-3.03l1.68,6.32h1.98l2.94-7.22h-1.98Z"></path>
                                                                <path id="path17" class="cls-1" d="M5.54,5.37h-3.01l-.03.15c2.34.6,3.9,2.04,4.54,3.78l-.65-3.32c-.11-.46-.44-.59-.85-.61h0Z"></path>
                                                            </g>
                                                            <g>
                                                                <rect class="cls-6" x="11.68" y="17.05" width="6.24" height="11.21"></rect>
                                                                <path class="cls-4" d="M12.08,22.65c0-2.19,1-4.25,2.72-5.6-3.09-2.43-7.57-1.9-10.01,1.2-2.43,3.09-1.9,7.57,1.2,10.01,2.58,2.03,6.22,2.03,8.81,0-1.72-1.35-2.72-3.42-2.72-5.6Z"></path>
                                                                <path class="cls-7" d="M26.33,22.65c0,3.94-3.19,7.13-7.13,7.13-1.6,0-3.15-.54-4.4-1.52,3.09-2.43,3.63-6.91,1.2-10.01-.35-.45-.75-.85-1.2-1.2,3.09-2.43,7.57-1.9,10.01,1.2.99,1.26,1.52,2.81,1.52,4.4Z"></path>
                                                            </g>
                                                            <g id="layer1">
                                                                <path id="path3078" class="cls-2" d="M28.67,5.22h23.77v12.83l-1.18,1.84,1.18,1.64v7.46h-23.77v-12.1l.74-.85-.74-.81V5.22Z"></path>
                                                                <path id="path3082" class="cls-3" d="M33.29,21.79v-3.73h3.95l.42.55.44-.55h14.34v3.47s-.38.25-.81.26h-7.94l-.48-.59v.59h-1.57v-1s-.21.14-.68.14h-.53v.86h-2.37l-.42-.56-.43.56h-3.93Z"></path>
                                                                <path id="path3080" class="cls-3" d="M28.67,15.24l.89-2.08h1.54l.51,1.16v-1.16h1.92l.3.84.29-.84h8.6v.42s.45-.42,1.19-.42h2.79s.5,1.16.5,1.16v-1.16h1.6l.44.66v-.66h1.62v3.73h-1.62l-.42-.66v.66h-2.36l-.24-.59h-.63l-.23.59h-1.6c-.64,0-1.05-.41-1.05-.41v.41h-2.41l-.48-.59v.59h-8.96l-.24-.59h-.63l-.24.59h-1.1v-1.65Z"></path>
                                                                <path id="path3046" class="cls-2" d="M29.88,13.62l-1.2,2.79h.78l.22-.56h1.29l.22.56h.8l-1.2-2.79h-.91ZM30.32,14.27l.39.98h-.79l.39-.98Z"></path>
                                                                <path id="path3048" class="cls-2" d="M32.07,16.42v-2.79h1.11s.65,1.81.65,1.81l.63-1.81h1.1v2.79h-.7v-2.06l-.74,2.06h-.61l-.74-2.06v2.06h-.7Z"></path>
                                                                <path id="path3050" class="cls-2" d="M36.04,16.42v-2.79h2.28v.63h-1.57v.48h1.54v.59h-1.54v.5h1.57v.61h-2.28Z"></path>
                                                                <path id="path3052" class="cls-2" d="M38.73,13.62v2.79h.7v-.99h.29l.84.99h.85l-.92-1.03c.38-.03.77-.36.77-.86,0-.59-.46-.91-.98-.91h-1.55ZM39.43,14.25h.8c.19,0,.33.15.33.29,0,.19-.18.29-.32.29h-.81v-.59h0Z"></path>
                                                                <path id="path3054" class="cls-2" d="M42.26,16.42h-.71v-2.79h.71v2.79Z"></path>
                                                                <path id="path3056" class="cls-2" d="M43.95,16.42h-.15c-.74,0-1.2-.59-1.2-1.39s.45-1.41,1.39-1.41h.77v.66h-.8c-.38,0-.65.3-.65.75,0,.54.31.77.75.77h.18l-.29.61Z"></path>
                                                                <path id="path3058" class="cls-2" d="M45.47,13.62l-1.2,2.79h.78l.22-.56h1.29l.22.56h.8l-1.2-2.79h-.91ZM45.91,14.27l.39.98h-.79l.39-.98h0Z"></path>
                                                                <path id="path3060" class="cls-2" d="M47.66,16.42v-2.79h.89l1.13,1.76v-1.76h.7v2.79h-.86l-1.16-1.8v1.8h-.7Z"></path>
                                                                <path id="path3062" class="cls-2" d="M33.76,21.31v-2.79h2.28v.63h-1.57v.48h1.54v.59h-1.54v.5h1.57v.61h-2.28Z"></path>
                                                                <path id="path3064" class="cls-2" d="M44.93,21.31v-2.79h2.28v.63h-1.57v.48h1.53v.59h-1.53v.5h1.57v.61h-2.28Z"></path>
                                                                <path id="path3066" class="cls-2" d="M36.13,21.31l1.11-1.38-1.14-1.41h.88l.68.87.68-.87h.85l-1.12,1.4,1.11,1.4h-.88l-.66-.86-.64.86h-.87Z"></path>
                                                                <path id="path3068" class="cls-2" d="M39.26,18.51v2.79h.72v-.88h.74c.62,0,1.09-.33,1.09-.97,0-.53-.37-.94-1-.94h-1.54ZM39.98,19.15h.77c.2,0,.34.12.34.32,0,.19-.14.32-.35.32h-.77v-.64h0Z"></path>
                                                                <path id="path3072" class="cls-2" d="M42.11,18.51v2.79h.7v-.99h.29l.84.99h.85l-.92-1.03c.38-.03.77-.36.77-.86,0-.59-.46-.91-.98-.91h-1.55,0ZM42.81,19.14h.8c.19,0,.33.15.33.29,0,.19-.18.29-.32.29h-.81v-.59Z"></path>
                                                                <path id="path3074" class="cls-2" d="M47.54,21.31v-.61h1.4c.21,0,.3-.11.3-.23s-.09-.24-.3-.24h-.63c-.55,0-.86-.33-.86-.84,0-.45.28-.88,1.1-.88h1.36l-.29.63h-1.18c-.22,0-.29.12-.29.23s.09.24.26.24h.66c.61,0,.88.35.88.8,0,.49-.3.89-.91.89h-1.49Z"></path>
                                                                <path id="path3076" class="cls-2" d="M50.1,21.31v-.61h1.4c.21,0,.3-.11.3-.23s-.09-.24-.3-.24h-.63c-.55,0-.86-.33-.86-.84,0-.45.28-.88,1.1-.88h1.36l-.29.63h-1.18c-.22,0-.29.12-.29.23s.09.24.26.24h.66c.61,0,.88.35.88.8,0,.49-.3.89-.91.89h-1.49Z"></path>
                                                            </g>
                                                        </svg>
                                                    </label>
                                                </div>
                                            </div>
                                            <div id="checkout-form">
                                                <a style="height: 45px" id="card-number-field-container"></a>
                                                <a style="height: 45px" id="card-expiry-field-container"></a>
                                                <a style="height: 45px" id="card-cvv-field-container"></a>

                                                <button id="multi-card-field-button" type="button" class="btn btn-secondary btn-md mt-4" style="width: 100%;">
                                                    Comprar ahora
                                                </button>
                                            </div>
                                            <div class="order-button-payment mt-20">
                                                <button id="form-button" type="submit" class="btn btn-secondary btn-md mt-4" style="width: 100%;">
                                                    Comprar ahora
                                                </button>
                                            </div>
                                            <p style="text-align: center;">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none" class="page__login-lock" data-v-ac2171a7=""><rect x="1.31875" y="4.83267" width="9.3625" height="7.02917" stroke="#198055" stroke-width="1.1375"></rect><mask id="path-2-inside-1_37_6815" fill="white"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.16795 5.04181V3.68056C8.16795 2.48317 7.19728 1.5125 5.99989 1.5125C4.80251 1.5125 3.83184 2.48317 3.83184 3.68056V5.04181H2.69434V3.68056C2.69434 1.85495 4.17428 0.375 5.99989 0.375C7.8255 0.375 9.30545 1.85495 9.30545 3.68056V5.04181H8.16795Z"></path></mask><path d="M8.16795 5.04181H7.29295V5.91681H8.16795V5.04181ZM3.83184 5.04181V5.91681H4.70684V5.04181H3.83184ZM2.69434 5.04181H1.81934V5.91681H2.69434V5.04181ZM9.30545 5.04181V5.91681H10.1804V5.04181H9.30545ZM9.04295 5.04181V3.68056H7.29295V5.04181H9.04295ZM9.04295 3.68056C9.04295 1.99992 7.68053 0.6375 5.99989 0.6375V2.3875C6.71403 2.3875 7.29295 2.96642 7.29295 3.68056H9.04295ZM5.99989 0.6375C4.31926 0.6375 2.95684 1.99992 2.95684 3.68056H4.70684C4.70684 2.96642 5.28576 2.3875 5.99989 2.3875V0.6375ZM2.95684 3.68056V5.04181H4.70684V3.68056H2.95684ZM2.69434 5.91681H3.83184V4.16681H2.69434V5.91681ZM1.81934 3.68056V5.04181H3.56934V3.68056H1.81934ZM5.99989 -0.5C3.69103 -0.5 1.81934 1.3717 1.81934 3.68056H3.56934C3.56934 2.3382 4.65753 1.25 5.99989 1.25V-0.5ZM10.1804 3.68056C10.1804 1.3717 8.30875 -0.5 5.99989 -0.5V1.25C7.34225 1.25 8.43045 2.3382 8.43045 3.68056H10.1804ZM10.1804 5.04181V3.68056H8.43045V5.04181H10.1804ZM8.16795 5.91681H9.30545V4.16681H8.16795V5.91681Z" fill="#198055" mask="url(#path-2-inside-1_37_6815)"></path><rect x="5.80566" y="6.59741" width="0.875" height="3.5" fill="#198055"></rect></svg>
                                                Pago seguro con cifrado SSL
                                            </p>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <!--Checkout section end-->
@Stop
@section('js')
    <script src="/static/js/form-validate.js"></script>
    <script>
        let validateForm = new FormValidator('pay-form');
    </script>
    <script src="{!! generateJs() !!}&enable-funding=card,credit,venmo&vault=true&components=buttons,googlepay,applepay,funding-eligibility,marks,card-fields,payment-fields"></script>
    <script src="/static/js/sweetalert2.min.js"></script>
    <script>

        document.getElementById('form-button').addEventListener('click',function () {
            const validator = new FormValidator('pay-form');
            // validator.options.errorMessageClass ='error-message text-danger';
            const isFormValid = validator.validateForm();

            if (isFormValid) {
                document.getElementById('pay-form').submit();
                // 可以在这里执行表单提交等操作
            } else {
                console.log('表单验证失败');
            }
        })
    </script>
    <script>
        // paypal
        //     .Marks({
        //         fundingSource: paypal.FUNDING.PAYPAL,
        //     })
        //     .render("#paypal-mark");
        // paypal
        //     .Marks({
        //         fundingSource: paypal.FUNDING.CARD,
        //     })
        //     .render("#card-mark");
        // Custom styles object (optional)
        const styleObject = {
            input: {
                "font-size": "16px",
                "font-weight": "lighter",
                "height": "50px",
                color: "blue",
            },
            ".invalid": {
                color: "purple",
            },
            ":hover": {
                color: "orange",
            },
            ".purple": {
                color: "purple",
            },
        };
        // Create the card fields component and define callbacks
        const cardField = paypal.CardFields({
            style: styleObject,
            createOrder: function (data, actions) {
                const form = document.getElementById('pay-form');
                const formData = new FormData(form);
                const dataObj = {};
                formData.forEach((value, key) => {
                    dataObj[key] = value;
                });
                return fetch("/api/create-order", {
                    method: "post",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({type: 'card', data: dataObj})
                })
                    .then((res) => {
                        return res.json();
                    })
                    .then((orderData) => {
                        return orderData.id;
                    });
            },
            onApprove: function (data, actions) {
                const {orderID} = data;
                return fetch('/api/capture-order', {
                    method: "post",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({order_id: orderID, type: 'card'})
                })
                    .then((res) => {
                        return res.json();
                    })
                    .then((orderData) => {
                        // Redirect to success page
                    });
            },
            onError: function (err) {
                console.log(err)
            },
            inputEvents: {
                onChange: function (data) {
                    // Handle a change event in any of the fields
                    let formContainer = document.getElementById('checkout-form');
                    formContainer.className = data.isFormValid ? 'valid' : 'invalid'
                },
                onFocus: function (data) {
                    // Handle a focus event in any of the fields
                },
                onBlur: function (data) {
                    // Handle a blur event in any of the fields
                },
                onInputSubmitRequest: function (data) {
                    // Handle an attempt to submit the entire card form
                    // while focusing any of the fields
                    if (data.isFormValid) {
                        // Submit the card form for the payer
                    } else {
                        console.log('error')
                        // Inform payer that some fields aren't valid
                    }
                }
            },
        });
        // Define the container for each field and the submit button
        // const cardNameContainer = document.getElementById("card-name-field-container");
        const cardNumberContainer = document.getElementById("card-number-field-container");
        const cardCvvContainer = document.getElementById("card-cvv-field-container");
        const cardExpiryContainer = document.getElementById("card-expiry-field-container");
        const multiCardFieldButton = document.getElementById("multi-card-field-button");
        // Render each field after checking for eligibility
        if (cardField.isEligible()) {
            // const nameField = cardField.NameField();
            // nameField.render(cardNameContainer);
            const numberField = cardField.NumberField({
                placeholder:'Número de tarjeta'
            });
            numberField.render(cardNumberContainer);
            const cvvField = cardField.CVVField({
                placeholder:'CVV'
            });
            cvvField.render(cardCvvContainer);
            const expiryField = cardField.ExpiryField({
                placeholder:'Fecha de vencimiento'
            });
            expiryField.render(cardExpiryContainer);
            // Add click listener to the submit button and call the submit function on the CardField component
            multiCardFieldButton.addEventListener("click", () => {
                cardField.getState().then((data) => {
                    // Submit only if the current
                    // state of the form is valid
                    //表单验证
                    var validator =  new FormValidator('pay-form');

                    if (validator.validateForm()) {
                        if (data.isFormValid) {
                            const loadingAlert = Swal.fire({
                                title: 'Estamos procesando su pago con tarjeta de crédito.',
                                html: 'Por favor espere...',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });
                            cardField.submit().then(() => {
                                //Submit success
                                loadingAlert.close();
                                window.location.href = '{{ url('paypal/success') }}';
                            }).catch((error) => {
                                //Submit error
                                loadingAlert.close();
                                window.location.href = '{{ url('paypal/fail') }}';
                            });
                        } else {
                            for (i in data.fields) {
                                switch (i) {
                                    case 'cardCvvField':
                                        cvvField.addClass('invalid');
                                        break;
                                    case 'cardExpiryField':
                                        expiryField.addClass('invalid');
                                        break;
                                    case 'cardNameField':
                                        numberField.addClass('invalid');
                                        break;
                                }
                            }
                        }
                    }
                    return false;
                });
            });
        }
        document.getElementById('checkout-form').style.display = 'none';
        document.querySelectorAll("input[name=payment-option]").forEach((el) => {
            el.addEventListener("change", (event) => {
                switch (event.target.value) {
                    case "paypal":
                        // document.getElementById("ideal-fields").style.display = "none";
                        // document.getElementById("ideal-btn").style.display = "none";
                        // document.getElementById("paypal-btn").style.display = "block";
                        document.getElementById('checkout-form').style.display = 'none';
                        document.getElementById('form-button').style.display = 'block';
                        break;
                    case "card":
                        // document.getElementById("ideal-fields").style.display = "block";
                        // document.getElementById("ideal-btn").style.display = "block";
                        // document.getElementById("paypal-btn").style.display = "none";
                        document.getElementById('checkout-form').style.display = 'block';
                        document.getElementById('form-button').style.display = 'none';
                        break;
                    default:
                        break;
                }
            });
        });
    </script>
@stop