<!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>
    <style>
      .NewJobPosting {
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 55rem;
            margin: auto;
            padding: 20px;
            border-radius: 10px;

        }
        .three-col {
            display: flex;
            justify-content: space-between;
            gap: 0;
        }
        .three-col .col1,
        .three-col .col2,
        .three-col .col3,
        .three-col .col4 {
            flex: 0 0 22%;
        }
        .three-col .form-group {
            margin-bottom: 15px;
        }
        .three-col input,
        .three-col select {
            width: calc(100% - 30px);
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        label.required::after {
            content: "*";
            color: red;
            margin-left: 5px;
        }
        h1 {
            margin-left: 180px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        #JobDescription {
            width:380%;
            padding: 10px;
            border-radius: 15px;
            border: 1px solid #ccc;
            margin-bottom: 15px;
            height: 70px;
            margin-top: 20px;
        }
        #SpecialInstructions {
            width:380%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-bottom: 15px;
            height: 40px;
        }
        #popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        #popup-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 10px;
        }
        .col4 .form-group {
            margin-top: 165px;
            margin-left: -40px;
        }
        #Location {
    padding: 5px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
}

#Location:focus {
    border-color: #66afe9;
    outline: none;
}

#Location option {
    padding: 8px 10px;
}
.dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #F9F9F9;
            min-width: 160px;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            z-index: 1;
            padding: 10px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .dropdown-symbol::after {
            content: "\25BE"; /* Unicode for down arrow */
            position: absolute;
            right: 30px;
            top: 70%;
            transform: translateY(-50%);
            font-size: 25px;
        }
         .popup {
            display: none; /* Initially hidden */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .popup-content {
            background: white;
            padding: 20px;
            border-radius: 8px;
            width: 50%;
            max-width: 600px;
        }

        .popup-content h2 {
            margin-top: 0;
        }

        .popup-content .form-group {
            margin-bottom: 15px;
        }

        .popup-content .form-group label {
            margin-bottom: 5px;
        }

        .popup-content .form-group input,
        .popup-content .form-group select,
        .popup-content .form-group textarea {
         width: calc(100% - 20px);
         padding: 10px;
         border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
        }
  .add a:hover p {
            color: red; /* Change text color to red on hover */
        }
        .popup-content .form-group button {
            margin-top: 10px;
        }

        .popup .close-btn {
            cursor: pointer;
            color: red;
            font-weight: bold;
            float: right;
        }

        /* Centering elements within the popup */
        .popup-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .add  span a:hover {
            background-color: red;
            color: white;
        }
         .refresh-button {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 5px;
            cursor: pointer;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left:-60px;
        }

        .refresh-button:hover {
            background-color: #e0e0e0;
        }

        .refresh-button svg {
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }


/* Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.error-popup {
    position: absolute;
    background-color: red; /* Red background color */
    color: white; /* Text color */
    padding: 5px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    display: none; /* Initially hide the popup */
    z-index: 1; /* Ensure it's above other elements */
    margin-top:-440px;
    margin-left:400px;
    font-size:15px;
}

.error-popup.show {
    display: block; /* Show the popup when the 'show' class is added */
}
 input.required:invalid {
    border: 1px solid red;
}

input.required:invalid + .dropdown-symbol::after {
    content: '*'; /* Display an asterisk to indicate required field */
    color: red;
    margin-left: 5px;
}
   .back-button {
            background: none;
            border: none;
            position: absolute;
            top: 40px;
            margin-left:-530px;
            padding: 0;
            cursor: pointer;

        }

    .popup {

            left: 0%;
            top: 10%;

        }
        .popup-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .blur-background {
            filter: blur(2px);
            pointer-events: none; /* Disable interaction with blurred content */
        }
.custom-dropdown {
    position: relative;
    width: 100%;
}

.radio-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 10;
    padding: 10px 0;
}

.radio-dropdown label {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
}

.radio-dropdown label:hover {
    background-color: #f1f1f1;
}

.radio-dropdown input[type="radio"] {
    margin-right: 8px;
}

input#BudgetMin {
    cursor: pointer;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 4px;
}
 .conditional-fields {
            display: none;
        }

        .flex-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        }

    </style>
