@extends('users/layout')
@section('content')
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script type="text/javascript" src="{{asset('template/javascript/jquery.magnific-popup.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js" integrity="sha512-YibiFIKqwi6sZFfPm5HNHQYemJwFbyyYHjrr3UT+VobMt/YBo1kBxgui5RWc4C3B4RJMYCdCAJkbXHt+irKfSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" integrity="sha512-Velp0ebMKjcd9RiCoaHhLXkR1sFoCCWXNp6w4zj1hfMifYB5441C+sKeBl/T/Ka6NjBiRfBBQRaQq65ekYz3UQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js" integrity="sha512-Y2IiVZeaBwXG1wSV7f13plqlmFOx8MdjuHyYFVoYzhyRr3nH/NMDjTBSswijzADdNzMyWNetbLMfOpIPl6Cv9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section>
	<div>
		<div class="background-holder overlay" style="background-image:url(template/assets/images/background-2.jpg);background-position: center bottom;">
		</div><!--/.background-holder-->
<div class="container">
 <div class="row pt-3" data-inertia='{"weight":1.5}'>
  <div class="col-md-8 px-md-0 color-white" data-zanim-timeline="{}" data-zanim-trigger="scroll">
   <div class="overflow-hidden">
	<h1 class="color-white fs-4 fs-md-5 mb-0 zopacity" data-zanim='{"delay":0}'>Galerie</h1>
	<div class="nav zopacity" aria-label="breadcrumb" role="navigation" data-zanim='{"delay":0.1}'>
		<ol class="breadcrumb fs-1 pl-0 fw-700">
		<li class="breadcrumb-item">
			<a class="color-white" href="#">Accueil</a>
		</li>
		<li class="breadcrumb-item active" aria-current="page">Galerie
		</li>
		</ol>
	</div>
	</div>
 </div>
 </div>
 </div>
 <!--/.row-->
 </div><!--/.container-->
 </section>

 <script type="text/javascript">
     /*  gallery */
     $(document).ready(function(){

         $(".filter-button").click(function(){
             var value = $(this).attr('data-filter');
             
             if(value == "all")
             {
                 $('.filter').show('1000');
             }
             else
             {
                 $(".filter").not('.'+value).hide('3000');
                 $('.filter').filter('.'+value).show('3000');
                 
             }

                     if ($(".filter-button").removeClass("active")) {
                 $(this).removeClass("active");
                 }
                     $(this).addClass("active");
                 });
     });
     /*  end gallery */

     $(document).ready(function(){
         $(".box").fancybox({
             openEffect: "none",
             closeEffect: "none"
         });
     });

     $(document).on('click', '[data-toggle="lightbox"]', function(event) {
                     event.preventDefault();
                     $(this).ekkoLightbox();
                 });

       
 </script>
 <style type="text/css">
     *{
         padding:0;
         margin:0;
     }

     /*  general */

     section{
         padding: 50px 0;
     }

     /*  gallery */

     .gallery-title{
         font-size: 36px;
         color: #3F6184;
         text-align: center;
         font-weight: 500;
         margin-bottom: 70px;
     }
     .filter-button{
         font-size: 18px;
         border: 2px solid #3F6184;
         padding:5px 10px;
         text-align: center;
         color: #3F6184;
         margin-bottom: 30px;
         background:transparent;
     }
     .filter-button:hover,
     .filter-button:focus,
     .filter-button.active{
         color: #ffffff;
         background-color:#3F6184;
         outline:none;
     }
     .gallery_product{
         margin: 0px;
         padding:0;
         position:relative;
     }
     .gallery_product .img-info{
         position: absolute;
         background: rgba(0,0,0,0.5);
         left: 0;
         right: 0;
         bottom: 0;
         padding: 20px;
         overflow:hidden;
         color:#fff;
         top:0;
         display:none;
            -webkit-transition: 2s;
         transition: 2s;
     }

     .gallery_product:hover .img-info{
         display:block;
        -webkit-transition: 2s;
         transition: 2s;
     }

     /*  end gallery */
 </style>



<section class="background-11" style="border-style: solid; border-width: 2px; border-color: #2a3855 !important; margin: 30px;">
	<div class="container">
		<div class="row justify-content-center">
		    <div class="col-md-12">
		        <div class="row">
		            @foreach($galerie as $galeries)
		            <a href="{{asset($galeries->ImageGalerie)}}" data-toggle="lightbox" data-gallery="example-gallery" class="col-md-4">
		                <img src="{{asset($galeries->ImageGalerie)}}" class="img-fluid">
		                    <h5 style="text-align: center;">{{$galeries->DescriptionGalerie}}</h5>
		                    
		            </a>
		            @endforeach
		            
		        </div>

		    </div>
		</div>
		<div class="navigation paging-navigation numeric">
		    <div class="flat-pagination loop-pagination">
		        <span>
		            {{ $galerie->links() }}
		        </span>

		        
		        
		    </div><!-- /.flat-pagination -->
		</div>
	</div>
	</section>

 @endsection