
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
<?php

//print_r($_POST);


// DB configuration
$host = 'localhost';
$dbname = 'balubaid_nissan_test_drive';
$user = 'balubaid_nissan_test_drive';
$pass = 'Vision@2050';

// Connect to DB
$conn = new mysqli($host, $user, $pass, $dbname);
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$search_result = null;
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $natid = $conn->real_escape_string($_POST['natid']);
  
  $sql = "SELECT * FROM nissan_registrations WHERE id = '$natid' LIMIT 1";
  $result = $conn->query($sql);

  if ($result && $result->num_rows > 0) {
    $search_result = $result->fetch_assoc();
  } else {
    $error = "No registration found with the provided National ID.";
  }
}


?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Petromin Nissan Registration</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #ddd;
      display: flex;
      justify-content: center;
      padding: 40px;
    }
    .form-container {
      background-color: #e3e3e3;
      padding: 30px;
      width: 350px;
      border-radius: 8px;
      text-align: center;
      height: 168%;
    }
    .form-container img {
      max-width: 150px;
      margin-bottom: 10px;
    }
    .form-container h1 {
      font-size: 22px;
      margin-bottom: 20px;
    }
    .form-container label {
      display: block;
      text-align: left;
      margin: 10px 0 5px;
    }
    .form-container input[type="text"],
    .form-container input[type="email"],
    .form-container input[type="file"],
    .form-container input[type="tel"] {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: none;
      border-radius: 4px;
    }
    .form-container select {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: none;
      border-radius: 4px;
    }
    .form-container .radio-group {
      display: flex;
      justify-content: space-around;
      margin-bottom: 15px;
    }
    .form-container .radio-group input {
      margin-right: 5px;
    }
    .form-container .submit-btn {
      background-color: #d72626;
      color: white;
      padding: 12px;
      border: none;
      width: 100%;
      font-weight: bold;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }
    .form-container .submit-btn:hover {
      background-color: #b01f1f;
    }
    label.error {
      color: red;
      font-size: 13px;
      display: block;
      text-align: left;
      margin-top: -8px;
      margin-bottom: 8px;
    }
    
    .star-rating {
  direction: rtl;
  display: inline-flex;
  justify-content: start;
}

.star-rating input[type="radio"] {
  display: none;
}

.star-rating label {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  padding: 0 3px;
}

.star-rating input[type="radio"]:checked ~ label {
  color: #f5b301;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #f5b301;
}
    
  </style>
</head>
<body>
  <form id="registration-form" class="form-container" action="submitfeedback.php" method="post" enctype="multipart/form-data" novalidate>
   <a href="/"><img src="https://nissan-test-drive.core3.agency/assets/Nissan Logo-01.png" alt="Petromin Logo" />   </a> 
    <h1>NISSAN<br>Registration Form</h1>
    
    <input type="hidden" name="id" value="<?php echo $_POST['natid']; ?>" >

    <label for="first-name">Full Name</label>
    <input type="text" id="first-name" value="<?php echo htmlspecialchars($search_result['first_name'])." ".htmlspecialchars($search_result['last_name']); ?>" name="first-name" readonly />

    <label for="natid">National ID</label>
    <input type="tel" id="natid" value="<?php echo htmlspecialchars($search_result['natid']); ?>" name="natid" readonly />

    <label for="mobile">Mobile Number</label>
    <input type="tel" id="mobile" value="<?php echo htmlspecialchars($search_result['mobile']); ?>" name="mobile" readonly />

    <label for="agegroup">Age Group</label>
    <input type="text" id="agegroup" value="<?php echo htmlspecialchars($search_result['agegroup']); ?>" name="agegroup" readonly />

  <label for="gender">Gender</label>
    <input type="text" id="gender" value="<?php echo htmlspecialchars($search_result['gender']); ?>" name="gender" readonly />
    
    <label for="vehicle">Vehicle of Test Drive</label>
    <input type="text" id="vehicle" value="<?php echo htmlspecialchars($search_result['vehicle']); ?>" name="vehicle" readonly />
    
    
  <label>What is the customer's rating of the car experience with Petromin Nissan?</label>
<div class="star-rating">
  <input type="radio" id="exp5" name="experience_rating" value="5" required><label for="exp5">&#9733;</label>
  <input type="radio" id="exp4" name="experience_rating" value="4"><label for="exp4">&#9733;</label>
  <input type="radio" id="exp3" name="experience_rating" value="3"><label for="exp3">&#9733;</label>
  <input type="radio" id="exp2" name="experience_rating" value="2"><label for="exp2">&#9733;</label>
  <input type="radio" id="exp1" name="experience_rating" value="1"><label for="exp1">&#9733;</label>
