Content Contact Form

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

.block-contact-form {
	position: relative;
	overflow: hidden;

	&:not([class*=pad-]) {
		@include padding( rem-calc(64 0) );
	}

	&__heading-row {
		@include margin-bottom( rem-calc(96) );
	}

	&__content-row {
		flex-direction: column-reverse;

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

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

	.heading {
		margin-bottom: 0;

		&.has-arrow {
			position: relative;

			&:before {
				width: 8vw;
				max-width: 300px;
				height: 1ch;
				content: '';
				display: inline-block;
				margin-right: rem-calc(16);
				background-image: url('/wp-content/themes/british-esports/assets/icons/arrow-right.svg');
				background-repeat: no-repeat;
				background-position: calc(80%) center;

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

				@include bp($lg) {
					width: 10vw;
					max-width: 160px;
					height: 1ch;
					content: '';
				}
			}
		}
	}
	.content-container {
		a {
			text-decoration: none;
			background-image: linear-gradient($secondary, $secondary);
			background-position: left bottom;
			background-repeat: no-repeat;
			background-size: 100% 2px;
			transition: 0.3s var( --ease );
			transition-property: background-size, color;

			&:hover {
				background-size: 0 2px;
				background-color: transparent;
			}
		}
	}

	&__slide-nav-container {
		@include margin-top( rem-calc(48) );

		> p {
			font-weight: 700;
			margin-bottom: rem-calc(12);
		}
	}

	&__image {
		display: flex;
		flex-direction: column;
		@include margin-bottom( rem-calc(58) );

		img {
			height: 100%;
			object-fit: cover;
		}
	}

	.tags {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: rem-calc(12);

		&:has(button) {
			@include margin-bottom( rem-calc(70) );
		}

		@include bp($md) {
			gap: rem-calc(20);
		}

		.tag {
			@include fluid-type( 14, 18 );
			background-color: transparent;
			transition: 0.3s var(--ease);
			transition-property: background-color, color;
			padding: rem-calc(16);

			&:hover,
			&.active {
				background-color: $primary;
				color: $white;
			}
		}
	}

	.swiper {
		opacity: 0;
		margin-bottom: rem-calc(48);

		@include bp($md) {
			margin-bottom: 0;
		}

		&.swiper-initialized {
			display: flex;
			opacity: 1;
		}

		&:not(.swiper-initialized) {
			.swiper-wrapper {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;

				.swiper-slide {
					width: 100%;
				}
			}
		}
	}

	.swiper-slide {
		.form-container {
			display: flex;
			flex-direction: column;

			.gform_wrapper.gravity-theme form .gfield,
			.gform_wrapper.gravity-theme form .gform_footer {
				padding: 0;
			}
		}
	}
}

class ContactForm {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		this.swiper = null;

		ScrollTrigger.create({
			trigger: this.block,
			start: 'top bottom',
			end: 'bottom top',
			onEnter: () => this.initialiseSwiper(),
		});

		this.activeIndex = 0;
		this.formBtns    = this.block.querySelectorAll( '.tag' );
		this.formBtns.forEach( btn => {
			btn.addEventListener( 'click', e => {
				this.activeIndex = e.target.getAttribute( 'data-index' );

				this.formBtns.forEach( btn => {
					btn.classList.remove('active');
				});
				btn.classList.add('active');

				this.gotoForm();
			});
		});
	}

	/**
	 * Go to form slide
	 * Hide image
	 */
	gotoForm() {
		if ( ! this.swiper ) {
			return;
		}

		this.swiper.slideTo( this.activeIndex );
	}

	/**
	 * Init swiper
	 */
	initialiseSwiper() {
		if ( this.swiper ) {
			return;
		}

		this.swiper = new Swiper( this.block.querySelector( '.swiper' ), {
			slidesPerView: 1,
			speed: 600,
			allowTouchMove: false,
			effect: 'fade',
			fadeEffect: {
				crossFade: true
			},
		});
	}
}

document.querySelectorAll('.block-contact-form').forEach((block) => {
	new ContactForm( block );
});