WordPress_Themes/Rogers_Motors_Theme
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme and plugin sync

Browse Source
This commit is contained in:
Prospect
2024-03-20 17:38:18 -04:00
commit 03e44e02f0
224 changed files with 56542 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

689
autocart_assets/templates/single-vehicle.php Normal file
View File

@@ -0,0 +1,689 @@
<?php
/*
Template Name: Vehicle Template
*/
get_header();
?>
<style>
.modal {
transition: opacity 0.25s ease;
}
body.modal-active {
overflow-x: hidden;
overflow-y: visible !important;
}
span.ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple 600ms linear;
background-color: rgba(255, 255, 255, 0.7);
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
</style>
<?php
// Retrieve the autocart response data
$vehicle_id = isset($_GET['vehicle_id']) ? urldecode($_GET['vehicle_id']) : '';
if ($vehicle_id) {
// Retrieve the external token from WordPress options
$external_token = get_option('autocart_server_token');
$pluginToken = get_option('autocart_plugin_token'); // Retrieve the token from where you stored it
if ($external_token) {
// Make an external request to get vehicle details
$vehicle_details_url = REMOTE_SERVER_URL . '/api/v1/wp/vehicle/' . $vehicle_id;
$vehicle_details_response = wp_remote_get($vehicle_details_url, array(
'headers' => array(
'Authorization' => $external_token,
'Plugin' => $pluginToken
),
));
// Make another request to get vehicle images
$vehicle_images_url = REMOTE_SERVER_URL . '/api/v1/companies/1/vehicles/' . $vehicle_id . '/images';
$vehicle_images_response = wp_remote_get($vehicle_images_url, array(
'headers' => array(
'Authorization' => $external_token,
'Plugin' => $pluginToken
),
));
$vehicle_features = REMOTE_SERVER_URL . '/api/v1/companies/1/vehicles/' . $vehicle_id . '/vehiclefeatures';
$vehicle_features_response = wp_remote_get($vehicle_features, array(
'headers' => array(
'Authorization' => $external_token,
'Plugin' => $pluginToken
),
));
if (
!is_wp_error($vehicle_details_response) && !is_wp_error($vehicle_images_response)
&& wp_remote_retrieve_response_code($vehicle_details_response) === 200
&& wp_remote_retrieve_response_code($vehicle_images_response) === 200
&& wp_remote_retrieve_response_code($vehicle_features_response) === 200
) {
// Decode and print the vehicle details response
$vehicle_details = json_decode(wp_remote_retrieve_body($vehicle_details_response), true);
$vehicle_features = json_decode(wp_remote_retrieve_body($vehicle_features_response), true);
// Decode and print the vehicle images response
$vehicle_images = json_decode(wp_remote_retrieve_body($vehicle_images_response), true);
// var_dump($searchData); exit;
$filters = array(
'body_type' => $vehicle_details['body_type']
);
$similar_vehicles_response = wp_remote_post(REMOTE_SERVER_URL . '/api/v1/wp', array(
'body' => json_encode($filters), // The filters array will be sent in the body of the request
'headers' => array(
'Content-Type' => 'application/json', // Make sure to set the Content-Type header appropriately
'Authorization' => $external_token,
'Plugin' => $pluginToken
),
));
if (!is_wp_error($similar_vehicles_response) && wp_remote_retrieve_response_code($similar_vehicles_response) === 200) {
$similar_vehicles = json_decode(wp_remote_retrieve_body($similar_vehicles_response), true);
$filtered_vehicles = array_filter($similar_vehicles, function ($vehicle) use ($vehicle_details) {
return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
});
// echo '<pre>';
// print_r($filtered_vehicles);
// echo '</pre>';
}
// Initialize an empty array to store grouped features
$groupedFeatures = array();
// Loop through the features and group them by category
foreach ($vehicle_features as $feature) {
$category = $feature['category'];
// Check if the category key exists in the grouped array
if (!array_key_exists($category, $groupedFeatures)) {
// If not, create an empty array for the category
$groupedFeatures[$category] = array();
}
// Add the feature to the corresponding category
$groupedFeatures[$category][] = $feature;
}
// Now $groupedFeatures contains features grouped by category
// print_r($groupedFeatures);
// echo '<pre>';
// print_r($searchData);
// echo '</pre>';
} else {
echo '<div class="bg-gray-100 dark:bg-gray-800 py-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row"><p>Error retrieving vehicle details or images.</p></div></div</div>';
exit;
}
} else {
echo '<div class="bg-gray-100 dark:bg-gray-800 py-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row"><p>Error: External token not found.</p>/div></div</div>';
exit;
}
} else {
echo '<div class="bg-gray-100 dark:bg-gray-800 py-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row"><p>No vehicle found.</p></div></div</div>';
exit;
} ?>
<?php
// Assuming you have the images in the $vehicle_images array
$image_title = !empty($vehicle_images[0]['title']) ? $vehicle_images[0]['title'] : '';
$image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images[0]['description'] : '';
?>
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2">
<div class="relative group cursor-pointer">
<img src="<?php echo $vehicle_images[0]['url']; ?>" alt="<?php echo $image_title; ?>" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-75 transition duration-500 ease-in-out"></div>
<div class="absolute inset-0 bottom-0 p-4 text-white group-hover:opacity-100 transition duration-500 ease-in-out" onclick="showFeaturedImage(0);openFeaturedImage()">
<h3><?php echo $image_title; ?></h3>
<p><?php echo $image_description; ?></p>
</div>
</div>
<div class="relative grid grid-cols-2">
<?php
$end = (!empty($vehicle_images) && count($vehicle_images) >= 5) ? 5 : count($vehicle_images);
// Start loop from index 1 to skip the first image
for ($i = 1; $i < $end; $i++) {
$image = $vehicle_images[$i];
// Extract image URL, title, and description
$image_url = $image['url'];
?>
<div class="relative group cursor-pointer">
<img src="<?php echo $image_url; ?>" alt="<?php echo $image_title; ?>" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-75 transition duration-500 ease-in-out"></div>
<div class="absolute inset-0 bottom-0 p-4 text-white group-hover:opacity-100 transition duration-500 ease-in-out" onclick="showFeaturedImage(<?php echo $i; ?>);openFeaturedImage()">
<h3><?php echo $image_title; ?></h3>
<p><?php echo $image_description; ?></p>
</div>
</div>
<?php
}
?>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 py-4">
<!-- Single Car Information -->
<div class="lg:grid grid-cols-3 relative">
<!-- Vehicle Details -->
<div class="mx-auto col-span-2">
<!-- Single Car -->
<div class="m-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">
<!-- title -->
<?php echo $vehicle_details['year'] . ' ' . $vehicle_details['make'] . ' ' . $vehicle_details['model'] . ' ' . $vehicle_details['trim'] . ' - ' . $vehicle_details['exterior_color'] . ' ' . $vehicle_details['interior_color']; ?>
</h2>
<p> Stock #: <?php echo $vehicle_details['stock_number'] ?></p>
<hr class="my-4 border-gray-300">
<span class="font-bold text-gray-700 dark:text-gray-300">About this vehicle</span>
<div class="flex items-center mt-4">
<div class="text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<i class="fas fa-tachometer-alt w-3 h-3 me-3"></i>
<span class="label">Kilometres</span>
<span class="value"><?php echo number_format($vehicle_details['mileage']) ?></span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<i class="fas fa-car-side w-3 h-3 me-3"></i>
<span class="label">Body Style</span>
<span class="value"><?php echo $vehicle_details['body_type'] ?></span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<i class="fas fa-cogs w-3 h-3 me-3"></i>
<span class="label">Engine</span>
<span class="value"><?php echo $vehicle_details['engine'] ?></span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<i class="fas fa-palette w-3 h-3 me-3"></i>
<span class="label">Exterior Colour</span>
<span class="value"><?php echo $vehicle_details['exterior_color'] ?></span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88" width="20" height="20">
<path d="M61.44,0A61.46,61.46,0,1,1,18,18,61.23,61.23,0,0,1,61.44,0Zm4.07,82.09a6.67,6.67,0,1,1-8.14,0V68.62H42.31V82.09a6.67,6.67,0,1,1-8.14,0V46.17a6.67,6.67,0,1,1,8.14,0V60.48H57.37V46.17a6.67,6.67,0,1,1,8.14,0V60.48H80.57V46.17a6.67,6.67,0,1,1,8.14,0V64a4.41,4.41,0,0,1,0,.52,4.07,4.07,0,0,1-4.07,4.07H65.51V82.09Zm33-57.76a52.46,52.46,0,1,0,15.38,37.11A52.29,52.29,0,0,0,98.55,24.33Z" />
</svg>
<span class="label">Transmission</span>
<span class="value"><?php echo $vehicle_details['transmission_type'] ?></span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<i class="fas fa-users w-3 h-3 me-3"></i>
<span class="label"># of Passengers</span>
<span class="value"><?php echo $vehicle_details['optional_seating'] ?></span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 63.67" width="20" height="10">
<path d="M7.69,25.88c-8.3-4.22-7.35-8.92,1-8.43L10.55,21,14.4,9c1.51-4.71,4-9,9-9H66.89c4.24,0,6.94,3.09,8.37,7A9.88,9.88,0,0,1,79,6.69h24.8c3.38,0,6.2.12,9.29,2.32a12.64,12.64,0,0,1,2.66,2.57,32.64,32.64,0,0,1,3.39,6.15l3.2,6.66a2.53,2.53,0,0,1,.25,2.64l-2.52,8.19c-.2.45-.6.64-1.29.5a10.51,10.51,0,0,0-11.6,9c-.06.53,0,1.22-.44,1.54a1.48,1.48,0,0,1-1.09.15H87.15c-.1,2.72-.3,5.83-.52,9.46v5a2.81,2.81,0,0,1-2.81,2.8h-12a2.81,2.81,0,0,1-2.81-2.8V58.62H18.18v2.25a2.82,2.82,0,0,1-2.81,2.8H3.4a2.81,2.81,0,0,1-2.8-2.8V54.4a3,3,0,0,1,0-.43c-.91-11.62-2.19-22.1,7.06-28.09ZM86.78,37.44H85.31a.84.84,0,0,0-.85,1,1.07,1.07,0,0,0,1,1h19.89a.83.83,0,0,0,.84-1h0a1.07,1.07,0,0,0-1-1Zm-2.32,1ZM79.27,11h27.56a7.4,7.4,0,0,1,4.78,3.28l5.5,11.26.11,1.07H83.3L79.27,11Zm32.41,19.19h5.37a1.07,1.07,0,0,1,1,1h0a.83.83,0,0,1-.84.95h-5.37a1.07,1.07,0,0,1-1-.95h0a.83.83,0,0,1,.84-1ZM23,39.66,12.34,38.32C9.83,38,9.16,39.1,10,41.26l1.15,2.79a4.06,4.06,0,0,0,1.44,1.61,4.82,4.82,0,0,0,2.38.65l9.48.08c2.29,0,3.28-.92,2.56-3A5.11,5.11,0,0,0,23,39.66Zm41.27,0,10.63-1.34c2.51-.28,3.19.78,2.33,2.94l-1.15,2.79a4.06,4.06,0,0,1-1.44,1.61,4.82,4.82,0,0,1-2.38.65l-9.48.08c-2.29,0-3.28-.92-2.56-3a5.13,5.13,0,0,1,4-3.71ZM14.54,23.59h60l-2.9-12c-.79-3.66-3.08-6.84-6.84-6.84H25c-3.76,0-5.69,3.26-6.85,6.84l-3.61,12v0Z" style="fill: #000;"></path>
</svg>
<span class="label">Doors</span>
<span class="value"><?php echo $vehicle_details['doors'] ?></span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<i class="fas fa-gas-pump w-3 h-3 me-3"></i>
<span class="label">Fuel Type</span>
<span class="value"><?php echo $vehicle_details['fuel_type'] ?></span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<i class="fas fa-clipboard-check w-3 h-3 me-3"></i>
<span class="label">Condition</span>
<span class="value">Used</span>
</button>
<button type="button" class="relative inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-black-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white text-black flex-row gap-2">
<i class="fas fa-palette w-3 h-3 me-3"></i>
<span class="label">Interior Colour</span>
<span class="value"><?php echo $vehicle_details['interior_color'] ?></span>
</button>
</div>
</div>
</div>
<!-- Description -->
<div class="m-4">
<!-- <span class="font-bold text-gray-700 dark:text-gray-300">Standard equipment</span> -->
<div id="accordion-equipment" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white mt-4 transition-all duration-300" data-inactive-classes="text-gray-500 dark:text-gray-400">
<h2 id="accordion-features-heading-1" class="py-2 my-0">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border-b border-gray-200 gap-3 focus:bg-gray-700 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white bg-white round-lg focus:text-white" data-accordion-target="#accordion-features-body-1" aria-expanded="true" aria-controls="accordion-features-body-1">
<span>Description</span>
<svg data-accordion-icon class="w-3 h-3 rotate-0 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-features-body-1" class="text-gray-900 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300" aria-labelledby="accordion-features-heading-1">
<div class="bg-white px-4 py-2 border-b border-gray-200 dark:border-gray-700 rounded-lg ">
<p class="mt-4 text-gray-600 dark:text-gray-300 text-sm mb-4">
<?php echo implode("<br><br>", explode(' ', $vehicle_details['comments'])); ?>
</p>
</div>
</div>
</div>
</div>
<!-- Options -->
<div class="m-4">
<p class="mb-4 font-bold text-gray-700 dark:text-gray-300">Options</p>
<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white mt-4 transition-all duration-300" data-inactive-classes="text-gray-500 dark:text-gray-400">
<div class="md:grid grid-cols-3">
<ul class="col-span-1 flex-column space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
<?php foreach ($groupedFeatures as $category => $features) : ?>
<?php
// Remove special characters and spaces from category for use in HTML IDs
$categorySlug = strtolower(preg_replace('/[^a-z0-9]/', '', $category));
?>
<button class="inline-flex items-center text-left px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-300 w-full dark:hover:bg-gray-700 dark:hover:text-white text-gray-900 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 ripple-effect" data-tab-target="#tab-<?= $categorySlug ?>-body-1" data-te-ripple-init>
<?= $category ?>
</button>
<?php endforeach; ?>
</ul>
<div class="sticky-container col-span-2 p-6 bg-gray-50 text-medium text-gray-900 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 top-32 lg:top-56" id="tabs-viewer">
</div>
<?php foreach ($groupedFeatures as $category => $features) : ?>
<?php
// Remove special characters and spaces from category for use in HTML IDs
$categorySlug = strtolower(preg_replace('/[^a-z0-9]/', '', $category));
?>
<div class="p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full tab-content hidden" id="tab-<?= $categorySlug ?>-body-1">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2"><?= $category ?></h3>
<?php foreach ($features as $feature) : ?>
<p class="mb-2 text-gray-500 dark:text-gray-400"><?= $feature['name'] . (isset($feature['value']) && !empty($feature['value']) ? ': <span>' . $feature['value'] . '</span>' : '') ?> </p>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<div class="p-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 mt-4" role="alert">
<span class="font-medium">*Standard Equipment</span> is the default equipment supplied for the Make and Model of this vehicle, but may not represent the final vehicle with additional / altered equipment options.
</div>
</div>
</div>
</div>
<!-- Vehicle Financing and Booking Widget -->
<div class="px-4 col-span-1 relative">
<div class="sticky-container grid gap-3 top-56">
<button role="button" class="prev px-2 py-2 rounded-full bg-neutral-100 text-neutral-900 group absolute top-1/4 left-4 transform -translate-y-1/2 z-10" aria-label="prev" onclick="navigateSlider(-1)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 group-active:-translate-x-2 transition-all duration-200 ease-linear">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button>
<div id="featuredImageContainer" class="ripple-effect" style="width: 100%;" onclick="openFeaturedImage()">
<img id="featuredImage" class="cursor-pointer h-auto max-w-full rounded-lg " src="#" alt="">
</div>
<div id="thumbnailContainer" class="no-scrollbar slides overflow-scroll smooth-scroll relative w-full whitespace-nowrap touch-pan-x before:shrink-0 after:shrink-0 before:w-[36vw] after:w-[36vw] snap-mandatory flex snap-x gap-2 border border-transparent rounded-lg dark:bg-gray-700 dark:border-transparent dark:text-white w-full">
<?php
// Display thumbnail images
foreach ($vehicle_images as $index => $image) {
if (isset($image['url'])) { ?>
<div class='slide flex-shrink-0 w-[70vw] h-[calc(70vw*1.5)] sm:w-[40vw] sm:h-[calc(40vw*1.5)] md:w-[25vw] md:h-[calc(25vw*1.5)] overflow-clip relative snap-center rounded-3xl w-16 h-16'>
<a href="<?php echo esc_url($image['url']) ?>" class="glightbox" data-glightbox="gallery">
<img src="<?php echo esc_url($image['url']) ?>" alt="Image <?php echo $index; ?>" class='block w-full h-full object-cover object-center absolute right-0 animate-parallax h-full w-full object-cover rounded-lg thumbnail' onclick="showFeaturedImage(<?php echo $index; ?>)" />
</a>
</div>
<?php
}
}
?>
</div>
<button role="button" class="next px-2 py-2 rounded-full bg-neutral-100 text-neutral-900 group absolute top-1/4 right-4 transform -translate-y-1/2 z-10" aria-label="next" onclick="navigateSlider(1)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 group-active:translate-x-2 transition-all duration-200 ease-linear">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
<div class="flex items-center flex-wrap">
<div class="flex justify-between items-end w-full gap-4 relative whitespace-nowrap snap-x">
<div class="flex justify-between items-end w-full gap-4">
<div class="flex-1 text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white w-full">
<div class="p-4">
<span class="text-xl font-semibold">
<span class="text-gray-600 dark:text-gray-300">
<?php echo $formattedPrice = '$ ' . number_format($vehicle_details['advertise_price']); ?>
</span>
</span>
<p class="text-xs text-gray-400">+ taxes and fees</p>
</div>
</div>
<div class="flex-1 text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white w-full">
<div class="p-4">
<span class="text-xl font-semibold">
<span class="text-gray-600 dark:text-gray-300 paymentSpan">
<?php echo $formattedPrice = '$ ' . number_format(416); ?>
</span>
<i class="fas fa-calculator cursor-pointer" onclick="openFinanceModal()"></i>
</span>
<p class="text-xs text-gray-400"><span class="rateSpan">7.99</span> for <span class="loanTermSpan">12</span> Months </p>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center flex-wrap">
<div class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border-b border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white bg-white round-lg focus:text-white flex-col gap-3">
<span class="text-red-600 self-start">Estimate Your Payments <i class="fas fa-greater-than text-xs"></i></span>
<!-- Primary Button -->
<button class="w-full bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-gray focus:border-gray-700 ripple-effect" onclick="openAppointmentModal()">
Book a Private Appointment
</button>
<!-- Secondary Button -->
<button class="w-full mt-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-gray focus:border-gray-400 ripple-effect">
Apply for Financing
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Similar Vehicles -->
<div class="flex flex-col md:flex-row max-w-7xl overflow-scroll no-scrollbar">
<div class="mx-auto px-4 mt-10">
<h2 class="text-2xl font-bold mb-4 px-4">Similar Vehicles</h2>
<?php if (!empty($filtered_vehicles)) : ?>
<div class="relative overflow-hidden rounded-lg">
<!-- Left scroll button -->
<button class="absolute left-5 z-10 p-2 bg-neutral-100 rounded-full hover:bg-gray-200 top-1/3" onclick="scrollCarouselLeft()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 group-active:-translate-x-2 transition-all duration-200 ease-linear">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path>
</svg>
</button>
<!-- Right scroll button -->
<button class="absolute right-5 z-10 p-2 bg-neutral-100 rounded-full hover:bg-gray-200 top-1/3" onclick="scrollCarouselRight()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 group-active:translate-x-2 transition-all duration-200 ease-linear">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
</svg>
</button>
<!-- Vehicle cards -->
<div class="flex whitespace-nowrap overflow-x-scroll scroll-smooth px-4 pb-4 flex-stretch space-x-4">
<?php foreach ($filtered_vehicles as $vehicle) : ?>
<div class="flex-shrink-0 w-80">
<div class="bg-white rounded-lg shadow-md hover:shadow-lg transition duration-200 flex flex-col justify-between h-full">
<img src="<?php echo $vehicle['landingImage']; ?>" alt="Vehicle image" class="w-full object-cover rounded-tl-md rounded-tr-md mb-4">
<div class="p-4 ">
<div class="mb-2">
<h3 class="text-lg font-medium text-gray-700 truncate"><?php echo $vehicle['year'] . ' ' . $vehicle['make'] . ' ' . $vehicle['model'] . ' ' . implode(', ', $vehicle['trim']); ?></h3>
<p class="text-sm text-gray-500"><?php echo number_format($vehicle['mileage']) . ' miles - ' . $vehicle['exterior_color'] . ' - ' . $vehicle['transmission_type']; ?></p>
</div>
<div class="flex justify-between items-center">
<span class="text-base font-medium text-gray-700">$<?php echo number_format($vehicle['advertise_price']); ?></span>
<a href="vehicle-details/?vehicle_id=<?php echo $vehicle['id_vehicle']; ?>" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 hover:text-white">View Details</a>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php else : ?>
<p>No similar vehicles found.</p>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php
get_footer();
?>
<script>
// modal
const handleFinanceChanges = (financeForm) => {
if (document.querySelectorAll('.paymentSpan').length) {
document.querySelectorAll('.paymentSpan').forEach(el => {
el.textContent = (Number(financeForm.payment) || 0).toLocaleString('en-CA', {
style: 'currency',
currency: 'CAD'
});
})
}
// document.querySelectorAll('.paymentFrequencySpan').forEach(el=>{
// // el.textContent = ${financeForm.frequencyMap[financeForm.paymentFrequency]}
// })
if (document.querySelectorAll('.loanTermSpan').length) {
document.querySelectorAll('.loanTermSpan').forEach(el => {
el.innerHTML = `${financeForm.loanTerm}`;
})
}
if (document.querySelectorAll('.rateSpan').length) {
document.querySelectorAll('.rateSpan').forEach(el => {
el.innerHTML = `${financeForm.intRate}`;
})
}
};
const vehicleDetails = <?php echo json_encode($vehicle_details); ?>;
const appointmentForm = new AppointmentForm();
const financeForm = new FinanceForm(vehicleDetails, handleFinanceChanges);
const modal = new Modal(<?php echo $vehicle_id ?>);
document.body.appendChild(modal.initModal());
function openAppointmentModal() {
modal.toggleModal(appointmentForm);
appointmentForm.initializeFormInputs();
}
function openFinanceModal() {
modal.toggleModal(financeForm);
financeForm.initializeFormInputs();
}
// carousel
let lightbox;
let selectedSlide = 0;
function openFeaturedImage() {
lightbox = GLightbox({
selector: 'glightbox',
touchNavigation: true,
loop: true,
startAt: selectedSlide, // Set the starting slide
onClose: function() {
const slideElements = document.querySelectorAll('#thumbnailContainer .thumbnail');
if (slideElements.length >= lightbox.index) {
const selectedSlideElement = slideElements[lightbox.index];
showFeaturedImage(lightbox.index)
}
}
});
lightbox.open();
}
function showFeaturedImage(idx) {
event.preventDefault();
if (typeof lightbox !== 'undefined') {
lightbox.destroy();
}
setFeatureImage(idx);
}
function setFeatureImage(idx) {
const slideElements = document.querySelectorAll('#thumbnailContainer .thumbnail');
if (slideElements.length >= idx) {
const selectedSlideElement = slideElements[idx];
document.getElementById('featuredImage').src = selectedSlideElement.src;
selectedSlide = idx;
}
}
function navigateSlider(direction) {
selectedSlide += direction;
const slideElements = document.querySelectorAll('#thumbnailContainer .thumbnail');
if (selectedSlide < 0) {
selectedSlide = slideElements.length - 1;
} else if (selectedSlide >= slideElements.length) {
selectedSlide = 0;
}
setFeatureImage(selectedSlide);
}
jQuery(document).ready(function() {
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var filters = JSON.parse(decodeURIComponent(urlParams.get('filters')));
console.log(filters);
setFeatureImage(0);
const accordionHeaders = document.querySelectorAll('[data-accordion-target]');
accordionHeaders.forEach(header => {
header.addEventListener('click', function() {
const target = document.querySelector(this.getAttribute('data-accordion-target'));
target.classList.toggle('max-h-0');
target.classList.toggle('overflow-hidden');
const expanded = target.classList.contains('max-h-0') ? 'false' : 'true';
this.setAttribute('aria-expanded', expanded);
const icon = this.querySelector('[data-accordion-icon]');
icon.style.transform = expanded === 'true' ? 'rotate(0deg)' : 'rotate(180deg)';
});
});
// ripple effect
const btns = document.getElementsByClassName("ripple-effect");
for (const btn of btns) {
btn.addEventListener("click", rippleEffect);
}
const tabs = document.querySelectorAll('[data-tab-target]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.getAttribute('data-tab-target'));
document.querySelector('#tabs-viewer').innerHTML = target.innerHTML;
tabs.forEach(t => {
t.classList.remove('text-white', 'bg-gray-700', 'active');
t.classList.add('bg-gray-50');
});
tab.classList.add('text-white', 'bg-gray-700', 'active');
tab.classList.remove('bg-gray-50');
});
});
});
function rippleEffect(event) {
const btn = event.currentTarget;
// Add classes to the selected element
btn.classList.add("overflow-hidden", "shadow", "relative");
const circle = document.createElement("span");
const rect = btn.getBoundingClientRect();
const diameter = Math.max(btn.clientWidth, btn.clientHeight);
const radius = diameter / 2;
// Calculate the position relative to the button element
const offsetX = event.clientX - rect.left;
const offsetY = event.clientY - rect.top;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${offsetX - radius}px`;
circle.style.top = `${offsetY - radius}px`;
circle.classList.add("ripple");
const ripple = btn.getElementsByClassName("ripple")[0];
if (ripple) {
ripple.remove();
}
btn.appendChild(circle);
}
function scrollCarouselLeft() {
const carousel = document.querySelector('.overflow-x-scroll');
carousel.scrollTo({
left: carousel.scrollLeft - carousel.offsetWidth,
behavior: 'smooth'
});
// const carousel = document.querySelector('.overflow-x-scroll');
// carousel.scrollLeft -= carousel.offsetWidth;
}
function scrollCarouselRight() {
const carousel = document.querySelector('.overflow-x-scroll');
const maxScrollRight = carousel.scrollWidth - carousel.offsetWidth; // Calculate max scrollable distance
// Prevent scrolling beyond the end
if (carousel.scrollLeft >= maxScrollRight) {
return;
}
carousel.scrollTo({
left: carousel.scrollLeft + carousel.offsetWidth,
behavior: 'smooth'
});
}
</script>