<?php
session_start();
include('../conexion.php');
include('../include/sesiones.php');


$recap = mysqli_query($con, "SELECT * FROM  configuraciones WHERE  empresa='$emp_id'");
$chat = mysqli_fetch_array($recap);
$tar_promo = $chat['recapchat'];
?>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<header class="header_area">

    <div class="header_top">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-4">
                    <div class="welcome_text">
                        <p>Bienvenidos a <span><?php echo $emp_nombre; ?></span> </p>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="top_right text-right">
                        <ul>
                            <?php
                            if ($resul_cliente <> null) { ?>
                                <li data-bs-toggle="dropdown" aria-expanded="false">
                                    <a>
                                        <i class="zmdi zmdi-account"></i>
                                        <strong><?php echo $nombre; ?></strong>
                                        <i class="zmdi zmdi-caret-down"></i>
                                    </a>
                                </li>

                                <ul class="dropdown-menu">
                                    <li class="top_links"><a class="dropdown-item" href="mi_cuenta.php">Cuenta</a></li>
                                    <li class="top_links"><a class="dropdown-item" href="php_cuenta/cerrar_sesion.php">Cerrar Sesion</a></li>
                                </ul>


                            <?php  } else {  ?>
                                <li class=""> <a data-id="" data-bs-toggle="modal" data-bs-target="#modal_box_sesion"> INICIAR SESION</a></li>
                            <?php  }  ?>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header_middle">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <div class="">
                        <?php $nu = rand(1, 1000);
                        $nu; ?>
                        <a href="index.php"><img src='<?php echo $emp_url_sub . '/img/1.png?"?' . $nu . ''; ?>' alt="" style=" height:80px"></a>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="header_middle_inner">
                        <div class="search-container">
                            <form action="resultados_buscador.php" method="GET" onsubmit="return validarBusqueda();">
                                <div style="width:550px;" class="search_box">
                                    <input style="height: 40px;" id="buscando" name="buscando" autocomplete="off" placeholder="Buscar..." type="search" onkeyup="autocompletar()">
                                    <ul style="position: absolute; z-index:1000; width:535px;padding-left:15px;padding-top:3px;" id="mylista" class="lista lista--inner"></ul>
                                    <button type="submit"><i class="zmdi zmdi-search"></i></button>
                                </div>
                            </form>

                            <script>
                                // Valida si el campo está vacío antes de enviar
                                function validarBusqueda() {
                                    let palabra = document.getElementById('buscando').value.trim();
                                    if (palabra === '') {
                                        document.getElementById('buscando').placeholder = "Ingrese un término de búsqueda";
                                        return false; // Evita el envío si está vacío
                                    }
                                    return true; // Permite el envío
                                }

                                // Función para autocompletar en tiempo real
                                function autocompletar() {
                                    let palabra = document.getElementById('buscando').value.trim();
                                    let lista = document.getElementById('mylista');

                                    // Limpia la lista si no hay búsqueda
                                    if (palabra === '') {
                                        lista.innerHTML = '';
                                        return;
                                    }

                                    // Realiza la petición AJAX
                                    let xhr = new XMLHttpRequest();
                                    xhr.open('GET', 'resultados_buscador.php?buscando=' + encodeURIComponent(palabra), true);
                                    xhr.onreadystatechange = function() {
                                        if (xhr.readyState === 4 && xhr.status === 200) {
                                            lista.innerHTML = xhr.responseText; // Muestra resultados
                                        }
                                    };
                                    xhr.send();
                                }
                            </script>



                        </div>
                        <div class="col-lg-2">
                            <div class=""> </div>
                        </div>






                        <div class="mini_cart_wrapper action_links">
                            <?php if (isset($_SESSION['clie_id'])) {
                                $clie_id = $_SESSION['clie_id'];
                                $casa = mysqli_query($con, "SELECT COUNT(cotd_art_id) AS numrows FROM cotizacion_detalle_deseo WHERE clie_id='$clie_id'");
                                $roww = mysqli_fetch_array($casa);
                                $numrows = isset($roww['numrows']) ? $roww['numrows'] : 0;

                                if ($numrows > 0) { ?>
                                    <span id="notification_count1" title="Tienes <?php echo $numrows; ?> artículo(s) en tu lista de deseos">
                                        <?php echo $numrows; ?>
                                    </span>
                            <?php }
                            } ?>

                            <ul>
                                <li class="wishlist">
                                    <?php if (isset($_SESSION['clie_id'])) { ?>
                                        <a href="deseos.php">
                                            <i class="fa fa-heart-o" aria-hidden="true"></i>
                                        </a>
                                    <?php } else { ?>
                                        <a data-bs-toggle="modal" data-bs-target="#modal_box_sesion">
                                            <i class="fa fa-heart-o" aria-hidden="true"></i>
                                        </a>
                                    <?php } ?>
                                </li>
                            </ul>
                        </div>







                        <div class="mini_cart_wrapper action_links" onmouseover="consultar_carrito();">
                            <?php if (isset($_SESSION['carrito'])) {
                                $carrito_mio = $_SESSION['carrito'];
                                $total = 0;
                                $total_cantidades = 0;

                                for ($i = 0; $i <= count($carrito_mio) - 1; $i++) {
                                    if (isset($carrito_mio[$i])) {
                                        if ($carrito_mio[$i] != NULL) {
                                            $cantidad_agregada = $carrito_mio[$i]['cantidad'];
                                            $total_cantidades += $cantidad_agregada;
                                        }
                                    }
                                    if ($total_cantidades != 0) { ?>
                                        <span id="notification_count2"><?php echo $total_cantidades; ?></span>
                            <?php
                                    }
                                }
                            }
                            ?>
                            <ul>
                                <li class="wishlist">
                                    <a href="cart.php">
                                        <i class="fa fa-shopping-cart"></i>
                                    </a>
                                </li>
                                <div class="mini_cart">
                                    <div id="mi_carrito"></div>
                                    <div class="mini_cart_footer">
                                        <div class="cart_button">
                                            <a href="cart.php">Ver carrito</a>
                                        </div>
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<script type="text/javascript">
    function autocompletar() {
        var minimo_letras = 0;
        var palabra = $('#buscando').val();
        if (palabra.length > minimo_letras) {
            $.ajax({
                url: './php_tienda/buscar.php',
                type: 'POST',
                data: {
                    palabra
                },
                success: function(data) {
                    $('#mylista').show();
                    $('#mylista').html(data);
                }
            });
        } else {
            $('#mylista').hide();
        }
    }

    function cerrar() {
        $('#mylista').hide();
    }


    function consultar_carrito() {
        var parametros = {};
        $.ajax({
            data: parametros,
            type: 'POST',
            url: './php_tienda/modal_carrito.php',
            success: function(data) {
                document.getElementById("mi_carrito").innerHTML = data;
            }
        });
    }
