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/www/website_93b53270/ |
Upload File : |
<?php include('header.php');
// print_r($_SESSION['cart']);
// echo "<br>"; ?>
<link rel="stylesheet" type="text/css" href="css/multistep.css" />
<style type="text/css">
a{
color: black;
text-decoration: none;
}
.month_year a {
text-decoration: none;
}
#current-month-year {
font-size: 0.9em;
}
#calendar-days .see-date {
display: inline-block;
width: 14%;
text-align: center;
margin: 2px;
}
#calendar-days .see-date .click-date {
cursor: pointer;
}
#calendar-days .see-date.disabled {
opacity: 0.5;
pointer-events: none;
}
.current-day {
background-color: #d3d3d3;
}
.disabled-date {
opacity: 0.5;
pointer-events: none;
}
.my-cart-img {
width: 65px;
}
.my-new-cart-text {
text-decoration: none;
}
.radio-buttons_3 .card {
padding: 10px;
}
#qty {
display: block !important;
margin-left: 10px;
width: 100px;
}
@media screen and (max-width: 430px) {
.radio-btn_3 {
padding: 0;
}
.radio-btn_3 .hobbies-icon h5 {
font-size: 11px;
}
#signUpForm input {
padding: 5px;
}
.hobbies-icon h6,
.hobbies-icon h5,
.hobbies-icon p,
.hobbies-icon a {
font-size: 10px !important;
}
}
.hobbies-icon img {
width: 30px;
}
</style>
<section class="appointment">
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="signUpForm" method="POST" action="">
<!-- start step indicators -->
<div class="form-header d-flex mb-4">
<span class="stepIndicator">Cart Details</span>
<span class="stepIndicator">Appointment</span>
<span class="stepIndicator">Payment</span>
</div>
<!-- end step indicators -->
<!-- step one -->
<div class="step point1">
<div class="car-dtl smoky p-20 bshadow br-5 mt-30">
<div class="row">
<?php if (!empty($_SESSION["cart"])) { ?>
<div class="col-md-6">
<div class="heading">
<h5>What does your</h5>
<h3>car <span class="fw-normal"></span> <span class="grey-20">need?</span></h3>
</div>
</div>
<div class="col-md-6">
<div class="land-flex">
<?php if (isset($_SESSION['brand_id']) && isset($_SESSION['variant_id']) && isset($_SESSION['model_year_id'])) {
$row01_brand = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM brand_tbl WHERE status=1 AND id='" . $_SESSION['brand_id'] . "'"));
?>
<div>
<div class="eng-model mx-3">
<?php
$row01_variant = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM variant_tbl WHERE status=1 AND id='" . $_SESSION['variant_id'] . "'"));
$row01_model_year = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM model_date_tbl WHERE status=1 AND id='" . $_SESSION['model_year_id'] . "'"));
?>
<h3 class="text-red fw-bold text-center"><?= $row01_brand['name'] ?>
</h3>
<p><span>Variant:</span> <?= $row01_variant['title'] ?> |
<span>Year:</span> <?= $row01_model_year['title'] ?>
</p>
</div>
</div>
<div class="cart-model-img">
<img src="<?= $base_url ?>images/Upload/brand/<?= $row01_brand['image1'] ?>"
class="img-fluid">
</div>
<?php } ?>
</div>
</div>
<!-- <div class="col-md-12 mb-4">
<img src="<?= $base_url ?>img/appointment-img.svg" class="img-fluid w-100" alt="cart backgrond">
</div> -->
<?php } else { ?>
<div class="heading">
<h3 class="text-center">Cart is empty! </h3>
</div>
<?php } ?>
</div>
<?php if (!empty($_SESSION["cart"])) { ?>
<div class="radio-buttons_3 mt-3">
<div class="row">
<div class="col-lg-9">
<?php
if (isset($_SESSION['cart'])) {
$total = 0;
$grndTotalUsd = 0;
foreach ($_SESSION['cart'] as $productId => $pro_cart) {
$fetch_row = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM product_tbl WHERE id='$productId'"));
$usd_dsc_price = $fetch_row['price'];
$subtotal_usd = $pro_cart['quantity'] * $usd_dsc_price;
$price = $pro_cart['price'];
$sevi_id = $pro_cart['sevi_id'];
$oil_id = $pro_cart['oil_id'];
$parts = $pro_cart['parts'];
if ($fetch_row['service_id'] != 0 && !empty($fetch_row['service_id'])) {
$fech_serv = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM sevice_tbl WHERE id='".$fetch_row['service_id']."'"));
$fetch_oil = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM oil_tbl WHERE id='$oil_id'"));
$fetch_part = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM part_tbl WHERE cat_id='" . $fetch_row['service_id'] . "'"));
} else {
$fech_serv = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM product_product_sevice_tbl WHERE id='".$fetch_row['cat_id']."'"));
$fetch_oil = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM oil_pro_tbl WHERE id='$oil_id'"));
$fetch_part = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM part_pro_tbl WHERE cat_id='" . $fetch_row['cat_id'] . "'"));
}
$total = $pro_cart['total'];
$grndTotalUsd += $total;
?>
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-md-2 col-4 pe-0 ph-pe">
<a href="<?=($fetch_row['cat_id']!=0)? $base_url.$fech_serv['slug'].'-prod.php':$base_url.$fech_serv['slug'].'-serv.php'?>"><img src="<?= $base_url ?>images/Upload/product/<?= $fetch_row['image1'] ?>"
class="img-fluid rounded-start my-cart-img"></a>
</div>
<div class="col-md-5 col-4 ps-0 ph-ps">
<label class="custom-radio_3">
<!-- <input type="radio" name="radio3" checked> -->
<span class="rounded-end">
<div class="hobbies-icon mt-3">
<a href="<?=($fetch_row['cat_id']!=0)? $base_url.$fech_serv['slug'].'-prod.php':$base_url.$fech_serv['slug'].'-serv.php'?>">
<h6 class="card-title mb-2">
<?= $fetch_row['title'] ?>
</h6>
</a>
<!-- <p class="card-text mb-0"><?= $fetch_row['short_description'] ?></p> -->
<a class="remove-cart"
data-id="<?= $productId ?>"><!-- <img src="img/hand-bag.svg" class="img-fluid w-16"> -->
<i class="bi bi-x-circle-fill text-red"></i></a>
</div>
</span>
</label>
</div>
<div class="col-lg-5 col-4 hobbies-icon text-center">
<?php if (!empty($sevi_id) && !empty($parts)) {
if($oil_id!=0){
?>
<p class="card-text mb-0">
<strong>Price : </strong>AED <?=$usd_dsc_price?><br>
</p>
<p class="card-text mb-0">
<strong><?= $fetch_oil['title'] ?></strong> , <?= $fetch_oil['mobil_code'] ?> , AED <?= $fetch_oil['price'] ?>
</p>
<?php } ?>
<p class="card-text mb-0">
<strong><?= $fetch_part['title'] ?></strong> , AED <?= $fetch_part['price'] ?>
</p>
<?php } ?>
<a class="text-black my-new-cart-text"><img
src="img/hand-bag.svg" class="img-fluid w-16">
AED
<?= $total ?></a>
</div>
</div>
</div>
</div>
<?php }
} ?>
</div>
<div class="col-lg-4 d-none">
<div class="card">
<h1>Cart Totals</h1>
<div class="d-flex" style="justify-content:space-between">
<h5>Subtotal: </h5>
<h6>325346745</h6>
</div>
<div class="d-flex" style="justify-content:space-between">
<h5>Shipping: </h5>
<h6>325346745</h6>
</div>
<div class="d-flex" style="justify-content:space-between">
<h5>Vat: </h5>
<h6>325346745</h6>
</div>
<div class="d-flex" style="justify-content:space-between">
<h6>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </h6>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-3" style=" display:flex; justify-content: end;">
<div class="card bg-red px-3 py-3">
<div class="d-flex text-white">
<div><strong>Total :</strong></div>
<div><strong> <?= $grndTotalUsd ?></strong></div>
</div>
</div>
</div>
<!-- start previous / next buttons -->
<div class="form-footer d-flex">
<a class="btn btn-light" href="<?= $base_url ?>products.php"
style="color: #000; font-weight: 700; align-content: center;"><i class="bi bi-chevron-left"></i>
Back</a>
<?php if (!isset($_SESSION['user_id'])) { ?>
<button type="button" id="nextBtn" onclick="handleClick();">Continue</button>
<?php } else { ?>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Continue</button>
<?php } ?>
</div>
<!-- end previous / next buttons -->
</div>
<?php } ?>
</div>
</div>
<?php $appointment_row = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM appointment_tbl WHERE id=1")); ?>
<!-- step two -->
<div class="step point2">
<div class="car-dtl smoky p-20 bshadow br-5 mt-30">
<div class="row">
<div class="col-md-6 bdr-right">
<div class="heading">
<h5>Select your</h5>
<h3>Appointment</h3>
</div>
<div class="card bshadow border-0 mb-3">
<div class="row g-0">
<div class="col-md-4 col-4">
<img src="img/service-car.svg" class="img-fluid rounded-start">
</div>
<div class="col-md-8 col-8">
<div class="card-body">
<h5 class="card-title">Car Pickup</h5>
<input type="radio" class="Car-Pickup" id="CPickup" name="radio4"
value="0" checked>
<span for="CPickup">I will drive my car</span> <br>
<input type="radio" class="Car-Pickup" id="Car-Pickup" name="radio4"
value="<?= $appointment_row['valet_driver1'] ?>">
<span for="Car-Pickup">Valet driver - AED
<?= $appointment_row['valet_driver1'] ?></span> <br>
<input type="radio" class="Car-Pickup" id="CarPickup" name="radio4"
value="<?= $appointment_row['tow_truck1'] ?>">
<span for="CarPickup">Tow Truck - AED
<?= $appointment_row['tow_truck1'] ?></span>
</div>
</div>
</div>
</div>
<div class="card bshadow border-0 mb-3">
<div class="row g-0">
<div class="col-md-4 col-4">
<img src="img/service-car.svg" class="img-fluid rounded-start">
</div>
<div class="col-md-8 col-8">
<div class="card-body">
<h5 class="card-title">Car Drop-off</h5>
<input type="radio" class="Drop-off" id="Drop-off" name="radio1"
value="0" checked> <span id="Drop-off">I will drive my car
</span> <br>
<input type="radio" class="Drop-off" id="Valet" name="radio1"
value="<?= $appointment_row['valet_driver2'] ?>">
<span for="Valet">Valet driver - AED
<?= $appointment_row['valet_driver2'] ?> </span> <br>
<input type="radio" class="Drop-off" id="Tow" name="radio1"
value="<?= $appointment_row['tow_truck2'] ?>">
<span far="Tow">Tow Truck - AED
<?= $appointment_row['tow_truck2'] ?>
</span>
</div>
</div>
</div>
</div>
<!-- <p class="red-note">*Your car's insurance applies, refer to T&Cs</p> -->
<!-- <a href="#" class="continue-fill">continue</a> -->
<div class="card bshadow like-buton p-20 border-0 mb-3 mt-4">
<div class="row">
<div class="col-md-12">
<div class="flex-justify ph-flex-column">
<div class="heading">
<!--<a class="instant-delivery"><h5 class="fw-bold">Instant <span class="text-red">Delivery</span></h5></a>-->
<input type="hidden" id="instant" name="instant" value="0">
<a class="instant-delivery"><span class="fw-bold"
style="font-size: 1.25rem;">Instant <span
class="text-red">Delivery</span></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="card bshadow p-20 border-0 mb-3 mt-4 on-check">
<div class="row">
<div class="col-md-12">
<div class="flex-justify ph-flex-column">
<div class="heading">
<h5 class="fw-bold">Choose a <span class="text-red">Day</span>
</h5>
</div>
<div class="month_year">
<a class="calendar fs-5" id="calendar-toggle">
<i class="btn btn-light fs-5 text-danger bi bi-chevron-left"
id="prev-month"></i>
<span class="text-black" id="current-month-year">July,
2024</span>
<i class="btn btn-light fs-5 text-danger bi bi-chevron-right"
id="next-month"></i>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="choose-date mt-3" id="calendar-days">
<!-- Days will be dynamically inserted here -->
</div>
</div>
</div>
</div>
<div class="card bshadow p-20 border-0 mb-3 mt-4 on-check">
<div class="row">
<div class="col-md-12">
<div class="flex-justify">
<div class="heading">
<h5 class="fw-bold">Choose a <span class="text-red">Time</span>
</h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="choose-time mt-3">
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">8:00 AM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">9:00 AM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6" checked>
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">9:30 AM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">10:00 AM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">10:30 AM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">11:00 AM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">11:30 AM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">12:00 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">12:30 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">1:00 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">1:30 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">2:00 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">2:30 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">3:00 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">3:30 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">4:00 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">4:30 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">5:00 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">5:30 PM</p>
</div>
</span>
</label>
<label class="see-time">
<input type="radio" name="radio6">
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">6:30 PM</p>
</div>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="land-flex mb-3">
<?php if (isset($_SESSION['brand_id']) && isset($_SESSION['variant_id']) && isset($_SESSION['model_year_id'])) { ?>
<div>
<div class="eng-model mx-3">
<?php
$row01_variant = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM variant_tbl WHERE status=1 AND id='" . $_SESSION['variant_id'] . "'"));
$row01_model_year = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM model_date_tbl WHERE status=1 AND id='" . $_SESSION['model_year_id'] . "'"));
$row01_brand = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM brand_tbl WHERE status=1 AND id='" . $_SESSION['brand_id'] . "'"));
?>
<h3 class="text-red fw-bold text-center"><?= $row01_brand['name'] ?>
</h3>
<p><span>Variant:</span> <?= $row01_variant['title'] ?> |
<span>Year:</span> <?= $row01_model_year['title'] ?>
</p>
</div>
</div>
<div class="cart-model-img">
<img src="<?= $base_url ?>images/Upload/brand/<?= $row01_brand['image1'] ?>"
class="img-fluid">
</div>
<?php } ?>
</div>
<div class="row">
<div class="col-md-12">
<div class="bshadow bg-white br-10 p-20">
<div class="bg-red bshadow br-5 p-20 text-white">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Name">Name</label>
<input type="text" name="name" id="name_user"
class="form-control mb-3"
placeholder="Enter your name" required>
<div id="name_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Phone">Phone</label>
<input type="number" name="phone" id="phone_user"
maxlength="10" class="form-control mb-3"
placeholder="Enter your phone" required>
<div id="phone_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="form-label" for="Email">Email</label>
<input type="email" name="email" id="email_user"
class="form-control mb-3"
placeholder="Enter your email" required>
<div id="email_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Country">Country</label>
<input type="text" name="country" id="country_user"
class="form-control mb-3"
placeholder="Enter your country" required>
<div id="country_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="state">State</label>
<input type="text" name="state" id="state_user"
class="form-control mb-3"
placeholder="Enter your state" required>
<div id="state_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="City">City</label>
<input type="text" name="city" id="city_user"
class="form-control mb-3"
placeholder="Enter your city">
<div id="city_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Zip Code">Zip
Code</label>
<input type="number" name="postcode" id="postcode_user"
maxlength="10" class="form-control mb-3"
placeholder="Enter your zip Code" required>
<div id="postcode_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="form-label" for="Address">Address</label>
<textarea id="address_user" name="address"
class="form-control mb-3" rows="4"
placeholder="Enter your address"
required></textarea>
<div id="address_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
</div>
</div>
<div class="flex-justify billing mx-3 mt-4">
<div>
<p>Minor Service</p>
</div>
<div>
<p>AED <?= $appointment_row['minor_charg'] ?></p>
</div>
</div>
<div class="flex-justify billing mx-3">
<div>
<p>Labor Charges</p>
</div>
<div>
<p>AED <?= $appointment_row['labor_charg'] ?></p>
</div>
</div>
<div class="flex-justify billing bdr-y mx-3">
<div>
<p class="fw-bold mb-0">Subtotal Price</p>
</div>
<div>
<p class="fw-bold mb-0">AED
<?= $appointment_row['minor_charg'] + $appointment_row['labor_charg'] ?>
</p>
</div>
</div>
<div class="flex-justify billing mx-3 mt-4 result_pickup">
</div>
<div class="flex-justify billing mx-3 result_drop">
</div>
<div class="flex-justify billing bdr-y mx-3">
<div>
<p class="fw-bold mb-0">Final Subtotal Price</p>
</div>
<div>
<p class="fw-bold mb-0">AED <span
class="result_pickup_value result_drop_value"><?= $grndTotalUsd1 = $grndTotalUsd + $appointment_row['minor_charg'] + $appointment_row['labor_charg'] ?></span>
</p>
</div>
</div>
<div class="flex-justify billing mx-3 mt-3 my-2">
<div>
<p class="mb-0">VAT <?= $appointment_row['vat'] ?>%</p>
</div>
<div>
<?php $percentage = $grndTotalUsd1 * $appointment_row['vat'] / 100; ?>
<p class="mb-0">AED <span
class="vat_value vat1_value"><?= $percentage ?></span>
</p>
</div>
</div>
<div class="flex-justify billing bdr-y mx-3 mt-3 ph-flex-column">
<div>
<p class="fw-bold fs-24">Total Amount</p>
</div>
<div>
<p class="fw-bold fs-24">AED <span
class="result_grand_value result_grand1_value"><?= $grndTotalUsd1 = $grndTotalUsd + $appointment_row['minor_charg'] + $appointment_row['labor_charg'] ?></span>
</p>
</div>
</div>
</div>
<div class="money-gurantee">
<div class="row">
<div class="col-md-12">
<!-- <p>7 days Money Back Guarantee</p> -->
<div class="payment-cards mt-3">
<div class="mx-1">
<img src="<?= $base_url ?>images/Upload/logo/<?= $rows_website['payment1'] ?>"
class="img-fluid">
</div>
<div class="mx-1">
<img src="<?= $base_url ?>images/Upload/logo/<?= $rows_website['payment2'] ?>"
class="img-fluid">
</div>
<!-- <div>
<img src="img/mastercard.svg" class="img-fluid">
</div>
<div>
<img src="img/apple-pay.svg" class="img-fluid">
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-footer d-flex">
<button type="button" id="prevBtn" onclick="nextPrev(-1)"><i
class="bi bi-chevron-left"></i> Back</button>
<button type="button" class="nextBtn_submit" id="nextBtn"
onclick="nextPrev(1)">Continue</button>
</div>
</div>
</div>
<!-- step three -->
<div class="step point2">
<div class="car-dtl smoky p-20 bshadow br-5 mt-30">
<div class="row">
<div class="col-md-6 bdr-right">
<div class="heading">
<h5>Payment</h5>
<h3>Details</h3>
</div>
<div class="row">
<div class="col-md-12">
<div class="bg-red bshadow br-5 p-20 text-white text-center pay-ttl">
<h5 class="mb-0">Total Amount : AED <span
class="result_grand_value_p result_grand1_value_p"><?= $grndTotalUsd1 = $grndTotalUsd + $appointment_row['minor_charg'] + $appointment_row['labor_charg'] ?></span>
</h5>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
<input type="radio" name="radio7" checked> Credit Card
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p class="input-title">Card Holder Name</p>
<input type="text" name="name" class="theme-input"
placeholder="Enter your name">
<p class="input-title">Card Number</p>
<input type="text" name="number" class="theme-input"
placeholder="Enter your Card number">
<div class="row">
<div class="col-md-6">
<p class="input-title">Expiration</p>
<input type="text" name="expiration"
class="theme-input" placeholder="MM/YYYY">
</div>
<div class="col-md-6">
<p class="input-title">CVV</p>
<input type="text" name="cvv" class="theme-input"
placeholder="Enter your CVV">
</div>
</div>
<p class="input-title">Country</p>
<select class="theme-input" name="country">
<option>United Arab Emirates</option>
</select>
<p class="red-note">By providing your card information, you
allow KAR to charge your card for future payments in
accordance with their terms.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
<input type="radio" name="radio8" checked> Apple Pay,
Google Pay
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
apple pay google pay
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
<input type="radio" name="radio9" checked> Tabby
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
tabby
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="land-flex mb-3">
<?php if (isset($_SESSION['brand_id']) && isset($_SESSION['variant_id']) && isset($_SESSION['model_year_id'])) { ?>
<div>
<div class="eng-model mx-3">
<?php
$row01_variant = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM variant_tbl WHERE status=1 AND id='" . $_SESSION['variant_id'] . "'"));
$row01_model_year = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM model_date_tbl WHERE status=1 AND id='" . $_SESSION['model_year_id'] . "'"));
$row01_brand = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM brand_tbl WHERE status=1 AND id='" . $_SESSION['brand_id'] . "'"));
?>
<h3 class="text-red fw-bold text-center"><?= $row01_brand['name'] ?>
</h3>
<p><span>Variant:</span> <?= $row01_variant['title'] ?> |
<span>Year:</span> <?= $row01_model_year['title'] ?>
</p>
</div>
</div>
<div class="cart-model-img">
<img src="<?= $base_url ?>images/Upload/brand/<?= $row01_brand['image1'] ?>"
class="img-fluid">
</div>
<?php } ?>
</div>
<div class="row">
<div class="col-md-12">
<div class="bshadow bg-white br-10 p-20">
<div class="bg-red bshadow br-5 p-20 text-white">
<!-- <div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Name">Name</label>
<input type="text" name="name" class="form-control mb-3 name_user" required readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Phone">Phone</label>
<input type="number" name="phone" maxlength="10" class="form-control mb-3 phone_user" placeholder="Enter your phone" required readonly>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="form-label" for="Email">Email</label>
<input type="email" name="email" class="form-control mb-3 email_user" placeholder="Enter your email" required readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Country">Country</label>
<input type="text" name="country" class="form-control mb-3 country_user" placeholder="Enter your country" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="state">State</label>
<input type="text" name="state" class="form-control mb-3 state_user" placeholder="Enter your state" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="City">City</label>
<input type="text" name="city" class="form-control mb-3 city_user" placeholder="Enter your city">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Zip Code">Zip Code</label>
<input type="number" name="postcode" maxlength="10" class="form-control mb-3 postcode_user" placeholder="Enter your zip Code" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="form-label" for="Address">Address</label>
<textarea name="address" class="form-control mb-3 address_user" rows="4" placeholder="Enter your address" required></textarea>
</div>
</div>
</div> -->
<h6>Minor Service</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
vulputate ex acLorem ipsum dolor sit amet, consectetur
adipiscing elit. </p>
<h5 class="price">AED <span
class="result_grand11_value result_grand2_value"><?= $grndTotalUsd1 = $grndTotalUsd + $appointment_row['minor_charg'] + $appointment_row['labor_charg'] ?></span>
</h5>
</div>
<div class="flex-justify billing mx-3 mt-4">
<div>
<p>Minor Service</p>
</div>
<div>
<p>AED <?= $appointment_row['minor_charg'] ?></p>
</div>
</div>
<div class="flex-justify billing mx-3">
<div>
<p>Labor Charges</p>
</div>
<div>
<p>AED <?= $appointment_row['labor_charg'] ?></p>
</div>
</div>
<div class="flex-justify billing bdr-y mx-3">
<div>
<p class="fw-bold mb-0">Subtotal Price</p>
</div>
<div>
<p class="fw-bold mb-0">AED
<?= $appointment_row['minor_charg'] + $appointment_row['labor_charg'] ?>
</p>
</div>
</div>
<!-- pickup and drop car price section start -->
<div class="flex-justify billing mx-3 mt-4 result_pickup_p">
</div>
<div class="flex-justify billing mx-3 result_drop_p">
</div>
<!-- pickup and drop car price section end -->
<div class="flex-justify billing bdr-y mx-3">
<div>
<p class="fw-bold mb-0">Final Subtotal Price</p>
</div>
<div>
<p class="fw-bold mb-0">AED <span
class="result_pickup_value_p result_drop_value_p"></span>
</p>
<!-- </?=$grndTotalUsd1=$grndTotalUsd+$appointment_row['minor_charg']+$appointment_row['labor_charg']?> -->
</div>
</div>
<div class="flex-justify billing mx-3 mt-3 my-2">
<div>
<p class="mb-0">VAT <?= $appointment_row['vat'] ?>%</p>
</div>
<div>
<?php $percentage = $grndTotalUsd1 * $appointment_row['vat'] / 100; ?>
<p class="mb-0">AED <span
class="vat_value_p vat1_value_p"><?= $percentage ?></span>
</p>
</div>
</div>
<div class="flex-justify billing bdr-y mx-3 mt-3 ph-flex-column">
<div>
<p class="fw-bold fs-24">Total Amount</p>
</div>
<div>
<p class="fw-bold fs-24"> AED <span
class="result_grand22_value result_grand3_value"><?= $grndTotalUsd1 = $grndTotalUsd + $appointment_row['minor_charg'] + $appointment_row['labor_charg'] ?></span>
</p>
</div>
</div>
</div>
<div class="money-gurantee">
<div class="row">
<div class="col-md-12">
<!-- <p>7 days Money Back Guarantee</p> -->
<div class="payment-cards mt-3">
<div class="mx-1">
<img src="<?= $base_url ?>images/Upload/logo/<?= $rows_website['payment1'] ?>"
class="img-fluid">
</div>
<div class="mx-1">
<img src="<?= $base_url ?>images/Upload/logo/<?= $rows_website['payment2'] ?>"
class="img-fluid">
</div>
<!-- <div>
<img src="img/mastercard.svg" class="img-fluid">
</div>
<div>
<img src="img/apple-pay.svg" class="img-fluid">
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-footer d-flex">
<button type="button" id="prevBtn" onclick="nextPrev(-1)"><i
class="bi bi-chevron-left"></i> Back</button>
<button type="submit" name="order_place" id="nextBtn">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/multistep.js"></script>
<?php include('footer.php'); ?>
<script>
$(document).ready(function () {
$(".nextBtn_submit").on('click', function () {
let name_val = $("#name_user").val();
let phone_val = $("#phone_user").val();
let email_val = $("#email_user").val();
let country_val = $("#country_user").val();
let state_val = $("#state_user").val();
let city_val = $("#city_user").val();
let postcode_val = $("#postcode_user").val();
let address_val = $("#address_user").val();
// Clear any previous error messages
$("#name_error").html("");
$("#phone_error").html("");
$("#email_error").html("");
$("#country_error").html("");
$("#state_error").html("");
$("#city_error").html("");
$("#postcode_error").html("");
$("#address_error").html("");
// Validate each field
if (name_val == '') {
$("#name_error").html("This is Required.");
}
if (phone_val == '') {
$("#phone_error").html("This is Required.");
}
if (email_val == '') {
$("#email_error").html("This is Required.");
}
if (country_val == '') {
$("#country_error").html("This is Required.");
}
if (state_val == '') {
$("#state_error").html("This is Required.");
}
if (city_val == '') {
$("#city_error").html("This is Required.");
}
if (postcode_val == '') {
$("#postcode_error").html("This is Required.");
}
if (address_val == '') {
$("#address_error").html("This is Required.");
}
});
});
</script>
<script>
$(document).ready(function () {
$(".like-buton").click(function () {
var $input = $("#instant");
if ($(this).hasClass("active")) {
$input.val(0);
} else {
$input.val(1);
}
$(".on-check").toggle();
$(this).toggleClass("active");
});
});
</script>
<script>
function handleClick() {
if (window.confirm('Please first login!')) {
window.location.href = 'login.php';
}
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Get references to the input fields of the first set
var name_user = document.querySelector("#name_user");
var email_user = document.querySelector("#email_user");
var phone_user = document.querySelector("#phone_user");
var country_user = document.querySelector("#country_user");
var state_user = document.querySelector("#state_user");
var city_user = document.querySelector("#city_user");
var postcode_user = document.querySelector("#postcode_user");
var address_user = document.querySelector("#address_user");
// Function to update second set of input fields
function updateSecondSet() {
document.querySelector(".name_user").value = name_user.value;
document.querySelector(".email_user").value = email_user.value;
document.querySelector(".phone_user").value = phone_user.value;
document.querySelector(".country_user").value = country_user.value;
document.querySelector(".state_user").value = state_user.value;
document.querySelector(".city_user").value = city_user.value;
document.querySelector(".postcode_user").value = postcode_user.value;
document.querySelector(".address_user").value = address_user.value;
}
// Add input event listeners to the first set of input fields
name_user.addEventListener("input", updateSecondSet);
email_user.addEventListener("input", updateSecondSet);
phone_user.addEventListener("input", updateSecondSet);
country_user.addEventListener("input", updateSecondSet);
state_user.addEventListener("input", updateSecondSet);
city_user.addEventListener("input", updateSecondSet);
postcode_user.addEventListener("input", updateSecondSet);
address_user.addEventListener("input", updateSecondSet);
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const calendarToggle = document.getElementById('calendar-toggle');
const currentMonthYear = document.getElementById('current-month-year');
const calendarDays = document.getElementById('calendar-days');
let currentDate = new Date();
function updateCalendar() {
const month = currentDate.getMonth(); // Current month
const year = currentDate.getFullYear(); // Current year
const firstDay = new Date(year, month, 1).getDay(); // Day of the week for the 1st day of the month
const daysInMonth = new Date(year, month + 1, 0).getDate(); // Number of days in the month
const today = new Date();
today.setHours(0, 0, 0, 0); // Remove time part
// Update month and year display
const monthNames = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
currentMonthYear.textContent = `${monthNames[month]} , ${year}`;
// Generate days
let daysHtml = '';
let activeDaySet = false;
let activeDayCount = 0;
// Create empty days for alignment
for (let i = 0; i < firstDay; i++) {
daysHtml += '<label class="see-date"><span class="click-date"><div class="hobbies-icon"><p class="poppin mb-0 mt-0"></p><h5></h5></div></span></label>';
}
// Add days for the current month
for (let day = 1; day <= daysInMonth; day++) {
const dayDate = new Date(year, month, day);
const isPastOrToday = dayDate < today || (dayDate.toDateString() === today.toDateString());
if (isPastOrToday) {
daysHtml += `
<label class="see-date disabled-date">
<input type="radio" name="radio5" disabled>
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">${dayDate.toLocaleDateString('en-US', { weekday: 'short' })}</p>
<h5>${day}</h5>
</div>
</span>
</label>
`;
} else {
activeDayCount++;
let isActive = '';
// Set the second available date as active
if (!activeDaySet && activeDayCount === 1) {
isActive = 'checked';
activeDaySet = true;
}
daysHtml += `
<label class="see-date">
<input type="radio" name="radio5" ${isActive}>
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">${dayDate.toLocaleDateString('en-US', { weekday: 'short' })}</p>
<h5>${day}</h5>
</div>
</span>
</label>
`;
}
}
calendarDays.innerHTML = daysHtml;
}
function changeMonth(offset) {
currentDate.setMonth(currentDate.getMonth() + offset);
updateCalendar();
}
document.getElementById('prev-month').addEventListener('click', function () {
changeMonth(-1);
});
document.getElementById('next-month').addEventListener('click', function () {
changeMonth(1);
});
updateCalendar();
});
</script>
<script type="text/javascript">
let grndTotalUsd = parseInt(<?= json_encode($grndTotalUsd) ?>, 10);
let minorCharg = parseInt(<?= json_encode($appointment_row['minor_charg']) ?>, 10);
let laborCharg = parseInt(<?= json_encode($appointment_row['labor_charg']) ?>, 10);
let vat = parseInt(<?= json_encode($appointment_row['vat']) ?>, 10);
let grndTotalUsd1 = grndTotalUsd + minorCharg + laborCharg;
</script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
// Handling car pick-up
const radioButtonsPickup = document.querySelectorAll("input[name='radio4']");
const resultDivPickup = document.querySelector(".result_pickup");
const resultPickup = document.querySelector(".result_pickup_value");
const resultgrand = document.querySelector(".result_grand_value");
const resultgrand11 = document.querySelector(".result_grand11_value");
const resultgrand22 = document.querySelector(".result_grand22_value");
const vat_value = document.querySelector(".vat_value");
const resultDivPickup_p = document.querySelector(".result_pickup_p");
const resultPickup_p = document.querySelector(".result_pickup_value_p");
const resultgrand_p = document.querySelector(".result_grand_value_p");
const resultgrand11_p = document.querySelector(".result_grand11_value_p");
const resultgrand22_p = document.querySelector(".result_grand22_value_p");
const vat_value_p = document.querySelector(".vat_value_p");
// Handling car drop-off
const radioButtonsDrop = document.querySelectorAll("input[name='radio1']");
const resultDivDrop = document.querySelector(".result_drop");
const resultDrop = document.querySelector(".result_drop_value");
const resultgrand1 = document.querySelector(".result_grand1_value");
const resultgrand2 = document.querySelector(".result_grand2_value");
const resultgrand3 = document.querySelector(".result_grand3_value");
const vat1_value = document.querySelector(".vat1_value");
const resultDivDrop_p = document.querySelector(".result_drop_p");
const resultDrop_p = document.querySelector(".result_drop_value_p");
const resultgrand1_p = document.querySelector(".result_grand1_value_p");
const resultgrand2_p = document.querySelector(".result_grand2_value_p");
const resultgrand3_p = document.querySelector(".result_grand3_value_p");
const vat1_value_p = document.querySelector(".vat1_value_p");
function updatePickup() {
const selectedPickup = document.querySelector("input[name='radio4']:checked");
if (!selectedPickup) return;
const selectedValue = parseFloat(selectedPickup.value) || 0;
const selectedDro = document.querySelector("input[name='radio1']:checked");
const selectedDroValue = selectedDro ? parseFloat(selectedDro.value) || 0 : 0;
const selectedText = selectedPickup.nextElementSibling.textContent.trim();
let displayTextContent = "I will drive my car";
let displayText = "FREE";
let displayT = grndTotalUsd1 + selectedDroValue;
if (selectedValue > 0) {
const parts = selectedText.split(" - AED ");
const serviceText = parts[0];
displayTextContent = serviceText;
displayText = "AED " + selectedValue;
displayT = grndTotalUsd1 + selectedValue + selectedDroValue;
}
resultDivPickup.innerHTML = `
<div>
<p>Car Pick-up</p>
</div>
<div>
<p class="fs-12 fw-bold">${displayTextContent}</p>
</div>
<div>
<p>${displayText}</p>
</div>
`;
resultDivPickup_p.innerHTML = `
<div>
<p>Car Pick-up</p>
</div>
<div>
<p class="fs-12 fw-bold">${displayTextContent}</p>
</div>
<div>
<p>${displayText}</p>
</div>
`;
resultPickup.textContent = displayT;
resultPickup_p.textContent = displayT;
const vatAmount = (displayT * vat) / 100;
const grandTotal = displayT + vatAmount;
vat_value.textContent = vatAmount;
vat_value_p.textContent = vatAmount;
resultgrand.textContent = grandTotal;
resultgrand11.textContent = grandTotal;
resultgrand22.textContent = grandTotal;
resultgrand_p.textContent = grandTotal;
resultgrand11_p.textContent = grandTotal;
resultgrand22_p.textContent = grandTotal;
}
function updateDrop() {
const selectedDrop = document.querySelector("input[name='radio1']:checked");
if (!selectedDrop) return;
const selectedValue = parseFloat(selectedDrop.value) || 0;
const selectedPic = document.querySelector("input[name='radio4']:checked");
const selectedPicValue = selectedPic ? parseFloat(selectedPic.value) || 0 : 0;
const selectedText = selectedDrop.nextElementSibling.textContent.trim();
let displayTextContent = "I will drive my car";
let displayText = "FREE";
let displayT = grndTotalUsd1 + selectedPicValue;
if (selectedValue > 0) {
const parts = selectedText.split(" - AED ");
const serviceText = parts[0];
displayTextContent = serviceText;
displayText = "AED " + selectedValue;
displayT = grndTotalUsd1 + selectedValue + selectedPicValue;
}
resultDivDrop.innerHTML = `
<div>
<p>Car Drop-off</p>
</div>
<div>
<p class="fs-12 fw-bold">${displayTextContent}</p>
</div>
<div>
<p>${displayText}</p>
</div>
`;
resultDivDrop_p.innerHTML = `
<div>
<p>Car Drop-off</p>
</div>
<div>
<p class="fs-12 fw-bold">${displayTextContent}</p>
</div>
<div>
<p>${displayText}</p>
</div>
`;
resultDrop.textContent = displayT;
resultDrop_p.textContent = displayT;
const vatAmount = (displayT * vat) / 100;
const grandTotal = displayT + vatAmount;
vat1_value.textContent = vatAmount;
vat1_value_p.textContent = vatAmount;
resultgrand1.textContent = grandTotal;
resultgrand2.textContent = grandTotal;
resultgrand3.textContent = grandTotal;
resultgrand1_p.textContent = grandTotal;
resultgrand2_p.textContent = grandTotal;
resultgrand3_p.textContent = grandTotal;
}
// Attach event listeners
radioButtonsPickup.forEach(radio => {
radio.addEventListener("click", updatePickup);
});
radioButtonsDrop.forEach(radio => {
radio.addEventListener("click", updateDrop);
});
// Trigger click event on the initially checked radio button to set initial result
const initialPickup = document.querySelector("input[name='radio4']:checked");
if (initialPickup) updatePickup();
const initialDrop = document.querySelector("input[name='radio1']:checked");
if (initialDrop) updateDrop();
});
</script>