Partners

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-partners {
	.container {
		@include bp($md) {
			border-top: 1px solid $border-grey;
			position: relative;
		}

		&:after {
			width: 50vw;
			height: 1px;
			background-color: $border-grey;
			position: absolute;
			top: 0;
			left: 100%;
			pointer-events: none;
			transform: translateY(-1px);

			@include bp($md) {
				content: "";
			}
		}
	}

	.col-partner {
		border-top: 1px solid $border-grey;

		@include bp($md) {
			border-top: none;
		}

		@include bp($lg) {
			border-right: 1px solid $border-grey;
		}
	}

	.col--odd {
		@include bp($md) {
			border-right: 1px solid $border-grey;
		}
	}

	&__partners {
		display: flex;
		flex-direction: column;
	}

	&__row {
		display: grid;
		grid-template-columns: 1fr;

		@include bp($lg) {
			gap: rem-calc(40);
		}

		&:first-of-type {
			border-top: none;
		}

		@include bp($lg) {
			grid-template-columns: repeat(2, 1fr);
			border-top: 1px solid $border-grey;
		}

		&:first-of-type {
			border-top: none;
		}
	}

	&__partner {
		padding-top: rem-calc(40);
		padding-bottom: rem-calc(40);

		@include bp($md) {
			padding-top: rem-calc(60);
			padding-bottom: rem-calc(76);
		}

		&--dynamic {
			padding-left: rem-calc(16);
			padding-right: rem-calc(16);
			border-bottom: 1px solid $border-grey;

			@include bp($md) {
				padding-left: rem-calc(40);
				padding-right: rem-calc(40);
				border-top: none;
			}

			@include bp($lg) {
				border-right: 1px solid $border-grey;
				border-bottom: none;
			}

			@include bp($xxl) {
				padding-left: rem-calc(120);
				padding-right: rem-calc(120);
			}

			&:nth-child(2n) {
				@include bp($md) {
					border-right: none;
				}
			}
		}

		> img {
			max-width: rem-calc(184);
		}

		> img,
		picture {
			margin-bottom: rem-calc(24);

			@include bp($md) {
				margin-bottom: rem-calc(36);
			}
		}

		.content-container {
			color: var(--text-color);

			:last-child {
				margin-bottom: 0;
			}

			p {
				margin-bottom: rem-calc(24);

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		&-read-more {
			display: block;
			margin-bottom: rem-calc(24);

		}
	}
}

/**
 * Partner Lightbox
 */

.lity-partner-content {
	.lity-content {
		max-width: 700px;
		margin: 0 auto;
		background-color: $white;
		max-height: 100vh;
	}

	.partner-lightbox {
		--top-border-placement: 40px;

		@include bp($sm) {
			--top-border-placement: 70px;
		}

		margin-right: var(--top-border-placement);
		border-right: 1px solid $border-grey;

		&__top {
			display: flex;
			padding: 1rem 2rem;
			position: relative;

			picture {
				height: 30px;

				img {
					height: 100%;
					width: auto;
				}
			}

			&:after {
				content: "";
				display: block;
				width: calc(100% + var(--top-border-placement));
				height: 1px;
				background-color: $border-grey;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		&__title {
			font-size: $heading-8;
		}

		&__content {
			margin-top: rem-calc(24);
			padding: 0 2rem 0 2rem;
			overflow-y: auto;
			overflow-x: hidden;
			max-height: 340px;

			@include bp($md) {
				padding: 0 rem-calc(115) 0 2rem;
			}

			// Custom scrollbar styles
			&::-webkit-scrollbar {
				width: 2px; // Width of the scrollbar
				height: 2px;
			}

			&::-webkit-scrollbar-track {
				background: transparent; // Background of the scrollbar track
			}

			&::-webkit-scrollbar-thumb {
				background: lighten($black, 10%); // Color of the scrollbar thumb
			}

			&::-webkit-scrollbar-thumb:hover {
				background: $black;
			}
		}

		&__bottom {
			padding: rem-calc(24);
			background-color: rgba(0, 174, 239, 0.1);
			display: flex;
			flex-direction: column;
			gap: rem-calc(16);

			a {
				justify-content: center;
			}

			@include bp($sm) {
				flex-direction: row;
			}
		}
	}

	.lity-close {
		right: 0;
		background-image: url(/wp-content/themes/moore-global/assets/icons/cross-black.svg) !important;
		text-indent: -1000px;
		overflow: hidden;
		width: 20px;
		height: 20px;
		background-size: 20px;
		background-repeat: no-repeat;
		background-position: center;
		padding: rem-calc(30) rem-calc(20);
		display: block;

		@include bp($sm) {
			padding: rem-calc(30) rem-calc(35);
		}
	}
}

document.addEventListener('DOMContentLoaded', () => {
    // Register custom handler for partner content modals
    if (typeof lity !== 'undefined') {
        // Keep track of original modal positions to restore them
        const originalModals = {};

        // Store all modal elements for restoration
        document.querySelectorAll('.partner-lightbox').forEach(modal => {
            const modalContainer = modal.closest('[id^="partner-content-"]');
            const id = modalContainer.id;
            originalModals[id] = {
                element: modalContainer,
                parent: modalContainer.parentNode,
                html: modalContainer.outerHTML // Store the complete HTML
            };
        });

        lity.handlers('partner-content', function(target, instance) {
            const modalId = target.replace('#', '');
            let modal = document.getElementById(modalId);

            if (!modal && originalModals[modalId]) {
                // If modal doesn't exist in DOM, recreate it from stored HTML
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = originalModals[modalId].html;
                modal = tempDiv.firstElementChild;
                document.body.appendChild(modal);
            }

            if (modal) {
                modal.classList.remove('lity-hide');
                return modal;
            }
            return false;
        });

        // Function to setup click handlers
        function setupClickHandlers() {
            document.querySelectorAll('.block-partners__partner-read-more a').forEach(trigger => {
                // Remove any existing click handlers
                const newTrigger = trigger.cloneNode(true);
                trigger.parentNode.replaceChild(newTrigger, trigger);

                newTrigger.addEventListener('click', (event) => {
                    event.preventDefault();

                    // Close any existing lity modals before opening new one
                    document.querySelectorAll('.lity, .lity-backdrop').forEach(el => {
                        el.remove();
                    });

                    // Get the modal ID and ensure the modal exists
                    const modalId = newTrigger.getAttribute('href').replace('#', '');
                    let modalEl = document.getElementById(modalId);

                    // If modal doesn't exist, recreate it from stored HTML
                    if (!modalEl && originalModals[modalId]) {
                        const tempDiv = document.createElement('div');
                        tempDiv.innerHTML = originalModals[modalId].html;
                        modalEl = tempDiv.firstElementChild;
                        document.body.appendChild(modalEl);
                    }

                    // Open the modal with our custom handler
                    lity('#' + modalId, {
                        handler: 'partner-content'
                    });
                });
            });
        }

        // Initial setup of click handlers
        setupClickHandlers();

        // Add a global listener for lity:close to properly handle modal cleanup
        document.addEventListener('lity:close', function(e) {
            // After lity closes, ensure modals return to original state
            document.querySelectorAll('.partner-lightbox').forEach(modal => {
                const modalContainer = modal.closest('[id^="partner-content-"]');
                if (!modalContainer) return;

                const id = modalContainer.id;

                // Add the lity-hide class back to hide it
                modalContainer.classList.add('lity-hide');

                // If the modal is in the body, move it back to its original position
                if (modalContainer.parentNode === document.body && originalModals[id]) {
                    originalModals[id].parent.appendChild(modalContainer);
                }
            });

            // Re-setup click handlers after modal close
            setupClickHandlers();
        }, false);
    }
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/partners",
    "title": "Partners",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "edit",
        "renderTemplate": "block-partners.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Partners",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/partners/block-partners.css"],
    "viewScript": ["file:./block-partners.js", "lity-js"],
    "style": ["file:../../assets/css/partners/block-partners.css", "lity-css"]
}