EVOLUTION-MANAGER

Edit File: 580b2719cea1efa40b276abe65726404238628f2.php

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

.content_servicios{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }

.ul_btn_contenedor{
            display: flex;
            overflow: hidden;
            position: relative;
            user-select: none;
            cursor: pointer;
            width: 50%;
            height: max-content;

margin: 0;
            padding: 0;
            border-radius: 10px;

background-color: #ffff;
            box-shadow:         1px 1px 10px 1px rgba(44, 172, 227, 0.192);
            -webkit-box-shadow: 1px 1px 10px 1px rgba(44, 172, 227, 0.192);
            -moz-box-shadow:    1px 1px 10px 1px rgba(44, 172, 227, 0.192);
        }
        .ul_btn_contenedor .b_buttons{
            width: min-content;
            display: grid;
            grid-auto-rows: min-content;
            align-content: center;
            padding-right: 10px; 
        }
        .ul_btn_contenedor .b_buttons button{
            font-size: 25px;
            border: none;
            color: #0c73b4;
            background-color: #ffffff00;
            outline: none;
        }
        .ul_btn_contenedor .b_buttons button:hover{
            color: #139bf0;
        }

.ul_servicios{
            list-style: none;
            font-family: system-ui;
            color: #1f9dd5;
            font-size: 23px;
            line-height: 1.25;
            max-height: 440px /*defecto*/; 
            width: 100%;

overflow-y: hidden;            
            padding: 10px 10px 10px 40px;
            border-radius: 10px;
            margin-top: 20px;

display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 3rem;
            grid-auto-rows: max-content;

}
        .ul_servicios li{
            /* width: 50%;
            box-sizing: border-box;
            width: max-content; */
        }
        .ul_servicios li .active{
            font-weight: 700;
            color: #54ab15;
        }
        .ul_servicios li i{
            color: #54ab15;
        }
        .ul_servicios li a:hover{
            text-decoration: underline !important;
            color: #54ab15 !important;
        }

@media  only screen and (min-width: 942px) and (max-width: 1200px){ /*GRANDE*/
            .body_servicios{ margin: 0px 50px;  }
        }
        @media  only screen and (min-width: 768px) and (max-width: 941px){ /*MEDIANO*/
            .body_servicios{ margin: 0px 50px;  }
        }
        @media (max-width: 767px){ /*PEQUEÑO*/
            .body_servicios{ margin: 0px 50px;  }
        }
        @media (max-width: 667px){ /*PEQUEÑO 2*/
            .body_servicios{ margin: 0px 20px;  }
        }
        @media (max-width: 414px){ /*MOBILE*/
            .body_servicios{ margin: 0px 20px;  }
        }

</style>

<style>

.imagenes_contenedor{
            width: 50%;
            margin: auto;
        }

.containerx {
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            /* width: max-content; */
            /* margin: 0px auto; */
        }
        .containerx img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 18%;
        }
        .containerx .ga_img {
            width: 45%;
            /* height: 50%; */
            display: inline-block;
            border: 5px solid #2cabe3;
            border-radius: 20%;
        }
        .containerx .ga_img:nth-child(1){
            transform: translateX(30%);
        }
        .containerx .ga_img:nth-child(3){
            transform: translateX(-30%);
        }
        .center-image {
            width: 55% !important;
            /* height: 70% !important; */
            z-index: 1;
        }
        .imagenes_btn{
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 10px;
        }

/* estilo de una sola imagen */
        .content_una_img{
            max-width: max-content;
            display: grid;
            margin: auto;
            margin-top: 10px;
        }
        .content_una_img a{
            margin: 10px auto auto auto;
        }
        .card_una_img{
            max-width: 300px;
            height: 300px;
            border-radius: 40px;
            position: relative;
            border: 5px solid #2cabe3;
        }
        .card_una_img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 35px;
        }

@media  only screen and (min-width: 942px) and (max-width: 1200px){ /*GRANDE*/
            .ul_servicios{ grid-template-columns: repeat(1, 1fr); }
        }
        @media  only screen and (min-width: 768px) and (max-width: 941px){ /*MEDIANO*/
            .ul_servicios{ grid-template-columns: repeat(1, 1fr); }
        }
        @media (max-width: 767px){ /*PEQUEÑO*/
            .ul_servicios{ grid-template-columns: repeat(2, 1fr); font-size: 20px; }
            .ul_btn_contenedor{ width: 100%; }
            .imagenes_contenedor{ width:  90%; padding-top: 20px; }
        }
        @media (max-width: 667px){ /*PEQUEÑO 2*/
            .ul_servicios{ grid-template-columns: repeat(1, 1fr); font-size: 20px; }
            .ul_btn_contenedor{ width: 100%; }
            .imagenes_contenedor{ width:  100%; padding-top: 20px; }
        }
        @media (max-width: 414px){ /*MOBILE*/
            .ul_servicios{ grid-template-columns: repeat(1, 1fr); font-size: 20px; }
            .ul_btn_contenedor{ width: 100%; }
            .imagenes_contenedor{ width:  100%; padding-top: 20px; }
        }

</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">Servicios</span>
            <img src="<?php echo e(route_public('/pagina/img/iconos/inicio/servicios.png')); ?>" alt="Icono">
        </div>
        <hr class="linea_horizontal">
    </div>

<div class="content_subtitulo">
            <h1><a href="<?php echo e(asset('/servicio/parroquia/'.$tipo_servicio->codigo_url)); ?>"><?php echo $tipo_servicio->nombre; ?></a></h1>            
            <h2 class="l1"><i class="fa fa-caret-right"></i> <b>Bah&iacute;a de</b> Car&aacute;quez</h2>
            
        </div>

