EVOLUTION-MANAGER

Edit File: b0630e7058c7aabaf97fb76954863f0bb8b7a933.php

<?php $__env->startSection('style'); ?>

.contenedor_atract{
            /* display: flex;
            gap: 20px; */
            display: flex;
            overflow: hidden;
            position: relative;
            user-select: none;
            cursor: pointer;
            height: 100%;
            margin-left: 15px;
            padding-right: 10px;
            border-radius: 10px;
            -webkit-box-shadow: inset 0px 0px 33px -19px rgb(44 171 227);
            -moz-box-shadow: inset 0px 0px 33px -19px rgb(44 171 227);
            box-shadow: inset 0px 0px 33px -19px rgb(44 171 227);

height: max-content;
        }
        .ul_atractivo{
            list-style: none;
            font-family: system-ui;
            color: #2cabe3;
            font-size: 1.6rem;
            line-height: 1.25;
            height: 350px /*defecto*/;

/* overflow-y: hidden; */
            overflow-y: scroll;
            border-radius: 10px;

margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }

.ul_atractivo::-webkit-scrollbar {
            width: 0; /* Oculta la barra de desplazamiento para navegadores WebKit */
            display: none; /* Oculta la barra de desplazamiento para navegadores basados en WebKit */
        }

.ul_atractivo li i{
            color: #54ab15;
        }
        .ul_atractivo a{
            color: #2cabe3;
        }
        .ul_atractivo a.active{
            color: #54ab15;
        }
        .ul_atractivo li a:hover{
            text-decoration: underline !important;
            color: #54ab15 !important;
        }

.content_atrac_img{
            max-width: max-content;
            display: grid;
            /* margin: auto; */
        }
        .content_atrac_img a{
            margin: 10px auto auto auto;
        }

.contenedor_atract .b_buttons{
            width: min-content;
            display: grid;
            grid-auto-rows: min-content;
            align-content: center;
            padding-left: 10px; 
        }
        .contenedor_atract .b_buttons button{
            font-size: 35px;
            border: none;
            color: #0c73b4;
            background-color: #ffffff00;
            outline: none;
        }
        .contenedor_atract .b_buttons button:hover{
            color: #139bf0;
        }

.card_atrac_img{
            width: 350px;
            height: 350px;
            border-radius: 80px;
            position: relative;
            border: 9px solid #2cabe3;
        }
        .card_atrac_img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 70px;
        }
        .a_btn{           
            right: 20px;
            bottom: -25px;
            font-size: 16px;
        }

@media  only screen and (min-width: 942px) and (max-width: 1200px){ /*GRANDE*/
            .body_inv_atrac{ margin: 0px 50px;  }
        }
        @media  only screen and (min-width: 768px) and (max-width: 941px){ /*MEDIANO*/
            .body_inv_atrac{ margin: 0px 50px;  }
            /* .contenedor_atract{ display: inline; } */
            .ul_atractivo{ font-size: 1.2rem; }
        }
        @media (max-width: 767px){ /*PEQUEÑO*/
            .body_inv_atrac{ margin: 0px 50px;  }
            /* .contenedor_atract{ display: inline; } */
            .ul_atractivo{ font-size: 1.2rem; }
        }
        @media (max-width: 667px){ /*PEQUEÑO 2*/
            .body_inv_atrac{ margin: 0px 50px;  }
            /* .contenedor_atract{ display: inline; } */
            .ul_atractivo{ font-size: 1.2rem; }
        }
        @media (max-width: 414px){ /*MOBILE*/
            .body_inv_atrac{ margin: 0px 50px;  }
            /* .contenedor_atract{ display: inline; } */
            .ul_atractivo{ font-size: 1.2rem; }
        }

</style>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

<div class="titulo_seccion" style="margin-bottom: 10px;">
            <hr class="linea_horizontal">
            <div class="contenido con_mv_10">
                <span class="span_t1n">Inventario</span>&nbsp;&nbsp;&nbsp;
                <span class="span_t1"> de </span> &nbsp;&nbsp;&nbsp; <span class="span_t1"> atractivos</span>
                <img class="mobil_none" src="<?php echo e(route_public('/pagina/img/iconos/inicio/inventario_atractivos.png')); ?>" alt="Icono">
            </div>
            <hr class="linea_horizontal">
        </div>

<div class="content_subtitulo">                          
                <h2><i class="fa fa-caret-right"></i> <?php echo $parroquia->nombre; ?></h2>                
            </div>