</script>



<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>




<div class="modal fade" id="modal_box_sesion" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <a class="b-close" data-bs-dismiss="modal" aria-label="Close">
                <div id="popup2">
                    <span class="b-close" data-bs-dismiss="modal" aria-label="Close">X</span>
                </div>
            </a>

            <div class="modal_body">
                <div class="container">
                    <div class="row">
                        <div id="resultados_login"></div>

                        <!-- Sección de inicio de sesión -->
                        <div class="col-lg-12 col-md-12 col-sm-12" id="login_section">
                            <div class="modal_right">
                                <div class="modal_title mb-10">
                                    <center>
                                        <h2>INICIAR SESIÓN</h2>
                                    </center>

                                </div>
                                <div class="variants_selects">
                                    <div class="contact_message form">
                                        <form id="form_login" name="form_login" method="post" onsubmit="return validarRecaptchaYEnviar(event, widgetId1)">
                                            <div class="form_group">
                                                <input name="email" type="email" placeholder="Correo Electronico" required>
                                            </div>
                                            <div class="form_group">

                                                <input id="password" type="password" name="password" placeholder="Contraseña" required>
                                                <span class="fa fa-eye-slash icon" onclick="mostrarPassword()"></span>
                                            </div>


                                            <!-- reCAPTCHA -->
                                            <div id="recaptcha1"></div>

                                            </br>

                                            <div class="login_submit">
                                                <center>
                                                    <button type="submit" name="btn_login" id="btn_login" value="login">Ingresar</button>
                                                </center>
                                            </div>
                                            </br>
                                        </form>



                                        <div>
                                            <center>
                                                <a href="javascript:void(0);" onclick="mostrarCambioContrasena()" class="link-iniciar-sesion">
                                                    ¿Olvidaste tu contraseña?
                                                </a>
                                                <span> | </span>
                                                <a href="javascript:void(0);" onclick="mostrarCrearCuenta()" class="link-crear-cuenta">
                                                    ¿No tienes cuenta? Crear una
                                                </a>
                                            </center>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fin de sección de inicio de sesion -->

                        <!-- Sección de creación de cuenta -->
                        <div class="col-lg-12 col-md-12 col-sm-12" id="signup_section" style="display: none;">
                            <div class="modal_right">
                                <div class="modal_title mb-10">
                                    <center>
                                        <h2>CREAR CUENTA</h2>
                                    </center>

                                </div>

                                <div class="variants_selects">
                                    <div class="contact_message form">
                                        <form id="form_cuen" name="form_cuen" method="post" onsubmit="return validarRecaptchaYEnviar(event, widgetId2)">
                                            <div class="form_group">
                                                <input type="text" name="nombre_cuen" id="nombre_cuen" placeholder="Nombre Completo" required>
                                            </div>

                                            <div style="display: flex; gap: 10px;">
                                                <div class="form_group" style="flex: 1;">
                                                    <select name="clie_tipo_doc" class="form-control name_list input-sm" required style="width: 100%; padding: 10px; box-sizing: border-box;">
                                                        <option value="">Tipo de Documento</option>
                                                        <?php
                                                        $datos = mysqli_query($api, "SELECT * FROM type_document_identifications ");
                                                        while ($fila = mysqli_fetch_array($datos)) {
                                                            echo ' <option value="' . $fila['id'] . '">' . $fila['name'] . '</option>';
                                                        }
                                                        ?>
                                                    </select>
                                                </div>
                                                <div class="form_group" style="flex: 1;">
                                                    <input name="cedula_cuen" id="cedula_cuen" placeholder="Numero de Documento" type="number" min="7" style="width: 100%; padding: 10px; box-sizing: border-box;" required>
                                                </div>
                                            </div>
                                            <div class="form_group">
                                                <input name="email_cuen" id="email_cuen" type="email" placeholder="Correo Electronico" type="email" required>
                                            </div>

                                            <div style="display: flex; gap: 10px;">

                                                <div class="form_group" style="flex: 1;">
                                                    <section id="intro" style="width: 100%; padding: 1px; box-sizing: border-box;">
                                                        <select name="clie_departamento" id="clie_departamento" class="form-control name_list input-sm">
                                                            <option value=""> Departamento </option>
                                                            <?php
                                                            $datos = mysqli_query($api, "SELECT * FROM departments order by name asc");
                                                            while ($fila = mysqli_fetch_array($datos)) {
                                                                echo '<option value="' . $fila['id'] . '">' . $fila['name'] . '</option>';
                                                            }
                                                            ?>
                                                        </select>
                                                    </section>
                                                </div>
                                                <div class="form_group" style="flex: 1;">
                                                    <section id="" style="width: 100%; padding: 1px; box-sizing: border-box;">
                                                        <select name="clie_ciudad" id="clie_ciudad" class="form-control name_list input-sm">
                                                            <option value=""> Ciudad </option>
                                                        </select>
                                                    </section>
                                                </div>

                                            </div>

                                     
                                            <div style="display: flex; gap: 10px;">
                                                <div class="form_group" style="flex: 1;">
                                                    <input name="celular_cuen" id="celular_cuen" placeholder="Celular" type="number" min="10" style="width: 100%; padding: 10px; box-sizing: border-box;" required>
                                                </div>
                                                <div class="form_group" style="flex: 1;">
                                                    <input name="clie_barri" id="clie_barri" type="text" placeholder="Barrio" style="width: 100%; padding: 10px;" required>
                                                </div>

                                            </div>

                                            <div class="form_group">
                                                <input name="clie_direc" id="clie_direc" type="text" placeholder="Dirección" required>
                                            </div>


                                            <div style="display: flex; gap: 10px;">
                                                <div class="form_group" style="flex: 1;">
                                                    <input type="password" id="password_cuen_1" name="password_cuen_1" placeholder="Contraseña" style="width: 100%; padding: 10px; box-sizing: border-box;" required>
                                                    <span class="fa fa-eye-slash icon_1" onclick="mostrarPassword_1()"></span>
                                                </div>
                                                <div class="form_group" style="flex: 1;">
                                                    <input type="password" id="password_cuen_2" name="password_cuen_2" placeholder="Confirmar Contraseña" style="width: 100%; padding: 10px; box-sizing: border-box;" required>
                                                    <span class="fa fa-eye-slash icon_2" onclick="mostrarPassword_2()"></span>
                                                </div>
                                            </div>


                                            <!-- reCAPTCHA -->

                                            <div id="recaptcha2"></div>

                                            <br>

                                            <div id="resultados_cuen"></div>
                                            <br>
                                            <div class="login_submit">
                                                <center>

                                                    <button type="submit" name="btn_cuen" id="btn_cuen" value="cuen">Crear cuenta</button>

                                                </center>
                                            </div>
                                            </br>
                                        </form>
                                        <center>
                                            <a href="javascript:void(0);" onclick="mostrarIniciarSesion()" class="link-iniciar-sesion">
                                                ¿Ya tienes cuenta? Inicia sesión
                                            </a>
                                        </center>


                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fin de sección de creación de cuenta -->

                        <!-- Sección de cambio de contraseña -->
                        <div class="col-lg-12 col-md-12 col-sm-12" id="combio_contra" style="display: none;">
                            <div class="modal_right">
                                <div class="modal_title mb-10">
                                    <center>
                                        <h2>Recuperar contraseña</h2>
                                    </center>

                                </div>

                                <div class="variants_selects">
                                    <div class="contact_message form">
                                        <div id="resul_contra" class="header-title"></div>
                                        <form class="login-form" method="post" action="" id="contrasena" name="contrasena">

                                            <div class="form-group">
                                                <input class="form-control" class="" type="email" name="correo_cambi" id="correo_cambi" value="" required placeholder="Email/Correo">
                                            </div>
                                            </br>
                                            <div class="form-group">
                                                <input class="form-control" type="number" name="documento_cambi" id="documento_cambi" value="" required placeholder="Documento">
                                            </div>
                                            </br>
                                            <div class="form-group">
                                                <center>
                                                    <button type="submit" id="enviar_contra" name="enviar_contra">Enviar</button>
                                                </center>

                                            </div>
                                            </br>
                                            <div id="resul_mensaje">
                                            </div>
                                        </form>
                                        <center>
                                            <a href="javascript:void(0);" onclick="mostrarIniciarSesionContrasena()" class="link-iniciar-sesion">
                                                ¿Ya tienes cuenta? Inicia sesión
                                            </a>
                                        </center>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fin de Sección de cambio de contraseña -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="cart-container">
    <a href="cart.php" class="whatsapp_2">
        <?php if (isset($_SESSION['carrito'])) {
            $carrito_mio = $_SESSION['carrito'];
            $total = 0;
            $total_cantidades = 0;
            for ($i = 0; $i <= count($carrito_mio) - 1; $i++) {
                if (isset($carrito_mio[$i])) {
                    if ($carrito_mio[$i] != NULL) {
                        $cantidad_agregada = $carrito_mio[$i]['cantidad'];
                        $total_cantidades += $cantidad_agregada;
                    }
                }
                if ($total_cantidades != 0) { ?>
                    <span id="notification_count2"><?php echo $total_cantidades; ?></span>
        <?php
                }
            }
        }
        ?>
        <i class="fa fa-shopping-cart"></i>
    </a>
