<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .addSubclient{
     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;
        }
        .three-col .col1,
        .three-col .col2 {
            flex: 0 0 22%;
        }
        .two-col .form-group {
            margin-bottom: 15px;
        }
        .two-col input,
        .two-col select {
            width: calc(100% - 50px);
            padding: 10px;
            border-radius: 10px;
            border: 1px solid black;
        }
        label.required::after {
            content: "*";
            color: red;
            margin-left: 5px;
        }
        .form-group {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
        }
        .form-group label {
            margin-left: 10px;
        }
        #Address {
            margin-left: 40px;
            border-radius: 10px;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin-bottom: 20px;
            margin-left: 300px;
        }
        li {
            float:left;
            margin-bottom: 20px;
            margin-left: -10px;
        }
        li a {
            display: block;
            color: black;
            text-align: center;
            padding: 1px;
            text-decoration: underline;
            margin-top: 20px;
            margin-left: 60px;
        }
        a:hover {
            color:red;
        }
        .container1 {
            margin-left: 500px;
            width: 900px;
        }
        .add p {
            margin-left: 370px;
            margin-top: 3px;
        }
        .add a {
            text-decoration: none;
        }
        .container1 input[type="text"] {
            width: calc(100% - 20px);
            margin-right: 10px;
        }
         .add span {
            display: inline-block;
            width: 25px;
            height: 25px;
            border: 2px solid black;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin-left: 430px;
            color: black;
        }
         #jobPostingForm1{
            margin-left: -130px;
        }
        #jobPostingForm{
            margin-left: -130px;
        }
        .container1 .col2 {
            margin-top: -1px;
            #ParentCompany{


        }}
</style>
<body>
    <div class="addSubclient">
        <div class="container" style="width:200%; margin-left:210px;">
           <form id="addSubClientForm" action="{% url 'save-details-subcompany' %}?admin_id={{ admin_id }}" method="post">
                 {% csrf_token %}
                <div class="two-col" style="width:70%; margin-left:100px;">
                    <div class="col1" style="width:18%;">
                        <div class="form-group" style="margin-left:40px" >
                            <select id="ParentCompany" name="ParentCompany" required tabindex="1" style="margin-left:-65px">
                                <option value="" tabindex="1" style="margin-left:-55px;, width: 100px">Select Client</option>

                                 {% for client in clients %}
            <option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
        {% endfor %}
                            </select>
                            <label for="ParentCompany" class="required" style="width: 200px; margin-left:-650px;"><b>Parent Company:</b></label>
                        </div>

                      <div class="form-group" style="position: relative; width: 380px;">
                    <input type="text" id="GSTNo" name="GSTNo" style="width: 100%; padding-right: 60px;" placeholder="Parent_GST default" tabindex="3" oninput="this.value = this.value.toUpperCase()" disabled>
                     <label for="GSTNo" style="width: 200px; margin-left:-48px;"><b>Parent_GST No.</b></label>
                     <button type="button" id="changeButton" onclick="changeGST()" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);">Change</button>
                    </div>

                     <div class="form-group" style="margin-left:">
                            <input type="text" id="Address_1" name="Address_1" required placeholder="Address_1" tabindex="5" style= margin-left:-36px;">
                            <label for="Address_1" class="required" style="width: 200px; margin-left:-50px;"><b>Address_1:</b></label>
                        </div>
                        <div class="form-group" >
                            <input type="text" id="City" name="City" required placeholder="City" tabindex="7"  style= margin-left:-36px;">
                            <label for="City" class="required" style="width: 200px; margin-left:-50px;"><b>City:</b></label>
                        </div>
                         <div class="form-group">
                            <input type="number" id="Pincode" name="Pincode" required placeholder="500090" tabindex="9" style="margin-left:-36px" oninput="if(this.value.length > 6) this.value = this.value.slice(0, 6);" pattern="\d{6}">
                            <label for="Pincode" class="required" style="width: 200px; margin-left:-50px;"><b>Pincode:</b></label>
                        </div>
                    </div>
                    <div class="col2"  style="width:20%">
                       <div class="form-group" >
                            <input type="text" id="SubCompany" name="SubCompany"  style=" margin-left:1px;  overflow-wrap: break-word;"  required placeholder="Eg. oracle India" tabindex="2">
                            <label for="SubCompany" class="required" style="margin-left: 15px;"><b>Sub Company</b></label>
                        </div>


                          <div class="form-group" style="margin-left:-60px">
                            <input type="text" id="Location_Id" name="Location_Id" required placeholder="Eg. bangalore" tabindex="4" style= margin-left:12px;" >
                            <label for="Location_Id" class="required" style="margin-left: 75px;"><b>Location_Id:</b></label>
                        </div>
                          <div class="form-group" style="margin-left:-15px">
                            <input type="text" id="Address_2" name="Address_2" placeholder="optional" tabindex="6" style="margin-left: 33px;">
                            <label for="Address_2"  style="margin-left: 28px;"><b>Address_2:</b></label>
                        </div>
                        <div class="form-group" style="margin-left:-15px">
                    <select id="State" name="State" style="margin-left: 65px;" required tabindex="8">
                    <option value="" selected disabled>Select State</option>
                    <option value="Andhra Pradesh">Andhra Pradesh</option>
                    <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                      <option value="Assam">Assam</option>
                      <option value="Bihar">Bihar</option>
                      <option value="Chhattisgarh">Chhattisgarh</option>
                      <option value="Goa">Goa</option>
                      <option value="Gujarat">Gujarat</option>
                      <option value="Haryana">Haryana</option>
                      <option value="Himachal Pradesh">Himachal Pradesh</option>
                      <option value="Jharkhand">Jharkhand</option>
                      <option value="Karnataka">Karnataka</option>
                      <option value="Kerala">Kerala</option>
                      <option value="Madhya Pradesh">Madhya Pradesh</option>
                      <option value="Maharashtra">Maharashtra</option>
                      <option value="Manipur">Manipur</option>
                      <option value="Meghalaya">Meghalaya</option>
                      <option value="Mizoram">Mizoram</option>
                      <option value="Nagaland">Nagaland</option>
                      <option value="Odisha">Odisha</option>
                      <option value="Punjab">Punjab</option>
                      <option value="Rajasthan">Rajasthan</option>
                      <option value="Sikkim">Sikkim</option>
                      <option value="Tamil Nadu">Tamil Nadu</option>
                      <option value="Telangana">Telangana</option>
                      <option value="Tripura">Tripura</option>
                      <option value="Uttar Pradesh">Uttar Pradesh</option>
                      <option value="Uttarakhand">Uttarakhand</option>
                      <option value="West Bengal">West Bengal</option>
                    </select>
                       <label for="State" class="required" style="margin-left: 28px;"><b>State:</b></label>
                     </div>

                       <div class="form-group" style="margin-left:-10px">
                          <input type="text" id="country" name="country" style="margin-left: 40px;" required placeholder="country" value="India" tabindex="10">
                           <label for="country" class="required" style="margin-left: 25px;"><b>Country:</b></label>
                            </div>

                    </div>
                </div>

