@extends('frontend.layouts.app')

@section('title', 'MONOGRAPHIES ET DOCUMENTS')

@section('content')


<section class="breadcrumb-area" style="background-image: 
linear-gradient(to right bottom, rgba(113, 5, 36, 0.87), rgba(28, 114, 81, 0.78)), url({{asset('frontend/images/breadcrumb/cover02.jpg')}});">  <div class="container">
      <div class="row">
          <div class="col-xl-12">
              <div class="inner-content clearfix">
                  <div class="title">
                     <h1>MONOGRAPHIES ET DOCUMENTS                    </h1>
                  </div>
                  <div class="breadcrumb-menu">
                      <ul class="clearfix">
                          <li><a href="/">Accueil</a></li>
                          <li class="active">MONOGRAPHIES ET DOCUMENTS</li>
                      </ul>    
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>



<section class="exhibitions-area exhibitions-page">
  <div class="container">
    <div class="row align-items-center justify-content-center">
        <div class="col-xl-6 col-lg-12 text-center">
            <div class="about-style1-content section-header">
              <div class="section-title-border">
                {{-- <span>LES UNITÉS </span> --}}
                <h1>DISPONIBLE AU MUSÉE DU GÉOPARC DU M'GOUN À AZILAL
                </h1>
              </div>
                
            </div>   
        </div>
      </div> 
      <div class="row masonary-layout">
        @foreach($guides as $guide)
          <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
              <div class="single-exhibition-box style4">
                  <div class="img-holder">
                              
                      @for($i=0; $i <@count($images)-1; $i++)
                      
                        @if($images)
                            <img src="{{asset('storage/guides/'.$images[$i])}}" class="img-responsive" >
                        @else
                            <img src="{{asset('notfound.png') }}" alt="{{getTranslationGuide($guide->id)['title']}}">
                        @endif
                        <div class="overlay-style-one bg1">
                            <div class="zoom-button">
                                <a class="lightbox-image" data-fancybox="gallery" href="{{asset('storage/guides/'.$images[$i])}}">
                                    <i class="fa fa-search-plus" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                      @endfor
                  </div>
                  <div class="text-holder text-center">
                      <h2>{{getTranslationGuide($guide->id)['title']}}</h2>
                  </div>   
              </div>    
          </div>
          @endforeach
      
      </div>
  </div>
</section>




@endsection

@section('scripts')

@endsection