<?php
/*
Template Name: Autocart Results
*/
get_header();
// Get filter values from URL parameters

$minPrice = isset($_GET['minPrice']) ? sanitize_text_field($_GET['minPrice']): null;
$maxPrice = isset($_GET['maxPrice']) ? sanitize_text_field($_GET['maxPrice']):null;

$minKilometres = isset($_GET['minKilometres']) ? sanitize_text_field($_GET['minKilometres']): null;
$maxKilometres = isset($_GET['maxKilometres']) ? sanitize_text_field($_GET['maxKilometres']):null;

$make = isset($_GET['make']) ? sanitize_text_field($_GET['make']):null;
$minYear = isset($_GET['minYear']) ?  (int)sanitize_text_field($_GET['minYear']):null;
$maxYear = isset($_GET['maxYear']) ?  (int)sanitize_text_field($_GET['maxYear']):null;
// echo '<pre>';var_dump($minYear);echo '<br>'; var_dump($maxYear);exit;


$startYear = 2012;
$endYear =  (int)date('Y');




// Exit the script
// exit;
// Generate nonce
$ajax_nonce = wp_create_nonce("update-filters-ajax-nonce");

$response = get_transient("autocart_response");

    ?>
<!-- Main Content -->
<div class="flex-grow flex max-w-7xl mx-auto">
	<!-- Left Drawer for Filters -->
	<div id="overlay" class="fixed inset-0 bg-black opacity-50 z-50 hidden"></div>

	<aside id="slide-out-filters" class="lg:w-1/4  md:w-1/4 w-10/12 lg:static md:static fixed p-4 shadow-lg bg-white  lg:block md:block  rounded overflow-y-auto transition duration-300 ease-in-out transform sm:transform-none sm:right-0 top-0 left-0 z-50 h-screen md:h-auto lg:h-auto">
		<div class="mdc-select mdc-select--outlined col-xl-3 rounded  pb-2 w-full" id="order-by">
			<div class="mdc-select__anchor">
				<span class="mdc-notched-outline">
					<span class="mdc-notched-outline__leading"></span>
					<span class="mdc-notched-outline__notch" style="border-left: none; border-right: none;">
						<span id="outlined-select-label" class="mdc-floating-label">Sort By</span>
					</span>
					<span class="mdc-notched-outline__trailing"></span>
				</span>
				<span class="mdc-select__selected-text-container">
					<span class="mdc-select__selected-text"></span>
				</span>
				<span class="mdc-select__dropdown-icon">
					<svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5" focusable="false">
						<polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
						<polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
					</svg>
				</span>
			</div>
			<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
				<ul class="mdc-list" role="listbox" aria-label="Sort By" id="sort-options-list">
					<!-- Options will be dynamically added here using JavaScript -->
				</ul>
			</div>
		</div>
		<div  class="space-y-2">
			<!-- Panel 1 -->
			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header">
                    <div class="w-full text-left focus:outline-none  transition"> Price </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
					<div class="flex justify-center items-center">
						<span id="priceRange" class="slider-readings"> <?php echo '$' . number_format($minPrice) . ' to $' . number_format($maxPrice) ?> </span></div>
						<div class="mdc-slider mdc-slider--range" id="autocart-price-range-field">
							<input class="mdc-slider__input" type="range" min="10000" max="80000" value="
								<?php echo isset($minPrice)? $minPrice: 10000 ?>" name="rangeStart" aria-label="Continuous range slider demo">
							<input class="mdc-slider__input" type="range" min="10000" max="80000" value="<?php echo isset($maxPrice)? $maxPrice: 80000 ?>" name="rangeEnd" aria-label="Continuous range slider demo">
						<div class="mdc-slider__track">
							<div class="mdc-slider__track--inactive"></div>
							<div class="mdc-slider__track--active">
								<div class="mdc-slider__track--active_fill"></div>
							</div>
						</div>
						<div class="mdc-slider__thumb">
							<div class="mdc-slider__thumb-knob"></div>
						</div>
						<div class="mdc-slider__thumb">
							<div class="mdc-slider__thumb-knob"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- Panel 2 -->
			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header">
                    <div class="w-full text-left focus:outline-none  transition"> Year </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
					<div class="flex justify-center items-center">
						<span id="yearRange" class="slider-readings"> <?php echo $minYear .' to '.$maxYear; ?> </span>
					</div>
					<div class="mdc-slider mdc-slider--range" id="autocart-year-range-field">
						<input class="mdc-slider__input" type="range" min="<?php echo $startYear ?>" max="<?php echo $endYear ?>" value="<?php echo isset($minYear) ? $minYear : $startYear ?>" name="rangeStart" aria-label="Continuous range slider demo">
						<input class="mdc-slider__input" type="range" min="<?php echo $startYear ?>" max="<?php echo $endYear ?>" value="<?php echo isset($maxYear) ? $maxYear : $endYear ?>" name="rangeEnd" aria-label="Continuous range slider demo">
						<div class="mdc-slider__track">
							<div class="mdc-slider__track--inactive"></div>
							<div class="mdc-slider__track--active">
								<div class="mdc-slider__track--active_fill"></div>
							</div>
						</div>
						<div class="mdc-slider__thumb">
							<div class="mdc-slider__thumb-knob"></div>
						</div>
						<div class="mdc-slider__thumb">
							<div class="mdc-slider__thumb-knob"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- Panel 3 -->
			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header">
                    <div class="w-full text-left focus:outline-none  transition"> Kilometres </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
					<div class="flex justify-center items-center">
						<span id="KilometresRange" class="slider-readings">19000 to 222000 </span>
					</div>
					<div class="mdc-slider mdc-slider--range" id="autocart-kilometres-range-field">
						<input class="mdc-slider__input" type="range" min="19000" max="222000" value="19000" name="rangeStart" aria-label="Continuous range slider demo">
						<input class="mdc-slider__input" type="range" min="19000" max="222000" value="222000" name="rangeEnd" aria-label="Continuous range slider demo">
						<div class="mdc-slider__track">
							<div class="mdc-slider__track--inactive"></div>
							<div class="mdc-slider__track--active">
								<div class="mdc-slider__track--active_fill"></div>
							</div>
						</div>
						<div class="mdc-slider__thumb">
							<div class="mdc-slider__thumb-knob"></div>
						</div>
						<div class="mdc-slider__thumb">
							<div class="mdc-slider__thumb-knob"></div>
						</div>
					</div>
				</div>
			</div>

			<!-- Panel 4 -->
			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header">
                    <div class="w-full text-left focus:outline-none  transition"> Make </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
					<ul class="make-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg  w-full">
						
					</ul>
				</div>
			</div>
			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header" id="model-collapse-toggle ">
                    <div class="w-full text-left focus:outline-none  transition"> Model </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
					<ul class="model-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg  w-full ">
						<p>Please Select a Make.</p>
					</ul>
				</div>
			</div>

			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header">
                    <div class="w-full text-left focus:outline-none  transition"> Trim </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
					<ul class="trim-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg  w-full">
						<p>Please Select a Model.</p>
					</ul>
				</div>
			</div>

			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header">
                    <div class="w-full text-left focus:outline-none  transition"> Body Style </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
					<ul class="body-type-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg  w-full">
                       
                    </ul>
				</div>
			</div>

			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header">
                    <div class="w-full text-left focus:outline-none  transition"> Transmission </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
                    <ul class="transmission-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg  w-full">
                       
                    </ul>
				</div>
			</div>

			<div class="border rounded p-2" collapse-toggle>
				<div class="flex justify-between items-center p-4 ac-accordion-header">
                    <div class="w-full text-left focus:outline-none  transition"> Exterior Color </div>
					        <i class="fas fa-chevron-down hover:bg-gray-200"></i>

				</div>
				<div class="mt-2 ac-accordion-content">
                    <ul class="exterior-color list-none text-gray-900 bg-white text-sm font-medium rounded-lg  w-full">
                       
                    </ul>
				</div>
			</div>
		</div>
		<!-- Add more filters as needed -->
	</aside>
	<!-- Main Content -->
	<div class="w-3/4 ml-1/4 p-4 pb-0 flex-grow">
		<!-- Top App Bar with Menu Button -->
		<header class="shadow-lg bg-white p-4 flex justify-between items-center rounded" >
            <div class="mt-2" id="applied-filters-block"></div>
            <div class="flex items-center space-x-4">
                <i id="grid-view" class="fas fa-th text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110 hover:shadow-md ripple selected"></i>
                <i id="list-view" class="fas fa-list text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110 hover:shadow-md ripple"></i>
				<label for="open-menu" tabindex="0" aria-haspopup="true" role="button"	aria-controls="menu" class="cursor-pointer m-0 md:hidden lg:hidden" id="openmenu">
					<i id="filter-toggle" class="fas fa-sliders-h text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110"></i>
				</label>
				<input type="checkbox" data-menu id="open-menu" class="peer hidden">
            </div>
        </header>

		<!-- Vehicle List -->
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4 vehicles-container">
			<!-- Vehicle Cards go here -->
			
		</div>
	</div>
