Firm Search

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

.block-firm-search {
	padding: rem-calc(40) 0;
	background: var(--primary-gradient);

	@include bp($sm) {
		padding: rem-calc(60) 0;
		background: url('/wp-content/themes/moore-global/assets/images/firm-search-background.svg'), var(--primary-gradient);
		background-size: cover;
		background-position: right center;
		background-repeat: no-repeat;
	}

	&__content {
		color: $white;

		p {
			color: $white;
		}
	}

	&__content, &__results-wrapper {
		padding: 0;

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

		@include bp($xl) {
			padding: 0;
		}
	}

	&__filter {
		margin-bottom: 1rem;

		select {
			@include reset-select;
			font-size: $body-medium;
			color: $white;
			background: no-repeat right center url('/wp-content/themes/moore-global/assets/icons/select-dropdown-white.svg');
			background-size: 12px 12px;
			padding-right: 24px;
			cursor: pointer;

			&:focus-visible, &:focus {
				outline: none;
			}
		}
	}

	&__input {
		@include search-input;
		background-color: transparent;
		border-color: $white;
		background-image: url(/wp-content/themes/moore-global/assets/icons/search.svg);
		padding: rem-calc(14) rem-calc(14) rem-calc(14) rem-calc(50);

		@include bp($sm) {
			max-width: 340px;
		}
	}

	&__results-wrapper {
		padding-top: rem-calc(40);

		@include bp($xl) {
			padding-top: 0;
		}
	}

	&__results {
		height: 360px;
		overflow-y: scroll;
		overflow-x: hidden;
		padding-right: 5px;

		@include bp($md) {
			height: 560px;
		}

		// 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: rgba(255, 255, 255, 0.5); // Color of the scrollbar thumb
		}

		&::-webkit-scrollbar-thumb:hover {
			background: darken($primary-blue, 10%); // Darker color on hover
		}
	}

	&__result {
		display: flex;
		background-color: rgba(2, 33, 46, 0.2);
		margin-bottom: 1rem;
		min-height: 170px;

		&-inner {
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: $grid-gutter-width;
			gap: 24px;

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

		&-image {
			width: 220px;
			flex: 1 0 auto;

			img {
				display: block;
				width: 100%;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			word-wrap: break-word;

			@include bp($sm) {
				width: 40%;
			}

			h3 {
				font-size: $heading-8;
				font-weight: 500;
				color: $white;
				margin-bottom: 8px;
			}
		}

		&-links {
			display: flex;
			gap: 1rem;

			a {
				font-size: $body-small;
				padding-bottom: 0;
			}
		}

		&-address {
			@include bp($sm) {
				width: 60%;
			}

			p {
				margin: 0;
			}
		}

		&-address, &-content {
			width: 100%;
		}
	}
}

class FirmSearch {
	block;

	constructor(block) {
		this.block = block;
		this.isSearching = false;
		this.init();
	}

	init() {
		this.searchInput = this.block.querySelector('.block-firm-search__input');
		if (this.searchInput) {
			this.searchInput.addEventListener('keyup', this.search.bind(this));
		}

		const selectElement = this.block.querySelector('.block-firm-search__select');

		// Check URL for firm-search and scroll to block
		const urlParams = new URLSearchParams(window.location.search);
		const hasFirmSearch = urlParams.has('firm-search');

		if (hasFirmSearch) {
			this.block.scrollIntoView({ behavior: 'smooth', block: 'center' });
		} else if (selectElement) {
			// Reset select on page load and back button
			const resetSelect = () => {
				selectElement.selectedIndex = 0;
			};

			// Check if we're on a parent location URL (e.g. /locations/anything/)
			const checkAndReset = () => {
				const pathParts = window.location.pathname.split('/').filter(part => part);
				// Check if URL matches pattern /locations/something/
				if (pathParts.length === 2 && pathParts[0] === 'locations') {
					resetSelect();
				}
			};

			window.addEventListener('pageshow', (event) => {
				if (event.persisted) {
					checkAndReset();
				}
			});

			// Also check on initial page load
			window.addEventListener('load', checkAndReset);
		}

		if (selectElement) {
			selectElement.addEventListener('change', (option) => {
				const location = option.target.options[option.target.selectedIndex].dataset.url;
				window.location.href = location;
			});
		}
	}

	search() {
		if (this.isSearching) return; // Prevent multiple searches
		this.isSearching = true; // Set the flag to true

		const searchQuery = this.searchInput.value;
		const selectElement = this.block.querySelector('.block-firm-search__select');
		const location = selectElement ? selectElement.value : '';
		const resultsElement = document.querySelector('.block-firm-search__results');

		if (!resultsElement) {
			this.isSearching = false;
			return;
		}

		fetch(`${window.location.protocol}//${window.location.hostname}/wp-json/wp/v2/firms/search?s=${encodeURIComponent(searchQuery)}&location=${location}`, {
			method: 'GET',
		})
		.then(response => response.json())
		.then(data => {
			if (data.length > 0) {
				resultsElement.innerHTML = data;
			} else {
				resultsElement.innerHTML = '
No results found
';
			}
		})
		.catch(error => {
			console.error('There has been a problem with your fetch operation:', error);
		})
		.finally(() => {
			this.isSearching = false; // Reset the flag after the fetch is complete
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	const blocks = document.querySelectorAll('.block-firm-search');
	if (blocks.length > 0) {
		blocks.forEach((block) => {
			new FirmSearch(block);
		});
	}
});

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