body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}

.form-container {
width: 350px;
margin: 50px auto;
background: #fff;
padding: 20px;
border-radius: 6px;
}

.header {
background: orange;
color: white;
padding: 15px;
font-size: 20px;
text-align: center;
border-radius: 6px 6px 0 0;
}

label {
font-size: 13px;
display: block;
margin-top: 15px;
}

input, select {
width: 100%;
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
outline: none;
}

button {
margin-top: 20px;
width: 100%;
padding: 10px;
background: black;
color: white;
border: none;
cursor: pointer;
}

.msg {
margin-top: 10px;
font-size: 14px;
text-align: center;
}

const API_URL = "https://kumarbuilders-erp.com/HighriseLeadsIntegrationAPi/OnlinEnquiry/Enquiry_InsertAPI";

document.getElementById("form").addEventListener("submit", async function(e){
e.preventDefault();

const btn = document.getElementById("btn");
const msg = document.getElementById("msg");

const payload = {
Name: document.getElementById("Name").value,
Email: document.getElementById("Email").value,
Mobile: document.getElementById("Mobile").value,
Site: "Website",
Source: "",
Subsource: "",
TypeOfUnit: document.getElementById("TypeOfUnit").value,
Keyword: "",
MatchType: "",
Creative: "",
Placement: "",
Model: "",
CampaignType: "",
UTM_Source: "",
UTM_Medium: "",
GCLID: "",
Remark: "",
Text1: "",
Text2: "",
Text3: "",
Text4: "",
Text5: "",
Portal_ID: "",
Enquiry_Id: "",
Adset_Name: "",
Campaign_Name: ""
};

btn.disabled = true;
btn.innerText = "Submitting...";

try {
const res = await fetch(API_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "text/plain"
},
body: JSON.stringify(payload)
});

const text = await res.text();

msg.style.color = "green";
msg.innerText = "Submitted successfully!";
document.getElementById("form").reset();

} catch (err) {
msg.style.color = "red";
msg.innerText = "Error submitting form";
}

btn.disabled = false;
btn.innerText = "Submit";
});