@extends('layouts.app')

@section('title', 'Home Page - RKCAMS.IN')

@section('content')
<section class="gallery-section py-5">
    <div class="container">

        <div class="text-center mb-4">
            <h2 class="fw-bold">Photo Gallery</h2>
            <p class="text-muted">Ram Krishna College of Ayurveda & Medical Sciences</p>
        </div>

        <div class="row g-4">

            <!-- Image 1 -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images\galary\ay1.jpg') }}" class="img-fluid rounded gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-slide="0">
            </div>

            <!-- Image 2 -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/ay3.jpeg') }}" class="img-fluid rounded gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-slide="1" c>
            </div>

            <!-- Image 3 -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/ay4.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="2" alt="Gallery Image 3">
            </div>

            <!-- Image 4 -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/ay5.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/ay6.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 5">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/ay7.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/b2.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/convocation241.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/convocation242.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/convocation243.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/convocation244.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/e19.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/image2.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/image4.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/image5.jpeg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/image6.jpeg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/image7.jpeg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/image8.jpeg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/nccImage01.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/nccImage02.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/nccImage03.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/nccImage04.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/nccImage05.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/nccImage06.jpg') }}" class="img-fluid rounded shadow-sm gallery-img"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/sport25image1.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/sport25image2.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/sport25image3.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/sport25image4.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/sport25image5.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/sport25image6.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Image  -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <img src="{{ asset('images/galary/sport25image7.jpg') }}"
                    class="img-fluid rounded shadow-sm gallery-img" data-bs-toggle="modal"
                    data-bs-target="#galleryModal" data-bs-slide-to="3" alt="Gallery Image 4">
            </div>

            <!-- Add more images the same way -->

        </div>
    </div>

    <!-- Gallery Modal -->
    <div class="modal fade" id="galleryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-dark">

                <div class="modal-body p-0 position-relative">

                    <!-- Close Button -->
                    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3"
                        data-bs-dismiss="modal" aria-label="Close"></button>

                    <!-- Carousel -->
                    <div id="galleryCarousel" class="carousel slide">
                        <div class="carousel-inner">

                            <!-- Slide 1 -->
                            <div class="carousel-item active">
                                <img src="images\galary\ay1.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image 1">
                            </div>

                            <!-- Slide 2 -->
                            <div class="carousel-item">
                                <img src="images\galary\ay3.jpeg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image 2">
                            </div>

                            <!-- Slide 3 -->
                            <div class="carousel-item">
                                <img src="images\galary\ay4.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image 3">
                            </div>

                            <!-- Slide 4 -->
                            <div class="carousel-item">
                                <img src="images\galary\ay5.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image 4">
                            </div>

                            <!-- Slide 5 -->
                            <div class="carousel-item">
                                <img src="images\galary\ay6.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image 5">
                            </div>

                            <!-- Slide 6 -->
                            <div class="carousel-item">
                                <img src="images\galary\ay7.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image 7">
                            </div>

                            <!-- Slide 7 -->
                            <div class="carousel-item">
                                <img src="images\galary\b2.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide 8 -->
                            <div class="carousel-item">
                                <img src="images\galary\convocation241.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide 9 -->
                            <div class="carousel-item">
                                <img src="images\galary\convocation242.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide 10 -->
                            <div class="carousel-item">
                                <img src="images\galary\convocation242.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\convocation243.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\convocation244.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\e19.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\image2.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\image4.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\image5.jpeg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\image6.jpeg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\image7.jpeg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\image8.jpeg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\nccImage01.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\nccImage02.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\nccImage03.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\nccImage04.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\nccImage05.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\nccImage06.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\sport25image1.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\sport25image2.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\sport25image3.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\sport25image4.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\sport25image5.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\sport25image6.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                            <!-- Slide  -->
                            <div class="carousel-item">
                                <img src="images\galary\sport25image7.jpg" class="d-block mx-auto img-fluid"
                                    alt="Gallery Image ">
                            </div>

                        </div>

                        <!-- Controls -->
                        <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </button>

                        <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
    const modalEl = document.getElementById('galleryModal');
    const carouselEl = document.getElementById('galleryCarousel');

    const modal = new bootstrap.Modal(modalEl);
    const carousel = new bootstrap.Carousel(carouselEl, {
        interval: false,
        ride: false
    });

    document.querySelectorAll('.gallery-img').forEach(img => {
        img.addEventListener('click', function() {
            const index = parseInt(this.dataset.slide, 10);

            // Remove active class from all slides
            carouselEl.querySelectorAll('.carousel-item').forEach(item => {
                item.classList.remove('active');
            });

            // Add active to the clicked slide
            const targetSlide = carouselEl.querySelectorAll('.carousel-item')[index];
            targetSlide.classList.add('active');

            // Force carousel to re-sync
            carousel._setActiveIndicatorElement(index);

            // Show modal if not visible
            if (!modalEl.classList.contains('show')) {
                modal.show();
            }
        });
    });
    </script>
</section>
@endsection