EVOLUTION-MANAGER

Edit File: detalle_servicio_v2.blade.php

@extends('pagina.master')

@section('style')

<style>

.body_servicios{
            margin: 0px 150px;
            /* display: flex; */
            /* flex-wrap: wrap; */
            justify-content: center;
            gap: 35px;
        }

.content_detalle{
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .detalle_left h2{
            margin: 25px 0px 25px 0px;
            font-size: 2rem;
            color: #0c73b4;
        }
        .card_ofrece{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 3rem;
            grid-auto-rows: max-content;
            padding-right: 20px;
            font-size: 22px;
        }
        .card_ofrece > span{
            display: flex;
            align-items: center;
            line-height: 1.1;
            gap: 15px;
            padding-top: 18px;
        }

.detalle_right .card_ser_text{
            color: #2cabe3;
            text-align: center;
            font-size: 1.5rem;
        }

.detalle_info_contact{
            margin-right: auto;
        }

.detalle_info_contact h2{
            margin: 0px 0px 25px 0px;
            font-size: 2rem;
            color: #0c73b4;
        }
        .card_info_contact > span{
            padding-top: 12px;
            line-height: 1;
        }
        .card_info_contact{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 3rem;
            grid-auto-rows: max-content;
            padding-right: 20px;
            font-size: 22px;
        }
        
        /* seccion de barra encontrar */
        .detalle_encontrar{
            border-radius: 10px;
            background-color: #6c757d1c;
            padding: 10px 15px;
            text-align: center;
            color: red;
            margin-top: 0px;
            margin-bottom: 30px;
            display: inline-block;
            width: 100%;
        }
        .detalle_encontrar a {
            margin-left: 15px;
            text-decoration: none;
        }
        .detalle_encontrar a:hover .texto{
            color: #0c73b4;
        }
        .detalle_encontrar .fa {
            color: #0c73b4;
            font-size: 20px;
        }

.detalle_encontrar .texto {
            color: #2cabe3;
            font-weight: 700;
            font-family: sans-serif;
            font-size: 20px;
        }

@media only screen and (min-width: 942px) and (max-width: 1200px){ /*GRANDE*/
            .body_servicios{ margin: 0px 50px;  }
            .card_ofrece{ font-size: 20px; }
        }
        @media only screen and (min-width: 768px) and (max-width: 941px){ /*MEDIANO*/
            .body_servicios{ margin: 0px 50px;  }
            
            .card_ofrece{ font-size: 20px; grid-template-columns: repeat(1, 1fr); }
            .card_ofrece > span { padding-top: 10px; }  
            
            .card_info_contact{ font-size: 20px; grid-template-columns: repeat(1, 1fr); }
        }
        @media (max-width: 767px){ /*PEQUEÑO*/
            .body_servicios{ margin: 0px 50px;  }

.card_ofrece{ font-size: 20px; grid-template-columns: repeat(1, 1fr); }
            .card_ofrece > span { padding-top: 10px; }

.card_info_contact{ font-size: 20px; grid-template-columns: repeat(1, 1fr); }
        }
        @media (max-width: 667px){ /*PEQUEÑO 2*/
            .body_servicios{ margin: 0px 30px;  }
            .content_detalle{ display: contents; }

.card_ofrece{ font-size: 18px; grid-template-columns: repeat(1, 1fr); }
            .card_ofrece > span { padding-top: 10px; }

.card_info_contact{ font-size: 18px; grid-template-columns: repeat(1, 1fr); }
        }
        @media (max-width: 414px){ /*MOBILE*/
            .body_servicios{ margin: 0px 30px;  }
            .content_detalle{ display: contents; }

.card_ofrece{ font-size: 18px; grid-template-columns: repeat(1, 1fr); }
            .card_ofrece > span { padding-top: 10px; }

.card_info_contact{ font-size: 18px; grid-template-columns: repeat(1, 1fr); }
        }

</style>

{{-- estilos para redes sociales --}}
    <style>
        .detalle_redes_soci h2{
            margin: 0px 0px 20px 0px;
            font-size: 1.6rem;
            text-align: center;
        }
        .lugar_redes_sociales {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .lugar_redes_sociales h2{
            margin: 0px 0px 25px 0px;
            font-size: 1.6rem;
        }
        .lugar_redes_sociales a{
            text-decoration: none;
        }
        .lugar_redes_sociales .social {
            border-radius: 50%;
            width: 38px;
            height: 38px;
            color: #fff;
            padding: 8px 10px;
            text-align: center;
            font-size: 20px;
            margin-left: 8px;
            -webkit-box-shadow: 2px 1px 9px 4px rgba(0, 0, 0, 0.16);
            box-shadow: 2px 1px 9px 4px rgba(0, 0, 0, 0.16);
            display: flex;
        }
        .lugar_redes_sociales .social:hover{
            transform: scale(1.1);
        }
        .lugar_redes_sociales .social:active{
            transform: scale(1);
        }
        .lugar_redes_sociales .social i{
            margin: auto;
        }

.social_fb{
            background-color: #3b5998;
        }
        .social_in{
            background: #f09433; 
            background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
            background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
            background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
        }
        .social_tw{
            background-color: #00acee;
        }
        .social_yt{
            background-color: #c4302b;
        }
        .social_wp{
            /* background-color: #009f7b; */
            background-color: #02b316;
        }

</style>

{{-- nuevos estilos para seccion informacion --}}
    <style>
        
        .responsive-section {
            display: flex;
            flex-wrap: wrap;
            gap: 20px 0px; /* Espacio entre las columnas */
            padding: 55px 0px 20px 0px;
            box-sizing: border-box;

justify-content: center;
        }

.column {
            flex: 1 1 0; /* Las columnas se expanden y contraen para ocupar el ancho disponible */
            min-width: 0; /* Permite que las columnas se reduzcan más allá del contenido mínimo */
            box-sizing: border-box;
            padding: 5px;
            /* background-color: #f4f4f4; */
            /* border: 1px solid #ddd; */
            /* Opcional: Asegura que las columnas tengan una altura mínima para que el contenido se vea bien */
            display: flex;
            flex-direction: column;
        }
        .column_none{
            flex: none !important;
        }

.column h2{
            margin: 0px 0px 25px 0px;
            font-size: 2rem;
            color: #0c73b4;
        }

.responsive_ofrece{ /*editado ----------------------------------*/
            /* display: flex;
            flex-wrap: wrap;
            gap: 0px 10px; */
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            /* gap: 4px; */
            gap: 4px 8px;
            padding: 16px;
            box-sizing: border-box;
            user-select: none;
        }
        
        .colum_ofrece{ /*editado ----------------------------------*/
            /* flex: 1 1 0; */
            text-align: center;
        }
        .colum_ofrece .htitulo1{
            display: flex;
            line-height: 1;
            font-weight: bold;
            gap: 2px;
            align-items: center;
        }
        .colum_ofrece .htitulo{

text-align: left; /*editado ----------------------------------*/

display: flex;
            align-items: flex-end;
            line-height: 1;
            gap: 2px;
            font-weight: bold;
        }
        .colum_ofrece ul{
            list-style: none;
            padding-left: 0;
            margin-bottom: 0.8rem;
        }
        .colum_ofrece li{
            text-align: left; /*editado ----------------------------------*/
            /* width: max-content; */
            position: relative;
            padding-left: 10px;
            line-height: 1;
            font-size: 0.8rem;
        }
        .colum_ofrece li::before{
            content: "-";
            position: absolute;
            left: 0;
            font-weight: 800;
        }
        .colum_text_ofrece{
            max-width: 310px;
        }

.content_carrousel .card_ser_img{
            max-width: 300px !important;
            width: auto !important;
            height: 360px !important;
        }

@media only screen and (min-width: 668px) and (max-width: 941px){ /*MEDIANO*/
            .column {
                flex: 1 1 50%;
            }
        }

@media only screen and (max-width: 768px) { /* MOBILES Y TABLETS */
            .colum_text_ofrece{
                max-width: 100%;
            }
        }

/* Adaptación para pantallas más pequeñas */
        @media (max-width: 667px) {
            .column {
                flex: 1 1 100%;
            }
        }

</style>

@endsection

@section('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="{{route_public('/pagina/img/iconos/inicio/servicios.png')}}" alt="Icono">
        </div>
        <hr class="linea_horizontal">
    </div>

<div class="content_subtitulo">
            <h1><a href="{{asset('/servicio/parroquia/'.$servicio->tipo_servicio->codigo_url)}}">{!!$servicio->tipo_servicio->nombre!!}</a></h1>
            <h2 class="l1"><i class="fa fa-caret-right"></i> 
                <a href="{{asset('servicio/parroquia/listado/'.$servicio->tipo_servicio->codigo_url.'/'.$servicio->parroquia->codigo_url)}}">
                    {!!$servicio->parroquia->nombre!!}
                </a>
            </h2>
            <h2 class="l2"><i class="fa fa-caret-right"></i> {!!$servicio->nombre!!}</h2>
            <h2><a href="{{$servicio->url_web}}"> {!!$servicio->url_web!!} </a></h2>
        </div>

@if(!empty($servicio->texto))
                <div class="column column_none colum_text_ofrece">
                    <h3 style="color: #0c73b4; text-align: center;">Lo que este lugar obrece</h3>
                    <p style="text-align: justify; padding: 10px; line-height: 1.3;">
                        {!!$servicio->texto!!}
                    </p>
                </div>
            @endif

<div class="column" style="padding-left: 30px;">
              
                <div class="responsive_ofrece pb-2" style="width: 100%;">
                    @foreach ($servicio->servicio_titulo1 as $titulo1)
                        <div class="colum_ofrece">
                            <h6 class="htitulo1"><img src="{{route_public($titulo1->cat_titulo1->icono)}}" alt=""> 
                                {{$titulo1->cat_titulo1->titulo}}
                            </h6>
                        </div>
                    @endforeach
                </div>

<div class="responsive_ofrece">
                    @php $cod_titulo = 0; @endphp
                    @foreach ($servicio_lista as $key => $serv_list)
                    
                        @if($cod_titulo != $serv_list->titulo_id)
                            @if($key>0)
                                </ul>
                            </div>
                            @endif          
                            <div class="colum_ofrece">
                                <h6 class="htitulo"><img src="{{route_public($serv_list->titulo_icono)}}" alt=""> {{$serv_list->titulo}}</h6>
                                <ul>
                                    <li>{{$serv_list->nombre_lista}}</li>
                            
                            @php $cod_titulo = $serv_list->titulo_id @endphp
                        @else
                            <li>{{$serv_list->nombre_lista}}</li>
                        @endif
                            
                        @if($key == (sizeof($servicio_lista)-1))
                            </ul>
                        </div>
                        @endif  
                    @endforeach
                </div>

{{-- <div class="responsive_ofrece">
                    @for ($i = 0; $i < 15; $i++)
                        <div class="colum_ofrece">
                            <h6 class="htitulo"><img src="{{asset('pagina/img/iconos/servicios/hoteleria/ofrece-banio.png')}}" alt=""> Baño</h6>
                            <ul>
                                <li>Papel higenico</li>
                                <li>Toallas</li>
                                <li>Baño privado</li>
                                <li>Articulos de aseo gratis</li>
                                <li>Ducha con agua caliente</li>
                            </ul>
                        </div>
                    @endfor
                </div> --}}
                
            </div>

<div class="column column_none">
                <p>
                    @if(sizeof($servicio->servicio_imagen)>0)
                        <div class="detalle_right">
                            <div class="content_carrousel">
                                @if(sizeof($servicio->servicio_imagen)>1)
                                    <a onclick="carrouserl_pasar_img(-1)"><i class="fa fa-caret-left"></i></a>
                                @endif
                                <div class="card_ser_img">
                                    @foreach ($servicio->servicio_imagen as $key => $servicio_imagen)
                                        <img class="carrousel_img" src="{{route_public($servicio_imagen->ruta)}}" alt="{{$servicio_imagen->nombre}}" @if($key==0) style="display: block" @endif>
                                    @endforeach
                                </div>
                                @if(sizeof($servicio->servicio_imagen)>1)
                                    <a onclick="carrouserl_pasar_img(1)"><i class="fa fa-caret-right"></i></a>
                                @endif
                                {{-- modal ver imagen --}}
                                <div id="carrouselMyModal" class="carrousel_modal">
                                    <span class="carrousel_close">&times;</span>
                                    <img class="carrousel_modal_content" id="carrousel_img01">
                                    <div id="carrousel_caption"></div>
                                </div>
                            </div>  
                            {{-- <p class="card_ser_text">30T VL 5725671660</p> --}}
                        </div>
                    @endif
                </p>
            </div>

</section>

@if((!empty($servicio->latitud) && !empty($servicio->longitud)) || !empty($servicio->url_web) || (!empty($servicio->celular) && $servicio->celular_what==1))
            <div class="detalle_encontrar">

@if(!empty($servicio->latitud) && !empty($servicio->longitud))
                    <a href="https://maps.google.com/?q={{$servicio->latitud}},{{$servicio->longitud}}" target="_blank">
                        <span>
                            <i class="fa fa-location-arrow"></i> 
                            <span class="texto">Como llegar</span>
                        </span>
                    </a>
                @endif
                @if(!empty($servicio->url_web))
                    <a href="https://youbute.com" target="_blank">
                        <span>
                            <i class="fa fa-external-link-square"></i> 
                            <span class="texto">Sitio Web</span>
                        </span>
                    </a>
                @endif
                @if(!empty($servicio->celular) && $servicio->celular_what==1)
                    <a href="https://wa.me/+593{{$servicio->celular}}?text=Hola, " target="_blank">
                        <span>
                            <i class="fa fa-whatsapp"></i>
                            <span class="texto">Contacto</span>
                        </span>
                    </a>
                @endif
            </div>
        @endif

@if(!empty($servicio->url_fb) || !empty($servicio->url_in) || !empty($servicio->url_x) || !empty($servicio->url_yt))
            <div class="detalle_redes_soci">
                <h2>Redes Sociales</h2>
                <div class="lugar_redes_sociales"> 
                    @if(!empty($servicio->url_fb))           
                        <a href="{{$servicio->url_fb}}" target="_blank">
                            <div class="social social_fb"><i class="fa fa-facebook"></i></div>
                        </a>
                    @endif
                    @if(!empty($servicio->url_in))
                        <a href="{{$servicio->url_in}}" target="_blank">
                            <div class="social social_in"><i class="fa fa-instagram"></i></div>
                        </a>
                    @endif
                    @if(!empty($servicio->url_x))
                        <a href="{{$servicio->url_x}}" target="_blank">
                            <div class="social social_tw"><i class="fa fa-twitter"></i></div>
                        </a>
                    @endif
                    @if(!empty($servicio->url_yt))
                        <a href="{{$servicio->url_yt}}" target="_blank">
                            <div class="social social_yt"><i class="fa fa-youtube-play"></i></div>
                        </a>
                    @endif
                </div>
            </div>
        @endif

</div>

</section>

@endsection

@section('script')

@endsection