EVOLUTION-MANAGER

Edit File: detalle_servicio.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: 40px;
            /* margin-bottom: 20px; */
            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>

@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(sizeof($servicio->servicio_ofrece)>0)
                <div class="detalle_left">
                    <h2>Lo que este lugar ofrece</h2>
                    <div class="card_ofrece">
                        @foreach ($servicio->servicio_ofrece as $servicio_ofrece)
                            <span><i class="{{$servicio_ofrece->icono}}"></i>  {!!$servicio_ofrece->nombre!!}</span>
                        @endforeach
                    </div>                
                </div>
            @endif

@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

</div>

@if(!empty($servicio->direccion) || !empty($servicio->correo) || !empty($servicio->telefono)
        || !empty($servicio->celular) || !empty($servicio->costo) || !empty($servicio->responsable) 
        || !empty($servicio->horario))

<div class="detalle_info_contact">
                <h2>Informaci&oacute;n</h2>
                <div class="card_info_contact">
                    @if(!empty($servicio->direccion))   <span><i class="fa fa-map-marker"></i> <b>Direcci&oacute;n:</b> {!!$servicio->direccion!!}</span> @endif
                    @if(!empty($servicio->correo))      <span><i class="fas fa-envelope"></i> <b>Correo:</b> {!!$servicio->correo!!}</span>  @endif
                    @if(!empty($servicio->telefono))    <span><i class="fa fa-phone-square"></i> <b>Tel&eacute;fono:</b> {!!$servicio->telefono!!}</span> @endif
                    @if(!empty($servicio->celular))     <span><i class="fa fa-mobile" style="font-size: 25px;"></i> <b>Celular:</b> {!!$servicio->celular!!}</span> @endif
                    @if(!empty($servicio->costo))       <span><i class="fa fa-money"></i> <b>Costo:</b> {!!$servicio->costo!!}</span> @endif
                    @if(!empty($servicio->responsable)) <span><i class="fa fa-user"></i> <b>Responsable:</b> {!!$servicio->responsable!!}</span> @endif
                    @if(!empty($servicio->horario))     <span><i class="fa fa-clock-o"></i> <b>Horario:</b> {!!$servicio->horario!!}</span> @endif
                </div>
            </div>
        @endif

@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">            
                    <a href="{{$servicio->url_fb}}" target="_blank">
                        <div class="social social_fb"><i class="fa fa-facebook"></i></div>
                    </a>
                    <a href="{{$servicio->url_in}}" target="_blank">
                        <div class="social social_in"><i class="fa fa-instagram"></i></div>
                    </a>
                    <a href="{{$servicio->url_x}}" target="_blank">
                        <div class="social social_tw"><i class="fa fa-twitter"></i></div>
                    </a>
                    <a href="{{$servicio->url_yt}}" target="_blank">
                        <div class="social social_yt"><i class="fa fa-youtube-play"></i></div>
                    </a>
                </div>
            </div>
        @endif

</div>

</section>

@endsection

@section('script')

@endsection