@extends('layouts.app')
@section('content')
<main class="cart">
    <section class="section sec-main">
        <div class="sxs-container sec-main__con0">
            <form id="cart-payment-form" class="sxs-form sec-main__con1 row row--f">
                <div class="sec-main__flds col col--f">
                    <div class="row row--f">
                        <div class="col col--f">
                            <header class="sec-main__flds-hdr"><span class="sec-main__flds-hdr-idx">1</span><span>Datos de compra</span></header>
                            <fieldset class="sec-main__flds-fldset row row--f">
                                <div class="col col--f md:col-50">
                                    <div id="frame-compra_correo"  class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input type="email" spellcheck="false" required autocapitalize="false" id="f-compra_correo" inputmode="email" class="sxs-fcontrol" value="" name="compra_correo">
                                            <label for="f-compra_correo" class="sxs-flabel"><span class="sxs-flabel__text">Correo electrónico</span></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50">
                                    <div id="frame-compra_nombres" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-compra_nombres" class="sxs-fcontrol" value="" name="compra_nombres">
                                            <label for="f-compra_nombres" class="sxs-flabel"><span class="sxs-flabel__text">Nombres</span></label></div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50">
                                    <div id="frame-compra_apellidos" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-compra_apellidos" class="sxs-fcontrol" value="" name="compra_apellidos">
                                            <label for="f-compra_apellidos" class="sxs-flabel"><span class="sxs-flabel__text">Apellidos</span></label></div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50">
                                    <div id="frame-compra_celular"  class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-compra_celular" inputmode="tel" class="sxs-fcontrol" value="" name="compra_celular">
                                            <label for="f-compra_celular" class="sxs-flabel"><span class="sxs-flabel__text">N° de celular</span></label></div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="col col--f">
                            <header class="sec-main__flds-hdr"><span class="sec-main__flds-hdr-idx">2</span><span>Datos de entrega</span></header>
                            <fieldset class="sec-main__flds-fldset row row--f">
                                <div class="col col--f md:col-33">
                                    <div id="frame-entrega_nombres" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_nombres" class="sxs-fcontrol" value="" name="entrega_nombres">
                                        <label for="f-entrega_nombres" class="sxs-flabel"><span class="sxs-flabel__text">Nombres</span></label></div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-33">
                                    <div id="frame-entrega_apellidos" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_apellidos" class="sxs-fcontrol" value="" name="entrega_apellidos">
                                            <label for="f-entrega_apellidos" class="sxs-flabel"><span class="sxs-flabel__text">Apellidos</span></label></div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-33">
                                    <div id="frame-entrega_direccion" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_direccion" class="sxs-fcontrol" value="" name="entrega_direccion">
                                            <label for="f-entrega_direccion" class="sxs-flabel"><span class="sxs-flabel__text">Colonia</span></label></div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50 lg:col-33">
                                    <div id="frame-entrega_num_interior" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_num_interior" inputmode="numeric" class="sxs-fcontrol" value="" name="entrega_num_interior">
                                            <label for="f-entrega_num_interior" class="sxs-flabel"><span class="sxs-flabel__text">N° Interior</span></label></div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50 lg:col-33">
                                    <div id="frame-entrega_num_exterior" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_num_exterior" inputmode="numeric" class="sxs-fcontrol" value="" name="entrega_num_exterior">
                                            <label for="f-entrega_num_exterior" class="sxs-flabel">
                                                <span class="sxs-flabel__text">N° Exterior</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50 lg:col-33">
                                    <div id="frame-entrega_entre_calle" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_entre_calle" class="sxs-fcontrol" value="" name="entrega_entre_calle">
                                            <label for="f-entrega_entre_calle" class="sxs-flabel"><span class="sxs-flabel__text">Entre Calle</span></label></div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50 lg:col-33">
                                    <div id="frame-entrega_y_calle" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_y_calle" class="sxs-fcontrol" value="" name="entrega_y_calle">
                                            <label for="f-entrega_y_calle" class="sxs-flabel"><span class="sxs-flabel__text">Y Calle</span></label></div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-33">
                                    <div id="frame-entrega_tipo_destino" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_tipo_destino" class="sxs-fcontrol" value="" name="entrega_tipo_destino">
                                            <label for="f-entrega_tipo_destino" class="sxs-flabel">
                                                <span class="sxs-flabel__text">Calle</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-33">
                                    <div id="frame-entrega_pais" class="sxs-fcon sxs-fcon--v1 select frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox"><i class="icon icon-flecha1 abajo"></i>                                        
                                            <select id="entrega_pais" name="entrega_pais" class="sxs-fcontrol sxs-fcontrol--select">
                                                <option value="0" selected>País / Región</option>
                                                <option value="MX">México</option>
                                            </select>
                                            <label for="f-entrega_pais" class="sxs-flabel">
                                                <span class="sxs-flabel__text">País / Región</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50 lg:col-33">
                                    <div id="frame-entrega_estado" class="sxs-fcon sxs-fcon--v1 select frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox"><i class="icon icon-flecha1 abajo"></i>
                                        <select id="entrega_estado" name="entrega_estado" class="sxs-fcontrol sxs-fcontrol--select">
                                        </select>
                                            <label for="f-entrega_estado" class="sxs-flabel">
                                                <span class="sxs-flabel__text">Estado</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-33">
                                    <div id="frame-entrega_ciudad" class="sxs-fcon sxs-fcon--v1 select frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox"><i class="icon icon-flecha1 abajo"></i>
                                        <select disabled="" id="entrega_ciudad" name="entrega_ciudad" class="sxs-fcontrol sxs-fcontrol--select">
                                                <option value="">Ciudad</option>
                                            </select>
                                            <label for="f-entrega_ciudad" class="sxs-flabel">
                                                <span class="sxs-flabel__text">Ciudad</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50 lg:col-33">
                                    <div id="frame-entrega_codigo_postal" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_codigo_postal" inputmode="numeric" class="sxs-fcontrol" value="" name="entrega_codigo_postal">
                                            <label for="f-entrega_codigo_postal" class="sxs-flabel">
                                                <span class="sxs-flabel__text">Código postal</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f md:col-50 lg:col-33">
                                    <div id="frame-entrega_telefono" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <input spellcheck="false" required autocapitalize="false" id="f-entrega_telefono" inputmode="tel" class="sxs-fcontrol" value="" name="entrega_telefono">
                                            <label for="f-entrega_telefono" class="sxs-flabel">
                                                <span class="sxs-flabel__text">Teléfono</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f">
                                    <div id="frame-entrega_referencias" class="sxs-fcon sxs-fcon--v1 textarea frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox">
                                            <textarea required spellcheck="false" required autocapitalize="false" id="f-entrega_referencias" name="entrega_referencias" class="sxs-fcontrol"></textarea>
                                            <label for="f-entrega_referencias" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Referencias (Por favor indique el color de la fachada o cualquier señal de referencia que ayude a la persona de reparto a ubicar su domicilio con mayor facilidad.)</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col--f">
                                    <div id="frame-entrega_envio_metodo" class="sxs-fcon sxs-fcon--v1 select frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                        <div class="sxs-fbox"><i class="icon icon-flecha1 abajo"></i>
                                        <select id="entrega_envio_metodo" name="entrega_envio_metodo" class="sxs-fcontrol sxs-fcontrol--select">
                                                <<option value="0">Métodos de envío</option>
                                                @if($objAllpackage!=null)
                                                @foreach($objAllpackage as $a)
                                                <option value="{{$a['id']}}">{{$a['titulo']}}</option>
                                                @endforeach
                                                @endif    
                                            </select>
                                            <label for="f-entrega_envio_metodo" class="sxs-flabel">
                                                <span class="sxs-flabel__text">Métodos de envío</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="col col--f">
                            <header  class="sec-main__flds-hdr"><span class="sec-main__flds-hdr-idx">3</span><span>Dirección de facturación</span></header>
                            <div id="dirfac" class="sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--is-filled sxs-fcon--has-feedback">
                                <div class="sxs-fbox">
                                    <input id="f-billing" class="sxs-fcontrol sr-only" type="checkbox" checked="" name="billing">
                                    <label for="f-billing" class="sxs-checkbox__label">
                                        <span class="sxs-checkbox__box" aria-hidden="true">
                                        <i class="icon icon-misc1 check"></i></span>
                                        <span class="sxs-checkbox__text">
                                            <span class="sec-main__flds-cb--lg">Usar la dirección de envío como <b>dirección de facturación</b>.</span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                            <fieldset id="otherf" class="sec-main__flds-fldset sec-main__flds-fldset--mt row row--f">
                            <div class="col col--f md:col-33">
                                <div id="frame-facturacion_nombres" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_nombres" class="sxs-fcontrol" value="" name="facturacion_nombres">
                                        <label for="f-facturacion_nombres" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Nombres</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-33">
                                <div id="frame-facturacion_apellidos" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_apellidos" class="sxs-fcontrol" value="" name="facturacion_apellidos">
                                        <label for="f-facturacion_apellidos" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Apellidos</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-33">
                                <div id="frame-facturacion_direccion" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_direccion" class="sxs-fcontrol" value="" name="facturacion_direccion">
                                        <label for="f-facturacion_direccion" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Colonia</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-50 lg:col-33">
                                <div id="frame-facturacion_num_interior" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_num_interior" inputmode="numeric" class="sxs-fcontrol" value="" name="facturacion_num_interior">
                                        <label for="f-facturacion_num_interior" class="sxs-flabel">
                                            <span class="sxs-flabel__text">N° Interior</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-50 lg:col-33">
                                <div id="frame-facturacion_num_exterior" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_num_exterior" inputmode="numeric" class="sxs-fcontrol" value="" name="facturacion_num_exterior">
                                        <label for="f-facturacion_num_exterior" class="sxs-flabel">
                                            <span class="sxs-flabel__text">N° Exterior</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-50 lg:col-33">
                                <div id="frame-facturacion_entre_calle" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox"><input spellcheck="false" autocapitalize="false" id="f-facturacion_entre_calle" class="sxs-fcontrol" value="" name="facturacion_entre_calle">
                                        <label for="f-facturacion_entre_calle" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Entre Calle</span>
                                        </label>
                                    </div>  
                                </div>
                            </div>
                            <div class="col col--f md:col-50 lg:col-33">
                                <div id="frame-facturacion_y_calle" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_y_calle" class="sxs-fcontrol" value="" name="facturacion_y_calle">
                                        <label for="f-facturacion_y_calle" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Y Calle</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-33">
                                <div id="frame-facturacion_tipo_destino" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_tipo_destino" class="sxs-fcontrol" value="" name="facturacion_tipo_destino">
                                        <label for="f-facturacion_tipo_destino" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Calle, oficina, etc.</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-33">
                                <div id="frame-facturacion_pais" class="sxs-fcon sxs-fcon--v1 select frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox"><i class="icon icon-flecha1 abajo"></i>
                                        <select id="facturacion_pais" name="facturacion_pais" class="sxs-fcontrol sxs-fcontrol--select">
                                            <option value="0">País / Región</option>                    
                                        </select>
                                        <label for="f-facturacion_pais" class="sxs-flabel">
                                            <span class="sxs-flabel__text">País / Región</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-50 lg:col-33">
                                <div id="frame-facturacion_estado" class="sxs-fcon sxs-fcon--v1 select frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox"><i class="icon icon-flecha1 abajo"></i>
                                        <select id="facturacion_estado" name="facturacion_estado" class="sxs-fcontrol sxs-fcontrol--select">
                                            <option value="0">Estado</option>                    
                                        </select>
                                        <label for="f-facturacion_estado" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Estado</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-33">
                                <div id="frame-facturacion_ciudad" class="sxs-fcon sxs-fcon--v1 select frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox"><i class="icon icon-flecha1 abajo"></i>
                                        <select disabled="" id="facturacion_ciudad" name="facturacion_ciudad" class="sxs-fcontrol sxs-fcontrol--select">
                                            <option value="0">Ciudad</option>
                                        </select>
                                        <label for="f-facturacion_ciudad" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Ciudad</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-50 lg:col-33">
                                <div id="frame-facturacion_codigo_postal" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_codigo_postal" inputmode="numeric" class="sxs-fcontrol" value="" name="facturacion_codigo_postal">
                                        <label for="f-facturacion_codigo_postal" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Código postal</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col col--f md:col-50 lg:col-33">
                                <div id="frame-facturacion_telefono" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                    <div class="sxs-fbox">
                                        <input spellcheck="false" autocapitalize="false" id="f-facturacion_telefono" inputmode="tel" class="sxs-fcontrol" value="" name="facturacion_telefono">
                                        <label for="f-facturacion_telefono" class="sxs-flabel">
                                            <span class="sxs-flabel__text">Teléfono</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        </div>
                        <div class="col col--f">
                            <div class="sec-main__flds-bx">
                                <header class="sec-main__flds-hdr sec-main__flds-hdr--sm">
                                    <span class="flex-ai-jc-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="20" viewBox="0 0 16 16" role="presentation">
                                            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2H0zm0 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6H0zm3 5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1z"></path>
                                        </svg>
                                    </span>&nbsp;<span>Tarjeta</span></header>
                                <fieldset class="sec-main__flds-fldset row row--f">
                                    <div class="col col--f">
                                        <div id="frame-card_number" class="sxs-fcon sxs-fcon--card-number frame sxs-fcon--has-label">
                                            <div class="sxs-fbox">
                                                <input spellcheck="false" required autocapitalize="false" id="f-card_number" inputmode="numeric" class="sxs-fcontrol" value="" name="card_number">
                                                <label for="f-card_number" class="sxs-flabel">
                                                    <span class="sxs-flabel__text">N° de Tarjeta</span>
                                                </label>
                                            </div>
                                            <div id="f-card_fbox__med" class="sxs-fbox__med">
                                                <div class="sxs-fbox__med-con0">
                                                    <img alt="Visa" loading="lazy" class="" src="svg/card-icon-visa.svg">
                                                    <img alt="MasterCard" loading="lazy" class="" src="svg/card-icon-mastercard.svg">
                                                    <img alt="American Express" loading="lazy" class="" src="svg/card-icon-amex.svg">
                                                    <img alt="Diners" loading="lazy" class="" src="svg/card-icon-diners.svg">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col col--f col-50">
                                        <div id="frame-expiration_date" class="sxs-fcon sxs-fcon--v1 frame sxs-fcon--has-label sxs-fcon--has-feedback">
                                            <div class="sxs-fbox">
                                                <input spellcheck="false" required autocapitalize="false" id="f-expiration_date" inputmode="numeric" class="sxs-fcontrol" value="" name="expiration_date">
                                                <label for="f-expiration_date" class="sxs-flabel">
                                                    <span class="sxs-flabel__text">Fecha de expiración</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col col--f col-50">
                                        <div id="frame-cvv2" class="sxs-fcon sxs-fcon--card-cvc frame sxs-fcon--has-label">
                                            <div class="sxs-fbox">
                                                <input spellcheck="false" required autocapitalize="false" id="f-cvv2" inputmode="numeric" class="sxs-fcontrol" value="" name="cvv2">
                                                <label for="f-cvv2" class="sxs-flabel">
                                                    <span class="sxs-flabel__text">CVV2</span>
                                                </label>
                                            </div>
                                            <div id="fbox__med" class="sxs-fbox__med">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="20" viewBox="0 0 30 20" role="img">
                                                    <g opacity="0.74">
                                                    <path clip-rule="evenodd" d="M25.2061 0.00488281C27.3194 0.112115 29 1.85996 29 4V11.3291C28.5428 11.0304 28.0336 10.8304 27.5 10.7188V8H1.5V16C1.5 17.3807 2.61929 18.5 4 18.5H10.1104V20H4L3.79395 19.9951C1.7488 19.8913 0.108652 18.2512 0.00488281 16.2061L0 16V4C0 1.85996 1.68056 0.112115 3.79395 0.00488281L4 0H25L25.2061 0.00488281ZM4 1.5C2.61929 1.5 1.5 2.61929 1.5 4V5H27.5V4C27.5 2.61929 26.3807 1.5 25 1.5H4Z"></path>
                                                    <path d="M27.5 12.7988C28.3058 13.1128 28.7725 13.7946 28.7725 14.6406C28.7722 15.4002 28.2721 15.9399 27.6523 16.1699C28.1601 16.3319 28.6072 16.6732 28.8086 17.2207C28.3597 18.6222 27.1605 19.6862 25.6826 19.9404C24.8389 19.7707 24.1662 19.2842 23.834 18.5H25C25.0914 18.5 25.1816 18.4939 25.2705 18.4844C25.5434 18.7862 25.9284 18.9501 26.3623 18.9502C27.142 18.9501 27.6922 18.5297 27.6924 17.79C27.6923 17.4212 27.5473 17.1544 27.2998 16.9795C27.4281 16.6786 27.5 16.3478 27.5 16V15.0527C27.5397 14.9481 27.5625 14.8309 27.5625 14.7002C27.5625 14.5657 27.5399 14.4422 27.5 14.3311V12.7988Z"></path>
                                                    <path d="M15.2207 18.5V18.8301H16.8799V19.9004H12.1104V18.8301H13.9902V18.5H15.2207Z"></path>
                                                    <path d="M19.9307 18.5L19.5762 18.7803H22.8369V19.9004H17.8164V18.8604L18.2549 18.5H19.9307Z"></path>
                                                    </g>
                                                    <path d="M26.3822 20.01C24.9722 20.01 23.8522 19.25 23.6422 17.81L24.8722 17.58C24.9922 18.45 25.6022 18.95 26.3622 18.95C27.1422 18.95 27.6922 18.53 27.6922 17.79C27.6922 17.05 27.1122 16.72 26.2822 16.72H25.5722V15.67H26.3022C27.0622 15.67 27.5622 15.34 27.5622 14.7C27.5622 14.07 27.1022 13.68 26.3922 13.68C25.6422 13.68 25.1322 14.18 24.9822 14.92L23.8122 14.76C24.0022 13.55 24.9822 12.61 26.4322 12.61C27.8822 12.61 28.7722 13.47 28.7722 14.64C28.7722 15.4 28.2722 15.94 27.6522 16.17C28.3422 16.39 28.9222 16.94 28.9222 17.89C28.9222 19.04 27.9522 20.01 26.3822 20.01Z"></path>
                                                    <path d="M17.8161 18.86L19.6161 17.38C20.5961 16.58 21.4761 15.87 21.4761 14.97C21.4761 14.23 21.0161 13.7 20.2561 13.7C19.5061 13.7 19.0161 14.29 19.0161 15C19.0161 15.23 19.0561 15.46 19.1361 15.68H17.9461C17.8461 15.39 17.8161 15.2 17.8161 14.93C17.8161 13.58 18.9261 12.61 20.2861 12.61C21.7861 12.61 22.7461 13.54 22.7461 14.89C22.7461 16.16 21.7861 17.03 20.7761 17.83L19.5761 18.78H22.8361V19.9H17.8161V18.86Z"></path>
                                                    <path d="M14.25 12.67H15.22V18.83H16.88V19.9H12.11V18.83H13.99V14.92H12.15V13.99L12.88 13.93C13.78 13.86 14.18 13.58 14.25 12.67Z"></path>
                                                </svg>

                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="openpay">
                                <p class="openpay__text">Transacciones realizadas vía:</p><img alt="OpenPay" class="openpay__logo" src="svg/openpaylargo.svg">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sec-main__sumr o_ring--before col col--f">
                    <div class="sec-main__sumr-con0 before">
                        <header class="sxs-headline sec-main__sumr-hdr">
                            <h2 class="sxs-headline__tit sxs-headline__tit--align-start sxs-headline__tit--text-color-duller sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-35">Resumen de mi pedido</h2>
                        </header>
                        <ul id="itemCardCarro" class="sec-main__sumr-lis list-none row row--f">     
                            @if(isset($listitemPago))
                               @php echo html_entity_decode($listitemPago) @endphp
                            @endif                     
                        </ul>
                        <footer id="carTotalesCarro" class="sec-main__sumr-ftr">                            
                            @if(isset($footitemPago))
                                @php echo html_entity_decode($footitemPago) @endphp
                            @endif  
                        </footer>
                    </div>
                </div>
                <div class="sec-main__sumr-mbtns sec-main__sumr-mbtns--mob col col--f" style="position: fixed;">
                    <a href="https://zonediet.com.mx/productos" class="sxs-btn sxs-btn--secondary sxs-btn--style-secondary">
                        <div class="sxs-btn__con0"><span class="sxs-btn__wv"></span>
                            <div class="sxs-btn__con1">
                                <div class="sxs-btn__con2"><span class=""><span class="sas-bs" style="--sas-idx: 0;">S</span><span class="sas-bs" style="--sas-idx: 1;">e</span><span class="sas-bs" style="--sas-idx: 2;">g</span><span class="sas-bs" style="--sas-idx: 3;">u</span><span class="sas-bs" style="--sas-idx: 4;">i</span><span class="sas-bs" style="--sas-idx: 5;">r</span><span class="sas-bs" style="--sas-idx: 6;">&nbsp;</span></span><span class=""><span class="sas-bs" style="--sas-idx: 0;">c</span><span class="sas-bs" style="--sas-idx: 1;">o</span><span class="sas-bs" style="--sas-idx: 2;">m</span><span class="sas-bs" style="--sas-idx: 3;">p</span><span class="sas-bs" style="--sas-idx: 4;">r</span><span class="sas-bs" style="--sas-idx: 5;">a</span><span class="sas-bs" style="--sas-idx: 6;">n</span><span class="sas-bs" style="--sas-idx: 7;">d</span><span class="sas-bs" style="--sas-idx: 8;">o</span></span></div>
                                <div class="sxs-btn__con2"><span class=""><span class="sas-bs" style="--sas-idx: 0;">S</span><span class="sas-bs" style="--sas-idx: 1;">e</span><span class="sas-bs" style="--sas-idx: 2;">g</span><span class="sas-bs" style="--sas-idx: 3;">u</span><span class="sas-bs" style="--sas-idx: 4;">i</span><span class="sas-bs" style="--sas-idx: 5;">r</span><span class="sas-bs" style="--sas-idx: 6;">&nbsp;</span></span><span class=""><span class="sas-bs" style="--sas-idx: 0;">c</span><span class="sas-bs" style="--sas-idx: 1;">o</span><span class="sas-bs" style="--sas-idx: 2;">m</span><span class="sas-bs" style="--sas-idx: 3;">p</span><span class="sas-bs" style="--sas-idx: 4;">r</span><span class="sas-bs" style="--sas-idx: 5;">a</span><span class="sas-bs" style="--sas-idx: 6;">n</span><span class="sas-bs" style="--sas-idx: 7;">d</span><span class="sas-bs" style="--sas-idx: 8;">o</span></span></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div aria-hidden="true" class="sec-main__sumr-mbtns sec-main__sumr-mbtns--mob sec-main__sumr-mbtns--shadow col col--f">
                <button id="btn-validate-pay" type="button" aria-disabled="false" class="sxs-btn sxs-btn--primary sxs-btn--style-primary">
                        <div class="sxs-btn__con0"><span class="sxs-btn__wv"></span>
                            <div class="sxs-btn__con1">
                                <div class="sxs-btn__con2"><span class=""><span class="sas-bs" style="--sas-idx: 0;">P</span><span class="sas-bs" style="--sas-idx: 1;">a</span><span class="sas-bs" style="--sas-idx: 2;">g</span><span class="sas-bs" style="--sas-idx: 3;">a</span><span class="sas-bs" style="--sas-idx: 4;">r</span></span></div>
                                <div class="sxs-btn__con2"><span class=""><span class="sas-bs" style="--sas-idx: 0;">P</span><span class="sas-bs" style="--sas-idx: 1;">a</span><span class="sas-bs" style="--sas-idx: 2;">g</span><span class="sas-bs" style="--sas-idx: 3;">a</span><span class="sas-bs" style="--sas-idx: 4;">r</span></span></div>
                            </div>
                        </div>
                    </button>
                    <a href="https://zonediet.com.mx/productos" class="sxs-btn sxs-btn--secondary sxs-btn--style-secondary">
                        <div class="sxs-btn__con0"><span class="sxs-btn__wv"></span>
                            <div class="sxs-btn__con1">
                                <div class="sxs-btn__con2"><span class=""><span class="sas-bs" style="--sas-idx: 0;">S</span><span class="sas-bs" style="--sas-idx: 1;">e</span><span class="sas-bs" style="--sas-idx: 2;">g</span><span class="sas-bs" style="--sas-idx: 3;">u</span><span class="sas-bs" style="--sas-idx: 4;">i</span><span class="sas-bs" style="--sas-idx: 5;">r</span><span class="sas-bs" style="--sas-idx: 6;">&nbsp;</span></span><span class=""><span class="sas-bs" style="--sas-idx: 0;">c</span><span class="sas-bs" style="--sas-idx: 1;">o</span><span class="sas-bs" style="--sas-idx: 2;">m</span><span class="sas-bs" style="--sas-idx: 3;">p</span><span class="sas-bs" style="--sas-idx: 4;">r</span><span class="sas-bs" style="--sas-idx: 5;">a</span><span class="sas-bs" style="--sas-idx: 6;">n</span><span class="sas-bs" style="--sas-idx: 7;">d</span><span class="sas-bs" style="--sas-idx: 8;">o</span></span></div>
                                <div class="sxs-btn__con2"><span class=""><span class="sas-bs" style="--sas-idx: 0;">S</span><span class="sas-bs" style="--sas-idx: 1;">e</span><span class="sas-bs" style="--sas-idx: 2;">g</span><span class="sas-bs" style="--sas-idx: 3;">u</span><span class="sas-bs" style="--sas-idx: 4;">i</span><span class="sas-bs" style="--sas-idx: 5;">r</span><span class="sas-bs" style="--sas-idx: 6;">&nbsp;</span></span><span class=""><span class="sas-bs" style="--sas-idx: 0;">c</span><span class="sas-bs" style="--sas-idx: 1;">o</span><span class="sas-bs" style="--sas-idx: 2;">m</span><span class="sas-bs" style="--sas-idx: 3;">p</span><span class="sas-bs" style="--sas-idx: 4;">r</span><span class="sas-bs" style="--sas-idx: 5;">a</span><span class="sas-bs" style="--sas-idx: 6;">n</span><span class="sas-bs" style="--sas-idx: 7;">d</span><span class="sas-bs" style="--sas-idx: 8;">o</span></span></div>
                            </div>
                        </div>
                    </a>
                </div>
            </form>
        </div>
    </section>