</div>


<style>
    .link-crear-cuenta,
    .link-iniciar-sesion {
        color: rgb(255, 0, 0);
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
    }

    .link-crear-cuenta:hover,
    .link-iniciar-sesion:hover {
        text-decoration: underline;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        $("#clie_departamento").change(function() {
            $.get("php_menu/lista_ciudades.php", "clie_departamento=" + $("#clie_departamento").val(), function(data) {
                $("#clie_ciudad").html(data);
                console.log(data);
            });
        });
    });
</script>




<script type="text/javascript">
    function mostrarCrearCuenta() {
        document.getElementById('login_section').style.display = 'none';
        document.getElementById('signup_section').style.display = 'block';
    }

    function mostrarIniciarSesion() {
        document.getElementById('signup_section').style.display = 'none';
        document.getElementById('login_section').style.display = 'block';
    }

    function mostrarCambioContrasena() {
        document.getElementById('login_section').style.display = 'none';
        document.getElementById('combio_contra').style.display = 'block';
    }

    function mostrarIniciarSesionContrasena() {
        document.getElementById('combio_contra').style.display = 'none';
        document.getElementById('login_section').style.display = 'block';
    }

    var widgetId1, widgetId2;

    // Callback para renderizar los reCAPTCHAs
    var onloadCallback = function() {
        widgetId1 = grecaptcha.render('recaptcha1', {
            'sitekey': '<?php echo $tar_promo ?>', // Cambia por tu clave real
            'theme': 'light'
        });
        widgetId2 = grecaptcha.render('recaptcha2', {
            'sitekey': '<?php echo $tar_promo ?>', // Cambia por tu clave real
            'theme': 'light'
        });
    };

    // Validar el reCAPTCHA antes de enviar el formulario
    function validarRecaptchaYEnviar(event, widgetId) {
        var response = grecaptcha.getResponse(widgetId);

        // Verifica si el reCAPTCHA está completado
        if (response.length === 0) {
            event.preventDefault(); // Detiene el envío del formulario

            Swal.fire({
                title: "Error",
                text: "Por favor, completa el reCAPTCHA antes de continuar..",
                icon: "error"
            });
            return false; // Previene cualquier acción adicional
        }

        // Si el reCAPTCHA está completo, habilitamos el envío
        console.log("reCAPTCHA completado:", response);
        return true; // Permite el envío del formulario
    }

    $("#form_login").submit(function(event) {
          // Validar el reCAPTCHA antes de enviar
          if (!validarRecaptchaYEnviar(event, widgetId1)) {
              return false; // No se envía si el captcha no está validado
          }

          event.preventDefault(); // Prevenir envío normal
          $('#btn_login').attr("disabled", true); // Deshabilita el botón

          var parametros = $(this).serialize();

          $.ajax({
              type: "POST",
              url: "./php_cuenta/iniciar_sesion.php",
              data: parametros,
              beforeSend: function() {
                  $('#resultados_login')
                      .stop(true, true) // Detiene animaciones previas
                      .show()
                      .html('<img src="../img/ajax-loader.gif" alt="Cargando..." height="15px" />');
              },
              success: function(datos) {
                  $('#resultados_login')
                      .stop(true, true)
                      .show()
                      .html(datos); // Muestra la respuesta del servidor

                  $('#btn_login').attr("disabled", false); // Reactiva el botón

                  // Opcional: ocultar el mensaje después de unos segundos SOLO si login fue exitoso
                  if (datos.trim() === "OK") {
                      setTimeout(function() {
                          $('#resultados_login').fadeOut();
                      }, 4000);
                      // Redirigir, recargar o hacer algo más si querés
                      // location.href = "dashboard.php"; por ejemplo
                  }
              },
              error: function() {
                  $('#resultados_login')
                      .stop(true, true)
                      .show()
                      .html('<div class="error">Error en el servidor. Intente nuevamente.</div>');
                  $('#btn_login').attr("disabled", false);
              }
          });
      });
   // Enviar el formulario cuando se hace clic en el botón del segundo formulario
