<?php

/* =========================================================
   COMPLETE BLISS - AUTOMATIC EVIDENCE GALLERY
========================================================= */

$evidenceDirectory =
    __DIR__ . '/../assets/images/evidence/';

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

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

$allEvidencePhotos = [];


/* =========================================================
   READ IMAGES AUTOMATICALLY FROM FOLDER
========================================================= */

if (is_dir($evidenceDirectory)) {

    $files = scandir($evidenceDirectory);

    foreach ($files as $file) {

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


        $fullPath =
            $evidenceDirectory . $file;


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


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


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


        $allEvidencePhotos[] = [

            'filename' => $file,

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

            'modified' =>
                filemtime($fullPath)

        ];

    }

}


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

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

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

    }
);


/* =========================================================
   HOMEPAGE ONLY SHOWS 5
========================================================= */

$homepageEvidence =
    array_slice(
        $allEvidencePhotos,
        0,
        5
    );

$totalEvidencePhotos =
    count($allEvidencePhotos);

?>


<section
    class="cbx-evidence"
    id="gallery"
>

    <div class="cbx-container">


        <!-- =====================================
             HEADING
        ====================================== -->

        <div class="cbx-evidence-heading">


            <div class="cbx-evidence-tag">

                <i class="fa-solid fa-camera-retro"></i>

                <span>
                    COMPLETE BLISS IN ACTION
                </span>

            </div>


            <h2>

                See It.

                <span>
                    Believe It.
                </span>

            </h2>


            <p>
                Trust is easier when you can see the journey.
                Take a look at real Complete Bliss activities,
                packages, preparation and memorable moments.
            </p>


        </div>



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


            <!-- =====================================
                 PHOTO GRID
            ====================================== -->

            <div class="cbx-evidence-grid">


                <?php
                foreach (
                    $homepageEvidence
                    as $index => $photo
                ):
                ?>


                    <button
                        type="button"
                        class="
                            cbx-evidence-card
                            <?= $index === 0
                                ? 'cbx-evidence-featured'
                                : '' ?>
                        "
                        data-evidence-image="<?= htmlspecialchars($photo['path']) ?>"
                    >


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


                        <div
                            class="cbx-evidence-overlay">
                        </div>


                        <div
                            class="cbx-evidence-card-content"
                        >


                            <div
                                class="cbx-evidence-photo-icon"
                            >

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

                            </div>


                            <div>

                                <span>
                                    COMPLETE BLISS
                                </span>


                                <h3>
                                    Real Moments
                                </h3>


                                <p>
                                    Click to view this photo.
                                </p>

                            </div>


                        </div>


                    </button>


                <?php endforeach; ?>


            </div>



            <!-- =====================================
                 VIEW ALL
            ====================================== -->

            <div class="cbx-gallery-view-all">


                <div>

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

                    <p>
                        photos currently in our gallery
                    </p>

                </div>


                <a href="gallery.php">

                    View All Photos

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

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

                </a>


            </div>


        <?php else: ?>


            <!-- EMPTY -->

            <div class="cbx-evidence-empty">


                <div
                    class="cbx-evidence-empty-icon"
                >

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

                </div>


                <h3>
                    Our Story in Pictures Is Coming
                </h3>


                <p>
                    Complete Bliss activity photos,
                    packages and member moments will
                    appear here.
                </p>


            </div>


        <?php endif; ?>



        <!-- =====================================
             TRUST MESSAGE
        ====================================== -->

        <div class="cbx-evidence-message">


            <div
                class="cbx-evidence-message-icon"
            >

                <i
                    class="fa-solid fa-shield-heart">
                </i>

            </div>


            <div>

                <span>
                    TRANSPARENCY MATTERS
                </span>


                <h3>
                    We don't just want to tell you
                    what we do. We want you to be
                    able to see it.
                </h3>

            </div>


            <a href="gallery.php">

                Explore Gallery

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

            </a>


        </div>


    </div>



    <!-- =====================================
         LANDING PAGE LIGHTBOX
    ====================================== -->

    <div
        class="cbx-evidence-lightbox"
        id="cbxEvidenceLightbox"
        aria-hidden="true"
    >


        <button
            class="cbx-evidence-close"
            id="cbxEvidenceClose"
            type="button"
            aria-label="Close image"
        >

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

        </button>


        <div
            class="cbx-evidence-lightbox-content"
        >


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


            <div
                class="cbx-evidence-lightbox-caption"
            >

                <span>
                    COMPLETE BLISS
                </span>

                <h3>
                    Real Moments
                </h3>

            </div>


        </div>


    </div>


</section>