<?php

/* =========================================================
   COMPLETE BLISS - FULL PUBLIC GALLERY
========================================================= */

$galleryDirectory =
    __DIR__ . '/public-site/assets/images/evidence/';

$galleryWebPath =
    'public-site/assets/images/evidence/';

$allowedExtensions = [
    'jpg',
    'jpeg',
    'png',
    'webp'
];

$allGalleryPhotos = [];


/* =========================================================
   AUTOMATICALLY READ IMAGES
========================================================= */

if (is_dir($galleryDirectory)) {

    $files = scandir($galleryDirectory);

    foreach ($files as $file) {

        if (
            $file === '.' ||
            $file === '..'
        ) {
            continue;
        }


        $fullPath =
            $galleryDirectory . $file;


        if (!is_file($fullPath)) {
            continue;
        }


        $extension =
            strtolower(
                pathinfo(
                    $file,
                    PATHINFO_EXTENSION
                )
            );


        if (
            !in_array(
                $extension,
                $allowedExtensions,
                true
            )
        ) {
            continue;
        }


        $allGalleryPhotos[] = [

            'filename' => $file,

            'path' =>
                $galleryWebPath .
                rawurlencode($file),

            'modified' =>
                filemtime($fullPath)

        ];

    }

}


/* =========================================================
   NEWEST FIRST
========================================================= */

usort(
    $allGalleryPhotos,
    function ($a, $b) {

        return
            $b['modified']
            <=>
            $a['modified'];

    }
);


$totalPhotos =
    count($allGalleryPhotos);


/* =========================================================
   PAGINATION
========================================================= */

$photosPerPage = 24;

$galleryPage =
    isset($_GET['page'])
        ? max(1, (int) $_GET['page'])
        : 1;


$totalPages =
    $totalPhotos > 0
        ? (int) ceil(
            $totalPhotos / $photosPerPage
        )
        : 1;


if ($galleryPage > $totalPages) {

    $galleryPage = $totalPages;

}


$offset =
    ($galleryPage - 1)
    * $photosPerPage;


$currentPhotos =
    array_slice(
        $allGalleryPhotos,
        $offset,
        $photosPerPage
    );


/* =========================================================
   DATA FOR FULLSCREEN VIEWER
   Only paths + filenames are sent to JavaScript.
========================================================= */

$galleryViewerData = [];

foreach ($allGalleryPhotos as $photo) {

    $galleryViewerData[] = [

        'path' => $photo['path'],

        'filename' => $photo['filename']

    ];

}


require_once
    __DIR__ .
    '/public-site/includes/header.php';

require_once
    __DIR__ .
    '/public-site/includes/navbar.php';

?>