</div> 
<?php 
wp_nonce_field('autocart_nonce', 'autocart_nonce'); ?> <?php get_footer();

if ($make) {
    echo "<input type='hidden' id='autocart-make-field' value='$make'>";
} ?>

<script>
 
const filtersDrawerCheckbox = document.getElementById('open-menu');
const filtersDrawer = document.querySelector('#slide-out-filters');
const filterToggle = document.querySelector('#filter-toggle');
const overlay = document.getElementById('overlay');

document.addEventListener('DOMContentLoaded', function () {
	
    price = new mdc.slider.MDCSlider(document.querySelector('#autocart-price-range-field'));
    year = new mdc.slider.MDCSlider(document.querySelector('#autocart-year-range-field'));
    kilometres = new mdc.slider.MDCSlider(document.querySelector('#autocart-kilometres-range-field'));
    price.listen('MDCSlider:input', updatePrice);
    year.listen('MDCSlider:input', updateYear);
    kilometres.listen('MDCSlider:input', updateMileage);

    new DisplayMode();
    dataStore = new DataStore([]);
	
    new SortBy(dataStore);
    sendReq();


	const accordionItems = document.querySelectorAll("[collapse-toggle]");

	accordionItems.forEach(item => {
		const header = item.querySelector(".ac-accordion-header");
		const content = item.querySelector(".ac-accordion-content");
		const icon = header.querySelector("i.fas");

		header.addEventListener("click", function() {
			item.classList.toggle("collapsed");
			// content.classList.toggle('hidden');
			icon.classList.toggle('fa-chevron-down');
            icon.classList.toggle('fa-chevron-up');
			// content.style.display = content.style.display === "none" ? "block" : "none";
		});
	});
	// filtersDrawer.style.translate = "-100%";

	const mobileMediaQuery = window.matchMedia('(max-width: 767px)');
    
    const applyTranslation = () => {
        if (mobileMediaQuery.matches) {
            filtersDrawer.style.translate = '-100%';
        } else {
			filtersDrawerCheckbox.checked = false;
			filtersDrawerCheckbox.dispatchEvent(new Event('change'));
            filtersDrawer.style.translate = '0';
			
        }
    };

    applyTranslation();
    mobileMediaQuery.addListener(applyTranslation);
	// window.addEventListener('resize', applyTranslation);


});


filtersDrawerCheckbox.addEventListener('change', function() {
	if (this.checked) {
		overlay.classList.remove('hidden');
		filtersDrawer.style.translate = 0;
		filterToggle.classList.add('selected');
	} else {
		overlay.classList.add('hidden');
		filterToggle.classList.remove('selected')
		filtersDrawer.style.translate = "-100%";
		
	}
});
overlay.addEventListener('click', function() {
	
	filtersDrawerCheckbox.checked = false;
    filtersDrawerCheckbox.dispatchEvent(new Event('change'));
});


</script>
