<?php

$pageTitle = 'फोटो गैलरी';
include 'includes/header.php';

?>

<!-- =========================================
     GALLERY HERO SECTION
========================================= -->

<section class="gallery-hero-section">

    <div class="container">

        <!-- BREADCRUMB -->
        <div class="gallery-breadcrumb">

            <a href="index.php">होम</a>

            <span>/</span>

            <span>फोटो गैलरी</span>

        </div>

        <!-- HERO CONTENT -->
        <div class="gallery-hero-content">

            <div class="gallery-hero-icon">

                <i class="bi bi-camera-fill"></i>

            </div>

            <h1>
                फोटो गैलरी
            </h1>

            <p>
                अजमेर, राजस्थान और देश-दुनिया की खास तस्वीरें एक जगह
            </p>

            <div class="gallery-count">

                <i class="bi bi-images"></i>

                कुल <?php echo count($gallery); ?> तस्वीरें

            </div>

        </div>

    </div>

</section>

<style>
    /* =========================================
       GALLERY HERO
    ========================================= */

    .gallery-hero-section {
        padding: 80px 0;
        background: linear-gradient(90deg, #09162f, #172554);
        text-align: center;
    }

    .gallery-breadcrumb {
        margin-bottom: 24px;
        color: #cbd5e1;
        font-size: 14px;
    }

    .gallery-breadcrumb a {
        color: #fff;
        text-decoration: none;
    }

    .gallery-breadcrumb span {
        margin: 0 6px;
    }

    .gallery-hero-icon {
        width: 70px;
        height: 70px;
        border-radius: 18px;
        background: linear-gradient(135deg, #e11d48, #ff3d71);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        color: #fff;
        font-size: 28px;
    }

    .gallery-hero-content h1 {
        font-size: 52px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 12px;
    }

    .gallery-hero-content p {
        color: #cbd5e1;
        font-size: 16px;
        margin-bottom: 24px;
    }

    .gallery-count {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 40px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
    }
</style>



<!-- =========================================
     FILTER SECTION
========================================= -->

<section class="gallery-filter-section">

    <div class="container">

        <div class="gallery-filter-wrapper">

            <button class="active-filter" data-filter="all">
                सभी
            </button>

            <?php foreach ($categories as $category): ?>

                <button
                    data-filter="<?php echo $category['slug']; ?>">

                    <?php echo $category['name']; ?>

                </button>

            <?php endforeach; ?>

        </div>

    </div>

</section>

<style>
    /* =========================================
       FILTER SECTION
    ========================================= */

    .gallery-filter-section {
        background: #fff;
        padding: 22px 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .gallery-filter-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .gallery-filter-wrapper button {
        border: 1px solid #dbe2ea;
        background: #fff;
        padding: 10px 18px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 700;
        color: #111827;
        transition: 0.3s;
    }

    .gallery-filter-wrapper button:hover,
    .active-filter {
        background: #e11d48 !important;
        color: #fff !important;
        border-color: #e11d48 !important;
    }
</style>



<!-- =========================================
     MASONRY GALLERY
========================================= -->

<section class="masonry-gallery-section mb-5">

    <div class="container">

        <div class="masonry-gallery">

            <?php foreach ($gallery as $item): ?>

                <div class="masonry-item" data-category="<?php echo $item['category_slug']; ?>">

                    <div class="gallery-box">

                        <img src="admin/uploads/gallery/<?php echo $item['image']; ?>" alt="">

                        <!-- OVERLAY -->
                        <div class="gallery-overlay">

                            <span>

                                <?php echo $item['category_name']; ?>

                            </span>

                            <h3>

                                <?php echo $item['title']; ?>

                            </h3>

                        </div>

                    </div>

                </div>

            <?php endforeach; ?>

        </div>

    </div>

</section>

<style>
    /* =========================================
       MASONRY GALLERY
    ========================================= */

    .masonry-gallery-section {
        padding: 50px 0 90px;
        background: #09162f;
    }

    /* MASONRY */

    .masonry-gallery {
        column-count: 3;
        column-gap: 18px;
    }

    .masonry-item {
        break-inside: avoid;
        margin-bottom: 18px;
    }

    /* CARD */

    .gallery-box {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        cursor: pointer;
    }

    .gallery-box img {
        width: 100%;
        display: block;
        border-radius: 18px;
        transition: 0.4s;
    }

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

    /* OVERLAY */

    .gallery-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
        opacity: 0;
        transition: 0.35s;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 22px;
    }

    .gallery-box:hover .gallery-overlay {
        opacity: 1;
    }

    .gallery-overlay span {
        display: inline-block;
        background: #e11d48;
        color: #fff;
        padding: 6px 14px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 14px;
        width: max-content;
    }

    .gallery-overlay h3 {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.7;
        margin: 0;
    }

    /* =========================================
       RESPONSIVE
    ========================================= */

    @media(max-width:991px) {

        .masonry-gallery {
            column-count: 2;
        }

        .gallery-hero-content h1 {
            font-size: 42px;
        }
    }

    @media(max-width:768px) {

        .gallery-hero-section {
            padding: 65px 0;
        }

        .gallery-hero-content h1 {
            font-size: 34px;
        }

        .gallery-hero-content p {
            font-size: 15px;
            line-height: 1.8;
        }

        .masonry-gallery {
            column-count: 1;
        }

        .masonry-gallery-section {
            padding: 40px 0 60px;
        }

        .gallery-overlay {
            opacity: 1;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
        }

        .gallery-overlay h3 {
            font-size: 18px;
        }
    }
</style>

<script>
    // =========================================
    // GALLERY FILTER
    // =========================================

    const filterButtons = document.querySelectorAll(
        '.gallery-filter-wrapper button'
    );

    const galleryItems = document.querySelectorAll(
        '.masonry-item'
    );

    filterButtons.forEach(button => {

        button.addEventListener('click', () => {

            // REMOVE ACTIVE CLASS
            filterButtons.forEach(btn => {

                btn.classList.remove("active-filter");

            });

            // ADD ACTIVE CLASS
            button.classList.add("active-filter");

            // GET FILTER VALUE
            const filterValue = button.getAttribute('data-filter');

            // FILTER ITEMS
            galleryItems.forEach(item => {

                const itemCategory = item.getAttribute('data-category');

                if (filterValue === 'all' || itemCategory === filterValue) {

                    item.style.display = 'block';

                } else {

                    item.style.display = 'none';

                }

            });

        });

    });
</script>

<?php include 'includes/footer.php'; ?>