<!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>