<main>


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

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

        <div class="cbx-container">


            <div class="cbx-gallery-page-hero-content">


                <a
                    href="index.php#gallery"
                    class="cbx-gallery-back"
                >

                    <i class="fa-solid fa-arrow-left"></i>

                    Back to Home

                </a>


                <div class="cbx-gallery-page-tag">

                    <i class="fa-solid fa-images"></i>

                    COMPLETE BLISS GALLERY

                </div>


                <h1>

                    Real Moments.

                    <span>
                        Real Evidence.
                    </span>

                </h1>


                <p>
                    Explore moments from Complete Bliss activities,
                    packages, preparation, distributions and other
                    memorable experiences.
                </p>



                <div class="cbx-gallery-page-stats">


                    <div>

                        <strong>
                            <?= number_format($totalPhotos) ?>
                        </strong>

                        <span>
                            Gallery Photos
                        </span>

                    </div>


                    <div>

                        <strong>
                            <?= number_format($totalPages) ?>
                        </strong>

                        <span>
                            Gallery Pages
                        </span>

                    </div>


                    <div>

                        <strong>
                            <?= number_format($galleryPage) ?>
                        </strong>

                        <span>
                            Current Page
                        </span>

                    </div>


                </div>


            </div>


        </div>

    </section>



    <!-- =====================================================
         PHOTO GALLERY
    ====================================================== -->

    <section class="cbx-gallery-page-section">

        <div class="cbx-container">


            <?php if (!empty($currentPhotos)): ?>


                <!-- TOP BAR -->

                <div class="cbx-gallery-page-toolbar">


                    <div>

                        <span>
                            Showing
                        </span>

                        <strong>

                            <?= number_format(
                                $offset + 1
                            ) ?>

                            –

                            <?= number_format(
                                min(
                                    $offset
                                    + $photosPerPage,
                                    $totalPhotos
                                )
                            ) ?>

                        </strong>

                        <span>
                            of
                        </span>

                        <strong>
                            <?= number_format($totalPhotos) ?>
                        </strong>

                        <span>
                            photos
                        </span>

                    </div>


                    <div class="cbx-gallery-page-tip">

                        <i class="fa-solid fa-expand"></i>

                        Click any photo to view fullscreen

                    </div>


                </div>



                <!-- PHOTO GRID -->

                <div class="cbx-full-gallery-grid">


                    <?php
                    foreach (
                        $currentPhotos
                        as $localIndex => $photo
                    ):
                    ?>


                        <?php

                        $globalIndex =
                            $offset
                            + $localIndex;

                        ?>


                        <button
                            type="button"
                            class="cbx-full-gallery-item"
                            data-gallery-index="<?= $globalIndex ?>"
                        >


                            <img
                                src="<?= htmlspecialchars($photo['path']) ?>"
                                alt="Complete Bliss gallery photo"
                                loading="lazy"
                            >


                            <div
                                class="cbx-full-gallery-overlay">
                            </div>


                            <div
                                class="cbx-full-gallery-hover"
                            >


                                <div>

                                    <i
                                        class="fa-solid fa-expand">
                                    </i>

                                </div>


                                <span>
                                    View Photo
                                </span>


                            </div>


                            <div
                                class="cbx-full-gallery-number"
                            >

                                <?= sprintf(
                                    '%02d',
                                    $globalIndex + 1
                                ) ?>

                            </div>


                        </button>


                    <?php endforeach; ?>


                </div>



                <!-- =================================================
                     PAGINATION
                ================================================== -->

                <?php if ($totalPages > 1): ?>


                    <nav
                        class="cbx-gallery-pagination"
                        aria-label="Gallery pagination"
                    >


                        <!-- PREVIOUS -->

                        <?php if ($galleryPage > 1): ?>

                            <a
                                href="gallery.php?page=<?= $galleryPage - 1 ?>"
                                class="cbx-gallery-page-nav"
                            >

                                <i class="fa-solid fa-arrow-left"></i>

                                Previous

                            </a>

                        <?php else: ?>

                            <span
                                class="cbx-gallery-page-nav disabled"
                            >

                                <i class="fa-solid fa-arrow-left"></i>

                                Previous

                            </span>

                        <?php endif; ?>



                        <!-- PAGE NUMBERS -->

                        <div class="cbx-gallery-page-numbers">


                            <?php

                            $startPage =
                                max(
                                    1,
                                    $galleryPage - 2
                                );

                            $endPage =
                                min(
                                    $totalPages,
                                    $galleryPage + 2
                                );

                            ?>


                            <?php if ($startPage > 1): ?>


                                <a href="gallery.php?page=1">
                                    1
                                </a>


                                <?php if ($startPage > 2): ?>

                                    <span>...</span>

                                <?php endif; ?>


                            <?php endif; ?>



                            <?php
                            for (
                                $pageNumber = $startPage;
                                $pageNumber <= $endPage;
                                $pageNumber++
                            ):
                            ?>


                                <a
                                    href="gallery.php?page=<?= $pageNumber ?>"
                                    class="<?= $pageNumber === $galleryPage
                                        ? 'active'
                                        : '' ?>"
                                >

                                    <?= $pageNumber ?>

                                </a>


                            <?php endfor; ?>



                            <?php if ($endPage < $totalPages): ?>


                                <?php
                                if (
                                    $endPage
                                    < $totalPages - 1
                                ):
                                ?>

                                    <span>...</span>

                                <?php endif; ?>


                                <a
                                    href="gallery.php?page=<?= $totalPages ?>"
                                >

                                    <?= $totalPages ?>

                                </a>


                            <?php endif; ?>


                        </div>



                        <!-- NEXT -->

                        <?php if ($galleryPage < $totalPages): ?>

                            <a
                                href="gallery.php?page=<?= $galleryPage + 1 ?>"
                                class="cbx-gallery-page-nav"
                            >

                                Next

                                <i class="fa-solid fa-arrow-right"></i>

                            </a>

                        <?php else: ?>

                            <span
                                class="cbx-gallery-page-nav disabled"
                            >

                                Next

                                <i class="fa-solid fa-arrow-right"></i>

                            </span>

                        <?php endif; ?>


                    </nav>


                <?php endif; ?>



            <?php else: ?>


                <!-- EMPTY GALLERY -->

                <div class="cbx-full-gallery-empty">


                    <div>

                        <i class="fa-solid fa-images"></i>

                    </div>


                    <h2>
                        Gallery Coming Soon
                    </h2>


                    <p>
                        Complete Bliss activity photos and
                        memorable moments will appear here.
                    </p>


                    <a href="index.php">

                        Return Home

                    </a>


                </div>


            <?php endif; ?>


        </div>

    </section>


