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 include('header.php');
// print_r($_SESSION['cart']);
// print_r($_SESSION['user_id']);
// print_r($_SESSION['coupon']);
// echo "<br>";
?>
<link rel="stylesheet" type="text/css" href="css/multistep.css" />
<script src="https://js.stripe.com/v3/"></script>
<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;
}
#card-element {
background: #ffffff;
padding: 15px;
border: 2px solid #4CAF50;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 15px auto;
}
#payment-result {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
color: #333;
text-align: center;
}
.coupon-container {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.coupon-input {
width: 380px;
height: 46px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0 12px;
font-size: 14px;
color: #555;
outline: none;
transition: all 0.3s ease;
}
.coupon-input::placeholder {
color: #aaa;
}
.coupon-input:focus {
border-color: #e2000f;
/* orange highlight on focus */
}
.apply-btn {
height: 40px;
background-color: #e2000f;
color: white;
border: none;
border-radius: 4px;
padding: 0 20px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.apply-btn:hover {
background-color: #e2000f;
}
@media (max-width: 480px) {
.coupon-container {
flex-direction: column;
align-items: stretch;
}
.apply-btn {
width: 100%;
}
.coupon-input {
width: 100%;
}
}
</style>
<section class="appointment">
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="signUpForm" method="POST" action="create-checkout-session">
<!-- 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-12">
<?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" style="font-size: 20px;"></i></a>
</div>
</span>
</label>
</div>
<div class="col-lg-5 col-4 hobbies-icon text-center">
<p class="card-text mb-0">
<strong>Price : </strong>AED <?= $usd_dsc_price ?><br>
</p>
<?php if (!empty($sevi_id) || !empty($parts)) {
if ($oil_id != 0) {
?>
<p class="card-text mb-0">
<strong><?= $fetch_oil['title'] ?></strong> , <?= $fetch_oil['mobil_code'] ?> , AED <?= $fetch_oil['price'] ?><i class="oil_remove ri-delete-bin-line" data-prod_id="<?=$productId?>" data-oil_id="<?= $oil_id ?>" style="color: red; font-size: 15px; padding: 5px;"></i>
</p>
<?php }
if ($fetch_row['service_id'] != 0 && !empty($fetch_row['service_id'])) {
foreach ($parts as $part) {
$fetch_part_query = mysqli_query($conn, "SELECT * FROM part_tbl WHERE id='$part'");
while ($fetch_part = mysqli_fetch_assoc($fetch_part_query)) {
?>
<p class="card-text mb-0">
<strong><?= $fetch_part['title'] ?></strong> , AED <?= $fetch_part['price'] ?><i class="part_remove ri-delete-bin-line" data-prod_id="<?=$productId?>" data-part_id="<?= $part ?>" style="color: red; font-size: 15px; padding: 5px;"></i>
</p>
<?php }
}
} else {
foreach ($parts as $part) {
$fetch_part_query = mysqli_query($conn, "SELECT * FROM part_pro_tbl WHERE id='$part'");
while ($fetch_part = mysqli_fetch_assoc($fetch_part_query)) {
?>
<p class="card-text mb-0">
<strong><?= $fetch_part['title'] ?></strong> , AED <?= $fetch_part['price'] ?><i class="ri-delete-bin-line part_remove" data-prod_id="<?=$productId?>" data-part_id="<?= $part ?>" style="color: red; font-size: 15px; padding: 5px;"></i>
</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>
<label for="form-label">Coupon</label>
<div class="col-md-12 mt-3" style="display:flex; justify-content: space-between;">
<div>
<div class="coupon-container">
<input type="hidden" id="discount" name="discount" class="discount" value="<?= (!empty($_SESSION['discount'])) ? $_SESSION['discount'] : '0' ?>">
<input type="text" placeholder="Enter coupon code" class="coupon-input"
name="coupon_code"
value="<?= (!empty($_SESSION['coupon'])) ? $_SESSION['coupon'] : ' ' ?>">
<button type="button" id="coupon_apply" class="apply-btn">Apply</button>
<?php if (!empty($_SESSION['coupon'])) { ?>
<button type="button" id="coupon_clear" class="apply-btn">Clear Coupon</button>
<?php } ?>
</div>
</div>
<div class="card bg-red px-3 py-3">
<div class="d-flex text-white">
<div><strong>Total :</strong></div>
<div><strong> <?= (!empty($_SESSION['discount'])) ? $grndTotalUsd - $_SESSION['discount'] : $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" class="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>
<input type="hidden" id="monthyearinput" name="monthyearinput" value="July,
2024" />
<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">
<?php
// Start at 10:00 AM, end at 10:00 PM
$start = strtotime("10:00 AM");
$end = strtotime("10:00 PM");
// Step interval (e.g. 30 minutes)
$step = 30 * 60;
$firstday = true;
for ($time = $start; $time <= $end; $time += $step) {
$label = date("g:i A", $time);
echo '
<label class="see-time">
<input type="radio" name="radio6" value="' . $label . '" ' . ($firstday ? 'checked="checked"' : '') . '>
<span class="click-time">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">' . $label . '</p>
</div>
</span>
</label>';
$firstday = false;
}
?>
</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-12">
<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" value="<?= $fetch_user_id['name']?>" required>
<div id="name_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<!-- Include Select2 CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<style>
.select2-container .select2-selection--single{ width:150px !important; height: 55px !important; }
select.form-control.select2 { width: 150px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:60px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:60px !important; }
.select2-container--default .select2-selection--single{ border:none; background:#f6f5f5 !important; }
.select2.select2-container.select2-container--default.select2-container--above.select2-container--focus{ width: 100px !important; }
</style>
<label class="form-label" for="Phone">Phone</label>
<div class="flex-country pro">
<div>
<select class="form-control select2" name="phonecode" required style="width:150px;">
<?php
$mycont = mysqli_query($conn, "SELECT * FROM `countries`");
while ($fet_cont = mysqli_fetch_array($mycont)) {
$selected = ($fet_cont['phonecode'] == $fetch_user_id['phonecode']) ? 'selected' : '';
?>
<option value="<?= $fet_cont['id'] ?>" <?= $selected ?>>+<?= $fet_cont['phonecode'] ?></option>
<?php
}
?>
</select>
</div>
<div>
<input type="number" name="phone" id="phone_user" placeholder="Mobile Number" placeholder="Enter your phone" class="form-control mb-3" value="<?= $fetch_user_id['mobile_number']?>" required>
</div>
</div>
<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" value="<?= $fetch_user_id['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><?= $fetch_user_id['address']?></textarea>
<div id="address_error" class="text-white"></div>
<!-- Error message -->
</div>
</div>
</div>
</div>
<div class="flex-justify billing mx-3 mt-4">
<input type="hidden" name="minor_charg" value="<?= $appointment_row['minor_charg'] ?>" />
<?php
if ($appointment_row['minor_charg'] != 0) {
?>
<div>
<p>Minor Service</p>
</div>
<div>
<p>AED <?= $appointment_row['minor_charg'] ?></p>
</div>
<?php } ?>
</div>
<div class="flex-justify billing mx-3">
<input type="hidden" name="labor_charg" value="<?= $appointment_row['labor_charg'] ?>" />
<?php
if ($appointment_row['labor_charg'] != 0) { ?>
<div>
<p>Labor Charges</p>
</div>
<div>
<p>AED <?= $appointment_row['labor_charg'] ?></p>
</div>
<?php } ?>
</div>
<br>
<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>
<input type="hidden" class="vat_value_class vat_value_class1" name="vat_value" value="<?= $percentage ?>">
</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>
<input type="hidden" name="grndTotalAed" class="all_resut all_resut1" value="<?= $grndTotalUsd1 = $grndTotalUsd + $appointment_row['minor_charg'] + $appointment_row['labor_charg'] ?>">
</p>
</div>
</div>
<!-- <div id="card-element" class="mt-5"></div>
<div id="payment-result" class="mt-2"></div> -->
</div>
<div class="money-gurantee d-none">
<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="place_order">Go to Payment</button>
<!-- <button type="button" class="nextBtn_submit" id="nextBtn"
onclick="nextPrev(1)">Continue</button> -->
</div>
</div>
</div>
<!-- step three -->
<div class="step point2 d-none">
<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> Card Payment
</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="card_holder_name" id="card_holder_name" class="theme-input"
placeholder="Enter your name">
<p class="input-title">Card Number</p>
<input type="text" name="card_number" id="card_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" id="expiration"
class="theme-input" placeholder="MM/YYYY">
</div>
<div class="col-md-6">
<p class="input-title">CVV</p>
<input type="text" name="cvv" id="cvv" class="theme-input"
placeholder="Enter your CVV">
</div>
</div>
<p class="input-title">Country</p>
<select class="theme-input" name="pay_country" name="pay_country" value="United Arab Emirates">
<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="button" name="order_place">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/multistep.js"></script>
<?php include('footer.php'); ?>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
<script>
$(document).ready(function() {
$(".oil_remove").on('click', function() {
let productId = $(this).attr('data-prod_id');
let oil_id = $(this).data('oil_id');
$.ajax({
method: 'POST',
url: 'oil-part-remove.php',
data: {
productId: productId,
oil_id: oil_id
},
success: function(response) {
console.log(response);
location.reload();
}
});
});
$(".part_remove").on('click', function() {
let productId = $(this).attr('data-prod_id');
let part_id = $(this).data('part_id');
$.ajax({
method: 'POST',
url: 'oil-part-remove.php',
data: {
productId: productId,
part_id: part_id
},
success: function(response) {
console.log(response);
location.reload();
}
});
});
});
</script>
<script>
$(document).ready(function() {
$("#coupon_clear").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "clear_coupon.php",
success: function(response) {
location.reload();
},
});
});
});
</script>
<script>
$(document).ready(function() {
$("#coupon_apply").on("click", function(e) {
e.preventDefault();
let coupon_code = $("input[name='coupon_code']").val();
$.ajax({
url: "apply_coupon.php",
method: "POST",
data: {
coupon_code: coupon_code
},
success: function(response) {
location.reload();
},
error: function() {
alert("Failed to apply coupon.");
}
});
});
});
</script>
<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(<?= $appointment_row['instant'] ?>);
}
$(".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 monthyearinput = document.getElementById('monthyearinput');
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}`;
monthyearinput.value = `${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" value="${day}" 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" value="${dayDate.toLocaleDateString('en-US', { weekday: 'long' })}-${day}" ${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;
document.addEventListener("DOMContentLoaded", function() {
// Fallback globals if not defined elsewhere
window.grndTotalUsd1 = window.grndTotalUsd1 || 0;
window.vat = window.vat || 0;
const discount = document.getElementById("discount").value;
// 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 all_resut = document.querySelector(".all_resut");
const vat_value_class = document.querySelector(".vat_value_class");
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 all_resut1 = document.querySelector(".all_resut1");
const vat_value_class1 = document.querySelector(".vat_value_class1");
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");
const selectedValue = selectedPickup ? parseFloat(selectedPickup.value) || 0 : 0;
const selectedDro = document.querySelector("input[name='radio1']:checked");
const selectedDroValue = selectedDro ? parseFloat(selectedDro.value) || 0 : 0;
const selectedText = selectedPickup ? selectedPickup.nextElementSibling.textContent.trim() : "";
let displayTextContent = "I will drive my car";
let displayText = "FREE";
let displayT = grndTotalUsd1 + selectedDroValue - discount;
if (selectedValue > 0) {
const parts = selectedText.split(" - AED ");
displayTextContent = parts[0];
displayText = "AED " + selectedValue;
displayT = grndTotalUsd1 + selectedValue + selectedDroValue - discount;
}
if (resultDivPickup) {
resultDivPickup.innerHTML = `
<div><p>Car Pick-up</p></div>
<div><p class="fs-12 fw-bold">${displayTextContent}</p></div>
<div><p>${displayText}</p></div>
`;
}
if (resultDivPickup_p) resultDivPickup_p.innerHTML = resultDivPickup.innerHTML;
if (resultPickup) resultPickup.textContent = displayT;
if (resultPickup_p) resultPickup_p.textContent = displayT;
const vatAmount = (displayT * vat) / 100;
const grandTotal = displayT + vatAmount;
if (vat_value) vat_value.textContent = vatAmount;
if (vat_value_p) vat_value_p.textContent = vatAmount;
if (vat_value_class) vat_value_class.value = vatAmount;
if (resultgrand) resultgrand.textContent = grandTotal;
if (all_resut) all_resut.value = grandTotal;
if (resultgrand11) resultgrand11.textContent = grandTotal;
if (resultgrand22) resultgrand22.textContent = grandTotal;
if (resultgrand_p) resultgrand_p.textContent = grandTotal;
if (resultgrand11_p) resultgrand11_p.textContent = grandTotal;
if (resultgrand22_p) resultgrand22_p.textContent = grandTotal;
}
function updateDrop() {
const selectedDrop = document.querySelector("input[name='radio1']:checked");
const selectedValue = selectedDrop ? parseFloat(selectedDrop.value) || 0 : 0;
const selectedPic = document.querySelector("input[name='radio4']:checked");
const selectedPicValue = selectedPic ? parseFloat(selectedPic.value) || 0 : 0;
const selectedText = selectedDrop ? selectedDrop.nextElementSibling.textContent.trim() : "";
let displayTextContent = "I will drive my car";
let displayText = "FREE";
let displayT = grndTotalUsd1 + selectedPicValue - discount;
if (selectedValue > 0) {
const parts = selectedText.split(" - AED ");
displayTextContent = parts[0];
displayText = "AED " + selectedValue;
displayT = grndTotalUsd1 + selectedValue + selectedPicValue - discount;
}
if (resultDivDrop) {
resultDivDrop.innerHTML = `
<div><p>Car Drop-off</p></div>
<div><p class="fs-12 fw-bold">${displayTextContent}</p></div>
<div><p>${displayText}</p></div>
`;
}
if (resultDivDrop_p) resultDivDrop_p.innerHTML = resultDivDrop.innerHTML;
if (resultDrop) resultDrop.textContent = displayT;
if (resultDrop_p) resultDrop_p.textContent = displayT;
const vatAmount = (displayT * vat) / 100;
const grandTotal = displayT + vatAmount;
localStorage.setItem('vatAmount', vatAmount);
localStorage.setItem('grandTotal', grandTotal);
if (vat1_value) vat1_value.textContent = vatAmount;
if (vat1_value_p) vat1_value_p.textContent = vatAmount;
if (vat_value_class1) vat_value_class1.value = vatAmount;
if (resultgrand1) resultgrand1.textContent = grandTotal;
if (all_resut1) all_resut1.value = grandTotal;
if (resultgrand2) resultgrand2.textContent = grandTotal;
if (resultgrand3) resultgrand3.textContent = grandTotal;
if (resultgrand1_p) resultgrand1_p.textContent = grandTotal;
if (resultgrand2_p) resultgrand2_p.textContent = grandTotal;
if (resultgrand3_p) resultgrand3_p.textContent = grandTotal;
}
// Attach event listeners
radioButtonsPickup.forEach(radio => radio.addEventListener("click", updatePickup));
radioButtonsDrop.forEach(radio => radio.addEventListener("click", updateDrop));
// Initialize with default "FREE"
updatePickup();
updateDrop();
});
</script>
<!-- <script>
$(document).ready(function(){
$(".instant").on('change', function(){
const resultgrandEl = document.querySelector(".result_grand_value");
const instant = document.querySelector(".instant");
let resultgrand_ins = 0;
if (resultgrandEl) {
let textValue = resultgrandEl.textContent.trim();
resultgrand_ins = parseFloat(textValue.replace(/[^0-9.]/g, '')) || 0;
}
let instant_value = instant ? parseFloat(instant.value) || 0 : 0;
// Check if checked → add amount, else → subtract amount
let newamount = resultgrand_ins;
if ($(instant).is(':checked')) {
newamount += instant_value;
} else {
newamount -= instant_value;
}
// ✅ Display updated amount as “AED 123.45”
if (resultgrandEl) resultgrandEl.textContent = `AED ${newamount.toFixed(2)}`;
});
});
</script> -->
<!-- <script>
const stripe = Stripe("pk_test_51RFZdPI57IBHDEDrxb5YHe8Eb4UWeHw1ZpLnw6WOxy0QnUnCRSgtrJJNuGfoqmgwwYdLA4BlH8B2eC3zSSS0Gujc00NYjfFyWv"); // apna publishable key yahan lagayein
const elements = stripe.elements();
const card = elements.create("card");
card.mount("#card-element");
const form = document.getElementById("signUpForm");
form.addEventListener("submit", async (e) => {
e.preventDefault();
// Call backend to create PaymentIntent
const response = await fetch("create-payment-intent.php", {
method: "POST"
});
const {
clientSecret
} = await response.json();
// Confirm card payment
const {
paymentIntent,
error
} = await stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card,
},
});
if (error) {
document.getElementById("payment-result").innerText = error.message;
} else if (paymentIntent.status === "succeeded") {
document.getElementById("payment-result").innerText = "✅ Payment Successful!";
}
});
</script> -->
<!-- <script type="text/javascript">
$("button[name=place_order]").on('click', function(e) {
e.preventDefault();
let hasError = false;
// === User info ===
let name_user = $("#name_user").val();
let email_user = $("#email_user").val();
let phone_user = $("#phone_user").val();
let country_user = $("#country_user").val();
let state_user = $("#state_user").val();
let city_user = $("#city_user").val();
let postcode_user = $("#postcode_user").val();
let address_user = $("#address_user").val();
// === Card info ===
// let card_holder_name = $("#card_holder_name").val();
// let card_number = $("#card_number").val();
// let expiration = $("#expiration").val();
// let cvv = $("#cvv").val();
// let pay_country = $("#pay_country").val();
// Clear errors
// $("#card_holder_name_error").html("");
// $("#card_number_error").html("");
// $("#expiration_error").html("");
// $("#cvv_error").html("");
// $("#pay_country_error").html("");
// === Validation ===
// if (card_holder_name == '') {
// $("#card_holder_name_error").html("This is Required.");
// hasError = true;
// }
// if (card_number == '') {
// $("#card_number_error").html("This is Required.");
// hasError = true;
// }
// if (expiration == '') {
// $("#expiration_error").html("This is Required.");
// hasError = true;
// }
// if (cvv == '') {
// $("#cvv_error").html("This is Required.");
// hasError = true;
// }
// if (pay_country == '') {
// $("#pay_country_error").html("This is Required.");
// hasError = true;
// }
// if (hasError) {
// return false;
// }
// === Radio buttons ===
let instant = $('#instant').val();
let pickup_radio4 = $('input[name=radio4]:checked').val();
let drop_radio1 = $('input[name=radio1]:checked').val();
let text = document.getElementById("current-month-year").innerText.trim();
let [monthName, year] = text.split(",").map(s => s.trim());
let monthMap = {
January: "01", February: "02", March: "03", April: "04",
May: "05", June: "06", July: "07", August: "08",
September: "09", October: "10", November: "11", December: "12"
};
let month = monthMap[monthName];
let radio_day = $('input[name=radio5]:checked').val();
let radio_time = $('input[name=radio6]:checked').val();
// === PHP charges (from backend) ===
let minor_Charg = <?= json_encode($appointment_row['minor_charg'] ?? "") ?>;
let labor_Charg = <?= json_encode($appointment_row['labor_charg'] ?? "") ?>;
// === VAT + total from localStorage ===
let vat_value = localStorage.getItem('vatAmount') || 0;
let vat = <?= json_encode($appointment_row['vat'] ?? "") ?>;
let grand_Total = localStorage.getItem('grandTotal') || 0;
// Prepare the data
let data = {
name_user: name_user,
email_user: email_user,
phone_user: phone_user,
country_user: country_user,
state_user: state_user,
city_user: city_user,
postcode_user: postcode_user,
address_user: address_user,
pickup_radio4: pickup_radio4,
drop_radio1: drop_radio1,
radio_year: year,
radio_month: month,
radio_day: radio_day,
radio_time: radio_time,
instant: instant,
minor_Charg: minor_Charg,
labor_Charg: labor_Charg,
vat: vat,
vat_value: vat_value,
grand_Total: grand_Total
};
// Create a hidden form
let form = document.createElement("form");
form.method = "POST";
form.action = "create-checkout-session.php";
// Append inputs
for (let key in data) {
if (data.hasOwnProperty(key)) {
let input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = data[key];
form.appendChild(input);
}
}
// Append form to body and submit
document.body.appendChild(form);
form.submit();
});
</script> -->