$("#form_cuen").submit(function(event) {
    // Validar el reCAPTCHA del segundo formulario antes de enviar
    if (!validarRecaptchaYEnviar(event, widgetId2)) {
        return false; // Si no está validado, no se envía el formulario
    }
    
    var celular = document.getElementById('celular_cuen').value;
    var cedula = document.getElementById('cedula_cuen').value;
    var isValid = true; // Variable para saber si las validaciones son correctas

    // Verifica si ambos tienen al menos 10 dígitos
    if (celular.length < 10) {
        alert('El celular debe tener un mínimo de 10 números');
        isValid = false; // Si la validación falla, cambia el estado
    }
    
    if (cedula.length < 7) {
        alert('La cédula debe tener un mínimo de 7 números');
        isValid = false; // Si la validación falla, cambia el estado
    }

    // Si alguna validación falló, evita el envío del formulario
    if (!isValid) {
        event.preventDefault();  // Evita que se envíe el formulario
        return;  // Termina la ejecución de la función
    }

    // Si todas las validaciones pasan, proceder con el envío AJAX
    event.preventDefault(); // Prevenir el envío tradicional del formulario
    $('#btn_cuen').attr("disabled", true); // Deshabilitar el botón para evitar múltiples envíos

    var parametros = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "./php_cuenta/crear_cuenta.php",
        data: parametros,
        beforeSend: function(objeto) {
            $('#resultados_cuen').html('<img src="../img/ajax-loader.gif" alt="" height="15px"  />');
        },
        success: function(datos) {
            // Mostrar el resultado
            $("#resultados_cuen").html(datos);
            $('#btn_cuen').attr("disabled", false); // Habilitar el botón después de la respuesta
            load(1); // Cargar lo que sea necesario
        }
    });
});



   
        
 









    $("#contrasena").submit(function(event) {
        $('#enviar_contra').attr("disabled", true);
        var parametros = $(this).serialize();
        $.ajax({
            type: "post",
            url: "./php_tienda/cambio_contra.php",
            data: parametros,

            beforeSend: function() {
                $('#resul_mensaje').show().html('<div class="alert alert-warning" role="alert"><label>Si no recibes el correo, no olvides revisar<br> la carpeta de spam.</label></div>');
                setTimeout(function() {
                    $('#resul_mensaje').fadeOut();
                }, 4000);


                $('#resul_contra').show().html('<img src="img/ajax-loader.gif" alt="" height="15px" />');
                // Ocultar después de 3 segundos (3000ms)
                setTimeout(function() {
                    $('#resul_contra').fadeOut();
                }, 7000);
            },

            success: function(datos) {
                $("#resul_contra").html(datos);
                $('#enviar_contra').attr("disabled", false);

            }
        });
        event.preventDefault();
    })