</main>



<!-- =========================================================
     FULLSCREEN PHOTO VIEWER
========================================================= -->

<div
    class="cbx-gallery-viewer"
    id="cbxGalleryViewer"
    aria-hidden="true"
>


    <!-- TOP BAR -->

    <div class="cbx-gallery-viewer-top">


        <div class="cbx-gallery-viewer-counter">

            <span id="cbxGalleryCurrent">
                1
            </span>

            <span>/</span>

            <span>
                <?= number_format($totalPhotos) ?>
            </span>

        </div>



        <div class="cbx-gallery-viewer-actions">


            <a
                href="#"
                id="cbxGalleryDownload"
                class="cbx-gallery-download"
                download
            >

                <i class="fa-solid fa-download"></i>

                <span>
                    Download
                </span>

            </a>


            <button
                type="button"
                id="cbxGalleryViewerClose"
                class="cbx-gallery-viewer-close"
                aria-label="Close gallery"
            >

                <i class="fa-solid fa-xmark"></i>

            </button>


        </div>


    </div>



    <!-- PREVIOUS -->

    <button
        type="button"
        class="cbx-gallery-viewer-arrow cbx-gallery-viewer-prev"
        id="cbxGalleryViewerPrev"
        aria-label="Previous photo"
    >

        <i class="fa-solid fa-chevron-left"></i>

    </button>



    <!-- IMAGE -->

    <div class="cbx-gallery-viewer-image-area">


        <img
            src=""
            alt="Complete Bliss gallery photo"
            id="cbxGalleryViewerImage"
        >


    </div>



    <!-- NEXT -->

    <button
        type="button"
        class="cbx-gallery-viewer-arrow cbx-gallery-viewer-next"
        id="cbxGalleryViewerNext"
        aria-label="Next photo"
    >

        <i class="fa-solid fa-chevron-right"></i>

    </button>



    <!-- BOTTOM -->

    <div class="cbx-gallery-viewer-bottom">

        <span>
            <i class="fa-solid fa-circle-info"></i>

            Use the arrows or your keyboard to browse.
        </span>

    </div>


</div>



<script>

window.cbxCompleteBlissGallery =
    <?= json_encode(
        $galleryViewerData,
        JSON_UNESCAPED_SLASHES
        |
        JSON_UNESCAPED_UNICODE
    ) ?>;

</script>


<?php

require_once
    __DIR__ .
    '/public-site/includes/footer.php';

?>