<button type="button" onclick="saveSubClient()" tabindex="11" style="border-radius: 5px; background-color:lightgreen; width: 100px; margin-left:400px; margin-top: 10px; padding: 5px; "> Save</button>            </form>
       </div>
    </div>
   <script>
       document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('secondForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault(); // Prevent the default form submission

        var formData = new FormData(form);

        // AJAX request to the server
        fetch("{% url 'save-details-subcompany' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': formData.get('csrfmiddlewaretoken') // Include CSRF token
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log(data.message); // Log the success message
            document.getElementById('successMessage').style.display = 'block'; // Show success message
            form.reset(); // Reset the form fields
        })
        .catch(error => console.error('Error:', error));
    });
});

    function saveSubClient() {
    const form = document.getElementById('addSubClientForm');
     const requiredFields = form.querySelectorAll('input[required], select[required]');

    let isValid = true;

    // Clear any previous custom validation messages and reset border colors
    requiredFields.forEach(field => {
        field.setCustomValidity(''); // Clear previous validation message
        field.style.borderColor = ''; // Reset border color
    });

    // Iterate over each required field to check if it has value
    for (let field of requiredFields) {
        if (!field.value.trim()) {
            isValid = false;

            // Highlight the empty field with a red border
            field.style.borderColor = '';

            // Set a custom validation message
            field.setCustomValidity('Please fill out this field.');

            // Show the validation message for this field
            field.reportValidity();

            // Focus the first invalid field
            field.focus();

            // Exit the loop after finding the first invalid field
            break;
        }
    }

    if (!isValid) {
        // Prevent form submission if validation fails
        console.log("Validation failed. Please fill out the required fields.");
        return;
    }

    // Proceed with saving data if all fields are valid
    const formData = new FormData(form);
    const url = form.getAttribute('action');

    console.log("Submitting form to:", url);
    console.log("Form data:", [...formData.entries()]); // Log the form data

    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': '{{ csrf_token }}', // Assuming you have CSRF token available
        },
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data);
        alert('Client saved successfully.');
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while saving the job posting.');
    });
}
   </script>
</body>
</html>