Post Carousel

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

.block-post-carousel {
 	padding: rem-calc(24) 0 rem-calc(24) 0;
	margin: 0 var(--grid);

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

	&--small {
		.block-post-carousel__heading {
			@include responsive-font($heading-8, $heading-6);
			text-transform: none;
		}

		.swiper {
			padding-left: 1rem;

			@include bp($md) {
				padding-left: rem-calc(82);
			}

			&:not(.swiper-initialized) {
				.swiper-slide {
					width: 400px;
					margin-right: $grid-gutter-width;
				}
			}
		}
	}

	&--less-than {
		.block-post-carousel__wrapper {
			padding: rem-calc(24) 0 rem-calc(24) 0;

			@include bp(769px) {
				padding: 0 $container-spacing-desktop;
			}
		}

		.block-post-carousel__heading-wrapper {
			padding: 0;

			@include bp(769px) {
				padding: 0 0 0 $container-spacing-desktop;
			}
		}

		.block-post-carousel__view-all {
			padding: 0;

			@include bp(769px) {
				padding: 0 $container-spacing-desktop 0 0;
			}
		}

		.container {
			@include bp(769px) {
				padding: 0;
			}
		}

		.swiper {
			@include bp(769px) {
				padding-bottom: $grid-gutter-width;
			}

			.slider-navigation {
				display: none;
			}
		}
	}

	.swiper {
		opacity: 0;
		transition: opacity .3s ease-in;
		overflow: visible;

		&.swiper-initialized {
			opacity: 1;
		}

		&:not(.swiper-initialized) {
			opacity: 1;

			.swiper-slide {
				width: 420px;
				margin-right: $grid-gutter-width;
			}
		}
	}

	.post-card {
		position: relative;
		transition: transform 0.3s ease-in-out;

		img {
			transform: none;
		}

		&:hover {
			transform: translateY(-10px);
		}
	}

	&.has-background:not(.has-light-blue-background-color):not(.has-white-background-color) {
		.block-post-carousel__heading,
		.block-post-carousel__view-all a {
				color: $white;
		}

		.post-card__meta li {
			color: $white;
		}

		.slider-navigation {
			border-top: 1px solid rgba(255, 255, 255, 0.3);
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);

			.slider-button {
				&:hover {
					background-color: $secondary-light-green;

					svg, path {
						stroke: $primary;
					}
				}
			}
		}

		.slider-navigation {
			color: $white;

			.slider-pagination {
				font-variant-numeric: tabular-nums;
			}

			.slider-pagination__line {
				background-color: $white;
			}
		}

		.swiper-slide {
			.post-card {
				padding: 8px;
				background-color: rgba(2, 33, 46, 0.4);
				border: 1px solid rgba(255, 255, 255, 0.1);
				color: $white;

				&__category {
					color: $white;
				}

				&.post-card--intelligence {
					picture {
						height: auto;
						width: calc(100% - 16px);
						left: 8px;
						top: 8px;
						bottom: 8px;
					}
				}

				&:hover {
					.post-card__title {
						color: $white;
					}
				}
			}
		}
	}

	&.has-background.has-primary-background-color {
		.swiper-slide .post-card {
			border-color: rgba(255, 255, 255, 0.3);
		}

		/* Event post cards with primary background color */
		.post-card--event {
			.post-card__title {
				--text-color: var(--white);
			}

			.post-card__meta-row {
				background: linear-gradient(104.69deg, #552E91 36.21%, #2CAAE1 102.72%);
				color: $white;

				.post-card__author,
				.post-card__date,
				.post-card__category,
				.post-card__content-meta-row ul li{
					color: $white;
				}
			}

			&:hover {
				.post-card__title {
					color: $white;
				}
			}
		}
	}

	&__heading-wrapper {
		margin-bottom: 1rem;
	}

	&__heading {
			color: $primary;
			font-family: Montserrat;
			font-size: $heading-8;
			text-transform: uppercase;
			display: inline;
	}

	&__icon {
		display: inline;
		vertical-align: middle;
		margin-left: 1rem;
	}

	&__view-all {
		padding-bottom: 2rem;

		@include bp($md) {
			padding-bottom: 0;
			align-items: center;
			display: flex;
			justify-content: flex-end;
			height: 100%;
			vertical-align: middle;
		}

		a {
			text-decoration: none;
			font-size: $body-large;
			padding-bottom: 5px;
			display: inline-block;

			&:after {
				content: '';
				width: 100%;
				height: 1px;
				background-color: $primary-blue;
				display: block;
				margin-top: 5px;
				transition: width 0.3s ease-in-out;
				margin: 0 auto;
			}

			&:hover {
				text-shadow: 0 0 1px $primary;
				&:after {
					width: 60%;
				}
			}
		}
	}

    .swiper-slide {
		height: auto;

        &__inner {
            min-height: 300px;
            position: relative;

        }

		.post-card--large {
			border: 9px solid rgba(2, 33, 46, 0.1);
			min-height: 425px;
			height: calc(100% - 18px);
			width: calc(100% - 18px);


			@include bp($lg) {
				min-height: 567px;
			}

			/** Styling for post cards if not archive page */
			&.post-card--post {
				.post-card__title {
					--text-color: var(--white);
				}

				.post-card__meta-row {
					background: linear-gradient(104.69deg, #552E91 36.21%, #2CAAE1 102.72%);
					color: $white;

					.post-card__author,
					.post-card__date,
					.post-card__category {
						color: $white;
					}
				}

				&:hover {
					.post-card__title {
						color: $white;
					}
				}
			}

			/** Styling for intelligence post cards */
			&.post-card--intelligence {
				.post-card__title {
					--text-color: var(--white);
				}

				.post-card__image-row {
					aspect-ratio: 149 / 95;
					picture {
						aspect-ratio: 447 / 569;
						position: absolute;
						top: 0;
						bottom: 0;
						width: 100%;
						height: 100%;


						@include bp($xxl) {
							aspect-ratio: 430 / 600;
						}

						&:after {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background: linear-gradient(180deg, rgba(2, 33, 46, 0) 0%, #02212E 100%);;
						}
					}
				}

				.post-card__meta-row {
					z-index: 1;
					position: relative;
				}

				.post-card__author,
				.post-card__date,
				.post-card__category {
					color: $white;
				}

				&:hover {
					.post-card__title {
						color: $white;
					}
				}
			}

			.post-card__image {
				width: auto;
				aspect-ratio: 149 / 95;
				border: none;
				margin-bottom: 0;
			}

			.post-card__meta-row {
				padding: rem-calc(24);
				display: flex;
				width: auto;
				height: 100%;
			}

			.post-card__category {
				margin-bottom: 1rem;
				font-weight: 600;
			}

			.post-card__title {
				@include responsive-font($heading-8, $heading-7);
			}

			.post-card__content {
				margin-bottom: rem-calc(24);
			}

			.post-card__author {
				font-weight: 500;
				padding-right: rem-calc(24);
			}

			.post-card__author, .post-card__date {
				font-size: 14px;
			}

			.post-card__date {
				padding-left: 0;
			}

			.post-card__content-meta-row {
				flex-direction: row;
			}
		}
    }

	&.block-post-carousel--border-dark {
		.swiper-slide {
			.post-card--large {
				border: 9px solid rgba(2, 33, 46, 0.4);

				&--event {
					border-width: 8px;
					border-color: $border-grey;
				}
			}
		}
	}

	@include slider-navigation;

    .button-wrapper {
        @include bp($md) {
            display: flex;
            justify-content: flex-end;
        }
    }
}


.block-section-wrap {
	.block-post-carousel {
		.swiper {
			padding-left: 0;
		}
	}
}

class Carousel {
    block;

	constructor(block) {
		this.block = block;
		this.slideCount = this.block.dataset.slideCount;
		this.init();
	}

	init() {

		this.swiperElem = this.block.querySelector('.swiper');
		this.paginationElem = this.block.querySelector('.slider-pagination');
		this.prevBtnElem = this.block.querySelector('.slider-button--prev');
		this.nextBtnElem = this.block.querySelector('.slider-button--next');
		this.cardStyle = this.block.dataset.cardStyle;
		this.loop =  this.slideCount > 2 || window.innerWidth <= 768;
		this.centeredSlides = window.innerWidth <= 768;

		if( this.cardStyle === 'small' ) {
			this.centeredSlides = false;
			this.loop = false;
		}

		//Apply offset padding when centeredSlides is false
		// if (!this.centeredSlides) {
		// 	this.swiperElem.style.paddingLeft = '5%'; // Initial offset
		// } else {
		// 	this.swiperElem.style.paddingLeft = '0';
		// }

		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: this.paginationElem,
				type: "custom",
				renderCustom: (swiper, current, total) => {
					const displayCurrent = this.centeredSlides ? current - 1 : current;
					return displayCurrent + '  ' + total;
				}
			},
			navigation: {
				nextEl: this.nextBtnElem,
				prevEl: this.prevBtnElem
			},
            slidesPerView: 1.2,
            spaceBetween: 9,
			centeredSlides: this.centeredSlides,
			loop: this.loop,
			initialSlide: 0,
            breakpoints: {
                768: {
                    slidesPerView: 2,
                },
				1300: {
					slidesPerView: 3,
					spaceBetween: 24

				},
				1601: {
					slidesPerView: 4,
					spaceBetween: 24
				}
            },

		});

		// // Handle resize events to update offset padding
		// window.addEventListener('resize', () => {
		// 	const newCenteredSlides = window.innerWidth <= 768;

		// 	if (this.cardStyle !== 'small' && this.centeredSlides !== newCenteredSlides) {
		// 		this.centeredSlides = newCenteredSlides;

		// 		if (!this.centeredSlides) {
		// 			this.swiperElem.style.paddingLeft = '5%';
		// 		} else {
		// 			this.swiperElem.style.paddingLeft = '0';
		// 		}

		// 		// Reinitialize swiper with updated settings
		// 		this.swiper.destroy(true, true);
		// 		this.init();
		// 	}
		// });
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-post-carousel').forEach((block) => {
		new Carousel(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/post-carousel",
    "title": "Post Carousel",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-post-carousel.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 - Post Carousel",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/post-carousel/block-post-carousel.css", "swiper-css"],
    "viewScript": ["swiper-js", "post-carousel"]
}