@extends('layouts.app', ['head'=>'rutas'])
@section('content')


<!-- Modal Etapa 1-->
<div class="modal fade" id="ModalEtapaDes1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <h3 class="modal-title text-darck" style="color: #fff; 
        text-shadow: black 0.1em 0.1em 0.1em; text-transform: uppercase;">Etapa 1</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0">
        <img src="{{asset("img/etapas/etapa1-des.webp")}}" class="img-fluid" alt="...">
      </div>
    </div>
  </div>
</div>
{{-- /// --}}

<!-- Modal Etapa 2-->
<div class="modal fade" id="ModalEtapaDes2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-success">
        <h3 class="modal-title text-darck" style="color: #fff; 
        text-shadow: black 0.1em 0.1em 0.1em; text-transform: uppercase;">Etapa 2</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0">
        <img src="{{asset("img/etapas/etapa2-des.webp")}}" class="img-fluid" alt="...">
      </div>
    </div>
  </div>
</div>
{{-- /// --}}



<!-- Modal Etapa 3-->
<div class="modal fade" id="ModalEtapaDes3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <h3 class="modal-title text-darck" style="color: #fff; 
        text-shadow: black 0.1em 0.1em 0.1em; text-transform: uppercase;">Etapa 3</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0">
        <img src="{{asset("img/etapas/etapa3-des.webp")}}" class="img-fluid" alt="...">
      </div>
    </div>
  </div>
</div>
{{-- /// --}}

<!-- Modal Etapa 4-->
<div class="modal fade" id="ModalEtapaDes4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-success">
        <h3 class="modal-title text-darck" style="color: #fff; 
        text-shadow: black 0.1em 0.1em 0.1em; text-transform: uppercase;">Etapa 4</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0">
        <img src="{{asset("img/etapas/etapa4-des.webp")}}" class="img-fluid" alt="...">
      </div>
    </div>
  </div>
</div>
{{-- /// --}}

<section id="rutas" class="clearfix portfolio" style="background-image: url({{asset("img/recorrido.png")}}); background-size: cover; background-position: center; padding: 5%;">
  <div style="background-color: #ffffff; box-shadow: 5px 5px 15px gray; padding: 2%; text-align: center;">
    <header class="section-header">
      <h3 class="section-title"><b>Ruta de la XXXIV Vuelta Ciclística a Trujillo</b></h3>
    </header>
    <hr style="border-color: gray;">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <ul id="portfolio-flters">
            <li data-filter="*" class="filter-active">Todas las Etapas</li>
            <li data-filter=".filter-etapa1">Etapa 1</li>
            <li data-filter=".filter-etapa2">Etapa 2</li>
            <li data-filter=".filter-etapa3">Etapa 3</li>
            <li data-filter=".filter-etapa4">Etapa 4</li>
          </ul>
        </div>
      </div>

      <div class="row portfolio-container">

        <div id="content_etapa1" class="col-lg-6 col-md-6 portfolio-item filter-etapa1">
          <div class="portfolio-wrap">
            <img src="{{asset("img/etapas/etapa1.webp")}}" class="img-fluid" alt="">
            <div class="portfolio-info">
              <div style="position: absolute; margin-top: 80%; margin-left: 80%;">
                  <button type="button" class="btn btn-success link-preview" data-toggle="modal" data-target="#ModalEtapaDes1"><i class="fas fa-eye"></i></button>
              </div>
            </div>
          </div>
        </div>

        <div id="content_etapa2" class="col-lg-6 col-md-6 portfolio-item filter-etapa2" data-wow-delay="0.2s">
          <div class="portfolio-wrap">
            <img src="{{asset("img/etapas/etapa2.webp")}}" class="img-fluid" alt="">
            <div class="portfolio-info">
              <div style="position: absolute; margin-top: 80%; margin-left: 80%;">
                  <button type="button" class="btn btn-success link-preview" data-toggle="modal" data-target="#ModalEtapaDes2"><i class="fas fa-eye"></i></button>
              </div>
            </div>
          </div>
        </div>

        <div id="content_etapa3" class="col-lg-6 col-md-6 portfolio-item filter-etapa3" data-wow-delay="0.1s">
          <div class="portfolio-wrap">
            <img src="{{asset("img/etapas/etapa3.webp")}}" class="img-fluid" alt="">
            <div class="portfolio-info">
              <div style="position: absolute; margin-top: 80%; margin-left: 80%;">
                  <button type="button" class="btn btn-success link-preview" data-toggle="modal" data-target="#ModalEtapaDes3"><i class="fas fa-eye"></i></button>
              </div>
            </div>
          </div>
        </div>

        <div id="content_etapa4" class="col-lg-6 col-md-6 portfolio-item filter-etapa4">
          <div class="portfolio-wrap">
            <img src="{{asset("img/etapas/etapa4.webp")}}" class="img-fluid" alt="">
            <div class="portfolio-info">
              <div style="position: absolute; margin-top: 80%; margin-left: 80%;">
                  <button type="button" class="btn btn-success link-preview" data-toggle="modal" data-target="#ModalEtapaDes4"><i class="fas fa-eye"></i></button>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>

</section><!-- #services -->

@endsection