715 lines
40 KiB
PHP
715 lines
40 KiB
PHP
<?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);
|
|
if (is_array($similar_vehicles)) {
|
|
$filtered_vehicles = array_filter($similar_vehicles, function ($vehicle) use ($vehicle_details) {
|
|
return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
|
|
});
|
|
} else {
|
|
$filtered_vehicles = array_filter([], 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();
|
|
|
|
|
|
|
|
// Extracting necessary details
|
|
$importantDetails = array(
|
|
'title' => $vehicle_details['year'] . ' ' . $vehicle_details['make'] . ' ' . $vehicle_details['model'] . ' ' . $vehicle_details['trim'] . ' - ' . $vehicle_details['exterior_color'] . ' ' . $vehicle_details['interior_color'],
|
|
'id_vehicle' => $vehicle_details['id_vehicle'],
|
|
'advertise_price'=> $vehicle_details['advertise_price']
|
|
);
|
|
|
|
// Encoding important details as JSON
|
|
$importantDetailsJSON = json_encode($importantDetails);
|
|
?>
|
|
|
|
<script>
|
|
// Assigning important details JSON to a JavaScript variable
|
|
const appointmentVehicle = <?php echo $importantDetailsJSON; ?>;
|
|
|
|
// Creating a new object to merge with appointment form data
|
|
const mergedDetails = {
|
|
image_title: <?php echo json_encode($vehicle_images[0]['url']); ?>,
|
|
...appointmentVehicle
|
|
};
|
|
// 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(mergedDetails);
|
|
const financeForm = new FinanceForm(vehicleDetails, appointmentForm, 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')));
|
|
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>
|