{% extends "layouts/base" %}

{% set ariaControls = 'buildsListing' %}

{# Create arrays of all groups in each build category to be used for label and input field values #}
{% set categories = ["All"] %}
{% for item in craft.categories.group("buildCategory").all %}
	{% set categories = categories|merge([item.title]) %}
{% endfor %}

{% set bedrooms = ["All"] %}
{% for item in craft.categories.group("bedrooms").all %}
	{% set bedrooms = bedrooms|merge([item.title]) %}
{% endfor %}

{% set bathrooms = ["All"] %}
{% for item in craft.categories.group("bathrooms").all %}
	{% set bathrooms = bathrooms|merge([item.title]) %}
{% endfor %}

{# Get URL params of selected categories #}
{% set activeCategory = craft.app.request.getParam("category")|default(categories[0])|kebab %}
{% set activeBedroom = craft.app.request.getParam("bedrooms")|default(bedrooms[0])|kebab %}
{% set activeBathroom = craft.app.request.getParam("bathrooms")|default(bathrooms[0])|kebab %}
{# Parameter to use for limiting how many build entries are displayed #}
{% set quantity = craft.app.request.getParam("quantity")|default(6) %}


{% set queryElements = {
		buildCategory: activeCategory == "all" ? null : { tagetElement: craft.categories.group("buildCategory").slug(activeCategory) },
		bedrooms: activeBedroom == "all" ? null : { targetElement: craft.categories.group("bedrooms").slug(activeBedroom) },
		bathrooms: activeBathroom == "all" ? null : { targetElement: craft.categories.group("bathrooms").slug(activeBathroom) }
	}
%}

{# Query Build Entries #}
{% set builds = craft.entries()
	.section('builds')
	.relatedTo(queryElements.buildCategory)
	.andRelatedTo(queryElements.bedrooms)
	.andRelatedTo(queryElements.bathrooms)
	.orderBy('postDate DESC')
	.limit(quantity == 0 ? null : quantity)
	.all()
%}

{% block content %}
	<div class="bg-cultured">
		<section class="w-4/5 mx-auto mb-48">
			<h1 class="max-w-2xl heading-0 py-36">{{ entry.pageTitle }}</h1>

			<div id="build-listing" class="mb-24" data-filters>
				{% include 'partials/filters' with {
					ariaControls: ariaControls,
					groups: [
						{
							type: "select",
							name: "category",
							label: "Category Filter",
							value: activeCategory,
							options: categories|map(c => {
								label: c == "All" ? "All Categories" : c,
								value: c|kebab,
							}),
							itemClasses: "flex-1 w-full shrink-0",

						},
						{
							type: "select",
							name: "bedrooms",
							label: "Bedrooms",
							value: activeBedroom,
							options: bedrooms|map(c => {
								label: c == "All" ? "All Bedrooms" : c,
								value: c|kebab,
							}),
							itemClasses: "flex-1 w-full shrink-0",

						},
						{
							type: "select",
							name: "bathrooms",
							label: "Bathrooms",
							value: activeBathroom,
							options: bathrooms|map(c => {
								label: c == "All" ? "All Bathrooms" : c,
								value: c|kebab,
							}),
							itemClasses: "flex-1 w-full shrink-0",

						},
					]
				} %}
			</div>

			<div class="grid mb-20 gap-x-8 gap-y-10 justify-items-center lg:justify-items-start lg:grid-cols-2 xxl:grid-cols-3" id="{{ ariaControls }}" data-filtered-content>
				{% if builds|length %}
					{% for build in builds %}
						{% set image = build.buildImages.one() %}
						<div class="w-full text-white h-96">
							<a href="{{ url(build.url) }}" class="block h-full bg-center bg-cover" style="background-image: url('{{ image.getUrl() }}')">
								<div class="flex flex-col justify-between w-full h-full transition-all bg-semi-transparent-3 hover:bg-semi-transparent-1 px-7 py-7">
									<p class="font-semibold font-poppins">{{ build.title }}</p>
									<div>
										<p class="mb-4 font-acumin">
											Rooms:&nbsp
											{{ build.buildBedrooms[0].title }}
										</p>
										{% if build.totalArea %}
											<p class="font-acumin">
												Total Size:&nbsp
												{{ build.totalArea }}m<sup>2</sup>
											</p>
										{% endif %}
									</div>
								</div>
							</a>
						</div>
					{% endfor %}
				{% else %}
					<div class="mb-24 text-black border-gray-300">
						<p class="heading-4">0 results found</p>
					</div>
				{% endif %}
			</div>
			<button id="view-more-builds" class="block px-5 py-2 mx-auto tracking-widest text-white bg-spicy-mix hover:bg-spicy-mix-shade">{{ quantity ? "View More" : "View Less" }}</button>
		</section>

		{# Catalogue Download Section #}
		{% set catalogue = entry.catalogueDownload.one() %}

		{% if catalogue %}
			<section class="bg-spicy-mix">
				<div class="flex flex-col items-center justify-center gap-16 py-20 text-white inner-container lg:flex-row lg:gap-12 xl:gap-24">
					{% set cataloguePreviewImage = entry.cataloguePreview.one() %}

					{# Set crop for catalogue preview image #}
					{% set cataloguePreviewCrop = {
						mode: "crop",
						width: 360,
						height: 480,
						quality: 100
            		} %}

					{% if cataloguePreviewImage|length %}
						<img class="flex-shrink-0" src="{{ cataloguePreviewImage.getUrl(cataloguePreviewCrop) }}" alt="{{ cataloguePreviewImage.altText }}">
					{% else %}
						<div class="flex-shrink-0 bg-white w-80 h-60"></div>
					{% endif %}
					<div class="max-w-[38rem] text-center lg:text-left">
						<h1 class="mb-5 text-4xl font-poppins">{{ entry.catalogueSectionHeading }}</h1>
						<p class="copy mb-9">{{ entry.catalogueSectionText }}</p>
						<a href="{{ catalogue.getUrl() }}" download class="inline-block px-6 py-2 mx-auto transition-all bg-cultured cursor-pointer hover:bg-spicy-mix-shade hover:text-cultured text-spicy-mix lg:mx-0">Download</a>
					</div>
				</div>
			</section>
		{% endif %}

		{# Custom Build Banner #}
		<section class="flex justify-center inner-container py-52">
			<div class="flex flex-col items-center max-w-[41rem] text-center">
				<h1 class="mb-8 heading-1">{{ entry.contactBannerHeading }}</h1>
				<p class="text-center copy mb-14">{{ entry.contactBannerText }}</p>
				<a href="{{ url('contact-us') }}" class="px-5 py-2 tracking-widest text-white transition-all bg-spicy-mix hover:bg-spicy-mix-shade">Contact Us</a>
			</div>
		</section>

		{% include "partials/pageSections/_ourProcess" %}

		{# FAQ Section #}
		<section class="pt-40 pb-32 outer-container">
			<div class="inner-container">
				<h1 class="mb-20 heading-0 sm:max-w-md md:max-w-lg">{{ entry.faqHeading }}</h1>
				<div class="last:border-b last:border-timber-wolf" data-accordion="collapse" data-active-classes="bg-cultured border-t-2 border-spicy-mix open">
					{% for question in entry.faq.all() %}
						{# TODO: Extract accordion into reuseable component #}
						{% set plusIcon = craft.assets()
							.volume('icons')
							.title('Plus Solid')
							.one()
						%}

						{% set minusIcon = craft.assets()
							.volume('icons')
							.title('Minus Solid')
							.one()
						%}

						<div>
							<button type="button" class="flex justify-between w-full pt-10 text-left border-t accordion-button border-timber-wolf group" data-accordion-target="#accordion-collapse-body-{{ loop.index }}" aria-expanded="false" aria-controls="accordion-collapse-body-{{ loop.index }}">
								<h2 class="text-xl font-poppins text-spicy-mix mb-11">{{ question.question }}</h2>
								<span class="relative h-7 w-7">
									{{ svg(plusIcon)|attr({ class:"plus-icon absolute fill-spicy-mix-tint group-hover:fill-spicy-mix h-7" }) }}
									{{ svg(minusIcon)|attr({ class:"minus-icon absolute fill-spicy-mix-tint group-hover:fill-spicy-mix h-7" }) }}
								</span>
							</button>
							<div class="hidden mb-14 redactor" id="accordion-collapse-body-{{ loop.index }}">
								{{ question.answer }}
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</section>

		{% include "partials/pageSections/_caseStudies" with { bgColor: "#8c9086" } %}

		{% include "partials/pageSections/_contactUsBanner" with { theme: "phillipine-grey" } %}
	</div>
{% endblock %}