Server : ApacheSystem : Linux sh00666.bluehost.com 5.14.0-687.26.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Jul 14 16:32:02 EDT 2026 x86_64 User : ndkhermy ( 1200) PHP Version : 8.5.12 Disable Function : NONE Directory : /home1/ndkhermy/public_html/website_93b53270/ |
Upload File : |
<?php error_reporting(0); ?>
<style>
#suggestion-box1,
#suggestion-box2,
#suggestion-box3 {
border: 1px solid #ccc;
display: none;
position: absolute;
background-color: #fff;
z-index: 1000;
}
#suggestion-box1 ul,
#suggestion-box2 ul,
#suggestion-box3 ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#suggestion-box1 li,
#suggestion-box2 li,
#suggestion-box3 li {
padding: 10px;
cursor: pointer;
}
#suggestion-box1 li:hover,
#suggestion-box2 li:hover,
#suggestion-box3 li:hover {
background-color: #f0f0f0;
}
.select-brand.produc_banner {
background: var(--smoke);
border-radius: 10px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 0px;
}
.hidden {
display: none;
}
</style>
<?php // && isset($_SESSION['model_id'])
if (isset($_SESSION['brand_id']) && isset($_SESSION['variant_id']) && isset($_SESSION['model_year_id'])) {
$row01_brand01 = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM `brand_tbl` WHERE status=1 AND id='" . $_SESSION['brand_id'] . "'"));
$row01_variant01 = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM `variant_tbl` WHERE status=1 AND id='" . $_SESSION['variant_id'] . "'"));
// $row02_model02=mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM `model_tbl` WHERE status=1 AND id='".$_SESSION['model_id']."'"));
$row03_model_date03 = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM `model_date_tbl` WHERE status=1 AND id='" . $_SESSION['model_year_id'] . "'"));
?>
<div class="select-brand mb-3">
<form class="carForm" method="POST" action="">
<div class="flex-select mb-0">
<div class="brand">
<h5 class="mb-0"><?= $row01_brand01['name'] ?></h5>
<ul class="d-flex ps-0 no-bullet mb-2">
<!-- <li><strong>Model</strong> <span class="pipe">|</span> <span><?= $row02_model02['title'] ?></span></li> -->
<li><strong>Variant</strong> <span class="pipe">|</span> <span><?= $row01_variant01['title'] ?></span></li> <li><strong>Year</strong> <span class="pipe">|</span> <span><?= $row03_model_date03['title'] ?></span></li>
</ul>
<a href="<?= $base_url ?>clear_filter.php?pg=<?= $page_name ?>" class="text-danger anchor" id="clear-filters">Clear selection</a>
</div>
<div class="brand-logo">
<img src="<?= $base_url ?>images/Upload/brand/<?= $row01_brand01['image1'] ?>">
</div>
</div>
</form>
</div>
<!-- <div class="select-brand produc_banner mt-4 new-img-car">
<img src="<?= $base_url ?>images/Upload/variant/<?= $row01_variant01["image1"] ?>">
</div> -->
<?php } else { ?>
<div class="select-brand">
<form class="carForm" method="POST" action="">
<input type="hidden" name="filter_submit" />
<!-- Step 1: Choose Car Brand -->
<div class="step step1 active">
<div class="d-flex">
<h5>Choose your car brand</h5>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
<input type="text" name="search_car_brand" id="search-box1" class="form-control" placeholder="Search your Car">
</div>
<div id="suggestion-box1"></div>
<div class="radio-buttons">
<?php
$sql = "SELECT * FROM `brand_tbl` WHERE status=1 ORDER BY id ASC";
$serQry01 = mysqli_query($conn, $sql);
while ($row01 = mysqli_fetch_array($serQry01)) {
?>
<label class="custom-radio">
<input type="radio" name="brand" class="sizeCheckbox brand" data-id1="<?= $row01['id'] ?>" value="<?= $row01['id'] ?>" <?= ($_SESSION['brand_id'] == $row01['id'] ? 'checked' : '') ?>>
<span class="radio-btn">
<div class="hobbies-icon img_b p-0">
<img src="<?= $base_url ?>images/Upload/brand/<?= $row01['image1'] ?>" class="img-fluid">
</div>
</span>
</label>
<?php } ?>
</div>
<div class="mt-3 text-center poppin">Can not find your brand?<a data-bs-toggle="modal" data-bs-target="#FindBrand"> Click here!</a></div>
</div>
<!-- Step 2: Choose Car Variant -->
<div class="step step2">
<div class="d-flex">
<h5>Choose your car variant</h5>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
<input type="text" name="search_car_variant" id="search-box2" class="form-control" placeholder="Search your Car ">
</div>
<div id="suggestion-box2"></div>
<div class="radio-buttons" id="variant_fet"></div>
<div class="next-step-btn mt-2">
<p class="text-center fw-bold w-100 prevBtn" style="color:red; cursor: pointer;">Back</p>
</div>
<div class="mt-3 text-center poppin">Can not find your car variant?<a data-bs-toggle="modal" data-bs-target="#Findvariant"> Click here!</a></div>
</div>
<!-- Step 3: Choose the Year -->
<div class="step step4">
<div class="d-flex">
<h5>Choose the Year</h5>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
<input type="number" name="search_car_model_year" id="search-box4" class="form-control" placeholder="Enter the Model Year" maxlength="4" pattern="\d{4}">
<script>
document.getElementById('search-box4').addEventListener('input', function(e) {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 4) {
value = value.slice(0, 4);
}
e.target.value = value;
if (value.length === 4) {
let currentYear = new Date().getFullYear();
if (value < 1900 || value > currentYear) {
alert(`Please enter a year between 1900 and ${currentYear}`);
e.target.value = '';
}
}
});
</script>
</div>
<div id="suggestion-box4"></div>
<div class="radio-buttons">
<?php
$serQry00 = mysqli_query($conn, "SELECT * FROM `model_date_tbl` WHERE status=1 ORDER BY id ASC");
while ($row00 = mysqli_fetch_array($serQry00)) {
?>
<label class="custom-radio">
<input type="radio" name="year" data-id4="<?= $row00['id'] ?>" value="<?= $row00['id'] ?>" <?= ($_SESSION['model_year_id'] == $row00['id'] ? 'checked' : '') ?> required>
<span class="radio-btn">
<div class="hobbies-icon img_b">
<h6><?= $row00['title'] ?></h6>
</div>
</span>
</label>
<?php } ?>
</div>
<div class="next-step-btn mt-2">
<p class="text-center fw-bold w-100 prevBtn" style="color:red; cursor: pointer;">Back</p>
<button type="submit" name="filter_submit" class="btn-theme ms-2 w-100 hidden">Submit</button>
</div>
<div class="mt-3 text-center poppin">Can not find your model year?<a data-bs-toggle="modal" data-bs-target="#FindModelDate"> Click here!</a></div>
</div>
</form>
</div>
<?php } ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
const steps = document.querySelectorAll('.step');
const prevBtns = document.querySelectorAll('.prevBtn');
const radioButtons = document.querySelectorAll('input[type="radio"]');
const hiddenSubmitButton = document.querySelector('button[name="filter_submit"]');
const brandRadios = document.querySelectorAll('input[name="brand"]');
const variantContainer = document.getElementById('variant_fet');
let currentStep = 0;
function showStep(step) {
steps.forEach((stepDiv, index) => {
stepDiv.classList.toggle('active', index === step);
});
}
function handleNextStep() {
if (currentStep < steps.length - 1) {
currentStep++;
showStep(currentStep);
}
}
function handlePrevStep() {
if (currentStep > 0) {
currentStep--;
showStep(currentStep);
}
}
prevBtns.forEach(btn => btn.addEventListener('click', handlePrevStep));
radioButtons.forEach(radio => {
radio.addEventListener('change', function() {
if (currentStep < steps.length - 1) {
handleNextStep();
} else if (currentStep === steps.length - 1) {
hiddenSubmitButton.click();
}
});
});
brandRadios.forEach(radio => {
radio.addEventListener('change', function() {
const brandId = this.value;
// AJAX request to fetch variants based on brand ID
fetch(`variant-ajax.php?brand_id=${brandId}`)
.then(response => response.json())
.then(data => {
// Clear previous variants
variantContainer.innerHTML = '';
// Populate variants based on the response
data.forEach(variant => {
const label = document.createElement('label');
label.classList.add('custom-radio');
label.innerHTML = `
<input type="radio" name="variant" data-id2="${variant.id}" value="${variant.id}" class="variant-radio">
<span class="radio-btn">
<div class="hobbies-icon img_m p-0">
<img src="${variant.image1}" class="img-fluid">
<span>${variant.title}</span>
</div>
</span>
`;
variantContainer.appendChild(label);
});
})
.catch(error => console.error('Error fetching variants:', error));
});
});
// Add event listener for variant selection to show the year step
variantContainer.addEventListener('change', function(e) {
if (e.target.classList.contains('variant-radio')) {
handleNextStep(); // Show the next step (year selection)
}
});
showStep(currentStep);
});
</script>
<!-- The Modal Brand Start -->
<div class="modal" id="FindBrand">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title fw-bold">Enter your brand</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form method="POST">
<input type="text" class="form-control theme-input" name="name_brand" placeholder="Enter your brand name">
<button type="submit" name="send_brand" class="btn-theme w-100 mt-4">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The Modal Brand Start -->
<!-- The Modal Variant Start -->
<div class="modal" id="Findvariant">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title fw-bold">Enter your Variant</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form method="POST">
<input type="text" class="form-control theme-input" name="name_variant" placeholder="Enter your Variant name">
<button type="submit" name="send_variant" class="btn-theme w-100 mt-4">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The Modal Variant Start -->
<!-- The Modal Model Date Start -->
<div class="modal" id="FindModelDate">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title fw-bold">Enter your model date</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form method="POST">
<input type="text" id="year-input" name="name_model_date" class="form-control theme-input" placeholder="Enter your model year" maxlength="4" pattern="\d{4}">
<script>
document.getElementById('year-input').addEventListener('input', function(e) {
let value = e.target.value;
if (!/^\d{0,4}$/.test(value)) {
e.target.value = value.slice(0, -1);
}
});
document.getElementById('year-input').setAttribute('max', new Date().getFullYear());
</script>
<button type="submit" name="send_model_year" class="btn-theme w-100 mt-4">Submit</button>
</form>
</div>
</div>
<!-- Modal footer -->
<!-- <div class="modal-footer px-0">
<a href="cart.php" class="btn btn-danger rounded-0">Submit</a>
</div> -->
</div>
</div>
</div>
</div>
<!-- The Modal Model Date End -->
<?php
if (isset($_POST['filter_submit'])) {
// Retrieve and sanitize user inputs
$brand = isset($_POST['brand']) ? htmlspecialchars($_POST['brand']) : '';
// $model = isset($_POST['model']) ? htmlspecialchars($_POST['model']) : '';
$model_year = isset($_POST['year']) ? htmlspecialchars($_POST['year']) : '';
$variant = isset($_POST['variant']) ? htmlspecialchars($_POST['variant']) : '';
// Initialize filter variable
$filter = "";
// AND FIND_IN_SET('".$model."', model_id)
if (!empty($brand) && !empty($variant) && !empty($model_year)) {
$_SESSION['filter'] = " AND FIND_IN_SET('" . $brand . "', brand_id) AND FIND_IN_SET('" . $model_year . "', model_year_id) AND FIND_IN_SET('" . $variant . "', variant_id)";
$_SESSION['brand_id'] = $brand;
// $_SESSION['model_id'] = $model;
$_SESSION['model_year_id'] = $model_year;
$_SESSION['variant_id'] = $variant;
}
// Redirect to products page
echo '<script>window.location="' . $page_name . '"</script>';
}
?>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Your page content here -->
<script type="text/javascript">
$(document).ready(function() {
// Brand search
$("#search-box1").keyup(function() {
$.ajax({
type: "POST",
url: "find_brand.php",
data: {
keyword: $(this).val()
},
beforeSend: function() {
$("#search-box1").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
},
success: function(data) {
$("#suggestion-box1").show();
$("#suggestion-box1").html(data);
$("#search-box1").css("background", "#FFF");
}
});
});
window.selectbrand = function(val, id) {
$("#search-box1").val(val);
$("#suggestion-box1").hide();
$('input[type="radio"][data-id1="' + id + '"]').trigger('click');
$('input[type="radio"][data-id1="' + id + '"]').prop('checked', true);
}
// Variant search
$("#search-box2").keyup(function() {
$.ajax({
type: "POST",
url: "find_variant.php",
data: {
keyword: $(this).val()
},
beforeSend: function() {
$("#search-box2").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
},
success: function(data) {
$("#suggestion-box2").show();
$("#suggestion-box2").html(data);
$("#search-box2").css("background", "#FFF");
}
});
});
window.selectvariant = function(val, id) {
$("#search-box2").val(val);
$("#suggestion-box2").hide();
$('input[type="radio"][data-id2="' + id + '"]').trigger('click');
$('input[type="radio"][data-id2="' + id + '"]').prop('checked', true);
};
// Model year search
$("#search-box4").keyup(function() {
$.ajax({
type: "POST",
url: "find_model_year.php",
data: {
keyword: $(this).val()
},
beforeSend: function() {
$("#search-box4").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
},
success: function(data) {
$("#suggestion-box4").show();
$("#suggestion-box4").html(data);
$("#search-box4").css("background", "#FFF");
}
});
});
window.selectmodelyear = function(val, id) {
$("#search-box4").val(val);
$("#suggestion-box4").hide();
$('input[type="radio"][data-id4="' + id + '"]').trigger('click');
$('input[type="radio"][data-id4="' + id + '"]').prop('checked', true);
}
});
</script>