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