</main>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
        document.addEventListener('DOMContentLoaded', () => {    
            const vfacturacion_pais = document.getElementById('facturacion_pais');
            if (vfacturacion_pais) { 
                loadCountries(vfacturacion_pais);
            }
            const ventrega_pais = document.getElementById('entrega_pais');
            if (ventrega_pais) {
                loadCountries(ventrega_pais);
            }     
            loadStates('MX', facturacion_estado);   
            loadStates('MX', entrega_estado);   
            entrega_estado.addEventListener('change', e => {
                loadCities(entrega_pais.value, e.target.value, entrega_ciudad);
            });
            facturacion_estado.addEventListener('change', e => {
                loadCities(facturacion_pais.value, e.target.value, facturacion_ciudad);
            });
        });

        $("#entrega_envio_metodo").on("change", function() {
            $("#entrega_precio_envio_id").html("<span>Envío</span>$ 0.00 MXN");                        
            if($(this).val()!=="0"){            
                let data = { id : $(this).val(), };
                $.ajax({
                    type: "GET",
                    url: "{{ url('package')}}",
                    data: data,
                    success: function(datos) {  
                        $('#entrega_envio_metodo_id').val(datos.id);
                        $('#entrega_envio_metodo_nprod').val(datos.nprod);
                        $('#entrega_envio_metodo_numero_parte').val(datos.numero_parte);
                        $('#entrega_envio_metodo_titulo').val(datos.titulo);     
                        $('#entrega_precio_envio').val(parseFloat(datos.precio_original).toFixed(2));         
                        console.log(datos.precio_original);
                        $("#entrega_precio_envio_id").html("<span>Envío</span>$ "+(parseFloat(datos.precio_original)).toFixed(2)+" MXN");                                            
                        let preciototal = $('#entrega_precio_total').val();                                                                        
                        let montototal = (parseFloat(preciototal) + parseFloat(datos.precio_original)).toFixed(2);                         
                        $('#entrega_precio_total').val(montototal); 
                        $('#entrega_precio_total_id').html('<span>Total</span><span>$ '+(parseFloat(montototal)).toFixed(2)+' MXN</span>');                        
                     },
                    error: function(err) {
                    
                    }
                });
            }

        });

</script>
@endsection