EVOLUTION-MANAGER

Edit File: 82166b750cb5fad59bfe988bfcf6a68785e045f9.php

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

<style>

.body_inv_atrac{

margin: 0px 150px;

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 15px;

}

.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'); ?>

<section id="section_inventario_atractivos">

<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 id="body_inv_atrac" class="body_inv_atrac">

<div class="content_subtitulo">

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

</div>

<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 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: ?>

<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; ?>

</div>

</section>

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

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

<script>

document.addEventListener('DOMContentLoaded', () => {

const ul_btn = document.getElementById('ul_btn');

const scrollUpButton = document.getElementById('scrollUp');

const scrollDownButton = document.getElementById('scrollDown');

const scrollAmount = 100; // Ajusta este valor según tus necesidades

scrollUpButton.addEventListener('click', () => {

ul_btn.scrollBy({ top: -scrollAmount, behavior: 'smooth' });

});

scrollDownButton.addEventListener('click', () => {

ul_btn.scrollBy({ top: scrollAmount, behavior: 'smooth' });

});

//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>

<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 /home2/websucregobec/public_html/turismo.sucre.gob.ec/resources/views/pagina/inventario_atractivos/listado_atractivos.blade.php ENDPATH**/ ?>