<div class="ul_btn_contenedor">                    
                <ul id="ul_btn" class="ul_servicios">
                    <?php $__currentLoopData = $lista_servicios; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $servicio): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li>
                            <a onclick="ver_imagen_servicio(this,'<?php echo e($servicio->id_encrypt); ?>')" <?php if($primer_servicio->id == $servicio->id): ?> class="btn_servicio active" <?php else: ?> class="btn_servicio" <?php endif; ?>>
                                <?php echo $servicio->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(sizeof($primer_servicio->servicio_imagen)>=3): ?>
                            
                <div id="contenedor_imagen" class="imagenes_contenedor">
                    <div class="containerx">
                        <div class="ga_img"><img src="<?php echo e(route_public($primer_servicio->servicio_imagen[0]->ruta)); ?>" alt="<?php echo e($primer_servicio->servicio_imagen[0]->nombre); ?>"></div>
                        <div class="ga_img center-image"><img src="<?php echo e(route_public($primer_servicio->servicio_imagen[1]->ruta)); ?>" alt="<?php echo e($primer_servicio->servicio_imagen[1]->nombre); ?>"></div>
                        <div class="ga_img"><img src="<?php echo e(route_public($primer_servicio->servicio_imagen[2]->ruta)); ?>" alt="<?php echo e($primer_servicio->servicio_imagen[2]->nombre); ?>"></div>
                    </div>
                    <div class="imagenes_btn" style="display: grid;">
                        <a class="a_btn" href="<?php echo e(asset('servicio/detalle-servicio/'.$primer_servicio->codigo_url)); ?>">Ver <i class="fa fa-plus"></i></a>
                    </div>
                </div>
            <?php elseif(sizeof($primer_servicio->servicio_imagen)==0): ?>
                <div id="contenedor_imagen" class="content_una_img">
                    <div class="card_una_img">
                        <img src="<?php echo e(route_public('pagina/img/iconos/varios/sin-imagen.webp')); ?>" alt="sin foto">
                    </div>
                    <a class="a_btn" href="<?php echo e(asset('servicio/detalle-servicio/'.$servicio->codigo_url)); ?>">Ver <i class="fa fa-plus"></i></a>
                </div>
            <?php else: ?>
                
                <div id="contenedor_imagen" class="content_una_img">
                    <div class="card_una_img">
                        <img src="<?php echo e(route_public($primer_servicio->servicio_imagen[0]->ruta)); ?>" alt="<?php echo e($primer_servicio->servicio_imagen[0]->nombre); ?>">
                    </div>
                    <a class="a_btn" href="<?php echo e(asset('servicio/detalle-servicio/'.$servicio->codigo_url)); ?>">Ver <i class="fa fa-plus"></i></a>
                </div>
            <?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'
            }
        
        });

document.addEventListener('DOMContentLoaded', function(){
            ajustar_alto_imagen();
        });
        window.addEventListener("resize", function(){
            ajustar_alto_imagen();
        });

function ajustar_alto_imagen(){
            var ga_img = document.getElementsByClassName("ga_img");
            for (let index = 0; index < ga_img.length; index++) {
                const ga_img_item = ga_img[index];
                var ancho = ga_img_item.clientWidth;
                ga_img_item.style.height = ancho+"px";
            }
        }

</script>

$("#ul_btn").delegate(".btn_servicio", "click", function(e){
            e.preventDefault();
        });

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

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

var servicio = response.response; 
                    var servicio_imagen = servicio.servicio_imagen;

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

if(servicio.servicio_imagen.length>=3){
                        $("#content_servicios").append(`
                            <div id="contenedor_imagen" class="imagenes_contenedor">
                                <div class="containerx">
                                    <div class="ga_img"><img src="${route_public}/${servicio_imagen[0].ruta}" alt="${servicio_imagen[0].nombre}"></div>
                                    <div class="ga_img center-image"><img src="${route_public}/${servicio_imagen[1].ruta}" alt="${servicio_imagen[1].nombre}"></div>
                                    <div class="ga_img"><img src="${route_public}/${servicio_imagen[2].ruta}" alt="${servicio_imagen[2].nombre}"></div>
                                </div>
                                <div class="imagenes_btn" style="display: grid;">
                                    <a class="a_btn" href="${ruta_host}/servicio/detalle-servicio/${servicio.codigo_url}">Ver <i class="fa fa-plus"></i></a>
                                </div>
                            </div>
                        `);
                        ajustar_alto_imagen();
                    }else if(servicio.servicio_imagen.length == 0){
                        $("#content_servicios").append(`
                            <div id="contenedor_imagen" class="content_una_img">
                                <div class="card_una_img">
                                    <img src="${route_public}/pagina/img/iconos/varios/sin-imagen.webp" alt="sin foto">
                                </div>
                                <a class="a_btn" href="${ruta_host}/servicio/detalle-servicio/${servicio.codigo_url}">Ver <i class="fa fa-plus"></i></a>
                            </div>
                        `);
                    }else{
                        $("#content_servicios").append(`
                            <div id="contenedor_imagen" class="content_una_img">
                                <div class="card_una_img">
                                    <img src="${route_public}/${servicio_imagen[0].ruta}" alt="${route_public}/${servicio_imagen[0].nombre}">
                                </div>
                                <a class="a_btn" href="${ruta_host}/servicio/detalle-servicio/${servicio.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/servicios/listado_servicios.blade.php ENDPATH**/ ?>