</head>
<body>

  <div class="NewJobPosting" style="width:100%">

    <div class="container" style="width:70%; margin-top:50px">
         <b style="margin-left:70px; font-size:20px; margin-bottom:50px;">NewJobPosting</b>
        <form id="jobPostingForm" action="{% url 'save_job_posting' %}" method="post">
            {% csrf_token %}

            <input id="restrictedField" value="{{ restricted|yesno:'True,False' }}" style="display:none;margin-left: 500px;">
            <br>
            <div class="three-col" style="margin-left:130px; margin-top:10px;">

                <div class="col1">
<div class="form-group">
    <label for="Client" class="required">Client:</label>
    <select id="Client" name="Client" required style="width: 90%;" tabindex="1">
        <option value="">Select Client</option>
        {% for client in clients %}
            <option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
        {% endfor %}
    </select>
</div>

<button type="button" id="refreshButton" class="refresh-button" onclick="refreshSPOCs()">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.65 6.35A7.95 7.95 0 0 0 12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8c3.93 0 7.18-2.86 7.87-6.65h-2.02c-.63 2.62-3.01 4.65-5.85 4.65-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.15.69 4.22 1.78l-2.5 2.5H20V4.5l-2.35 2.35z"/>
    </svg>
</button>

                    <div class="form-group" style="margin-top:-30px">
                        <label for="SPOC" class="required">SPOC:</label>
                        <select id="SPOC" name="SPOC" class="required" style="width: 90%;" tabindex="4">
                            <option value="" >Select SPOC</option>
                        </select>
                    </div>

                   <div class="form-group">
                     <label for="NoOfPosting" class="required">No of Posting:</label>
                     <input type="number" id="NoOfPosting" name="NoOfPosting" required tabindex="7"  style="width: 90%;" oninput="limitToThreeDigits(this)" max="999">
                    </div>

                    <div class="form-group">
                        <label for="Experience" >Experience in Yrs:</label>
                       <input type="number" id="Experience" name="Experience"  placeholder="3" style="width: 90%;" min="0" max="99"  tabindex="11" oninput="validateExperience(this)"  onblur="validateBudget()" min="00">
                    </div>
                    <div class="form-group">
                        <label for="Qualification" class="required" >Education:</label>
                       <input type="text" id="Qualification" name="Qualification" required placeholder="msc" style="width: 90%;" tabindex="13">

                    </div>

                    <div class="form-group">
                        <label for="JobDescription" class="required">Job Description:</label>
                        <textarea id="JobDescription" name="JobDescription" required placeholder="" style="margin-top: -0px; width: 330%;" tabindex="16"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="SpecialInstructions" style="white-space: nowrap;">Special Instructions If any:</label>
                        <input type="text" id="SpecialInstructions" name="SpecialInstructions" placeholder="" style="width: 330%;" tabindex="17">
                    </div>
                      <div class="form-group">
            <label for="file" class="required">Upload JD:</label>
            <input type="file" id="JD" name="JD" required accept=".pdf,.doc,.docx" tabindex="18">
        </div>
                </div>
                <div class="col2">
                    <div class="form-group">
                        <label for="JobID" class="required" style="margin-left: -10px; " >Job ID:</label>
                        <input type="text" id="JobID" name="JobID" required placeholder="" style="width: 90%; margin-left: -10px;" tabindex="2">
                    </div>
                    <div class="form-group" style="margin-left: -10px;">
                        <label for="SPOC2" style="margin-left: 0px;">SPOC 2:</label>
                        <select id="SPOC2" name="SPOC2" style="width: 88%;" tabindex="5">
                            <option value="">Select SPOC 2</option>
                        </select>
                    </div>
                   <div class="form-group">
                     <label for="StartDate" class="required">Start Date:</label>
                     <input type="date" id="StartDate" name="StartDate" required tabindex="7" onchange="validateDates()" style="width:88%;">
                    </div>
                    <div class="form-group">
    <label for="BudgetMin">Budget/Salary (CTC):</label>
    <select name="BudgetMin" id="BudgetMin" style="width: 90%; padding: 8px;" onchange="toggleConditionalFields()" tabindex="12">
        <option value="" disabled selected>Select Budget Category</option>
        <option value="Fixed">Fixed</option>
        <option value="Industry Standard">Industry Standard</option>
    </select>
