<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SubClient Form</title>
<style>
.AddContact {
body {
font-family: Arial, sans-serif;
overflow: hidden;
}
.container {
<!-- width: 65rem;-->
margin: auto;
padding: 20px;
border-radius: 10px;
overflow: hidden;
}
.two-col {
display: flex;
white-space: nowrap;
margin-left: 100px;
}
.col1, .col2 {
flex: 0 0 50%;
}
.form-group {
margin-bottom: 15px;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.form-group input, .form-group select {
width: calc(100% - 100px);
padding: 10px;
border-radius: 10px;
border: 1px solid black;
}
label.required::after {
content: "*";
color: red;
margin-left: 5px;
}
.form-group label {
margin-left: 10px;
}
.error-message {
color: red;
text-align: center;
margin-top: 10px;
}
.error {
border-color: red;
}
button {
border-radius: 5px;
background-color: lightgreen;
width: 100px;
margin-left: 400px;
margin-top: 10px;
padding: 5px;
}
}
</style>
</head>
<body>
<div class="AddContact">
<div class="container" style="width:60%; margin-left:230px;">
<form id="Add_new_contact" action="{% url 'add_contact' %}?admin_id={{ admin_id }}" method="post">
{% csrf_token %}
<div class="two-col" style="margin-left:50px">
<div class="col1">
<div class="form-group">
<select id="ClientDropdown" name="Company" required tabindex="1" style="margin-left:30px;">
<option value="">Select Company</option>
{% for client in clients %}
<option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
{% endfor %}
</select>
<label for="ClientDropdown" class="required" style="margin-left:-63px"><b>Company:</b></label>
</div>
<div class="form-group" style="margin-left:-0px">
<input type="text" id="FirstName" name="FirstName" style="margin-left:23px;" required placeholder="Eg.srinivas" tabindex="3">
<label for="FirstName" class="required" style="margin-left:-65px"><b>First Name:</b></label>
</div>
<div class="form-group">
<input id="Designation" name="Designation" placeholder="Eg. Manager" required tabindex="5" style="margin-left:20px">
<label for="Designation" class="required" style="margin-left:-65px"><b>Designation</b></label>
</div>
<div class="form-group" style="margin-left:px">
<input type="Email" id="Email" name="Email" style="margin-left:40px" required placeholder="arminta@123gmail.com" tabindex="7">
<label for="Email" class="required" style="margin-left:-50px"><b>Email_Id:</b></label>
</div>
</div>
<div class="col2" style="margin-left:5px">
<div class="form-group">
<input id="SubClientDropdown" name="Sub_Company" placeholder="Select Sub Company" tabindex="2" style="margin-left:10px;" disabled>
<label for="SubClientDropdown"><b>Sub Company:</b></label>
</div>
<div class="form-group">
<input type="text" id="LastName" name="LastName" style="margin-left:35px;" placeholder="Eg. Reddy" tabindex="4">
<label for="LastName" ><b>Last Name:</b></label>
</div>
<div class="form-group">
<select id="Department" name="Department" required tabindex="5" style="margin-left:15px" onchange="checkForOtherOption()"><option value="">Select Department</option>
<option value="HIRING MANAGERS">Talent Acquisition</option>
<option value="ACCOUNTS DEPARTMENT">Accounts Department</option>
<option value="HUMAN RESOURCES">Human Resources</option>
<option value="ADMINISTRATION AND LEGAL">Administration And Legal</option>
<option value="Business Development">Business Development</option>
<option value="Other">Other</option>
</select>
<label for="Department" class="required" style="margin-left:10px"><b>Department:</b></label>
</div>
<div class="form-group">
<input type="text" id="Phone_number" name="Phone_number" required pattern="^(?!0{10})[6-9]\d{9}$" placeholder="7989830891" style="margin-left:26px;" tabindex="8" maxlength="10">
<label for="Phone_number" class="required"><b>Phone_No:</b></label>
</div>
</div>
</div>
<button type="button" tabindex="9" id="saveButton" onclick="saveAdd_new_contact()">Save</button>
</form>
</div>
</div>
<script>
<!-- document.getElementById('Phone_number').addEventListener('input', function(event) {-->
<!-- const phoneNumberField = event.target;-->
<!-- const value = phoneNumberField.value;-->
<!-- // Check if the value is all zeros-->
<!-- const isAllZeros = /^0+$/.test(value);-->
<!-- // Check if the value matches the required pattern (starts with 6-9 and is 10 digits long)-->
<!-- const matchesPattern = /^(?!0{10})[6-9]\d{9}$/.test(value);-->
<!-- if (isAllZeros) {-->
<!-- phoneNumberField.setCustomValidity('Phone number cannot be all zeros.');-->
<!-- phoneNumberField.style.borderColor = 'red';-->
<!-- } else if (matchesPattern) {-->
<!-- phoneNumberField.setCustomValidity('');-->
<!-- phoneNumberField.style.borderColor = 'green';-->
<!-- } else {-->
<!-- phoneNumberField.setCustomValidity('Invalid phone number. It must start with a digit from 6 to 9 and be 10 digits long.');-->
<!-- phoneNumberField.style.borderColor = 'red';-->
<!-- }-->
<!-- phoneNumberField.reportValidity();-->
<!-- });-->
<!--function checkForOtherOption() {-->
<!-- var departmentSelect = document.getElementById('Department');-->
<!-- var selectedOption = departmentSelect.value;-->
<!-- if (selectedOption === 'Other') {-->
<!-- // Create an input element-->
<!-- var input = document.createElement('input');-->
<!-- input.type = 'text';-->
<!-- input.placeholder = 'Enter department';-->
<!-- input.style.marginLeft = '22px';-->
<!-- input.onblur = function() {-->
<!-- if (input.value.trim() !== "") {-->
<!-- var newDepartment = input.value.trim();-->
<!-- // Remove the existing "Other" option from the dropdown-->
<!-- var otherOption = departmentSelect.querySelector('option[value="Other"]');-->
<!-- if (otherOption) {-->
<!-- otherOption.remove();-->
<!-- }-->
<!-- // Add the new department as an option to the select-->
<!-- var newOption = document.createElement('option');-->
<!-- newOption.value = newDepartment;-->
<!-- newOption.text = newDepartment;-->
<!-- newOption.selected = true;-->
<!-- departmentSelect.add(newOption, departmentSelect.options.length - 1);-->
<!-- }-->
<!-- // Switch back to select element and reset the "Other" option-->
<!-- departmentSelect.style.display = 'inline-block';-->
<!-- input.style.display = 'none';-->
<!-- departmentSelect.value = input.value;-->
<!-- input.remove();-->
<!-- };-->
<!-- // Insert the input element after the select element-->
<!-- departmentSelect.parentNode.insertBefore(input, departmentSelect.nextSibling);-->
<!-- // Hide the select element and show the input element-->
<!-- departmentSelect.style.display = 'none';-->
<!-- input.style.display = 'inline-block';-->
<!-- input.focus();-->
<!-- }-->
<!--}-->
<!-- function saveAdd_new_contact() {-->
<!-- const form = document.getElementById('Add_new_contact');-->
<!-- const formData = new FormData(form);-->
<!-- // Ensure this retrieves the correct URL-->
<!-- const url = form.getAttribute('action');-->
<!-- console.log('CSRF Token:', '{{ csrf_token }}');-->
<!-- console.log('Form action URL:', url);-->
<!-- fetch(url, {-->
<!-- method: 'POST',-->
<!-- body: formData,-->
<!-- headers: {-->
<!-- 'X-CSRFToken': '{{ csrf_token }}', // Assuming you have CSRF token available-->
<!-- },-->
<!-- })-->
<!-- .then(response => {-->
<!-- return response.json().then(data => {-->
<!-- if (!response.ok) {-->
<!-- // Handle specific error messages-->
<!-- if (data.message) {-->
<!-- throw new Error(data.message);-->
<!-- }-->
<!-- }-->
<!-- return data;-->
<!-- });-->
<!-- })-->
<!-- .then(data => {-->
<!-- console.log('Success:', data);-->
<!-- alert('Contact saved successfully.');-->
<!-- })-->
<!-- .catch(error => {-->
<!-- console.error('Error:', error);-->
<!-- alert('Error:' + error.message);-->
<!-- })-->
<!-- .finally(() => {-->
<!-- // Clear all fields in the form whether success or error-->
<!-- form.reset();-->
<!-- });-->
<!--}-->
</script>
</body>
</html>