</script>


<script type="text/javascript">
    //login


    //mostrar password
    function mostrarPassword() {
        var cambio = document.getElementById("password");
        if (cambio.type == "password") {
            cambio.type = "text";
            $('.icon').removeClass(' fa-eye-slash').addClass('fa fa-eye');
        } else {
            cambio.type = "password";
            $('.icon').removeClass(' fa-eye').addClass('fa fa-eye-slash');
        }
    }
    $(document).ready(function() {
        $('#ShowPassword').click(function() {
            $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
        });
    });

    //mostrar password 1
    function mostrarPassword_1() {
        var cambio = document.getElementById("password_cuen_1");
        if (cambio.type == "password") {
            cambio.type = "text";
            $('.icon_1').removeClass(' fa-eye-slash').addClass('fa fa-eye');
        } else {
            cambio.type = "password";
            $('.icon_1').removeClass(' fa-eye').addClass('fa fa-eye-slash');
        }
    }
    $(document).ready(function() {
        $('#ShowPassword').click(function() {
            $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
        });
    });

    //mostrar password 2
    function mostrarPassword_2() {

        var cambio = document.getElementById("password_cuen_2");
        if (cambio.type == "password") {
            cambio.type = "text";
            $('.icon_2').removeClass(' fa-eye-slash').addClass('fa fa-eye');
        } else {
            cambio.type = "password";
            $('.icon_2').removeClass(' fa-eye').addClass('fa fa-eye-slash');
        }
    }
    $(document).ready(function() {
        $('#ShowPassword').click(function() {
            $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
        });
    });
</script>

<!--- estilos de la notificación carrito y deseo --->
<style>
    #notification_count1 {
        background: red;
        color: white;
        border-radius: 100%;
        width: 21px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        position: absolute;
        top: -5px;
        right: -5px;
    }

    .wishlist {
        position: relative;
    }

    #notification_count1:hover::after {
        content: attr(title);
        position: absolute;
        top: 25px;
        left: -10px;
        background: black;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        white-space: nowrap;
        z-index: 10;
    }

    #notification_count2 {
        background: red;
        color: white;
        border-radius: 100%;
        width: 21px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        position: absolute;
        top: -5px;
        right: -5px;
    }

    #notification_count2:hover::after {
        content: attr(title);
        position: absolute;
        top: 25px;
        left: -10px;
        background: black;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        white-space: nowrap;
        z-index: 10;
    }
</style>