<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client Details</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center; /* Center align the heading */
        }
        h2 {
            margin-top: 20px; /* Add some top margin to the heading */
        }
        .tab {
            float: left;
            width: 25%;
            height: 50px;
            background-color: #f1f1f1;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        .tab:last-child {
            border-right: none;
        }
        .tabcontent {
            display: none;
            padding: 20px;
            clear: both;
            overflow: auto;
        }
        .two-col {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .col1, .col2 {
            flex: 0 0 48%;
        }
        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], select {
            width: 100%;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        button[type="submit"] {
            margin-left: 16%;
            width: 100px;
            padding: 8px;
            color: black;
            background-color: lightblue;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .add {
            margin-top: 20px;
        }
        .circle {
            width: 30px;
            height: 30px;
            background-color: lightblue;
            border-radius: 50%;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            margin-right: 10px;
        }
        .add a {
            text-decoration: none;
            color: black;
        }
          .search-fields {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .search-fields label {
        flex: 0 0 auto;
        margin-right: 10px;
    }

    .search-fields select {
        flex: 1;
    }

    .search-fields button {
        margin-left: 10px;
    }
    </style>
</head>
<body>

<h2>Client Details</h2> <!-- Heading centered above the tabs -->
<div class="tab" onclick="openTab('existingClient')">Client Details</div>

<div class="tab" onclick="openTab('existingClient')">Existing Client</div>
<div class="tab" onclick="openTab('addNewClient')">Add New Client</div>
<div class="tab" onclick="openTab('addSubClients')">Add Sub Clients/Locations</div>

<div id="existingClient" class="tabcontent">
    <h3>Existing Client</h3>
    <div class="search-fields">
        <label for="parentCompanyDropdown">Parent Company</label>
        <select id="parentCompanyDropdown" name="parentCompany" required>
            <option value="" disabled selected>Select Parent Company</option>
            <option value="Oracle India">Oracle India</option>
            <option value="Persistent Systems">Persistent Systems</option>
            <option value="Tech Mahendra">Tech Mahendra</option>
            <option value="GS Labs">GS Labs</option>
            <!-- Add other options here -->
        </select>

        <label for="Location">Location</label>
        <select id="Location" name="Location" required>
            <option value="" disabled selected>Select Location</option>
            <option value="all">All</option>
            <option value="hyderabad">Hyderabad</option>
            <option value="bangalore">Bangalore</option>
            <option value="pune">Pune</option>
        </select>

        <button onclick="fetchAndDisplayData()">Submit</button>
    </div>
    <iframe id="combinedDataIframe" style="width: 100%; height: 400px;"></iframe>
</div>

<div id="addNewClient" class="tabcontent">
  <h3>Add New Client</h3>
  <form id="addClientForm" action="{% url 'save_details'  %}" method="post">
    {% csrf_token %}
    <div class="two-col">
        <div class="col1">
            <div class="form-group">
                <label for="ParentCompany">Parent Company</label>
                <select id="ParentCompany" name="ParentCompany" required>
                    <option value="" disabled selected>Select Parent Company</option>
                    <option value="Oracle India">Oracle India</option>
                    <option value="Persistent Systems">Persistent Systems</option>
                    <option value="Tech Mahendra">Tech Mahendra</option>
                    <!-- Add other options here -->
                </select>
            </div>
            <div class="form-group">
                <label for="Location">Location</label>
                <input type="text" id="Location" name="Location" required placeholder="Location">
            </div>
            <div class="form-group">
                <label for="Department">Department</label>
                <input type="text" id="Department" name="Department" required placeholder="Department">
            </div>
            <div class="form-group">
                <label for="GSTNo">GST No.</label>
                <input type="text" id="GSTNo" name="GSTNo" required placeholder="GST No.">
            </div>
        </div>
        <div class="col2">
            <div class="form-group">
                <label for="Address">Address</label>
                <input type="text" id="Address" name="Address" required placeholder="Address">
            </div>
        </div>
    </div>
    <h3 style="text-align: center; margin-bottom: 20px;">Admin Department Contact person Name for the Above office location*</h3>
    <div class="container1">
        <div class="two-col">
            <div class="col1">
                <div class="form-group">
                    <label for="Admin_FirstName">First Name</label>
                    <input type="text" id="Admin_FirstName" name="Admin_FirstName" required placeholder="First Name">
                </div>
                <div class="form-group">
                    <label for="Admin_PhoneNo1">Phone No1</label>
                    <input type="text" id="Admin_PhoneNo1" name="Admin_PhoneNo1" required placeholder="Phone No1">
                </div>
                <div class="form-group">
                    <label for="Admin_CompanyEmail">Company Email</label>
                    <input type="text" id="Admin_CompanyEmail" name="Admin_CompanyEmail" required placeholder="Company Email">
                </div>
                <div class="form-group">
                    <label for="Admin_Designation">Designation</label>
                    <input type="text" id="Admin_Designation" name="Admin_Designation" required placeholder="Designation">
                </div>
            </div>
            <div class="col2">
                <div class="form-group">
                    <label for="Admin_LastName">Last Name</label>
                    <input type="text" id="Admin_LastName" name="Admin_LastName" required placeholder="Last Name">
                </div>
                <div class="form-group">
                    <label for="Admin_PhoneNo2">Phone No2</label>
                    <input type="text" id="Admin_PhoneNo2" name="Admin_PhoneNo2" required placeholder="Phone No2">
                </div>
                <div class="form-group">
                    <label for="Admin_Location">Location</label>
                    <input type="text" id="Admin_Location" name="Admin_Location" required placeholder="Location">
                </div>
                <div class="form-group">
                    <label for="Admin_Department">Department</label>
                    <input type="text" id="Admin_Department" name="Admin_Department" required placeholder="Department">
                </div>
            </div>
        </div>
        <button type="submit" id="saveButton">Save</button>
        <div class="add">
            <a href="{% url 'client-details'  %}">
                <span class="circle">+</span>
                <p>Add New sub location</p>
            </a>
        </div>
    </div>
</form>
</div>

<div id="addSubClients" class="tabcontent">
  <h3>Add Sub Clients/Locations</h3>
  <form id="addSubClientForm" action="{% url 'save-details-subcompany'  %}" method="post">
    {% csrf_token %}
    <div class="two-col">
        <div class="col1">
            <div class="form-group">
                <label for="ParentCompany">Parent Company</label>
                <select id="ParentCompany" name="ParentCompany" required>
                    <option value="" disabled selected>Select Parent Company</option>
                    <option value="Oracle India">Oracle India</option>
                    <option value="Persistent Systems">Persistent Systems</option>
                    <option value="Tech Mahendra">Tech Mahendra</option>
                    <!-- Add other options here -->
                </select>
            </div>
            <div class="form-group">
                <label for="Location">Location</label>
                <input type="text" id="Location" name="Location" required placeholder="Location">
            </div>
            <div class="form-group">
                <label for="Department">Department</label>
                <input type="text" id="Department" name="Department" required placeholder="Department">
            </div>
            <div class="form-group">
                <label for="GSTNo">GST No.</label>
                <input type="text" id="GSTNo" name="GSTNo" required placeholder="GST No.">
            </div>
            <div class="form-group">
                <label for="SubCompany">Sub Company</label>
                <input type="text" id="SubCompany" name="SubCompany" required placeholder="Sub Company">
            </div>
        </div>
        <div class="col2">
            <div class="form-group">
                <label for="Address">Address</label>
                <input type="text" id="Address" name="Address" required placeholder="Address">
            </div>
        </div>
    </div>
    <h3 style="text-align: center; margin-bottom: 20px;">Department Contact person Name for the Above office location*</h3>
    <div class="container1">
        <div class="two-col">
            <div class="col1">
                <div class="form-group">
                    <label for="Admin_FirstName">First Name</label>
                    <input type="text" id="Admin_FirstName" name="Admin_FirstName" required placeholder="First Name">
                </div>
                <div class="form-group">
                    <label for="Admin_PhoneNo1">Phone No1</label>
                    <input type="text" id="Admin_PhoneNo1" name="Admin_PhoneNo1" required placeholder="Phone No1">
                </div>
                <div class="form-group">
                    <label for="Admin_CompanyEmail">Company Email</label>
                    <input type="text" id="Admin_CompanyEmail" name="Admin_CompanyEmail" required placeholder="Company Email">
                </div>
                <div class="form-group">
                    <label for="Admin_Designation">Designation</label>
                    <input type="text" id="Admin_Designation" name="Admin_Designation" required placeholder="Designation">
                </div>
            </div>
            <div class="col2">
                <div class="form-group">
                    <label for="Admin_LastName">Last Name</label>
                    <input type="text" id="Admin_LastName" name="Admin_LastName" required placeholder="Last Name">
                </div>
                <div class="form-group">
                    <label for="Admin_PhoneNo2">Phone No2</label>
                    <input type="text" id="Admin_PhoneNo2" name="Admin_PhoneNo2" required placeholder="Phone No2">
                </div>
                <div class="form-group">
                    <label for="Admin_Location">Location</label>
                    <input type="text" id="Admin_Location" name="Admin_Location" required placeholder="Location">
                </div>
                <div class="form-group">
                    <label for="Admin_Department">Department</label>
                    <input type="text" id="Admin_Department" name="Admin_Department" required placeholder="Department">
                </div>
            </div>
        </div>
        <button type="submit" id="saveButton">Save</button>
        <div class="add">
            <a href="{% url 'client-details'  %}">
                <span class="circle">+</span>
                <p>Add New sub location</p>
            </a>
        </div>
    </div>
</form>
</div>
<script>
    function openTab(tabName) {
        var i, tabcontent;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        document.getElementById(tabName).style.display = "block";
    }
 function fetchAndDisplayData() {
        const parentCompany = document.getElementById('parentCompanyDropdown').value;
        const location = document.getElementById('Location').value;

        fetchCombinedDetails(parentCompany, location);
    }

    function fetchCombinedDetails(parentCompany, location) {
        fetch(`/skyonnadmin/get_subcompany_details/?parent_company=${parentCompany}&location=${location}`)
            .then(response => response.json())
            .then(data => {
                // Update the iframe with the combined data
                const iframe = document.getElementById('combinedDataIframe');
                const htmlContent = generateHTML(data);
                iframe.contentWindow.document.open();
                iframe.contentWindow.document.write(htmlContent);
                iframe.contentWindow.document.close();
            })
            .catch(error => console.error('Error fetching combined details:', error));
    }


function generateHTML(data) {
    let html = '<html><head><title>Combined Data</title></head><body>';
    html += '<h2>Combined Data</h2>';
    html += '<table border="1"><tr>';

    // Add table headers
    const columns = Object.keys(data[0]);
    columns.forEach(column => {
        if (column !== 'sub_company') { // Ignore 'sub_company' field here
            html += `<th>${column}</th>`;
        }
    });
    // Add separate column for 'sub_company'
    html += '<th>Sub Company</th>';

    html += '</tr>';

    // Add data rows
    data.forEach(detail => {
        html += '<tr>';
        columns.forEach(column => {
            if (column !== 'sub_company') { // Ignore 'sub_company' field here
                html += `<td>${detail[column]}</td>`;
            }
        });
        // Add value for 'sub_company' column or empty if it doesn't exist
        html += `<td>${detail.sub_company || ''}</td>`;
        html += '</tr>';
    });

    html += '</table></body></html>';
    return html;
}

    document.getElementById('parentCompanyDropdown').addEventListener('change', function() {
        const selectedParentCompany = this.value;
        const selectedLocation = document.getElementById('Location').value;
        fetchCombinedDetails(selectedParentCompany, selectedLocation);
    });

    document.getElementById('Location').addEventListener('change', function() {
        const selectedLocation = this.value;
        const selectedParentCompany = document.getElementById('parentCompanyDropdown').value;
        fetchCombinedDetails(selectedParentCompany, selectedLocation);
    });
</script>

</body>
</html>
