<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Job Posting</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .internal-team{
        body {
            font-family: Arial, sans-serif;
        }
        .search-container1 {
            position: relative;
            display: inline-block;
            margin-left: 20px;
            margin-top:20px;
            border-radius:30px;
        }

        .search-container1 input[type="text"] {
            height: 30px;
            padding-right: 30px;
             border-radius:10px;
             border-color:black;
        }

        .search-container1 button {
            position: absolute;
            right: 0;
            top: 0px;
            height: 100%;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0 10px;
            color: #777;
        }

        .search-container1 button:hover {
            color: black;
        }
        .container {
            width: 75rem;
            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;
            width:120%;
        }
        .form-group label {
            margin-left: 10px;
            font-weight: bold;
        }
        #Address {
            margin-left: 40px;
            border-radius: 10px;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin-bottom: 20px;
            margin-left: 500px;
        }
        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;
        }
#Existing_employeeform{
        table {
            border-collapse: collapse;
            transform: scale(0.7);
            transform-origin: 0 0;
            width: 150%;
            margin-left: -100px;
            background-color:white;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align:center;
        }
        th {
            background-color: #ACC7D2;
            white-space: normal;
        }
        a {
            text-decoration: none;
        }
        .table-container {
            margin-left: 240px;
            max-height: 900px; /* Set the height as needed */

        }

        td {
            word-break: break-word;
            white-space: normal;
        }
   .modal {
    display: none; /* Hidden by default */
    position: fixed;  /* Sit on top */
    left: 200px;
    top: 0;
    width: 40%; /* Full width */
    height: 80%; /* Full height */

}

.modal-content {
    background-color: #fff;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px white;
    width: 50%; /* Could be more or less, depending on screen size */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 5px;

}
   .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.modal-content .separator {
    background-color: red; /* Vertical line styling */
    width: 1px; /* Line thickness */
    height: auto; /* Automatically adjust height to match content */
}

.close-button:hover,
.close-button:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}




        }
    </style>
</head>
<body>
<div class="internal-team">
    <div class="heading" style="margin-left:150px; margin-top:25px; color:#054560; ">
<b style="margin-top:0px; margin-left:200px; text-decoration: none;">
    Skyonn Technologies:
</b>&nbsp;&nbsp;&nbsp;Internal Team_Details

        </div>
    <ul>
        <li><a href="#" onclick="toggleForm('add_employeeform')" style="margin-left:-150px;">Add Employee</a></li>
        <li><a href="#" id ="Existing_employeeLink"  onclick="toggleForm('Existing_employeeform')" style="margin-left:40px;">Existing Employee</a></li>
       <div class="search-container1">
    <input type="text" id="searchInput" placeholder="Search Employee.." onkeyup="searchEmployee()" style="margin-left:30px; margin-top:-10px;">
    <button type="button" id="searchButton" onclick="searchEmployee()"><i class="fa fa-search"></i></button>
</div>
    </ul>

        <div class="container" id="add_employeeform" style="display: none; margin-left:50px;">
            <form id="internal-team" action="{% url 'save_Internal_team_Details' %}?admin_id={{ admin_id }}" method="post" style="margin-left: 100px">
                 {% csrf_token %}

                <div class="form-group" style="margin-left:-600px; margin-bottom:30px">

          <input type="file" id="excelFile" onchange="UploadExcel()" style="width:150; margin-left:5px" name="excelFile" required accept=".xlsx">
        <b style="margin-left:20px">Upload ExcelFile:</b>

          </button>

