<div id=”jai-appointment-form”>
<!– Google Font –>
<link href=”https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600&display=swap” rel=”stylesheet”>

<style>
#jai-appointment-form {
font-family: ‘Manrope’, sans-serif;
max-width: 650px;
}

.jai-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}

.jai-field {
flex: 1;
display: flex;
flex-direction: column;
}

label {
font-size: 14px;
margin-bottom: 5px;
color: #555;
}

.required {
color: red;
margin-left: 3px;
font-size: 12px;
}

input, select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
font-family: ‘Manrope’, sans-serif;
}

input:focus, select:focus {
border-color: #2b6cb0;
outline: none;
}

.checkbox-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
margin-top: 10px;
}

.checkbox-row a {
color: #2b6cb0;
text-decoration: none;
font-weight: 500;
}

button {
margin-top: 15px;
padding: 12px;
width: 140px;
background: #2b6cb0;
color: #fff;
border: none;
border-radius: 6px;
font-size: 15px;
cursor: pointer;
font-family: ‘Manrope’, sans-serif;
}

button:hover {
background: #1f4e85;
}

.error {
color: red;
font-size: 12px;
}

.helper-text {
font-size: 12px;
color: #777;
margin-top: 3px;
}

@media(max-width: 600px) {
.jai-row {
flex-direction: column;
}
}
</style>

<form id=”appointmentForm”>

<!– Language + Mobile –>
<div class=”jai-row”>
<div class=”jai-field”>
<label>Preferred Language <span class=”required”>*</span></label>
<select required name=”language”>
<option value=””>Select Language</option>
<option>English</option>
<option>Hindi</option>
<option>Gujarati</option>
<option>Punjabi</option>
<option>Assamese</option>
<option>Odia</option>
<option>Bengali</option>
<option>Telugu</option>
<option>Tamil</option>
<option>Kannada</option>
<option>Malayalam</option>
<option>Marathi</option>
</select>
</div>

<div class=”jai-field”>
<label>Mobile Number <span class=”required”>*</span></label>
<input type=”tel” id=”mobile” name=”mobile” placeholder=”10 Digit Mobile number” required>
<span id=”mobileError” class=”error”></span>
</div>
</div>

<!– Name + Email –>
<div class=”jai-row”>
<div class=”jai-field”>
<label>Full Name <span class=”required”>*</span></label>
<input type=”text” name=”full_name” required>
</div>

<div class=”jai-field”>
<label>Email <span class=”required”>*</span></label>
<input type=”email” name=”email” required>
</div>
</div>

<!– Referral Code –>
<div class=”jai-row”>
<div class=”jai-field”>
<label>Referral Code</label>
<input type=”text” id=”referralCode” name=”referral_code” placeholder=”Enter referral code (optional)”>
<span class=”helper-text”>Have a referral code? Enter here to get benefits</span>
</div>
</div>

<!– Demo Date + Time –>
<div class=”jai-row”>
<div class=”jai-field”>
<label>Device Demo Date <span class=”required”>*</span></label>
<input type=”date” id=”demoDate” name=”demo_date” required>
</div>

<div class=”jai-field”>
<label>Device Demo Time Slot <span class=”required”>*</span></label>
<select id=”timeSlot” name=”time_slot” required></select>
</div>
</div>

<!– State + Upload –>
<div class=”jai-row”>
<div class=”jai-field”>
<label>State <span class=”required”>*</span></label>
<select name=”state” required>
<option value=””>Select State</option>
<option>Maharashtra</option>
<option>Delhi</option>
<option>Karnataka</option>
<option>Tamil Nadu</option>
<option>Uttar Pradesh</option>
</select>
</div>

<div class=”jai-field”>
<label>Upload Prescription <span class=”required”>*</span></label>
<input type=”file” name=”prescription” accept=”.pdf,.jpg,.png” required>
</div>
</div>

<!– Terms –>
<div class=”checkbox-row”>
<input type=”checkbox” id=”terms” required>
<label for=”terms”>
I agree with all the terms & conditions mentioned
<a href=”#” target=”_blank”>JAI Policy</a> <span class=”required”>*</span>
</label>
</div>

<button type=”submit”>Submit</button>
</form>

<script>
// Generate time slots (9 AM to 5 PM, 20 min interval)
function generateTimeSlots() {
const select = document.getElementById(“timeSlot”);
select.innerHTML = ‘<option value=””>Select Time Slot</option>’;

let start = 9 * 60;
let end = 17 * 60;

for (let time = start; time < end; time += 20) {
let hour1 = Math.floor(time / 60);
let min1 = time % 60;

let time2 = time + 20;
let hour2 = Math.floor(time2 / 60);
let min2 = time2 % 60;

function format(h, m) {
let ampm = h >= 12 ? “pm” : “am”;
h = h % 12 || 12;
return `${h}:${m.toString().padStart(2, ‘0’)} ${ampm}`;
}

let slot = `${format(hour1, min1)} to ${format(hour2, min2)}`;
let option = document.createElement(“option”);
option.value = slot;
option.textContent = slot;
select.appendChild(option);
}
}

generateTimeSlots();

// Min date = tomorrow
const dateInput = document.getElementById(“demoDate”);
let now = new Date();
now.setDate(now.getDate() + 1);
dateInput.min = now.toISOString().split(“T”)[0];

// Mobile validation
document.getElementById(“mobile”).addEventListener(“input”, function() {
let value = this.value.replace(/\D/g, ”);
this.value = value;

document.getElementById(“mobileError”).innerText =
value.length !== 10 ? “Enter valid 10-digit number” : “”;
});

// Referral code uppercase
document.getElementById(“referralCode”).addEventListener(“input”, function() {
this.value = this.value.toUpperCase();
});

// Form validation
document.getElementById(“appointmentForm”).addEventListener(“submit”, function(e) {
const mobile = document.getElementById(“mobile”).value;

if (mobile.length !== 10) {
alert(“Please enter valid mobile number”);
e.preventDefault();
}
});
</script>
</div>