@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-form-hero{
    &__map-container{
        aspect-ratio: 3/2;
        width: 100%;
    }

    .custom-marker{
        height: 64px !important;
        width: 64px !important;
        background-size: contain !important;
        background-repeat: no-repeat;
        background-position: center;
    }

    &__wrap{
        position: relative;
        padding-top:rem-calc(145);
        @include padding-bottom(rem-calc(100));
        overflow: hidden;

        &::after,
        &::before{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

        &::before{
            background-color: rgba(0,0,0,0.9);
        }

        &::after{
            background-image: url('/wp-content/themes/embryo-2025/assets/images/form-hero-gradient.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }

    &__background-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

    &__breadcrumbs {
        width: 100%;
		position: absolute;
		z-index: 100;
        top: rem-calc(40);
        left: 0;

        @include bp($md){
            width: 50%;
            top: 0;
        }
	}

    .rank-math-breadcrumb {
		padding-top: rem-calc(55);
		padding-left: clamp(rem-calc(12), 2vw, rem-calc(30));
		color: $white;

        p,a{
            color: $white;
            margin: 0;
        }

		@include bp($lg) {
			padding-top: rem-calc(30);
		}

		.separator {
			padding-left: clamp(rem-calc(10), 2vw, rem-calc(14));
			padding-right: clamp(rem-calc(10), 2vw, rem-calc(14));
		}

		a {
			text-underline-offset: rem-calc(2);
		}

		p {
			font-size: clamp(rem-calc(14), 2vw, rem-calc(16));
			margin-bottom: 0;
		}
	}

    .container{
        z-index: 100;
    }


    .heading,
    .subtitle,
    .form-wrapper{
        color: $white;
        p{
            color: $white;
        }
        h1,h2,h3,h4,h5,h6{
            color: $white;
        }
        ul,ol{
            color: $white;
        }
    }

    .heading{
        margin-bottom: rem-calc(30);

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

    .form-wrapper{
        p{
            color: $white;
        }
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea,
    select{
        border-color: $white;
    }

    input[type="checkbox"]{
        border-color: $white;
    }

    input[type="checkbox"]{
        &:checked {
            background-color: $secondary;
        }
    }

    .contact-block-desktop{
        display: none;
        border-radius: 20px;
        border: 1px solid $white;
        @include padding(rem-calc(10));
        max-width: rem-calc(415);
        color: $white;
        font-size: clamp(rem-calc(16), 2vw, rem-calc(18));
        line-height: 1.5;

        @include bp($lg){
            display: block;
            margin-left: auto;
            margin-right: rem-calc(45);
        }

        .image-wrapper{
            position: relative;
            aspect-ratio: 395/318;
            border-radius: 13px;
            overflow: hidden;
            @include margin-bottom(rem-calc(30));
        }

        &-wrap{
            padding: rem-calc(0 15 0 15);
        }
        .contact-meta{
            display: flex;
            gap: 12px;
            margin-bottom: 1rem;
            color: $white;
            text-decoration: none;

            svg{
                flex-shrink: 0;
            }
        }
        a.contact-meta:hover{
            text-decoration: underline;
        }
    }

    .form-wrapper{
        @include bp($lg){
            max-width: rem-calc(640);
			margin-top: rem-calc(20);
            // margin-left: rem-calc(45);
        }
    }

    .forminator-design{
        &--basic{
            .forminator-label{
                font-size: clamp(rem-calc(16), 2vw , rem-calc(18)) !important;
            }
        }
    }

    .mobile-only-wrap{
        padding: rem-calc(0 0 30 0);
        @include bp($lg){
            display: none;
        }
        .contact-block{
            border-radius: 20px;
            border: 1px solid $black;
            @include padding(rem-calc(10));
            width: 100%;
            color: $black;
            font-size: rem-calc(16);
            line-height: 1.5;
            margin-top: rem-calc(10);

            .image-wrapper{
                position: relative;
                aspect-ratio: 395/318;
                border-radius: 13px;
                overflow: hidden;
                @include margin-bottom(rem-calc(30));
            }

            &-wrap{
                padding: rem-calc(0 15 0 15);
            }
            .contact-meta{
                display: flex;
                gap: 12px;
                margin-bottom: 1rem;
                color: $black;
                text-decoration: none;

                svg{
                    flex-shrink: 0;
                }
            }
            a.contact-meta:hover{
                text-decoration: underline;
            }
        }
    }
    .forminator-design--basic{
        .forminator-response-message{
            &.forminator-loading{
                color: #000000 !important;
            }
            &.forminator-success{
                background-color: #067963 !important;
            }
            &.forminator-error{
                background-color: #E51919 !important;
            }
        }
    }

    .forminator-ui.forminator-custom-form[data-design=basic] .forminator-textarea {
        min-height: 30px !important;
        resize: vertical;
        width: 100%;
    }
}

class ThemeFormHeroBlock {
    /**
     * Create and initialise objects of this class
     * @param {object} block
     */

    constructor(block) {
        this.block = block;
        this.maps = [];
        this.init();
    }

    init() {
        const mapContainers = this.block.querySelectorAll(
            '.block-form-hero-block__map-container'
        );

        mapContainers.forEach(container => {
            this.lazyLoadMap(container);
        });
    }

    /**
     * Example function to run class logic
     * Can access `this.block`
     */
    lazyLoadMap(container) {
        const io = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.initMap(container);
                    io.unobserve(container); // load once per container
                }
            });
        }, { threshold: 0.7 });

        io.observe(container);
    }

    initMap(mapContainer) {
        if (typeof mapboxgl === 'undefined') {
            console.error('Mapbox GL not loaded');
            return;
        }

        // Create a new token - https://account.mapbox.com/
        mapboxgl.accessToken = 'pk.eyJ1Ijoic3RyYXRlZ2lxIiwiYSI6ImNtajJxNjUwbzBzMXgzbHNma3hjOXRkZWgifQ.TVPB8Q2vZDjBKp7AcGAK-w';

        const lng  = parseFloat(mapContainer.dataset.lng);
        const lat  = parseFloat(mapContainer.dataset.lat);
        const zoom = parseFloat(mapContainer.dataset.zoom);
        const pinIcon = mapContainer.dataset.pinicon;
        const company = mapContainer.dataset.company;
        const companyAddress =
            mapContainer.dataset.companyaddress || mapContainer.dataset.address;

        const map = new mapboxgl.Map({
            container: mapContainer,
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [lng, lat],
            zoom: zoom,
            cooperativeGestures: true,
        });

        const popupHTML = `
            

                ${company}

                ${companyAddress}
            
        `;

        let marker;

        if (pinIcon) {
            const el = document.createElement('div');
            el.className = 'custom-marker';
            el.style.backgroundImage = `url(${pinIcon})`;
            el.style.width = '40px';
            el.style.height = '40px';
            el.style.backgroundSize = 'cover';
            el.style.cursor = 'pointer';

            marker = new mapboxgl.Marker(el);
        } else {
            marker = new mapboxgl.Marker({ color: '#FF2C31' });
        }

        marker
            .setLngLat([lng, lat])
            .setPopup(new mapboxgl.Popup().setHTML(popupHTML)) // shows on click
            .addTo(map);

        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl());

        this.maps.push(map);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    document
        .querySelectorAll('.block-form-hero')
        .forEach(block => new ThemeFormHeroBlock(block));
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/form-hero",
    "title": "Form Hero",
    "description": "Form Hero block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-form-hero.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
				"top",
				"bottom"
			],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/form-hero/block-form-hero.css"
}