@extends('layouts.app', ['head'=>'index'])

@section('content')
@php $i = 1 @endphp
  @foreach($s as $key)
    @if($i == $key->nivel)
      @if($key->tipo == 4)
        @if($key->orientacion == "D")
        <section  class="container-fluid" style="width: 100%; height: 520px; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url({{asset('storage').'/'.$key->bg_seccion}}) no-repeat; background-size: cover; position: relative;">
          <div class="w-100">
            <div class="row">
                <div class="col-md-6 col-lg-6">
                  @if($key->imagen_lateral != "")
                  <img src="{{asset('storage').'/'.$key->imagen_lateral}}" alt="" width="300" style="position: absolute;  margin-top: 90px; margin-left: 250px; filter: drop-shadow(2px 2px 15px rgb(0, 0, 0));" class="imgMascota ocultar-img">
                  @endif
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-white" >
                  <div class="w-75 p-4 mt-5" style="background-color: rgba(51,90,52,0.8)">
                    <h3 class="mt-3" style="color: #fff; 
                    text-shadow: black 0.1em 0.1em 0.1em; text-transform: uppercase;"><b>{{$key->titulo}}</b></h3>
                    <p class="" style="color: #fff; 
                    text-shadow: black 0.1em 0.1em 0.1em; font-size:15px">{!!$key->descripcion!!}</p>
                    <div class="clearfix">
                      <img src="{{asset("img/logos/Ciclismo3.png")}}" class="float-right" alt="" width="100" height="50" style="border-radius: 5px;">
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </section>
        @endif

        @if($key->orientacion == "I")
        <section  class="container-fluid" style="width: 100%; height: 520px; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url({{asset('storage').'/'.$key->bg_seccion}}) no-repeat; background-size: cover; position: relative;">
          <div class="container">

            <div class="row">

              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-white p-4 mt-5" style="background-color: rgba(236,28,35,0.8)">
                  <h3 class="mt-3" style="color: #fff; 
                  text-shadow: black 0.1em 0.1em 0.1em; text-transform: uppercase;"><b>{{$key->titulo}}</b></h3>
                  <p class="" style="color: #fff; 
                  text-shadow: black 0.1em 0.1em 0.1em; font-size:15px">{!!$key->descripcion!!}</p>
                  <div class="clearfix">
                    <img src="{{asset("img/logos/Ciclismo3.png")}}" class="float-right" alt="" width="100" height="50" style="border-radius: 5px;">
                  </div>
              </div>
              <div class="col-md-6 col-lg-6">
                <img src="{{asset('storage').'/'.$key->imagen_lateral}}" alt="" width="300" style="margin-left: 58px;" class="imgMascota ocultar-img">
              </div>

            </div>
          </div>
        </section>
        @endif
      @endif

      @if($key->tipo != 4)
        @foreach(\App\Models\Modulo::where('id', '!=', 4, "AND", 'landing', '=', '1')->get() as $m)
          @if($m->id == $key->tipo)
            @if($m->tipo == "D")
              <section id="{{strtolower($m->descripcion)}}" class="gallery" style="width: 100%; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url({{asset('storage').'/'.$key->bg_seccion}}) no-repeat; background-size: cover; position: relative;">
                <div class="text-center mt-5 py-0" style="color: #fff; 
                text-shadow: black 0.1em 0.1em 0.1em;">
                  <h2><b>{{$key->titulo}}</b></h2>
                </div>
                <div class="container-fluid" data-aos="fade-up">
                  <div class="text-right">
                    <a href="{{ Route('noticias.todas') }}" class="text-white fs-6 mx-5" style="text-shadow: black 0.1em 0.1em 0.1em;"><b>Ver más <i class="fas fa-sign-out-alt"></i></b></a>
                  </div>
                  <div class="gallery-slider swiper">
                    <div class="swiper-wrapper align-items-center">
                      @if($m->descripcion == "Noticias")
                      @foreach(\App\Models\Noticias::orderBy('created_at','desc')->paginate(10) as $var)
                      <div class="swiper-slide">
                        <div class="glightbox" data-gallery="images-gallery">
                          <div class="card text-center">
                            <img src="{{asset("img/etapas/etapa1.webp")}}" class="card-img-top" alt="...">
                            <div class="card-body">
                              <h5 class="card-title">{{$var->titulo}}</h5>
                              <a href="{{route(strtolower($m->descripcion).".detalles", $var->slug)}}" class="btn btn-danger">Leer más</a>
                            </div>
                            <div class="card-footer">
                              <small class="text-body-secondary"><b>Publicado: </b>{{$var->created_at->diffForHumans()}}</small>
                            </div>
                          </div>
                        </div>
                      </div>
                      @endforeach
                      @endif
                    </div>
                  </div>
                </div>
              </section>
            @endif
            @if($m->tipo == "E")
              <section id="{{strtolower($m->descripcion)}}" class="gallery" style="width: 100%; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url({{asset('storage').'/'.$key->bg_seccion}}) no-repeat; background-size: cover; position: relative;">
                <div class="text-center mt-5 py-0" style="color: #fff; 
                text-shadow: black 0.1em 0.1em 0.1em;">
                  <h2><b>{{$key->titulo}}</b></h2>
                </div>
                <div class="container-fluid" data-aos="fade-up">
                  {{-- <div class="text-right">
                    <a href="{{ Route( strtolower($m->descripcion).".todas") }}" class="text-white fs-6 mx-5" style="text-shadow: black 0.1em 0.1em 0.1em;"><b>Ver más <i class="fas fa-sign-out-alt"></i></b></a>
                  </div> --}}
                  <div class="gallery-slider swiper">
                    <div class="swiper-wrapper align-items-center">
                      @if($m->descripcion == "Patrocinadores")
                        @foreach(\App\Models\Patrocinadores::all() as $vari)
                          <div class="swiper-slide">
                            <div class="glightbox" data-gallery="images-gallery">
                              <div class="card bg-dark text-white">
                                <img src="{{ asset('storage').'/'.$vari->rutafoto }}" class="card-img" alt="...">
                              </div>
                            </div>
                          </div>
                        @endforeach
                      @endif
                    </div>
                  </div>
                </div>
              </section>
            @endif
          @endif
        @endforeach
      @endif
    @endif
    @php $i++ @endphp
  @endforeach        
@endsection