Untitled

    static function sections_popup()
    {
        $type = get_post_type();
        $types = array('page', 'sections', 'lp');

        if (!in_array($type, $types))
            return;

        ?>
        <style>
            .acf-tooltip.acf-fc-popup.is-main-sections-dropdown,
            .acf-tooltip.acf-fc-popup.is-main-sections-dropdown {
                opacity: 0 !important;
                visibility: hidden !important;
            }

            .lity-hide {
                display: none;
            }

            .sectionsPopup {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
                z-index: 99999999;
                -webkit-transition: .3s;
                -o-transition: .3s;
                transition: .3s;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            .sectionsPopup_inner {
                max-width: 1024px;
                margin: 0 auto;
            }

            .sectionsPopup.active {
                opacity: 1;
                pointer-events: all;
                visibility: visible;
            }

            .sectionsPopup .title {
                background: #2b4b80;
                padding: 20px;
                color: #fff;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                -moz-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            .sectionsPopup .title .bigTitle {
                -webkit-align-self: flex-start;
                -ms-flex-item-align: start;
                align-self: flex-start;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -moz-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                font-size: 24px;
                font-weight: 500;
                line-height: 24px;
            }

            .sectionsPopup .title #sectionspopupSearch {
                margin-right: 20px;
            }

            .sectionsPopup .title [data-sections-close] {
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
            }

            .sectionsPopup .sections_wrap {
                max-height: 85vh;
                height: 750px;
                overflow-y: auto;
                overflow-x: hidden;
                background: #F1F3F5;
            }

            .sectionsPopup .sections_wrap_container_grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 20px;
                padding: 26px;
            }

            .sectionsPopup .sections_wrap_item {
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                padding: 10px;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -webkit-flex-direction: column;
                -moz-box-orient: vertical;
                -moz-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                background-color: #fff;
                -webkit-box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.07);
                box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.07);
            }

            .sectionsPopup .sections_wrap_itemThumb {
                width: 100%;
                height: 94px;
                position: relative;
            }

            .sectionsPopup .sections_wrap_itemThumb:hover:before,
            .sectionsPopup .sections_wrap_itemThumb:hover:after {
                opacity: 1;
                visibility: visible;
            }

            .sectionsPopup .sections_wrap_itemThumb:after {
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                width: 19px;
                height: 19px;
                opacity: 0;
                visibility: hidden;
                background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMjIyMjIgOS4zODg4OUgxMi41NTU2TTkuMzg4ODkgNi4yMjIyMlYxMi41NTU2TTIxIDIxTDE0LjY2NjcgMTQuNjY2N00yIDkuMzg4ODlDMiAxMC4zNTkyIDIuMTkxMTIgMTEuMzIgMi41NjI0NSAxMi4yMTY1QzIuOTMzNzcgMTMuMTEzIDMuNDc4MDMgMTMuOTI3NSA0LjE2NDE2IDE0LjYxMzZDNC44NTAyOCAxNS4yOTk3IDUuNjY0ODIgMTUuODQ0IDYuNTYxMjggMTYuMjE1M0M3LjQ1Nzc0IDE2LjU4NjcgOC40MTg1NyAxNi43Nzc4IDkuMzg4ODkgMTYuNzc3OEMxMC4zNTkyIDE2Ljc3NzggMTEuMzIgMTYuNTg2NyAxMi4yMTY1IDE2LjIxNTNDMTMuMTEzIDE1Ljg0NCAxMy45Mjc1IDE1LjI5OTcgMTQuNjEzNiAxNC42MTM2QzE1LjI5OTcgMTMuOTI3NSAxNS44NDQgMTMuMTEzIDE2LjIxNTMgMTIuMjE2NUMxNi41ODY3IDExLjMyIDE2Ljc3NzggMTAuMzU5MiAxNi43Nzc4IDkuMzg4ODlDMTYuNzc3OCA4LjQxODU3IDE2LjU4NjcgNy40NTc3NCAxNi4yMTUzIDYuNTYxMjhDMTUuODQ0IDUuNjY0ODIgMTUuMjk5NyA0Ljg1MDI4IDE0LjYxMzYgNC4xNjQxNkMxMy45Mjc1IDMuNDc4MDMgMTMuMTEzIDIuOTMzNzcgMTIuMjE2NSAyLjU2MjQ1QzExLjMyIDIuMTkxMTIgMTAuMzU5MiAyIDkuMzg4ODkgMkM4LjQxODU3IDIgNy40NTc3NCAyLjE5MTEyIDYuNTYxMjggMi41NjI0NUM1LjY2NDgyIDIuOTMzNzcgNC44NTAyOCAzLjQ3ODAzIDQuMTY0MTYgNC4xNjQxNkMzLjQ3ODAzIDQuODUwMjggMi45MzM3NyA1LjY2NDgyIDIuNTYyNDUgNi41NjEyOEMyLjE5MTEyIDcuNDU3NzQgMiA4LjQxODU3IDIgOS4zODg4OVoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMi4xMTExMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                -webkit-transition: opacity .5s;
                -o-transition: opacity .5s;
                transition: opacity .5s;
                cursor: pointer;
                content: "";
                pointer-events: none;
            }

            .sectionsPopup .sections_wrap_itemThumb:before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                visibility: hidden;
                background-color: rgba(0, 0, 0, 0.5);
                -webkit-transition: opacity .5s;
                -o-transition: opacity .5s;
                transition: opacity .5s;
                cursor: pointer;
                content: "";
                pointer-events: none;
            }

            .sectionsPopup .sections_wrap_itemThumb img {
                width: 100%;
                height: 100%;
                -o-object-fit: contain;
                object-fit: contain;
                cursor: pointer;
                z-index: 3;
            }

            .sectionsPopup .sections_wrap_itemTitle {
                color: #000;
                font-weight: 500;
                text-decoration: none;
                font-size: 13px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                width: 100%;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                -moz-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                margin-top: 8px;
                margin-left: 5px;
            }

            .sectionsPopup .sections_wrap_itemTitle a {
                text-decoration: none;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            .sectionsPopup .sections_wrap_itemTitle a img {
                margin-right: 6px;
            }

            .lightbox {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                transition: .3s;
                opacity: 0;
            }

            .lightbox img {
                max-width: 80%;
                max-height: 80%;
                object-fit: contain;
            }

            .close-button {
                position: absolute;
                top: 10px;
                right: 10px;
                background-color: transparent;
                border: none;
                color: white;
                font-size: 30px;
                cursor: pointer;
            }
        </style>
        <script>
            jQuery(document).ready(function ($) {

                $('[data-name="sections"] a[data-name="add-layout"].button-primary:contains("Add Section")').addClass('main-add-section-button');

                let isPopupOpen = false;
                let $addSectionButton = $('.main-add-section-button');


                setInterval(function () {
                    if (!$('.acf-tooltip.acf-fc-popup').length && isPopupOpen) {
                        $addSectionButton.click();
                        setTimeout(function () {
                            $('.acf-tooltip').addClass('is-main-sections-dropdown');
                        }, 500);
                    }
                }, 1000);


                if ($addSectionButton.length > 1) {
                    $('body').addClass('sections');
                }

                $addSectionButton.on('click', function (e) {
                    e.preventDefault();
                    if (isPopupOpen) {
                        return;
                    }

                    $('.sectionsPopup').addClass('active');
                    setTimeout(function () {
                        $('.acf-tooltip').addClass('is-main-sections-dropdown');
                    }, 500);
                    isPopupOpen = true;
                });

                $('a.sections_wrap_itemAdd').on('click', function (e) {
                    e.preventDefault();
                    addSection($(this).attr('data-add-section'));
                });

                $('[data-sections-close]').on('click', function (e) {
                    closePopup();
                });

                $("#sectionspopupSearch").on("keyup", function () {
                    var value = $(this).val().toLowerCase();
                    $(".sections_wrap .sections_wrap_item").filter(function () {
                        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                    });
                });

                function addSection(section_name) {
                    $('.acf-tooltip.acf-fc-popup.bottom a[data-layout="' + section_name + '"]').click();
                    $('.acf-tooltip.acf-fc-popup.top a[data-layout="' + section_name + '"]').click();
                    closePopup();
                }

                function closePopup() {
                    $('.sectionsPopup').removeClass('active');
                    isPopupOpen = false;
                }

            });

            function openLightbox(imgSrc) {
                // create lightbox container
                const lightbox = document.createElement('div');
                lightbox.className = 'lightbox';
                // create close button
                const closeButton = document.createElement('button');
                closeButton.className = 'close-button';
                closeButton.innerHTML = '&times;';
                // add close button to lightbox
                lightbox.appendChild(closeButton);
                // create image element
                const img = document.createElement('img');
                img.src = imgSrc;
                // add image element to lightbox
                lightbox.appendChild(img);
                // add lightbox to body
                document.body.appendChild(lightbox);
                // add fade-in effect
                setTimeout(() => {
                    lightbox.style.opacity = 1;
                }, 10);
                // add event listener to close lightbox when clicked
                lightbox.addEventListener('click', (event) => {
                    if (event.target === lightbox || event.target === closeButton) {
                        // add fade-out effect
                        lightbox.style.opacity = 0;
                        setTimeout(() => {
                            document.body.removeChild(lightbox);
                        }, 500);
                    }
                });
            }
        </script>
        <div class="sectionsPopup">

            <div class="sectionsPopup_inner">

                <div class="title">

                    <span class="bigTitle">Add Section</span>
                    <input id="sectionspopupSearch" type="text" placeholder="Search..">
                    <a href="#" data-sections-close>
                        <img
                            src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNTc1IDcuOTc1TDEuNjc1IDEyLjg3NUMxLjQ5MTY3IDEzLjA1ODMgMS4yNTgzMyAxMy4xNSAwLjk3NSAxMy4xNUMwLjY5MTY2NyAxMy4xNSAwLjQ1ODMzMyAxMy4wNTgzIDAuMjc1IDEyLjg3NUMwLjA5MTY2NjMgMTIuNjkxNyAwIDEyLjQ1ODMgMCAxMi4xNzVDMCAxMS44OTE3IDAuMDkxNjY2MyAxMS42NTgzIDAuMjc1IDExLjQ3NUw1LjE3NSA2LjU3NUwwLjI3NSAxLjY3NUMwLjA5MTY2NjMgMS40OTE2NyAwIDEuMjU4MzMgMCAwLjk3NUMwIDAuNjkxNjY3IDAuMDkxNjY2MyAwLjQ1ODMzMyAwLjI3NSAwLjI3NUMwLjQ1ODMzMyAwLjA5MTY2NjMgMC42OTE2NjcgMCAwLjk3NSAwQzEuMjU4MzMgMCAxLjQ5MTY3IDAuMDkxNjY2MyAxLjY3NSAwLjI3NUw2LjU3NSA1LjE3NUwxMS40NzUgMC4yNzVDMTEuNjU4MyAwLjA5MTY2NjMgMTEuODkxNyAwIDEyLjE3NSAwQzEyLjQ1ODMgMCAxMi42OTE3IDAuMDkxNjY2MyAxMi44NzUgMC4yNzVDMTMuMDU4MyAwLjQ1ODMzMyAxMy4xNSAwLjY5MTY2NyAxMy4xNSAwLjk3NUMxMy4xNSAxLjI1ODMzIDEzLjA1ODMgMS40OTE2NyAxMi44NzUgMS42NzVMNy45NzUgNi41NzVMMTIuODc1IDExLjQ3NUMxMy4wNTgzIDExLjY1ODMgMTMuMTUgMTEuODkxNyAxMy4xNSAxMi4xNzVDMTMuMTUgMTIuNDU4MyAxMy4wNTgzIDEyLjY5MTcgMTIuODc1IDEyLjg3NUMxMi42OTE3IDEzLjA1ODMgMTIuNDU4MyAxMy4xNSAxMi4xNzUgMTMuMTVDMTEuODkxNyAxMy4xNSAxMS42NTgzIDEzLjA1ODMgMTEuNDc1IDEyLjg3NUw2LjU3NSA3Ljk3NVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=">
                    </a>

                </div>

                <div class="sections_wrap">

                    <div class="sections_wrap_container">

                        <div class="sections_wrap_container_grid">

                            <?php
                            $sections_usage = array();

                            // Add the sections from the files names (acf)
                            $files = glob(THEME_PATH . '/inc/sections/sections/*.php');
                            foreach ($files as $file) {

                                $section_name = str_replace(".php", "", str_replace("section-", "", basename($file)));

                                $section_name_convert = str_replace("_", " ", $section_name);
                                $section_name_convert = ucwords($section_name_convert);

                                $section_thumb = THEME_URI . '/inc/sections/sections-images/section-' . $section_name . '.png';

                                ?>
                                <div class="sections_wrap_item">

                                <span class="sections_wrap_itemThumb">
                                    <img src="<?= $section_thumb; ?>" onclick="openLightbox(this.src)"/>

                                </span>

                                    <span class="sections_wrap_itemTitle">
                                    <?= $section_name_convert; ?>
                                    <a href="#" class="sections_wrap_itemAdd" data-add-section="<?= $section_name; ?>">
                                        <img
                                            src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNCA5SDYuNlY2LjZIOVY1LjRINi42VjNINS40VjUuNEgzVjYuNkg1LjRWOVpNNiAxMkM1LjE3IDEyIDQuMzkgMTEuODQyNCAzLjY2IDExLjUyNzJDMi45MyAxMS4yMTIgMi4yOTUgMTAuNzg0NiAxLjc1NSAxMC4yNDVDMS4yMTUgOS43MDUgMC43ODc2IDkuMDcgMC40NzI4IDguMzRDMC4xNTggNy42MSAwLjAwMDQgNi44MyAwIDZDMCA1LjE3IDAuMTU3NiA0LjM5IDAuNDcyOCAzLjY2QzAuNzg4IDIuOTMgMS4yMTU0IDIuMjk1IDEuNzU1IDEuNzU1QzIuMjk1IDEuMjE1IDIuOTMgMC43ODc2IDMuNjYgMC40NzI4QzQuMzkgMC4xNTggNS4xNyAwLjAwMDQgNiAwQzYuODMgMCA3LjYxIDAuMTU3NiA4LjM0IDAuNDcyOEM5LjA3IDAuNzg4IDkuNzA1IDEuMjE1NCAxMC4yNDUgMS43NTVDMTAuNzg1IDIuMjk1IDExLjIxMjYgMi45MyAxMS41Mjc4IDMuNjZDMTEuODQzIDQuMzkgMTIuMDAwNCA1LjE3IDEyIDZDMTIgNi44MyAxMS44NDI0IDcuNjEgMTEuNTI3MiA4LjM0QzExLjIxMiA5LjA3IDEwLjc4NDYgOS43MDUgMTAuMjQ1IDEwLjI0NUM5LjcwNSAxMC43ODUgOS4wNyAxMS4yMTI2IDguMzQgMTEuNTI3OEM3LjYxIDExLjg0MyA2LjgzIDEyLjAwMDQgNiAxMlpNNiAxMC44QzcuMzQgMTAuOCA4LjQ3NSAxMC4zMzUgOS40MDUgOS40MDVDMTAuMzM1IDguNDc1IDEwLjggNy4zNCAxMC44IDZDMTAuOCA0LjY2IDEwLjMzNSAzLjUyNSA5LjQwNSAyLjU5NUM4LjQ3NSAxLjY2NSA3LjM0IDEuMiA2IDEuMkM0LjY2IDEuMiAzLjUyNSAxLjY2NSAyLjU5NSAyLjU5NUMxLjY2NSAzLjUyNSAxLjIgNC42NiAxLjIgNkMxLjIgNy4zNCAxLjY2NSA4LjQ3NSAyLjU5NSA5LjQwNUMzLjUyNSAxMC4zMzUgNC42NiAxMC44IDYgMTAuOFoiIGZpbGw9IiMyQjRCODAiLz4KPC9zdmc+Cg==">
                                        Add
                                </a>
                                </span>

                                </div>
                                <?php

                            }
                            ?>

                        </div>

                    </div>

                </div>

            </div>

        </div>
        <?php
    }