</div>


<label>What is the customer's rating of the car's engine?</label>
<div class="star-rating">
  <input type="radio" id="eng5" name="engine_rating" value="5" required><label for="eng5">&#9733;</label>
  <input type="radio" id="eng4" name="engine_rating" value="4"><label for="eng4">&#9733;</label>
  <input type="radio" id="eng3" name="engine_rating" value="3"><label for="eng3">&#9733;</label>
  <input type="radio" id="eng2" name="engine_rating" value="2"><label for="eng2">&#9733;</label>
  <input type="radio" id="eng1" name="engine_rating" value="1"><label for="eng1">&#9733;</label>
</div>

<label>What is the customer's rating of the car's interior space?</label>
<div class="star-rating">
  <input type="radio" id="space5" name="space_rating" value="5" required><label for="space5">&#9733;</label>
  <input type="radio" id="space4" name="space_rating" value="4"><label for="space4">&#9733;</label>
  <input type="radio" id="space3" name="space_rating" value="3"><label for="space3">&#9733;</label>
  <input type="radio" id="space2" name="space_rating" value="2"><label for="space2">&#9733;</label>
  <input type="radio" id="space1" name="space_rating" value="1"><label for="space1">&#9733;</label>
</div>

<label>What is the customer's rating of the car's technology?</label>
<div class="star-rating">
  <input type="radio" id="tech5" name="tech_rating" value="5" required><label for="tech5">&#9733;</label>
  <input type="radio" id="tech4" name="tech_rating" value="4"><label for="tech4">&#9733;</label>
  <input type="radio" id="tech3" name="tech_rating" value="3"><label for="tech3">&#9733;</label>
  <input type="radio" id="tech2" name="tech_rating" value="2"><label for="tech2">&#9733;</label>
  <input type="radio" id="tech1" name="tech_rating" value="1"><label for="tech1">&#9733;</label>
</div>


<label>Would you consider purchasing the Nissan Magnite after the test drive?</label>
<div class="radio-group">
  <label><input type="radio" name="purchase_interest" value="Yes" required> Yes</label>
  <label><input type="radio" name="purchase_interest" value="No"> No</label>
</div>

<label>Is the car price suitable for you?</label>
<div class="radio-group">
  <label><input type="radio" name="price_opinion" value="Yes" required> Yes</label>
  <label><input type="radio" name="price_opinion" value="No">No </label>
</div>



    <button type="submit" class="submit-btn">SUBMIT</button>
  </form>

  <!-- jQuery and jQuery Validate -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

  <script>
    $(document).ready(function () {
    
        // Custom Saudi mobile validation
    $.validator.addMethod("saudiMobile", function(value, element) {
      return this.optional(element) || /^05\d{8}$/.test(value);
    }, "Please enter a valid mobile number starting with 05 and 10 digits total.");    
        
        
// Custom Saudi ID validation 
$.validator.addMethod("saudiid", function(value, element) {
  return this.optional(element) || /^[12]\d{9}$/.test(value);
}, "Please enter a valid national ID starting with 1 or 2 and exactly 10 digits.");    
                
        
      $("#registration-form").validate({
        rules: {
          "first-name": { required: true },
          "last-name": { required: true },
          "agegroup": { required: true },
          "mobile": {
            required: true,
           saudiMobile: true
          },
          "natid": {
            required: true,
           saudiid: true
          },
          "email": { required: true, email: true },
          "gender": { required: true },
          "license": { required: true },
          "vehicle": { required: true }
        },
        messages: {
          "first-name": "Please enter your first name",
          "last-name": "Please enter your last name",
          "mobile": "Please enter your mobile number",
          "email": "Please enter a valid email",
          "gender": "Please select your gender",
          "license": "Please upload your license image",
          "vehicle": "Please select a vehicle"
        },
        errorElement: "label",
        errorPlacement: function (error, element) {
          if (element.attr("type") === "radio") {
            error.insertAfter(element.closest(".radio-group"));
          } else {
            error.insertAfter(element);
          }
        },
        submitHandler: function (form) {
          // Only submit if valid
          form.submit();
        }
      });
    });
  </script>
</body>
</html>