<!DOCTYPE html>
<html lang="es">
   <head>
   <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">        
        <title>LA ZONA - Productos naturales de alta calidad</title>
        <meta name="description" content="Descubre nuestra amplia gama de vegetales naturales de primera calidad, diseñados para mejorar tu bienestar.">
        <meta name="keywords" content="Productos naturales de alta calidad, Nutrición esencial para tu estilo de vida, Vegetales, Máxima Pureza y Potencia, formato líquido, 3ra generación 120, Naturalmente, CacaoRx: Extracto de Cacao Puro y Potente para tu estilo de vida, Batido Zone RX de Chocolate para un estilo de vida mejor.">
        <meta name="copyright" content="La Zona - Home">
        <meta name="language" content="es">
        <meta name="theme-color" content="#999999">
        <meta name="msapplication-navbutton-color" content="#999999">
        <link rel="shortcut icon" href="/favicon.ico">        
        <?php echo app('Illuminate\Foundation\Vite')(['resources/sass/app.scss','resources/js/app.js']); ?>              
        <style>
            #page-loader {
                position: fixed;
                inset: 0;
                background: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }

            #page-loader img {
                width: 120px;
            }
         </style>
    </head>    
    <body>
        <div id="root">                    
             <?php echo $__env->make('header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>       
             <?php echo $__env->yieldContent('content'); ?>    
             <?php echo $__env->make('footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
             <?php echo $__env->make('menucarro', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>                        
        </div>
      <script src="<?php echo e(env('OPENPAY_BUNDLE_JS')); ?>"></script>
      <script src="<?php echo e(env('OPENPAY_DATA_BUNDLE_JS')); ?>"></script>
      <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>      
<script>         
    if (window.OpenPay) {
        const OpenPay = window.OpenPay;
        ///OpenPay.setId("<?php echo e(env('VITE_OPEN_PAY_MERCHANT_ID')); ?>");  
        OpenPay.setId("mgloiepshbbyoqebg4d2");  
        //OpenPay.setApiKey("<?php echo e(env('VITE_OPEN_PAY_PUBLIC_KEY')); ?>"); 
        OpenPay.setApiKey("pk_15548bda94634dfa8f489a67c1988446"); 
        
        //OpenPay.setSandboxMode("<?php echo e(env('SANDBOXMODE')); ?>"); 
        OpenPay.setSandboxMode(false); 
        OpenPay.deviceData.setup("cart-payment-form", "cart-form-hidden-device-id");

    } else {
        console.log('no está cargado');
    }
        
    $(document).on("click", "#btn-validate-pay", function (event) {            
       event.preventDefault();
            let hasErrors = false;
            const billingActive = $("#f-billing").is(":checked");        
            const $otherf = $("#otherf");
            const $dirfac = $("#dirfac");
            $otherf.toggle(!billingActive);
            $dirfac.toggleClass("sxs-fcon--has-errors", billingActive).toggleClass("sxs-fcon--is-filled", billingActive).addClass("sxs-fcon--has-feedback");            
            $("#cart-payment-form input, #cart-payment-form textarea, #cart-payment-form select").each(function () {

                const field = $(this); 
                const id = field.attr("id") || "";
                
                if (id.startsWith("f-facturacion") && billingActive) {
                    return;
                }
            
                const container = field.closest(".sxs-fcon");
                const tag = field.prop("tagName").toLowerCase();
                const mode = field.attr("inputmode");
                let value = (field.val() || "").toString().trim();

                container.removeClass("sxs-fcon--has-errors");
                container.find(".sxs-error").text("");
            
                if (field.prop("required") && !value) {                
                    if (id === "f-card_number") {                
                    $("#f-card_fbox__med").html(CardIconError());   
                    }
                container.addClass("sxs-fcon--has-errors");
                hasErrors = true;
                return;
                }
                
                if (tag === "select") {
                    if (value === "" || value === "0") {
                        container.addClass("sxs-fcon--has-errors");
                        container.find(".sxs-error").text("Seleccione una opción");
                        hasErrors = true;
                        return;
                    }
                    container.addClass("sxs-fcon--is-filled");
                    return;
                }           

                const legalesActive = $("#f-legales").is(":checked");                
                if (!legalesActive) {                    
                    $("#chkok").removeClass("sxs-fcon--is-filled").addClass("sxs-fcon--has-errors sxs-fcon--has-feedback");           
                    hasErrors = true; 
                    return ;
                }            
        
          }); 

        if (!hasErrors) {          
            let cart = [];
             $("input[type='hidden']").each(function () {
                let id = $(this).attr("id"); 
                let value = $(this).val();
                if (!id) return; 
                let parts = id.split("_");
                let index = parts[0].replace("a",""); 
                let field = parts.slice(2).join("_"); 
                if(!cart[index]){
                    cart[index] = {
                        quantity : "",
                        nprod : "",    
                        numero_parte : "",
                        id : "",
                        idvariacion:"",
                        titulo:"",
                        sku:"",
                        precio_original:"",
                        precio_descuento:"",
                        img:""
                    };
                }

                cart[index][field] = value;
            });

             $("#btn-validate-pay").prop( "disabled", true);          
             let pricing={
                  "total" : $("#entrega_precio_total").val(),
                  "productos" :$("#entrega_precio_productos").val(),
                  "envio" :$("#entrega_precio_envio").val(),
             };             
             let dispatch ={
                    "titulo" : $("#entrega_envio_metodo_titulo").val(),
                    "id" : $("#entrega_envio_metodo_id").val(),
                    "numero_parte": $("#entrega_envio_metodo_numero_parte").val(),
                    "nprod" : $("#entrega_envio_metodo_nprod").val()
             };
             

            let data = {           
            "_token": "<?php echo e(csrf_token()); ?>", 
            "amount":  $("#entrega_precio_total").val(),
            "token_id": "<?php echo e(csrf_token()); ?>", 
            "device_session_id": "<?php echo e(csrf_token()); ?>", 
            "description":"Cargo a cuenta",
            "numero_pedido": null,
            "pricing":pricing,
            "dispatch":dispatch,
            "compra_correo": $("#f-compra_correo").val(),
            "compra_apellidos": $("#f-compra_nombres").val(),
            "compra_nombres": $("#f-compra_apellidos").val(),
            "compra_celular": $("#f-compra_celular").val(),
            "entrega_nombres": $("#f-entrega_nombres").val(),
            "entrega_apellidos": $("#f-entrega_apellidos").val(),
            "entrega_direccion": $("#f-entrega_direccion").val(),
            "entrega_num_interior": $("#f-entrega_num_interior").val(),
            "entrega_num_exterior": $("#f-entrega_num_exterior").val(),
            "entrega_entre_calle": $("#f-entrega_entre_calle").val(),
            "entrega_y_calle": $("#f-entrega_y_calle").val(),
            "entrega_tipo_destino": $("#f-entrega_tipo_destino").val(),
            "entrega_pais": $("#entrega_pais").val(),
            "entrega_estado": $("#entrega_estado option:selected").text(),
            "entrega_estado_code": $("#entrega_estado").val(),  
            "entrega_ciudad": $("#entrega_ciudad").val(),
            "entrega_codigo_postal": $("#f-entrega_codigo_postal").val(),
            "entrega_telefono": $("#f-entrega_telefono").val(),
            "entrega_referencias": $("#f-entrega_referencias").val(),
            "entrega_envio_metodo": $("#entrega_envio_metodo").val(),
            'facturacion_nombres' : $("#facturacion_nombres").val(),
            'facturacion_apellidos': $("#f-facturacion_apellidos").val(),
            'facturacion_pais' : $("#facturacion_pais").val(),
            'facturacion_direccion' : $("#f-facturacion_direccion").val(),
            'facturacion_num_interior' : $("#f-facturacion_num_interior").val(),
            'facturacion_num_exterior' : $("#f-facturacion_num_exterior").val(),
            'facturacion_entre_calle' : $("#facturacion_entre_calle").val(),
            'facturacion_y_calle': $("#f-facturacion_y_calle").val(),
            'facturacion_tipo_destino': $("#f-facturacion_tipo_destino").val(),
            'facturacion_ciudad' : $("#facturacion_ciudad").val(),
            'facturacion_estado' : $("#facturacion_estado").val(),
            'facturacion_codigo_postal': $("#f-facturacion_codigo_postal").val(),
            'facturacion_telefono' : $("#f-facturacion_telefono").val(),
            "cart": cart
            };

            $.ajax({
                type: "POST",
                url: "<?php echo e(URL::to('payment')); ?>",
                data: data,
                beforeSend: function() {
                   cambiarTextoAnimado("Procesando");
                },
                success: function(datos) {                       
                if(datos.success === true){                                                          
                    let form = document.createElement("form");
                    form.method = "POST";
                    form.action = "/confirmar"; 
                    let csrf = document.createElement("input");
                    csrf.type = "hidden";
                    csrf.name = "_token";
                    csrf.value = "<?php echo e(csrf_token()); ?>";
                    form.appendChild(csrf);
                    let input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "data";
                    input.value = JSON.stringify(datos.numero_pedido); 
                    form.appendChild(input);
                    document.body.appendChild(form);
                    form.submit();  
                } 
                if(datos.success === false){                
                      $("#form_err").addClass("sxs-form__err");
                      $("#form_err").html(datos.error); 
                      $("#btn-validate-pay").prop( "disabled", false);
                      cambiarTextoAnimado("Pagar");
                } 
                },
                error: function(err) {                                  
                    let response = err.responseJSON;                  
                    if (response) {
                        $("#form_err").addClass("sxs-form__err");
                        $("#form_err").html(response.message); 
                        $("#btn-validate-pay").prop( "disabled", false);
                        cambiarTextoAnimado("Pagar");
                    } else { 
                        $("#form_err").addClass("sxs-form__err");
                        $("#form_err").html("Error desconocido"); 
                        $("#btn-validate-pay").prop( "disabled", false);
                        cambiarTextoAnimado("Pagar");
                    }   
                }
            });

            let expiration = $("#f-expiration_date").val();
            let parts = expiration.split("/");
            let month = parts[0];
            let year = parts[1];
            const cardData = {
                amount: $("#entrega_precio_total").val(),
                holder_name: $("#f-compra_nombres").val() + " " + $("#f-compra_apellidos").val(),
                card_number: $("#f-card_number").val(),
                expiration_month: month,
                expiration_year: year,
                cvv2: $("#f-cvv2").val(),
                emailcard: $("#f-compra_correo").val(),
            };
            
           
            console.log(cardData);
            const createToken = (cardData) => {
                return new Promise((resolve, reject) => {
                    OpenPay.token.create(cardData, resolve, reject);
                });
            };
            
             createToken(cardData).then(onSuccess).catch(onError); 
        }
    });


        var sucess_callbak = function(response) {
            var token_id = response.data.id;
            $('#token_id').val(token_id);
            $('#payment-form').submit();
        };
        var error_callbak = function(response) {
            var desc = response.data.description != undefined ? response.data.description : response.message;
            console.log("ERROR [" + response.status + "] " + desc);
            $("#pay-button").prop("disabled", false);
        };
        function cambiarTextoAnimado(texto) {
            $("#btn-validate-pay .sxs-btn__con2").each(function() {
            let letrasHTML = "";
            for (let i = 0; i < texto.length; i++) {
                letrasHTML += `<span class="sas-bs" style="--sas-idx: ${i};">${texto[i]}</span>`;
            }
            $(this).html(`<span class="">${letrasHTML}</span>`);
            });
        }



        $(document).ready(function() {
            let url = window.location.pathname;            
            $(".sxs-header__menu-lin").each(function() {
                let href = $(this).attr("href");                
                if (url.includes(href.replace("..", ""))) {
                    $(this).addClass("active");
                }
            });
        });

           document.addEventListener("DOMContentLoaded", function () {
            window.addEventListener("load", function () {
                var loader = document.getElementById("page-loader");
                if (!loader) return;
                loader.style.opacity = "0";
                loader.style.transition = "opacity 0.5s ease";
                setTimeout(function () {
                    loader.style.display = "none";
                }, 500);
            });
        }); 
        
        if (window.location.pathname === '/carro'  ||
            window.location.pathname === '/productos'  ||
            window.location.pathname === '/confirmar') {
             $('header').addClass('scrolled');
        }

        function setHeaderHeight() {
            const headerHeight = $('header').outerHeight();                    
            document.documentElement.style.setProperty('--headerHeight',headerHeight + 'px'
            );
        }
    
        document.addEventListener('DOMContentLoaded', () => {
        const btn = document.querySelector('.sxs-banner__folw-lin');
            if (!btn) return;

            btn.addEventListener('click', function (e) {    
                e.preventDefault();

                const next = this.closest('section')?.nextElementSibling;
                if (!next) return;

                const offset = 80;
                const top = next.getBoundingClientRect().top + window.pageYOffset - offset;

                window.scrollTo({
                top,
                behavior: 'smooth'
                });
            });
        });

        $(document).ready(setHeaderHeight);
        $(window).on('resize', setHeaderHeight);
        $('#otherf').hide();  
        $(window).on('load', function () {
            $('#loading').fadeOut(300);
        });
        
        $(window).on('scroll', function () {
            if (window.location.pathname !== '/carro') {                
                    if (window.location.pathname === '/confirmar') {
                       $('header').addClass('scrolled');                       
                    }else{                            
                        if ($(this).scrollTop() > 50) {
                            $('header').addClass('scrolled');
                        } else {
                            $('header').removeClass('scrolled');
                        }
                    }
            }else{                    
                   $('header').addClass('scrolled');
            }
        });

         function CardIconError() {
            return `
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="20" viewBox="0 0 30 20" role="presentation">
                    <path opacity="0.74" d="M26.2061 0.00488281C28.3194 0.112115 30 1.85996 30 4V13.335L28.5 10.623V8H27.0488L25.9736 6.05664C25.744 5.64161 25.4595 5.2894 25.1367 5H28.5V4C28.5 2.61929 27.3807 1.5 26 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V5H19.8643C19.608 5.22972 19.3755 5.49872 19.1758 5.80762L19.0264 6.05664L17.9512 8H1.5V16C1.5 17.3807 2.61929 18.5 4 18.5H13.0371C13.1062 19.0302 13.2775 19.5408 13.5391 20H4L3.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 0H26L26.2061 0.00488281Z"></path>
                    <path d="M20.7762 7.0252C21.5325 5.65827 23.4673 5.65826 24.2235 7.0252L29.743 17.0027C30.4843 18.3434 29.5319 19.9995 28.0194 19.9998H16.9803C15.4679 19.9995 14.5155 18.3434 15.2567 17.0027L20.7762 7.0252ZM22.4999 15.4998C21.8095 15.4998 21.2499 16.0595 21.2499 16.7498C21.2499 17.4402 21.8095 17.9998 22.4999 17.9998C23.1902 17.9998 23.7499 17.4402 23.7499 16.7498C23.7499 16.0595 23.1902 15.4998 22.4999 15.4998ZM22.4999 8.99981C21.9476 8.99981 21.4999 9.44753 21.4999 9.99981V12.9998C21.4999 13.5521 21.9476 13.9998 22.4999 13.9998C23.0522 13.9998 23.4999 13.5521 23.4999 12.9998V9.99981C23.4999 9.44753 23.0522 8.99981 22.4999 8.99981Z"></path>
                </svg>'
            `;
        }
 

        $('#btncarroopen').on('click', function () {
            $("#bagcarrito").removeClass('sxs-modal-layer sxs-portal--bag').addClass('sxs-modal-layer is-open start sxs-portal--bag');
        });
        $('#btncarroclose').on('click', function () {
            $("#bagcarrito").removeClass('sxs-modal-layer is-open start sxs-portal--bag').addClass('sxs-modal-layer sxs-portal--bag');            
        }); 
        $('#bagbanner').on('click', function () {
            $("#bagcarrito").removeClass('sxs-modal-layer is-open start sxs-portal--bag').addClass('sxs-modal-layer sxs-portal--bag');            
        });

        $('#navsubopen').on('click', function () {
            $("#navsub").removeClass('sxs-nav').addClass('sxs-nav open');
        });

        $('#navsubclose').on('click', function () {
           $("#navsub").removeClass('sxs-nav open').addClass('sxs-nav');
        });

         $('#sxs-sbar-buscar').on('click', function () {
            $("#sxs-sbar").removeClass('sxs-sbar').addClass('sxs-sbar visible');
        });

        $('#navsubclose').on('click', function () {
           $("#sxs-sbar").removeClass('sxs-sbar visible').addClass('sxs-sbar');
        });       

        $('#f-legales').on('change', function () {            
            if ($(this).is(':checked')) {                                                        
                if ($("#chkok").hasClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--has-errors sxs-fcon--has-feedback")) {
                    $("#chkok").removeClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--has-errors sxs-fcon--has-feedback").addClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--is-filled sxs-fcon--has-feedback");                
                }else{
                    $("#chkok").removeClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--has-feedback").addClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--is-filled sxs-fcon--has-feedback");                
                }               
            } else {                  
               $("#chkok").removeClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--is-filled sxs-fcon--has-feedback").addClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--has-errors sxs-fcon--has-feedback");
            }
        });

        $('#f-billing').on('change', function () {      
            if ($(this).is(':checked')) {                
                $('#otherf').hide();      
                if ($("#dirfac").hasClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--has-feedback")) {
                    $("#dirfac").removeClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--has-feedback").addClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--is-filled sxs-fcon--has-feedback");                
                }else{
                    $("#dirfac").removeClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--is-filled sxs-fcon--has-feedback").addClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--has-feedback");                
                }               
            } else {  
               $('#otherf').show();                                       
               $("#dirfac").removeClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--is-filled sxs-fcon--has-feedback").addClass("sxs-fcon sxs-fcon--v1 t-input-checkbox sxs-fcon--has-feedback");                
            }
        });
        

        
        function clickItem(i) {           
            let $item = $("#navsubitem" + i);
            let $itemsub = $("#navsubitemlist" + i);
           if ($item.hasClass('submenu-open')) {
                $itemsub.css('max-height', '198px');
                $item.removeClass('submenu-open');
            } else {
                $itemsub.css('max-height', '0');
                $item.addClass('submenu-open');
            }
        }        
        function addcard(e) {
            var url = e.dataset.url;
            var cat = 0;            
            if(e.dataset.a!="amt"){
            cat = 1;            
            }else{
            cat = $('#'+ e.dataset.a + url).text();            
            }               
            let data = {           
            "_token": "<?php echo e(csrf_token()); ?>", 
             "url": e.dataset.url,
             "cant":  cat,
             "tope": e.dataset.tope
            };

            $.ajax({
                type: "POST",
                url: "<?php echo e(URL::to('add')); ?>",
                data: data,
                success: function(datos) {     
                  
                    if(e.dataset.a=="amt"){                        
                    $("#bagcarrito").removeClass('sxs-modal-layer sxs-portal--bag').addClass('sxs-modal-layer is-open start sxs-portal--bag');
                    }
                    var data = datos.split("|");  
                    if(e.dataset.a=="amtpag" || e.dataset.a=="amt"){                        
                        $('#'+ e.dataset.a + url).text();
                    }else{
                        $('#'+ e.dataset.a + url).text(1);
                    }
                    $("#itemCard").html(data[0]);    
                    $("#cartotales").html(data[1]);       
                      if($("#itemCardCarro")){
                        $("#itemCardCarro").html(data[2]);    
                        $("#carTotalesCarro").html(data[3]);                     
                    }                                
                },
                error: function(err) {                    
                }
            });     
        }

        function agritem(e) {
            var cat = $('#'+e.dataset.id).text();                    
            if(e.dataset.tope=="1") cat++;            
            if(e.dataset.tope=="2"){
                cat--;
                if(cat < 1){cat = 1;}
            }
            if(e.dataset.a!="amt"){                
                addcard(e);
            }
            $('#'+e.dataset.id).text(cat);            
        }

        
            function remcard(e) {       
            var url = e.dataset.url; 
            let data = {           
            "_token": "<?php echo e(csrf_token()); ?>", 
             "url": url             
            };

            $.ajax({
                type: "POST",
                url: "<?php echo e(URL::to('rem')); ?>",
                data: data,
                success: function(datos) {      
                    var data = datos.split("|");                  
                    $('#'+ e.dataset.a + url).text(1);                    
                    $("#itemCard").html(data[0]);    
                    $("#cartotales").html(data[1]);
                    if($("#itemCardCarro")){
                        $("#itemCardCarro").html(data[2]);    
                        $("#carTotalesCarro").html(data[3]);                     
                    }                    
                },
                error: function(err) {                    
                }
            });            
        }    

        $(document).on("keypress", "#cart-payment-form input", function (e) {
        const mode = $(this).attr("inputmode");
        if ((mode === "numeric" || mode === "tel") && !/[0-9]/.test(e.key)) {
            e.preventDefault();
        }
        });

      </script>      
    </body>
</html>  <?php /**PATH D:\xampp\htdocs\lazona\resources\views/layouts/app.blade.php ENDPATH**/ ?>