<?php if(sizeof($lista_atractivos)>0): ?>
                <div id="contenedor_atract" class="contenedor_atract">
                    <ul id="ul_btn" class="ul_atractivo">

<?php $__currentLoopData = $lista_atractivos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $atractivo): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li>
                                <i class="fa fa-caret-right"></i> 
                                <a onclick="ver_imagen_atractivo(this, '<?php echo e($atractivo->id_encrypt); ?>')" <?php if($primer_atractivo->id == $atractivo->id): ?> class="btn_atractivo active" <?php else: ?> class="btn_atractivo" <?php endif; ?>>
                                    <?php echo $atractivo->nombre; ?>

</a>
                            </li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

</ul>
                    <div id="b_buttons" class="b_buttons">
                        <button id="scrollUp"><i class="fa fa-arrow-up"></i></button>
                        <button id="scrollDown"><i class="fa fa-arrow-down"></i></button>
                    </div>
                </div>
            <?php endif; ?>

<?php if(!empty($primer_atractivo)): ?>
                <?php if(sizeof($primer_atractivo->atractivo_imagen)>0): ?>
                    <div id="contenedor_imagen" class="content_atrac_img">
                        <div class="card_atrac_img">
                            <img src="<?php echo e(route_public($primer_atractivo->atractivo_imagen[0]->ruta)); ?>" alt="faro">                    
                        </div>
                        <a class="a_btn" href="<?php echo e(asset('atractivos/detalle-atractivo/'.$primer_atractivo->codigo_url)); ?>">Ver <i class="fa fa-plus"></i></a>
                    </div>  
                <?php else: ?>
                    <div id="contenedor_imagen" class="content_atrac_img">
                        <div class="card_atrac_img">
                            <img src="<?php echo e(route_public('pagina/img/iconos/varios/sin-imagen.webp')); ?>" alt="faro">                    
                        </div>
                        <a class="a_btn" href="<?php echo e(asset('atractivos/detalle-atractivo/'.$primer_atractivo->codigo_url)); ?>">Ver <i class="fa fa-plus"></i></a>
                    </div>  
                <?php endif; ?>
            <?php else: ?>
                <h2><br><br> Sin datos <br><br> </h2>
            <?php endif; ?>
        </div>

</section>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>

//si es necesario hacer scroll
            const div_botones = document.getElementById('b_buttons');
            if(ul_btn.scrollHeight > ul_btn.clientHeight){                
                div_botones.style.visibility = 'visible'
            }else{
                div_botones.style.visibility = 'hidden'
            }
        });
    </script>

$(".btn_atractivo", "click", function(e){
        e.preventDefault();
    });

function ver_imagen_atractivo(btn, id){
        
        vista_cargando();
        $.get(`${ruta_host}/atractivos/info-atractivo/${id}`, function(response){
            
            $("#ul_btn").find(".active").removeClass("active");
            $(btn).addClass("active");

vista_cargando();
            if(response.status==200){

var atractivo = response.response; 
                var atractivo_imagen = atractivo.atractivo_imagen;

$("#contenedor_imagen").remove();

if(atractivo.atractivo_imagen.length>0){
                    $("#body_inv_atrac").append(`
                        <div id="contenedor_imagen" class="content_atrac_img">
                            <div class="card_atrac_img">
                                <img src="${route_public}/${atractivo_imagen[0].ruta}" alt="faro">                    
                            </div>
                            <a class="a_btn" href="${ruta_host}/atractivos/detalle-atractivo/${atractivo.codigo_url}">Ver <i class="fa fa-plus"></i></a>
                        </div>
                    `);
                }else{
                    $("#body_inv_atrac").append(`
                        <div id="contenedor_imagen" class="content_atrac_img">
                            <div class="card_atrac_img">
                                <img src="${route_public}/pagina/img/iconos/varios/sin-imagen.webp" alt="faro">                    
                            </div>
                            <a class="a_btn" href="${ruta_host}/atractivos/detalle-atractivo/${atractivo.codigo_url}">Ver <i class="fa fa-plus"></i></a>
                        </div> 
                    `);
                }

}else{
                //alerta(response.msg_text, response.msg_color);
            }
    
        }).fail(function(){
            vista_cargando();
            //alerta("No se pudo realizar la solicitud", "error");
        });

}

</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('pagina.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/sucre/public_html/turismo.sucre.gob.ec/resources/views/pagina/inventario_atractivos/listado_atractivos.blade.php ENDPATH**/ ?>