</div>
    <div id="minAmountErrorPopup" style="display:none; color: red; position: absolute; margin-left: 200px;">
        <p>Min amount must be greater than zero.</p>
    </div>
    <div id="maxAmountErrorPopup" style="display:none; color: red; position: absolute; margin-left: 200px;">
        <p>Max amount must be greater than Min amount.</p>
    </div>


                       <div class="form-group">
               <div class="dropdown">
                <label for="Location" class="required" style="margin-left:8px">Location:</label>
                <div class="dropdown-symbol" onclick="toggleDropdown()" style="margin-left:230px; font-size: 100px;"></div>
                <input type="text" id="selectedStatesInput" name="Location" required readonly style="margin-left: 5px; padding-right: 20px; width:200px;" tabindex="14">
               <div class="dropdown-content" id="checkboxContainer" style="margin-left: 15px; display: none;">
            <div id="checkboxItems">
                <input type="checkbox" id="anyWhereCheckbox" name="anyWhereCheckbox" value="Anywhere" onchange="updateInputField()" style="margin-left: -50px;">
                <label for="anyWhereCheckbox" style="margin-left: -50px;">Anywhere</label><br>
            </div>
           <input type="checkbox" id="OtherCheckbox" name="OtherCheckbox" value="Other" onchange="toggleOtherInputField()" style="margin-left: -50px;">
            <label for="OtherCheckbox" style="margin-left: -50px;">Other</label><br>
        </div>
    </div>
    <button onclick="showAddLocationModal()" style="display: none;" id="saveButton">Save New Location</button>
</div>  </div>

               <div class="col3" style="width:100%">
               <div class="form-group" style="margin-left:-40px;">
               <div class="dropdown">
                 <label for="Header" class="required">Header:</label>
                        <input type="text" id="Header" name="Header" required placeholder="Ex.oracle Technical developer" style="width: 106%;" tabindex="3">
               <div>
               </div>
    </div>
    <button onclick="showAddLocationModal()" style="display: none;" id="saveButton">Save New Location</button>
</div>

         <div class="add" id="addSPOC" style="margin-left:-35px">
                        <a href="#" onclick="showPopup()">
                            <span class="circle"><i class="fas fa-plus" style="margin-top: 15px; margin-left:100px"></i></span>
                            <p style="margin-left: 80px; margin-top: -1px; color:black">Add SPOC</p>
                        </a>
                    </div>


                   <div class="form-group" style="margin-top:20px;">
                   <label for="CloseDate" class="required">Close Date:</label>
                   <input type="date" id="CloseDate" name="CloseDate" required tabindex="8" onchange="validateDates()">
                   </div>

<!--                   <div class="form-group">-->
<!--                        <label for="BudgetMax" >Budget Max Rs:</label>-->
<!--                       <input type="number" id="BudgetMax" name="BudgetMax"  placeholder="" style="width: 85%;" tabindex="13" oninput="validateBudget()" onblur="validateBudget()" pattern="\d{1,20}">-->
<!--                    </div>-->

                </div>
                <div class="col4">
                    <div></div>
                    <div></div>

                </div>


            </div>



            <div class="footer">
                <button type="button" onclick="saveJobPosting()" style="border-radius: 5px; background-color:lightgreen; width: 70px; margin-left: 450px; margin-top: -20px; padding: 5px;" tabindex="19">Save</button>

            </div>
            <div id="conditionalFields" class="conditional-fields" style="display:none; margin-top:-447px; margin-left:290px" >

        <div id="timePeriodWrapper" style="display: flex; align-items: center; gap: 15px; margin-left: 300px;">
            <label for="timePeriod" style="margin-top:-60px; margin-left:140px;">Please Select One:</label>
            <select id="timePeriod" name="timePeriod" style="width: 150px; padding: 6px; margin-left:-150px">
                <option value="" disabled selected >Select Option</option>
                <option value="annual" selected>Annual</option>
                <option value="yearly">Yearly</option>
                <option value="monthly">Monthly</option>
                <option value="daily">Daily</option>
                <option value="hourly">Hourly</option>
            </select>
        </div>
   <div class="laxmi">
    <div id="amountFields" style="display: flex; align-items: center; gap: 1px; margin-left: 640px; margin-top:-30px;">
        <label for="minAmount" id="minLabel" style="margin-top:-55px; margin-left: -5px; width: 130px;">Min(INR)</label>
        <input type="number" id="minAmount" name="minAmount" placeholder="Enter Minimum" style="width: 120px; padding: 5px; margin-left: -100px;"  oninput="validateLength(this)"  oninput="convertInputToWords(this)">
        <p id="minSalary"></p>
        <label for="maxAmount" id="maxLabel" style="margin-top:-55px; margin-left: 40px;">Max(INR)</label>
        <input type="number" id="maxAmount" name="maxAmount" placeholder="Enter Maximum" style="width: 130px; padding: 5px;margin-left: -100px" onblur="validateSalary()"  oninput="validateLength(this)"   oninput="convertInputToWords(this)">
         <p id="maxSalary" ></p>
    </div>
