<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', '::RKCAMS:: rkcams.in - RAM KRISHNA COLLEGE OF AYURVEDA & MEDICAL SCIENCES, RKDF UNIVERSITY,
        BHOPAL')</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

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

    <!-- Optional: Add your custom styles here -->
    <style>
    .dropdown-menu {
        /* z-index: 1050; Bootstrap default for dropdowns */
        z-index: 9999 !important;
    }

    .navbar {
        z-index: 999;
        position: relative;
    }

    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.75);
    }

    .navbar-dark .navbar-nav .nav-link:hover {
        color: white;
    }

    /* Slider styles */
    /* .slider {
        width: 100%;
        height: 400px;
        background: url('https://via.placeholder.com/1200x400') no-repeat center center;
        background-size: cover;
        position: relative;
        z-index: 1;
        /* Make sure slider is behind */
    }

    */ .slider {
        position: relative;
    }

    .carousel-img {
        height: 80vh;
        /* gives slider height */
        object-fit: cover;
    }

    .slider-overlay {
        position: absolute;
        inset: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        /* allow carousel controls */
    }

    .slider-overlay a {
        pointer-events: auto;
        /* re-enable buttons */
    }

    .footer_wrapper {
        margin: 0 auto;
        background: #111d28;
    }

    ul {
        list-style-type: none;
    }

    .carousel-img {
        height: 420px;
        /* Fixed visible height */
        object-fit: cover;
        /* Crop while keeping aspect ratio */
        width: 100%;
    }

    .nav-link.active {
        font-weight: 600;
        color: #0d6efd !important;
        border-bottom: 2px solid #0d6efd;
    }

    .text-justify {
        text-align: justify;
    }

    .lead {
        font-size: 1.0rem;
        font-weight: 300;
    }

    .gallery-img {
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .gallery-img:hover {
        transform: scale(1.05);
    }

    .modal-content img {
        max-height: 85vh;
        object-fit: contain;
    }
    </style>
</head>

<body>
    <!-- Include the Navigation Menu Component -->
    <x-navigation-menu />

    <!-- Include the slider Component -->
    <x-slider />

    <div class="container ">
        @yield('content')
    </div>

    <x-footer />

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    document.querySelectorAll('.gallery-img').forEach((img) => {
        img.addEventListener('click', function() {
            const slideTo = this.getAttribute('data-bs-slide-to');
            const carousel = bootstrap.Carousel.getOrCreateInstance(
                document.getElementById('galleryCarousel')
            );
            carousel.to(slideTo);
        });
    });

    <
    script >

        // Wait for modal to open, then move carousel
        const galleryModal = document.getElementById('galleryModal');

    galleryModal.addEventListener('shown.bs.modal', function() {
        const carouselElement = document.getElementById('galleryCarousel');
        const carousel = bootstrap.Carousel.getOrCreateInstance(carouselElement);
        carousel.to(clickedIndex);
    });


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

            // If modal is already visible → move carousel immediately
            if (modalEl.classList.contains('show')) {
                carousel.to(index);
            }
            // If modal is closed → open it, then move carousel
            else {
                modal.show();

                modalEl.addEventListener('shown.bs.modal', function handler() {
                    carousel.to(index);
                    modalEl.removeEventListener('shown.bs.modal', handler);
                });
            }
        });
    });
    </script>

</body>

</html>