</div>
                <div class="two-col">
                    <div class="col1">
                        <div class="form-group">
                            <input type="text" id="FirstName" name="FirstName" required placeholder="Firstname" style="margin-left:55px" tabindex="1">
                            <label for="FirstName" class="required" style="margin-left:-0px;">First name</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="Designation" name="Designation" required placeholder="Eg.Designation" style="margin-left:45px" tabindex="3">
                            <label for="Designation" style="margin-left:-0px;" class="required">Designation</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="Address_1" name="Address_1" required placeholder="Address_1" style="margin-left:0px" tabindex="5">
                            <label for="Address_1" style="margin-left:-0px;" class="required"> Home Address_1:</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="City" name="City" required placeholder="City" style="margin-left:97px" tabindex="7">
                            <label for="City" style="margin-left:-0px;" class="required">City:</label>
                        </div>
                        <div class="form-group">
                            <input type="number" id="Pincode" name="Pincode" required placeholder="500090" maxlength="6" oninput="if(this.value.length > 6) this.value = this.value.slice(0, 6);" pattern="\d{20" style="margin-left:62px" tabindex="9">
                            <label for="Pincode" style="margin-left:-0px;" class="required">Pincode:</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="PhoneNo1" name="PhoneNo1" required placeholder="Phone No1*" maxlength="10" style="margin-left:55px" tabindex="11">
                            <label for="PhoneNo1" style="margin-left:-0px;" class="required">MobileNo</label>
                        </div>
                        <div class="form-group">
                            <input type="email" id="Email1" name="Email1" required placeholder="Email1*" style="margin-left:5px" tabindex="13">
                            <label for="Email" style="margin-left:-0px;" class="required">Company_Email</label>
                        </div>
                    </div>
                    <div class="col2" style="margin-left: 70px">
                        <div class="form-group">
                            <input type="text" id="LastName" name="LastName" required placeholder="LastName" style="margin-left:54px" tabindex="2">
                            <label for="LastName" class="required">Last Name</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="Department" name="Department" required placeholder="Eg.Department" style="margin-left:47px" tabindex="4">
                            <label for="Department" class="required">Department</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="Address_2" name="Address_2" placeholder="Address_2" style="margin-left:10px" tabindex="6">
                            <label for="Address_2">Home Address_2:</label>
                        </div>
                        <div class="form-group">
                            <select id="State" name="State" required style="margin-left:90px" 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">State:</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="Country" name="Country" value="India" required placeholder="Country" style="margin-left:67px" tabindex="10">
                            <label for="Country" class="required">Country:</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="LandNumber" name="LandNumber" maxlength="20" required placeholder="040 1111 1111"  style="margin-left:65px" tabindex="12">
                            <label for="LandNumber" class="required">Land_No:</label>
                        </div>
                        <div class="form-group">
                            <input type="email" id="Email2" name="Email2" placeholder="Email_2*" style="margin-left:15px" tabindex="14">
                            <label for="Email" class="required">Personal_Email</label>
                        </div>

                        <div class="form-group">
                            <select id="Level" name="Level" required style="margin-left:85px" tabindex="15">
                                <option value="" selected disabled>Select Level</option>
                                <option value="Level 1">Level 1</option>
                                <option value="Level 2">Level 2</option>
                                <option value="Level 3">Level 3</option>
                                <option value="Level 4">Level 4</option>
                                <option value="Level 5">Level 5</option>
                                <option value="Level 6">Level 6</option>
                                <option value="Level 7">Level 7</option>
                                <option value="Level 8">Level 8</option>
                                <option value="Level 9">Level 9</option>
                                <option value="Level 10">Level 10</option>
                                <option value="Level 11">Level 11</option>
                                <option value="Level 12">Level 12</option>
                            </select>
                            <label for="Level" class="required">Level:</label>
                        </div>
                        <form id="UploadExcelForm" method="post" action="{% url 'load_excel_data' %}?admin_id={{admin_id}}" style="margin-right: -350px; width:50px">

                    </div>
                </div>
                <button type="button" onclick="saveInternal_team_details()" style="margin-left: 40%; width: 100px; margin-top: 10px; padding: 2px; color:black; background-color:lightgreen; border-radius:15%"tabindex="16" >Save</button>
            </form>
        </div>
        <div class="container" id="Existing_employeeform" style="display: none;width:90rem;margin-left:110px;">
           <div class="table-container">
        <table  style="font-size: 17px">
          <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Designation</th>
                <th>Department</th>
                <th>MobileNo</th>
                <th>LandNumber</th>
                <th>Company_Email</th>
                <th>Personal_Email</th>
                <th>Level</th>
                <th style="width:200px;">Action</th>
            </tr>
          </thead>
             <tbody id="employeeTableBody">
                    <!-- Employee rows will be dynamically inserted here -->
             </tbody>
        </table>
                   <!-- Modal Structure -->
<div id="detailsModal" class="modal" style="margin-left:180px; display:none;  width:60%; margin-top:-30px; height:auto;">
    <div class="modal-content" >

        <p><strong>FirstName:</strong> <span id="FirstName_1" style="margin-left:62px"></span></p><br>
        <p><strong>LastName:</strong> <span id="LastName_1" style="margin-left:64px"></span></p><br>
        <p><strong>Designation:</strong> <span id="Designation_1" style="margin-left:50px"></span></p><br>
        <p><strong>Department:</strong> <span id="Department_1" style="margin-left:52px"></span></p><br>
        <p><strong>Home Address_1:</strong> <span id="Address_1_1" style="margin-left:10px"></span></p><br>
        <p><strong>Home Address_2:</strong> <span id="Address_2_1" style="margin-left:10px" ></span></p><br>
        <p><strong>City:</strong> <span id="City_1" style="margin-left:110px"></span></p><br>
        <p><strong>State:</strong> <span id="State_1" style="margin-left:100px" ></span></p><br>
        <p><strong>Pincode:</strong> <span id="Pincode_1" style="margin-left:78px"></span></p><br>
        <p><strong>Country:</strong> <span id="Country_1" style="margin-left:78px"></span></p><br>
        <p><strong>PhoneNo1:</strong> <span id="PhoneNo1_1" style="margin-left:60px"></span></p><br>
        <p><strong>LandNumber:</strong> <span id="LandNumber_1" style="margin-left:40px"></span></p><br>
        <p><strong>Company_Email:</strong> <span id="Email1_1" style="margin-left:15px"></span></p><br>
        <p><strong>Personal_Email:</strong> <span id="Email2_1" style="margin-left:20px"></span></p><br>
        <p><strong>Level:</strong> <span id="Level_1" style="margin-left:98px"></span></p><br>

        <button id="closePopup" style="background-color:red; color:white; border-radius:5px; border: 1px red;padding: 10px;
              width:60px; margin-left:100px" >close</button>

    </div>

</div>
    </div>

    </div>
    <script>
        function toggleForm(formId) {
            var forms = ['Existing_employeeform', 'add_employeeform'];
            forms.forEach(function(id) {
                var form = document.getElementById(id);
                if (form && id === formId) {
                    form.style.display = form.style.display === 'block' ? 'none' : 'block';
                } else if (form) {
                    form.style.display = 'none';
                }
            });
        }



</script>
        </body>
</html>
