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" />
<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>Range rover <span class="fw-normal">Sports</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['model_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_model=mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM model_tbl WHERE status=1 AND id='".$_SESSION['model_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>Model:</span> <?=$row01_model['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>
<?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">
<div class="row">
<?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'];
$parts = $pro_cart['parts'];
$total = $pro_cart['total'];
$grndTotalUsd += $total;
?>
<div class="col-md-6">
<div class="card">
<div class="row">
<div class="col-md-4 col-12 pe-0 ph-pe">
<img src="<?=$base_url?>images/Upload/product/<?=$fetch_row['image1']?>" class="img-fluid rounded-start w-100">
</div>
<div class="col-md-8 col-12 ps-0 ph-ps">
<label class="custom-radio_3">
<!-- <input type="radio" name="radio3" checked> -->
<span class="radio-btn_3 rounded-end">
<div class="hobbies-icon mt-3">
<h5 class="card-title"><?=$fetch_row['title']?></h5>
<p class="card-text mb-0"><?=$fetch_row['short_description']?></p>
<p class="card-text mb-0"><?=$fetch_row['about']?></p>
<a class="btn-white-bdr"><img src="img/bag.svg" class="img-fluid w-16"> AED <?=$total?></a>
<a class="btn btn-light remove-cart" data-id="<?=$productId?>"><!-- <img src="img/bag.svg" class="img-fluid w-16"> --> Remove <i class="bi bi-x-circle-fill text-red"></i></a>
</div>
</span>
</label>
</div>
</div>
</div>
</div>
<?php } } ?>
</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;"><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>
<!-- 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="Car-Pickup" name="radio4" value="0" checked> <span>I will drive my car </span> <br>
<input type="radio" class="Car-Pickup" id="Car-Pickup" name="radio4" value="50"> <span>Valet driver - AED 50 </span> <br>
<input type="radio" class="Car-Pickup" id="Car-Pickup" name="radio4" value="100"> <span>Tow Truck - AED 100 </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>I will drive my car </span> <br>
<input type="radio" class="Drop-off" id="Drop-off" name="radio1" value="50"> <span>Valet driver - AED 50 </span> <br>
<input type="radio" class="Drop-off" id="Drop-off" name="radio1" value="100"> <span>Tow Truck - AED 100 </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>
<a class="calendar" id="calendar-toggle">
<i class="bi bi-chevron-left" id="prev-month"></i>
<span id="current-month-year">July, 2024</span>
<i class="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="row">
<div class="col-md-12">
<div class="choose-date mt-3">
<label class="see-date">
<input type="radio" name="radio5">
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">Wed</p>
<h5>21</h5>
</div>
</span>
</label>
<label class="see-date">
<input type="radio" name="radio5">
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">Thu</p>
<h5>22</h5>
</div>
</span>
</label>
<label class="see-date">
<input type="radio" name="radio5">
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">Fri</p>
<h5>23</h5>
</div>
</span>
</label>
<label class="see-date">
<input type="radio" name="radio5" checked>
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">Sat</p>
<h5>24</h5>
</div>
</span>
</label>
<label class="see-date">
<input type="radio" name="radio5">
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">Sun</p>
<h5>25</h5>
</div>
</span>
</label>
<label class="see-date">
<input type="radio" name="radio5">
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">Mon</p>
<h5>26</h5>
</div>
</span>
</label>
<label class="see-date">
<input type="radio" name="radio5">
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">Tue</p>
<h5>27</h5>
</div>
</span>
</label>
</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['model_id']) && isset($_SESSION['model_year_id'])) { ?>
<div>
<div class="eng-model mx-3">
<?php
$row01_model=mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM model_tbl WHERE status=1 AND id='".$_SESSION['model_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>Model:</span> <?=$row01_model['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" id="name_user" class="form-control mb-3" placeholder="Enter your name" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Phone">Phone</label>
<input type="number" id="phone_user" maxlength="10" class="form-control mb-3" placeholder="Enter your phone" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="form-label" for="Email">Email</label>
<input type="email" id="email_user" class="form-control mb-3" placeholder="Enter your email" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="Country">Country</label>
<input type="text" id="country_user" class="form-control mb-3" 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" id="state_user" class="form-control mb-3" 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" id="city_user" class="form-control mb-3" 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" id="postcode_user" maxlength="10" class="form-control mb-3" 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 id="address_user" class="form-control mb-3" rows="4" placeholder="Enter your address" required></textarea>
</div>
</div>
</div>
</div>
<div class="flex-justify billing mx-3 mt-4">
<div>
<p>Minor Service</p>
</div>
<div>
<p>AED 694</p>
</div>
</div>
<div class="flex-justify billing mx-3">
<div>
<p>Labor Charges</p>
</div>
<div>
<p>AED 273</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 967</p>
</div>
</div>
<div class="flex-justify billing mx-3 mt-4">
<div>
<p>Car Pick-up</p>
</div>
<div>
<p class="fs-12 fw-bold">Car Pick-up</p>
</div>
<div>
<p>FREE</p>
</div>
</div>
<div class="flex-justify billing mx-3">
<div>
<p>Car Drop-up</p>
</div>
<div>
<p class="fs-12 fw-bold">Car Drop-up</p>
</div>
<div>
<p>FREE</p>
</div>
</div>
<div class="flex-justify billing bdr-y mx-3">
<div>
<p class="mb-0">VAT 5%</p>
</div>
<div>
<p class="mb-0">AED 48</p>
</div>
</div>
<div class="flex-justify billing mx-3 mt-5 ph-flex-column">
<div>
<p class="fw-bold fs-24">Total Amount</p>
</div>
<div>
<p class="fw-bold fs-24">AED 1,1015</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>
<img src="img/tabby.svg" class="img-fluid">
</div>
<div>
<img src="img/visa-card.svg" 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 : <span>AED 1,1015</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['model_id']) && isset($_SESSION['model_year_id'])) { ?>
<div>
<div class="eng-model mx-3">
<?php
$row01_model=mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM model_tbl WHERE status=1 AND id='".$_SESSION['model_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>Model:</span> <?=$row01_model['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 readonly>
</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 readonly>
</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" readonly>
</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 readonly>
</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 readonly></textarea>
</div>
</div>
</div>
</div>
<div class="flex-justify billing mx-3 mt-4">
<div>
<p>Minor Service</p>
</div>
<div>
<p>AED 694</p>
</div>
</div>
<div class="flex-justify billing mx-3">
<div>
<p>Labor Charges</p>
</div>
<div>
<p>AED 273</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 967</p>
</div>
</div>
<div class="flex-justify billing mx-3 mt-4">
<div>
<p>Car Pick-up</p>
</div>
<div>
<p class="fs-12 fw-bold">Car Pick-up</p>
</div>
<div>
<p>FREE</p>
</div>
</div>
<div class="flex-justify billing mx-3">
<div>
<p>Car Drop-up</p>
</div>
<div>
<p class="fs-12 fw-bold">Car Drop-up</p>
</div>
<div>
<p>FREE</p>
</div>
</div>
<div class="flex-justify billing bdr-y mx-3">
<div>
<p class="mb-0">VAT 5%</p>
</div>
<div>
<p class="mb-0">AED 48</p>
</div>
</div>
<div class="flex-justify billing mx-3 mt-5 ph-flex-column">
<div>
<p class="fw-bold fs-24">Total Amount</p>
</div>
<div>
<p class="fw-bold fs-24">AED 1,1015</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>
<img src="img/tabby.svg" class="img-fluid">
</div>
<div>
<img src="img/visa-card.svg" 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="submit_order" 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(){
$(".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 type="text/javascript">
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
// 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 = '';
// 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++) {
daysHtml += `
<label class="see-date">
<input type="radio" name="radio5">
<span class="click-date">
<div class="hobbies-icon">
<p class="poppin mb-0 mt-0">${new Date(year, month, day).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>