@extends('layouts.pagina')
@section('head')
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@endsection
@section('banner')
        <div class="card-body">
            <div id="carousel-indicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="0" class=" active"></button>
                <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="1" class=""></button>
                <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="2" class=""></button>
                <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="3" class=""></button>
                <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="4" class=""></button>
                </div>
                <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" alt="" src="{{url('/img/banner.jpg')}}">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" alt="" src="{{url('/img/banner1.jpg')}}">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" alt="" src="{{url('/img/banner2.jpg')}}">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" alt="" src="{{url('/img/banner3.jpg')}}">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" alt="" src="{{url('/img/banner4.jpg')}}">
                </div>
                </div>
            </div>
        </div>
@endsection
@section('contenido')
<div class="container-xl mb-4">
    <div class="reglon">
        <h3 class="titulo mt-4">Accesos rápidos</h3>  
    </div>
    <div class="row">
        <div class=" col-xs-6 col-sm-6 col-lg-2 mt-2 cap-imagen"  style="text-align: let;">    
            <div class="">
                <a href="{{url('/agenda alcalde')}}" ><img src="{{url('/img/calendario.png')}}" alt="" class="botones_imagen"></a>
            </div>        
        </div>
        <div class=" col-xs-6 col-sm-6 col-lg-2 mt-2 cap-imagen" style="text-align: center;">
            <div class="">
                <a href="{{url('/agenda alcalde')}}" ><img src="{{url('/img/calendario3.png')}}" alt="" class="botones_imagen"></a>
            </div>
        </div>
        <div class=" col-xs-6 col-sm-6 col-lg-2 mt-2 cap-imagen" style="text-align: right;">
            <div class="">
                <a href="{{url('/agenda alcalde')}}" ><img src="{{url('/img/concejo.png')}}" alt="" class="botones_imagen"></a>
            </div>
        </div>
        <div class=" col-xs-6 col-sm-6 col-lg-2 mt-2 cap-imagen" style="text-align: right;">
            <div class="">
                <a href="{{url('/error')}}" ><img src="{{url('/img/mpv.png')}}" alt="" class="botones_imagen"></a>
            </div>
        </div>
        <div class=" col-xs-6 col-sm-6 col-lg-2 mt-2 cap-imagen" style="text-align: right;">
            <div class="">
                <a href="{{url('/error')}}" ><img src="{{url('/img/directorio.png')}}" alt="" class="botones_imagen"></a>
            </div>
        </div>
        <div class=" col-xs-6 col-sm-6 col-lg-2 mt-2 cap-imagen" style="text-align: right;">
            <div class="">
                <a href="{{url('/error')}}" ><img src="{{url('/img/limpieza.png')}}" alt="" class="botones_imagen"></a>
            </div>
        </div>
    </div>
    <div class="reglon">
        <h3 class="titulo mt-4">Últimas Noticias</h3>  
    </div>
    <div class="row  row-cards">
        @foreach($noticias as $noticia)
            <div class="col-sm-6 col-lg-3 mt-4">
                <div class="card placeholder-glow">
                    <div class="ratio ratio-21x9 card-img-top placeholder"><img src="{{url('/'.$noticia->ruta)}}" alt=""></div>
                    <div class="card-body">
                        <div class="placeholder col-9 mb-3">{{$noticia->titulo}}</div>
                        @if(strlen($noticia->corta)>250)
                            <div class="placeholder placeholder-xs col-10">{{substr($noticia->corta, 0, 250).'...' }}</div>
                        @else
                            <div class="placeholder placeholder-xs col-10">{{$noticia->corta }}</div>
                        @endif
                        <div class="mt-3">
                            <a href="{{url('/noticias/'.$noticia->id)}}" tabindex="-1" class="btn btn-outline-success col-4" aria-hidden="true">Leer más</a>
                        </div>                        
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="reglon">
        <h3 class="titulo mt-4">Comunicate con Nosotros</h3>  
    </div>
    <div class="row">
        <div class="col-sm-6 col-lg-4 mt-2"  style="text-align: let;">    
            <div class="">
                <a href="javascript:void(0)" class="titulo"><img src="{{url('/img/serenazgo.png')}}" alt="" class="botones_imagen"></a>
            </div>        
        </div>
        <div class="col-sm-6 col-lg-4 mt-2" style="text-align: center;">
            <div class="">
                <a href="javascript:void(0)" class="titulo"><img src="{{url('/img/central.png')}}" alt="" class="botones_imagen"></a>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mt-2" style="text-align: right;">
            <div class="">
                <a href="javascript:void(0)" class="titulo"><img src="{{url('/img/policia.png')}}" alt="" class="botones_imagen"></a>
            </div>
        </div>
    </div>
    <div class="reglon">
        <h3 class="titulo mt-4">Tambopata Comunica</h3>  
    </div>
    <div class="row">
        <div class="col-sm-12 col-lg-4 mt-2" style="text-align: let;">       
             <div class="youtube">                 
                <div class="video-container">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/hfKnmDgwr-M?si=3VJcUgP95eGEqqOc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    </div>  
             </div>            
        </div>
        <div class="col-sm-12 col-lg-6 mt-2" style="text-align: let;">      
            <div class="row row-cards" style="margin: 0px;margin-left: 0px;">
              <div class="col-md-12">
                <div class="card">
                  <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
                      <li class="nav-item">
                        <a href="#tabs-home-3" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 2a1 1 0 0 1 .993 .883l.007 .117v4a1 1 0 0 1 -.883 .993l-.117 .007h-3v1h3a1 1 0 0 1 .991 1.131l-.02 .112l-1 4a1 1 0 0 1 -.858 .75l-.113 .007h-2v6a1 1 0 0 1 -.883 .993l-.117 .007h-4a1 1 0 0 1 -.993 -.883l-.007 -.117v-6h-2a1 1 0 0 1 -.993 -.883l-.007 -.117v-4a1 1 0 0 1 .883 -.993l.117 -.007h2v-1a6 6 0 0 1 5.775 -5.996l.225 -.004h3z" stroke-width="0" fill="currentColor" /></svg>
                          FACEBOOK</a>
                      </li>
                      <li class="nav-item">
                        <a href="#tabs-profile-3" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14.058 3.41c-1.807 .767 -2.995 2.453 -3.056 4.38l-.002 .182l-.243 -.023c-2.392 -.269 -4.498 -1.512 -5.944 -3.531a1 1 0 0 0 -1.685 .092l-.097 .186l-.049 .099c-.719 1.485 -1.19 3.29 -1.017 5.203l.03 .273c.283 2.263 1.5 4.215 3.779 5.679l.173 .107l-.081 .043c-1.315 .663 -2.518 .952 -3.827 .9c-1.056 -.04 -1.446 1.372 -.518 1.878c3.598 1.961 7.461 2.566 10.792 1.6c4.06 -1.18 7.152 -4.223 8.335 -8.433l.127 -.495c.238 -.993 .372 -2.006 .401 -3.024l.003 -.332l.393 -.779l.44 -.862l.214 -.434l.118 -.247c.265 -.565 .456 -1.033 .574 -1.43l.014 -.056l.008 -.018c.22 -.593 -.166 -1.358 -.941 -1.358l-.122 .007a.997 .997 0 0 0 -.231 .057l-.086 .038a7.46 7.46 0 0 1 -.88 .36l-.356 .115l-.271 .08l-.772 .214c-1.336 -1.118 -3.144 -1.254 -5.012 -.554l-.211 .084z" stroke-width="0" fill="currentColor" /></svg>
                          TWITTER</a>
                      </li>
                    </ul>
                  </div>
                  <div class="card-body">
                    <div class="tab-content">
                      <div class="tab-pane active show" id="tabs-home-3">
                        <div>    
                            <div id="fb-root"></div>
                            <script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v19.0" nonce="h7NbHRTu"></script>  
                            <div style="width: 100%;">                      
                                <div class="fb-page" data-href="https://www.facebook.com/MPTambopata" data-tabs="timeline" data-width="500" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
                                    <blockquote cite="https://www.facebook.com/MPTambopata" class="fb-xfbml-parse-ignore">
                                        <a href="https://www.facebook.com/MPTambopata">Municipalidad Provincial de Tambopata</a>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="tab-pane" id="tabs-profile-3">
                        <div>Ingramos el link</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>          
        </div>
        <div class="col-sm-12 col-lg-2 mt-2" style="text-align: let;">           
            <div class="col-sm-12">  
                <a href="{{url('/convocatorias')}}"><img src="{{url('/img/convocatoria.png')}}" alt=""></a>                            
            </div>           
            <div class="col-sm-12 mt-2">  
                <a href="{{url('/comunicados')}}"><img src="{{url('/img/comunicado.png')}}" alt=""></a>                            
            </div>            
        </div>
    </div>
</div>
@endsection