0 resultss<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>25</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>25</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>26</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>26</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>27</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>27</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>28</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>28</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>29</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>29</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>30</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>30</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>31</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>31</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>32</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>32</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>33</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>33</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>34</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>34</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>35</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>35</b><br />
<br />
<b>Warning</b>:  Undefined array key 0 in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>36</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/imporsuitpro/public_html/tiendaclickec/Views/templates/header.php</b> on line <b>36</b><br />

<style>
    /* header */
    .navbar-custom {
        background-color: ;
        /* Ajusta el color según sea necesario */
    }

    .navbar-custom .nav-link {
        color: white;
    }

    .navbar-custom .navbar-brand img {
        height: 60px;
        width: 60px;
    }

    .search-box {
        border: none;
        border-radius: 20px;
        padding: 5px 15px;
    }

    .search-box:focus {
        box-shadow: none;
        outline: none;
    }

    @media (min-width: 992px) {
        .navbar-nav {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            /* Menú alineado a la izquierda en pantallas grandes */
        }

        .navbar-brand {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    /* slider */
    .carousel-item {
        height: 452px !important;
    }

    .carousel-inner {
        height: 452px !important;
    }

    .carousel-item img {
        height: 100%;
        width: 100%;
        object-fit: fill;
        /* Ajusta la imagen sin distorsionarla */
    }

    @media (max-width: 768px) {
        .carousel-item {
            height: 200px !important;
        }

        .carousel-inner {
            height: 200px !important;
        }

        .carousel-item img {
            object-fit: fill;
        }
    }

    /* Arriba */
    .marquee-containerArriba {
        overflow: hidden;
        background-color: ;
        color: white;
        width: 100%;
        height: 40px;
        position: relative;
    }

    .marqueeArriba {
        display: flex;
        white-space: nowrap;
        animation: marqueeAnimationArriba 20s linear infinite;
    }

    .marquee-contentArriba {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding-right: 100% !important;
    }

    @keyframes marqueeAnimationArriba {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    /* fin arriba */
    /* Abajo */
    .marquee-containerAbajo {
        overflow: hidden;
        background-color: ;
        color: white;
        width: 100%;
        height: 40px;
        position: relative;
    }

    .marqueeAbajo {
        display: flex;
        white-space: nowrap;
        animation: marqueeAnimationAbajo 20s linear infinite;
    }

    .marquee-contentAbajo {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding-right: 100% !important;
    }

    @keyframes marqueeAnimationAbajo {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }
    /* Fin abajo */

    /* fin slider */
    .seccion {
        padding-top: 50px;
        padding-bottom: 50px;
        padding-right: 15%;
        padding-left: 15%;
    }


    /* Fin header */

    /* FOOTER TEMPORAL */
    .footer {
        background-color: #f8f9fa;
        padding: 20px 0;
        color: #6c757d;
    }

    .footer .copyright {
        background-color: #343a40;
        color: #ffffff;
        padding: 10px 0;
    }

    .footer a {
        color: #6c757d;
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }

    /* FIN FOOTER TEMPORAL */

    /* Seccion de css añadido del anteiror sistema */
    .caja {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        border-radius: 25px;
        -webkit-box-shadow: -2px 5px 5px 0px rgba(0, 0, 0, 0.23);
        -moz-box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.23);
        box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.23);
        background-color: white;
    }

    .degraded-line {
        width: 100%;
        height: 1px;
        background: radial-gradient(circle, #000000 30%, transparent 90%);
    }

    .category-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    .category-image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
        display: inline-block;
        margin-bottom: 10px;
    }

    .category-button {
        display: inline-block;
        width: auto;
        padding: 5px 20px;
        margin: 0 auto;
        border: none;
        cursor: pointer;
        text-align: center;
    }

    .category-container a {
        text-decoration: none;
        color: inherit;
    }

    .testimonios-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .testimonios-image {
        background-size: cover;
        background-position: center;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-bottom: 15px;
    }

    .testimonio-text {
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        font-size: 12px;
    }

    /* Owl Carousel Customizations */
    .owl-carousel .owl-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
    }

    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 25px;
    }

    .owl-carousel .owl-nav button.owl-prev {
        left: -2px;
    }

    .owl-carousel .owl-nav button.owl-next {
        right: -2px;
    }

    .owl-carousel .owl-nav button {
        font-size: 10em;
        color: #333;
    }

    .card {
        width: 80%;
        margin: auto;
    }

    @media (max-width: 768px) {
        .card {
            width: 100%;
        }
    }

    .card h5 {
        font-size: 1rem !important;
        color: #000 !important;
    }

    .card-text {
        font-size: 0.9rem !important;
        color: #6c757d !important;
    }

    .text-muted.text-decoration-line-through {
        font-size: 14px;
    }

    .img-container {
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .card-body {
        display: flex;
        flex-direction: column;
    }

    .text-primary.fs-5.pe-2 {
        font-size: 1rem;
    }

    .product-footer {
        display: flex;
        align-items: center;
    }

    .bg-primary.text-white {
        background-color: #0d6efd !important;
        color: #fff !important;
        padding: 5px;
        border-radius: 5px;
    }

    .btn-primary {
        background-color: #0d6efd !important;
        border-color: #0d6efd !important;
    }

    .btn-primary:hover {
        background-color: #0b5ed7 !important;
        border-color: #0a58ca !important;
    }

    .btn {
        display: inline-block;
        font-weight: 400;
        color: #fff;
        text-align: center;
        vertical-align: middle;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.375rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .item {
        padding: 15px;
    }

    .carousel-item {
        min-height: 300px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    @media (max-width: 768px) {
        .carousel-item {
            height: auto !important;
            min-height: 120px;
            background-position: center;
            background-size: contain;
        }

        .carousel-caption {
            display: none;
        }
    }

    .carousel-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color:  !important;
        opacity:  !important;
    }

    .carousel-caption {
        position: relative;
        z-index: 3;
    }

    .carousel-control-prev,
    .carousel-control-next {
        z-index: 1;
    }

    .rounded-circle {
        border-radius: 50% !important;
    }

    .text-decoration-none {
        text-decoration: none !important;
    }

    .text-dark {
        color: #343a40 !important;
    }

    .card-title {
        margin-bottom: 0.75rem;
    }

    .card-body_icon i {
        color:  !important;
        margin-bottom: 15px !important;
    }

    /* Fin seccion de css añadido del anteiror sistema */

    /* footer del anterior sistema */
    .footer-contenedor {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 20px;
        justify-content: space-around;
        place-content: center;
        background-color: #f1f1f1;
        flex-wrap: wrap;
    }

    .footer-contenido {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .descripcion {
        font-size: 12px;
        text-align: center;
    }

    .lista_legal {
        list-style: none;
        padding: 0;
    }

    .lista_legal li {
        font-size: 12px;
        margin: 5px;
    }

    #navbarLogo {
        width: 50px;
        height: 50px;
    }

    .icon-redes {
        margin: 5px;
    }

    .redes {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icon-redes img {
        width: 40px;
        height: 40px;
    }

    .icon-redes img:hover {
        transform: scale(1.4);
    }

    .icon-redes img:active {
        transform: scale(1);
    }

    .ws,
    .ws_flotante {
        color: #24d366;
        font-size: 2em;
    }

    .ws_flotante {
        font-size: 4em;
    }

    .send {
        color: red;
        font-size: 2em;
    }

    @keyframes sacudir {
        0% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(10deg);
        }

        50% {
            transform: rotate(-10deg);
        }

        75% {
            transform: rotate(10deg);
        }

        100% {
            transform: rotate(-10deg);
        }
    }

    .icon-redes:hover {
        animation: sacudir 0.5s;
    }

    .icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    /* Añadir media queries para responsividad */
    @media (max-width: 768px) {
        .footer-contenedor {
            grid-template-columns: repeat(2, 1fr);
        }

        .whatsapp-float {
            bottom: 20px;
            right: 20px;
        }
    }

    @media (max-width: 480px) {
        .footer-contenedor {
            grid-template-columns: 1fr;
        }

        .descripcion,
        .lista_legal li {
            font-size: 14px;
        }

        .icon-redes img {
            width: 30px;
            height: 30px;
        }
    }

    .footer-container {
        background-color: #333;
        color: white;
        padding: 20px 0;
        text-align: center;
    }

    .footer-container h3,
    .footer-container p {
        margin: 5px 0;
    }

    .footer-container a {
        color: white;
        text-decoration: none;
    }

    .footer-container a:hover {
        text-decoration: underline;
    }

    /* Botón flotante para WhatsApp */
    .whatsapp-float {
        position: fixed;
        width: auto;
        bottom: 40px;
        right: 40px;
        background-color: transparent;
        padding: -5px;
        border-radius: 5px;
        text-decoration: none;
        z-index: 100;
    }

    .whatsapp-float:hover {
        background-color: #128C7E;
    }

    /* fin footer del anterior sistema */

    /* css faltante */
    .tachado {
        text-decoration: line-through;
    }

    .ahorro {
        font-size: 10px;
    }

    @media (max-width: 768px) {
        .ahorro {
            font-size: 15px;
        }
    }

    .texto_boton {
        color:  !important;
        background-color:  !important;
    }

    /* fin css faltante */
</style><script>
    const SERVERURL = "https://new.imporsuitpro.com/";
    const MARCA = "IMPORSUIT";
    const ID_PLATAFORMA = "SELECT * FROM plataformas where url_imporsuit = 'https://www.imporsuitpro.com'";
</script>


<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tienda</title>
    <link rel="icon" href="https://new.imporsuitpro.com/" type="image/x-icon">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.0/nouislider.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <!-- <link rel="stylesheet" href="/Views/templates/css/header_style.php"> -->

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            let formData_pixel = new FormData();
            formData_pixel.append("id_plataforma", ID_PLATAFORMA); // Añadir el ID de la plataforma al FormData

            $.ajax({
                url: SERVERURL + "tienda/obtenerPixeles",
                type: "POST", // Cambiar a POST para enviar FormData
                data: formData_pixel,
                processData: false, // No procesar los datos
                contentType: false, // No establecer ningún tipo de contenido
                dataType: "json",
                success: function(response) {
                    console.log("respuesta: ", response);
                    // Supongamos que la respuesta es un array de objetos
                    if (response && Array.isArray(response)) {
                        response.forEach(function(pixelData) {
                            if (pixelData.pixel) {
                                // Crear un div temporal para insertar el contenido del script
                                var tempDiv = document.createElement("div");
                                tempDiv.innerHTML = pixelData.pixel;

                                // Insertar todos los elementos <script> del div temporal al <head>
                                var scripts = tempDiv.getElementsByTagName("script");
                                for (var i = 0; i < scripts.length; i++) {
                                    var script = document.createElement("script");
                                    script.type = "text/javascript";
                                    if (scripts[i].src) {
                                        script.src = scripts[i].src;
                                    } else {
                                        script.innerHTML = scripts[i].innerHTML;
                                    }
                                    document.head.appendChild(script);
                                }

                                // Insertar todos los elementos <noscript> del div temporal al <body>
                                var noscripts = tempDiv.getElementsByTagName("noscript");
                                for (var j = 0; j < noscripts.length; j++) {
                                    var noscript = document.createElement("noscript");
                                    noscript.innerHTML = noscripts[j].innerHTML;
                                    document.body.appendChild(noscript);
                                }
                            } else {
                                console.error("El objeto no contiene el campo 'pixel'.", pixelData);
                            }
                        });
                    } else {
                        console.error("La respuesta no es el array esperado.");
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error al obtener los píxeles:", error);
                }
            });
        });
    </script>



</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-custom">
        <div class="container-fluid">
            <a class="navbar-brand d-lg-none ms-auto" href="https://www.imporsuitpro.com">
                <img src="https://new.imporsuitpro.com/" alt="IMPORT SHOP">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav" style="font-size: 20px;">
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.imporsuitpro.com">Inicio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="categoria">Catálogo</a>
                    </li>
                </ul>
                <a class="navbar-brand d-none d-lg-block mx-auto" href="https://www.imporsuitpro.com">
                    <img src="https://new.imporsuitpro.com/" id="imagen_logo" alt="IMPORT SHOP">
                </a>
                <form class="d-flex ms-auto">
                    <input class="form-control search-box" type="search" placeholder="Buscar" aria-label="Buscar">
                </form>
            </div>
        </div>
    </nav>
<main style="background-color: #f9f9f9;">
    <!-- Slider -->
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators"></div>
        <div class="carousel-inner"></div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <!-- fin slider -->

    <!-- animacion -->
    <div class="marquee-containerArriba">
        <div class="marqueeArriba">
            <!-- Los contenidos se llenarán aquí -->
        </div>
    </div>
    <!-- fin animacion -->

    <!-- categorias -->
    <div class="container mt-4">
        <h1 style="text-align: center">Categorías</h1>
        <br>
        <div class="caja" style="margin-bottom: 50px;">
            <div class="owl-carousel owl-theme" id="categories-container">
                <!-- Aquí se insertarán las categorías dinámicamente -->
            </div>
        </div>
    </div>
    <!-- fin categorias -->
    <div class="degraded-line"></div>
    <!-- destacados -->
    <div class="container mt-4">
        <h1 class="text-center">Destacados</h1>
        <br>
        <!-- Productos -->
        <div class="owl-carousel owl-theme mb-5" id="productos-carousel">
            <!-- Los productos se cargarán aquí dinámicamente -->
        </div>
        <!-- Fin Productos -->
    </div>

    <!-- fin destacados -->

    <!-- Iconos -->
    <div class="container" style="margin-bottom: 20px;">
        <div class="row" id="iconos-container">
            <!-- Los iconos se cargarán aquí dinámicamente -->
        </div>
    </div>
    <!-- Fin Iconos -->

    <!-- animacion -->
    <div class="marquee-containerAbajo">
        <div class="marqueeAbajo">
            <!-- Los contenidos se llenarán aquí -->
        </div>
    </div>
    <!-- fin animacion -->

    <!-- Testimonios -->
    <div class="container mt-4 testimonios">
        <h1 style="text-align: center">Testimonios</h1>
        <br>
        <div class="caja" style="margin-bottom: 50px;">
            <div class="owl-carousel owl-theme" id="testimonios-carousel">
                <!-- Los testimonios se cargarán aquí dinámicamente -->
            </div>
        </div>
    </div>
    <!-- Fin Testimonios -->

</main>

<script>
    $(document).ready(function() {
        /* Slider */
        let formDataSlider = new FormData();
        formDataSlider.append("id_plataforma", ID_PLATAFORMA);
        $.ajax({
            url: SERVERURL + 'Tienda/bannertienda',
            method: 'POST',
            data: formDataSlider,
            contentType: false,
            processData: false,
            dataType: "json",
            success: function(data) {

                let indicators = '';
                let inner = '';
                let alineacion = "";
                $.each(data, function(index, banner) {

                    image_path = obtenerURLImagen(banner.fondo_banner, SERVERURL);
                    if (banner.alineacion == 1) {
                        alineacion = "text-align-last: left;"
                    } else if (banner.alineacion == 2) {
                        alineacion = "text-align-last: center;"
                    } else if (banner.alineacion == 3) {
                        alineacion = "text-align-last: right;"
                    }
                    const isActive = index === 0 ? 'active' : '';
                    indicators += `<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="${index}" class="${isActive}" aria-current="true" aria-label="Slide ${index + 1}"></button>`;
                    inner += `<div class="carousel-item ${isActive}">
                              <img src="${image_path}" class="d-block w-100" alt="...">
                              <div class="carousel-caption d-none d-md-block" style="${alineacion}">
                                  <h5>${banner.titulo}</h5>
                                  <p>${banner.texto_banner}</p>
                                  <a class="btn texto_boton" href="${banner.enlace_boton}" target="_blank">${banner.texto_boton}</a>
                              </div>
                          </div>`;
                });
                $('.carousel-indicators').html(indicators);
                $('.carousel-inner').html(inner);
            },
            error: function(error) {
                console.error('Error fetching banner data', error);
            }
        });
        /* Fin Slider */
        /* Categorias */
        let formDataCategoria = new FormData();
        formDataCategoria.append("id_plataforma", ID_PLATAFORMA);

        $.ajax({
            url: SERVERURL + 'Tienda/categoriastienda',
            method: 'POST',
            data: formDataCategoria,
            contentType: false,
            processData: false,
            success: function(response) {
                let categorias = JSON.parse(response); // Asegúrate de que la respuesta sea un objeto JSON

                // Verifica si la respuesta es un array o un objeto
                if (!Array.isArray(categorias)) {
                    categorias = Object.values(categorias);
                }

                categorias.forEach(categoria => {
                    let imagePath = obtenerURLImagen(categoria.imagen, SERVERURL);
                    let categoriaHtml = `
                        <div class="item">
                            <div class="category-container d-flex flex-column align-items-center">
                                <a href="categoria?id_cat=${categoria.id_linea}" class="category-link">
                                    <div class="category-image rounded-circle" style="background-image: url('${imagePath}');"></div>
                                </a>
                                <a class="btn category-button boton texto_boton" style="border-radius: 0.5rem;" href="categoria?id_cat=${categoria.id_linea}" role="button">
                                    ${categoria.nombre_linea}
                                </a>
                            </div>
                        </div>
                    `;

                    $('#categories-container').append(categoriaHtml);
                });

                $('#categories-container').owlCarousel({
                    loop: false,
                    margin: 10,
                    responsive: {
                        0: {
                            items: 1
                        },
                        768: {
                            items: 2
                        },
                        992: {
                            items: 3
                        }
                    },
                    nav: true,
                    navText: [
                        '<i class="fas fa-chevron-left"></i>',
                        '<i class="fas fa-chevron-right"></i>'
                    ]
                });
            },
            error: function(error) {
                console.error("Error al consumir la API:", error);
            }
        });
        /* Fin Categorias */
        /* Destacados */
        // Inicializar el carrusel vacío
        $("#productos-carousel").owlCarousel({
            loop: false,
            margin: 10,
            responsive: {
                0: {
                    items: 1
                },
                576: {
                    items: 2
                },
                768: {
                    items: 2
                },
                992: {
                    items: 3
                },
                1200: {
                    items: 4
                }
            },
            nav: true,
            navText: [
                '<i class="fas fa-chevron-left"></i>',
                '<i class="fas fa-chevron-right"></i>'
            ]
        });

        // Cargar productos destacados mediante AJAX
        let formDataProductos = new FormData();
        formDataProductos.append("id_plataforma", ID_PLATAFORMA);

        $.ajax({
            url: SERVERURL + 'Tienda/destacadostienda',
            method: 'POST',
            data: formDataProductos,
            contentType: false,
            processData: false,
            success: function(response) {
                try {
                    var productos = JSON.parse(response);
                } catch (e) {
                    console.error('Error al parsear la respuesta:', e);
                    return;
                }

                if (productos && Array.isArray(productos)) {
                    var $carousel = $("#productos-carousel");
                    let image_path = "";
                    productos.forEach(function(producto) {
                        var precioEspecial = parseFloat(producto.pvp_tienda);
                        var precioNormal = parseFloat(producto.pref_tienda);

                        var ahorro = 0;
                        if (precioNormal > 0) {
                            ahorro = 100 - (precioEspecial * 100 / precioNormal);
                        }
                        image_path = obtenerURLImagen(producto.imagen_principal_tienda, SERVERURL);
                        var productItem = `
                        <div class="item">
                        <div class="grid-container">
                        <div class="card" style="border-radius: 1rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
                        <div class="img-container" style="aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: -50px">
                        <a href="${SERVERURL}producto?id=${producto.id_producto_tienda}">
                        <img src="${image_path}" class="card-img-top mx-auto d-block" alt="Product Name" style="object-fit: cover; width: 70%; height: 70%; margin-top: 10px;">
                        </a>
                        </div>
                        <div class="card-body d-flex flex-column" style="margin-top: 1rem;">
                        <p class="card-text flex-grow-1 mt-4" style="margin-top: 1rem;">
                        <a href="producto?id=${producto.id_producto_tienda}" style="text-decoration: none; color:black;">
                            <strong>${producto.nombre_producto_tienda}</strong>
                        </a>
                    </p>
                    <div class="product-footer mb-2">
                        <div class="d-flex flex-row">
                            <div>
                                <span style="font-size: 12px; color:#4461ed; padding-right: 10px;">
                                    <strong>$ ${number_format(precioEspecial, 2)}</strong>
                                </span>
                            </div>
                            ${precioNormal > 0 ? `
                            <div>
                                <span class="tachado" style="font-size: 12px; padding-right: 10px;">
                                    <strong>$ ${number_format(precioNormal, 2)}</strong>
                                </span>
                            </div>
                            <div class="px-2" style="background-color: #4464ec; color:white; border-radius: 0.3rem; max-width: 70%;">
                                <span class="ahorro"><i class="bx bxs-purchase-tag"></i>
                                    <strong>AHORRA UN ${number_format(ahorro)}%</strong>
                                </span>
                            </div>
                            ` : ''}
                        </div>
                    </div>
                    <a style="z-index:2; height: 40px; font-size: 16px" class="btn boton texto_boton mt-2" href="producto?id=${producto.id_producto_tienda}">Comprar</a>
                </div>
            </div>
        </div>
    </div>
`;

                        // Agregar el producto al carrusel
                        $carousel.trigger('add.owl.carousel', [$(productItem)]);
                    });

                    // Refrescar el carrusel
                    $carousel.trigger('refresh.owl.carousel');
                } else {
                    console.error('La respuesta no contiene productos válidos.');
                }
            },
            error: function(error) {
                console.log('Error al cargar los productos destacados:', error);
            }
        });

        function obtenerURLImagen(imagePath, serverURL) {
            // Verificar si el imagePath no es null
            if (imagePath) {
                // Verificar si el imagePath ya es una URL completa
                if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
                    // Si ya es una URL completa, retornar solo el imagePath
                    return imagePath;
                } else {
                    // Si no es una URL completa, agregar el serverURL al inicio
                    return `${serverURL}${imagePath}`;
                }
            } else {
                // Manejar el caso cuando imagePath es null
                console.error("imagePath es null o undefined");
                return null; // o un valor por defecto si prefieres
            }
        }
        /* Fin Destacados */

        /* Iconos */
        // Cargar iconos mediante AJAX
        let formDataIconos = new FormData();
        formDataIconos.append("id_plataforma", ID_PLATAFORMA);

        $.ajax({
            url: SERVERURL + 'Tienda/iconostienda',
            method: 'POST',
            data: formDataIconos,
            contentType: false,
            processData: false,
            success: function(response) {
                try {
                    var iconos = JSON.parse(response);
                } catch (e) {
                    console.error('Error al parsear la respuesta:', e);
                    return;
                }

                if (iconos && Array.isArray(iconos)) {
                    var $iconosContainer = $("#iconos-container");

                    iconos.forEach(function(icono) {
                        var texto = icono.texto || '';
                        var icon_text = icono.icon_text || '';
                        var enlace_icon = icono.enlace_icon || '';
                        var subtexto_icon = icono.subtexto_icon || '';

                        var enlaceHTML = enlace_icon ? `href="${enlace_icon}" target="_blank" style="text-decoration: none; color: inherit;"` : '';

                        var iconoItem = `
                            <div class="col-md-4 icon_responsive">
                                <a ${enlaceHTML}>
                                    <div class="card card_icon text-center">
                                        <div class="card-body card-body_icon d-flex flex-row">
                                            <div style="margin-right: 20px;">
                                                <i class="fas ${icon_text} fa-2x"></i> <!-- Cambia el icono según corresponda -->
                                            </div>
                                            <div>
                                                <h5 class="card-title card-title_icon">${texto}</h5>
                                                <p class="card-text card-text_icon" style="font-size: 12px;">${subtexto_icon}</p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        `;

                        // Agregar el icono al contenedor
                        $iconosContainer.append(iconoItem);
                    });
                } else {
                    console.error('La respuesta no contiene iconos válidos.');
                }
            },
            error: function(error) {
                console.log('Error al cargar los iconos:', error);
            }
        });
        /* Fin Iconos */
        /* Testimonios */
        // Inicializar el carrusel vacío
        $("#testimonios-carousel").owlCarousel({
            loop: false,
            margin: 10,
            responsive: {
                0: {
                    items: 1
                },
                768: {
                    items: 2
                },
                992: {
                    items: 3
                }
            },
            nav: true,
            navText: [
                '<i class="fas fa-chevron-left"></i>',
                '<i class="fas fa-chevron-right"></i>'
            ]
        });

        // Cargar testimonios mediante AJAX
        let formDataTestimonio = new FormData();
        formDataTestimonio.append("id_plataforma", ID_PLATAFORMA);

        $.ajax({
            url: SERVERURL + 'Tienda/testimoniostienda',
            method: 'POST',
            data: formDataIconos,
            contentType: false,
            processData: false,
            success: function(response) {
                try {
                    var testimonios = JSON.parse(response);
                } catch (e) {
                    console.error('Error al parsear la respuesta:', e);
                    return;
                }

                if (testimonios && Array.isArray(testimonios)) {
                    var $carousel = $("#testimonios-carousel");

                    testimonios.forEach(function(testimonio) {
                        var id_testimonio = testimonio.id_testimonio;
                        var nombre_testimonio = testimonio.nombre || '';
                        var texto_testimonio = testimonio.testimonio || '';
                        var image_path = obtenerURLImagen(testimonio.imagen, SERVERURL)

                        var testimonioItem = `
                            <div class="item d-flex flex-column">
                                <div class="testimonios-container">
                                    <div class="testimonios-image rounded-circle" style="background-image: url('${image_path}');">
                                    </div>
                                    <p class="card-text"><strong>${nombre_testimonio}</strong></p>
                                    <p class="card-text testimonio-text">${texto_testimonio}</p>
                                </div>
                            </div>
                        `;

                        // Agregar el testimonio al carrusel
                        $carousel.trigger('add.owl.carousel', [$(testimonioItem)]);
                    });

                    // Refrescar el carrusel
                    $carousel.trigger('refresh.owl.carousel');
                } else {
                    console.error('La respuesta no contiene testimonios válidos.');
                }
            },
            error: function(error) {
                console.log('Error al cargar los testimonios:', error);
            }
        });
        /* Fin Testimonios*/
        /* Horizontal */
        let formDataHorizontal = new FormData();
        formDataHorizontal.append("id_plataforma", ID_PLATAFORMA);

        // Realiza la llamada AJAX
        $.ajax({
            url: SERVERURL + 'Tienda/obtener_horizontalTienda',
            method: 'POST',
            data: formDataHorizontal,
            contentType: false,
            processData: false,
            dataType: "json",
            success: function(response) {
                const ofertas = response;

                if (Array.isArray(ofertas)) {
                    let contentArriba = '';
                    let contentAbajo = '';

                    ofertas.forEach(oferta => {
                        if (oferta.posicion == 1){
                            contentArriba += `<p class="marquee-contentArriba"> ${oferta.texto} </p>`;
                        }else if (oferta.posicion == 2){
                            contentAbajo += `<p class="marquee-contentAbajo"> ${oferta.texto} </p>`;
                        }
                    });

                    $('.marqueeArriba').html(contentArriba);
                    $('.marqueeAbajo').html(contentAbajo);
                } else {
                    console.error('La respuesta no es un array:', ofertas);
                }
            },
            error: function(error) {
                console.error('Error al obtener las ofertas:', error);
            }
        });
        /* Fin Horizontal */
    });

    function number_format(number, decimals = 2) {
        return number.toFixed(decimals);
    }
