@extends('layouts.front')
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css"/>

<style>
        .swiper {
      width: 90%;
      max-width: 1200px;
    }

    .swiper-slide {
    display: flex;
    justify-content: center;
}

    .photo-grid {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .photo-grid img {
      width: 220px;
      height: auto;
      object-fit: cover;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: #000;
    }

    .swiper-pagination-bullet-active {
      background-color: #28a745;
    }
    .swiper-button-prev{
        left: 0;
    }
    .swiper-button-next{
        right: 0;
    }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    background: #1b4079;
    padding: 10px;
    color: white;
}

    @media (max-width: 768px) {
      .swiper-slide {
        flex-direction: column;
        align-items: center;
      }

      .photo-grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }
    }
</style>
@endpush
@section('content')

<section id="about" class="py-5 text-center">
    <div class="container">
        <h4 class="text-uppercase fw-bold mb-4">Results</h4>


        <div class="row mt-5">
        <div class="swiper mySwiper">
    <div class="swiper-wrapper">
    <div class="swiper-slide">
    <a href="{{ asset('front_assets/img/image3.png') }}" class="glightbox" data-gallery="results">
        <img src="{{ asset('front_assets/img/image3.png') }}" alt="Before" />
    </a>
</div>
<div class="swiper-slide">
    <a href="{{ asset('front_assets/img/image4.png') }}" class="glightbox" data-gallery="results">
        <img src="{{ asset('front_assets/img/image4.png') }}" alt="Before" />
    </a>
</div>
<div class="swiper-slide">
    <a href="{{ asset('front_assets/img/image5.png') }}" class="glightbox" data-gallery="results">
        <img src="{{ asset('front_assets/img/image5.png') }}" alt="Before" />
    </a>
</div>
<div class="swiper-slide">
    <a href="{{ asset('front_assets/img/image6.png') }}" class="glightbox" data-gallery="results">
        <img src="{{ asset('front_assets/img/image6.png') }}" alt="Before" />
    </a>
</div>
<div class="swiper-slide">
    <a href="{{ asset('front_assets/img/image7.png') }}" class="glightbox" data-gallery="results">
        <img src="{{ asset('front_assets/img/image7.png') }}" alt="Before" />
    </a>
</div>

    </div>

    <!-- Arrows and Pagination -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
        </div>
    </div>
</section>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<script>
   const swiper = new Swiper(".mySwiper", {
    loop: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true
    },
    slidesPerView: 3,
    spaceBetween: 20,
    breakpoints: {
        0: {
            slidesPerView: 1
        },
        768: {
            slidesPerView: 2
        },
        1024: {
            slidesPerView: 3
        }
    }
});


    const lightbox = GLightbox({
        selector: '.glightbox'
    });
</script>
@endpush
@endsection