</div>

<p style="margin-left:280px; margin-top:-18px">Please Select Salary:</p>
           </div>

     <p  style="margin-left:700px; margin-top:15px" id="Salary"></p>
        </form>
    </div>
<div id="budgetMaxErrorPopup" class="error-popup">
    Budget Max must be greater than Budget Min.
</div>



    <div class="popup" id="addContactPopup" style="width: 100%; font-size:14px; margin-top:-50px;">
    <div class="popup-content">
        <span class="close-btn" onclick="hidePopup()"></span>
        <button type="button" onclick="goBack()" class="back-button">
          <i class="fas fa-arrow-left" style="font-size: 22px;" ></i>
               </button>
        <h3>Add SPOC</h3>
        <form id="AddSPOCform" method="post"    action="{% url 'add_contact' %}?admin_id={{ admin_id }}">
               {% csrf_token %}
            <div class="form-group" >
                <label for="ClientDropdown" class="required"><b>Company:</b></label>
                <select id="ClientDropdown" name="Company" required tabindex="20">
                    <option value="">Select Company</option>
                    {% for client in clients %}
                        <option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="SubClientDropdown"><b>Sub Company:</b></label>
                <select id="SubClientDropdown"  name="Sub_Company" tabindex="21">
                    <option value="">Select Sub Company</option>
                </select>
            </div>
            <div class="form-group">
                <label for="FirstName" class="required"><b>FirstName:</b></label>
                <input type="text" id="FirstName" name="FirstName" style="height: 40px;" required placeholder="Eg.Srinivas" tabindex="22">
            </div>
            <div class="form-group">
                <label for="LastName" class="required"><b>LastName:</b></label>
                <input type="text" id="LastName" name="LastName" required placeholder="Eg. lavisetty" tabindex="23">
            </div>
            <div class="form-group">
                <label for="Department" class="required"><b>Department:</b></label>
                <select id="Department" name="Department" required tabindex="24" onchange="checkForOtherOption()">
                    <option value="">Select Department</option>
                    <option value="HIRING MANAGERS">Hiring Manager</option>
                    <option value="ACCOUNT DEPARTMENT">Account Department</option>
                    <option value="HUMAN RESOURCES">Human Resources</option>
                    <option value="ADMINISTRATION AND LEGAL">Administration And Legal</option>
                    <option value="Other">Other</option>
                </select>
            </div>
            <div class="form-group">
                <label for="Designation" class="required"><b>Designation:</b></label>
                <input id="Designation" name="Designation" placeholder="Eg. Manager" required tabindex="25">
            </div>
            <div class="form-group">
                <label for="Email" class="required"><b>Email Id:</b></label>
                <input type="email" id="Email" name="Email" required placeholder="arminta@123gmail.com" tabindex="26">
            </div>
            <div class="form-group">
                <label for="Phone_number" class="required"><b>Phone No:</b></label>
                <input type="text" id="Phone_number" name="Phone_number" required pattern="^(?!0{10})[6-9]\d{9}$" placeholder="9618984213" maxlength="10" tabindex="27">
            </div>

            <button type="button" onclick="saveAdd_SPOC()" tabindex="28">Save</button>


        </form>
    </div>
</div>
<div class="popup" id="successPopup" style="display: none;">
    <div class="popup-content">
        <span class="close-btn" onclick="hideSuccessPopup()"></span>
        <h3> SPOC saved successfully!</h3>
        <button onclick="hideSuccessPopup()">OK</button>
    </div>
</div>

 <div id="addLocationModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border:1px solid #ccc; box-shadow:0 0 10px rgba(0,0,0,0.1);">
    <label for="newLocationInput">Enter New Location:</label>
    <input type="text" id="newLocationInput" style="margin:10px 0;">
    <button onclick="saveNewLocation()">Save</button>
    <button onclick="closeAddLocationModal()">Cancel</button>
</div>

</div>
</body>
</html>