</script>

<footer>
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <h5 style="text-transform: uppercase;">Acerca de </h5>
                    <img src="https://new.imporsuitpro.com/" alt="IMPORT SHOP" width="40px" height="40px">
                </div>
                <div class="col-md-3">

                </div>
                <div class="col-md-3">
                    <h5>Síguenos</h5>
                    <p>
                        <a href="" target="_blank"><i class="fab fa-facebook"></i> Facebook</a><br>
                        <a href="" target="_blank"><i class="fab fa-instagram"></i> Instagram</a><br>
                        <a href="" target="_blank"><i class="fab fa-tiktok"></i> TikTok</a>
                    </p>
                </div>
                <div class="col-md-3">
                    <h5>Información de contacto</h5>
                    <p><i class="fab fa-whatsapp"></i> +593</p>
                    <!-- <p><i class="fas fa-envelope"></i> ventas@imporshop.app</p> -->
                </div>
            </div>
        </div>
    </div>
    <div class="footer copyright text-center">
        <p>&copy; 2024 IMPORSUIT S.A. | Todos los derechos reservados.</p>
    </div>
</footer>
<!-- librerias adiconale -->

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.0.8/af-2.7.0/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/b-print-3.0.2/cr-2.0.3/date-1.5.2/fc-5.0.1/fh-4.0.1/kt-2.12.1/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.7.1/sp-2.3.1/sl-2.0.3/sr-1.4.1/datatables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://kit.fontawesome.com/0022adc953.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.0/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</body>

</html>