Untitled

{% load widget_tweaks %}
{% load admission_filter %}
{% load admission_specific_filter %}

<div class="row">
    <div class="col-md-6">
        <i class="fa-solid fa-arrow-left-long fa-lg" title="Back" name="wizard_goto_step" value="{{ wizard.steps.prev }}" style="color: rgb(12, 12, 140);cursor: pointer;" onclick="goBack()"></i><span style="color: rgb(12, 12, 140);" class="fw-bold">&nbsp;&nbsp; Employment Details
        </span>
        <input type="hidden" name="wizard_goto_step" id="wizard_goto_step" value="{{ wizard.steps.prev }}" />
    </div>
</div>
<br>
<div class="row">
    <div class="form-group1">
        <label for="currentEmpStatus" class="bold">Current Employment Status<span class="text-danger">*</span></label>
        {{ form.current_employment_status|attr:'required:true'|attr:'class:form-select form-select-lg'|attr:'onchange:employmentCheck()'}}
        {% if form.current_employment_status.errors %}
            <span class="alert-danger">Please select Employment Status</span>
        {% endif %}
    </div>
    <div class="form-group1">
        <label for="currentOrg" class="bold">Current Organization<span class="text-danger">*</span></label>
        {% with org=user.email|get_ELOA_org %} 
            {%if user.email|get_payfee_waiver_permission %}
                {% render_field form.current_organization readonly="true" value=org %}
            {% else %}
                {{ form.current_organization|attr:'required:true'|attr:'class:form-control'|attr:'maxlength:250'}}
            {% endif %}
        {% endwith %}
        <!-- <small class="form-text note">NOTE: Max 50 characters allowed</small> -->
        {% if form.current_organization.errors %}
            <span class="alert-danger">Please enter Current Organization</span>
        {% endif %}
    </div>
    <!-- Date of Joining Current Organization not for certification program -->
    {% if not is_certification %}
    <div class="form-group1">
            <label for="currentEmpDate" class="bold">Date of Joining Current Organization<span class="text-danger">*</span></label>
            {{ form.current_org_employment_date|attr:'required:true'|attr:'class:form-control'|attr:'type:date'|attr:'onfocusout:updateMinDate()'}}
            <span class="alert-danger fw-normal fs-4" id="dojErr" style="display: none;"></span>
            {% if form.current_org_employment_date.errors %}
                <span class="alert-danger">Please select Date of Joining Current Organization</span>
            {% endif %}
    </div>
    {% endif %}
    <style>
        .autocomplete {
            position: relative;
        }

        .autocomplete-items {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 4px;
            overflow-y: auto;
            max-height: 200px;
            z-index: 1000;
            width: 100%;
            scrollbar-width: thin;
            scrollbar-color: silver #fff;
            margin-bottom: 10px;
        }

        .autocomplete-items::-webkit-scrollbar {
            width: 10px;
        }

        .autocomplete-items::-webkit-scrollbar-track {
            background: whitesmoke; 
        }

        .autocomplete-items::-webkit-scrollbar-thumb {
            background-color: #ced4da; 
            border-radius: 4px;
        }

        .autocomplete-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            transition: background-color 0.3s ease, color 0.3s ease;
            color: #333; 
        }

        .autocomplete-item:hover {
            background-color: #f0f0f0;
        }

        .autocomplete-item.selected {
            background-color: #007bff;
            color: #fff;
        }

        .autocomplete-item.selected:hover {
            background-color: #0056b3;
        }

        .autocomplete-item:not(.selected):hover {
            transition: background-color 0.3s ease, color 0.3s ease;
        }
    </style>
    <div class="form-group1">
        <label for="currentWorkLoc" class="bold">Current Work Location<span class="text-danger">*</span></label>
        <div class="autocomplete">
            {{ form.work_location|attr:'required:true'|attr:'class:form-control'}}
            {% if form.work_location.errors %}
                <span class="alert-danger">Please select Work Location</span>
            {% endif %}
            <div id="autocomplete-dropdown" class="autocomplete-items"></div>
            <span class="alert-danger fw-normal fs-4" id="cwlErr" style="display: none;"></span>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                url: "{% url 'registrationForm:location-ajax'%}",
                cache: false,
                success: function (data) {
                    autocompleteData = data['locations'];
                },
                async: false,
            });
        });

        // JavaScript
        const inputField = document.getElementById('id_2-work_location');
        const errorMessage = document.getElementById('cwlErr');
        const autocompleteDropdown = document.getElementById('autocomplete-dropdown');
        let selectedOptionIndex = -1; // Initialize selected option index

        // Function to check if the value is present in the autocomplete array
        function checkAutocompleteValue(value) {
            return autocompleteData.includes(value);
        }

        // Function to highlight the selected option
        function highlightOption(index) {
            const options = document.querySelectorAll('.autocomplete-item');
            options.forEach(option => option.classList.remove('selected'));
            if (index >= 0 && index < options.length) {
                options[index].classList.add('selected');
            }
        }

        // Event listener for keydown event on the input field
        inputField.addEventListener('keydown', function(event) {
            const options = document.querySelectorAll('.autocomplete-item');
            if (event.key === 'ArrowDown') {
                event.preventDefault(); // Prevent default browser behavior
                if (options.length > 0) {
                    selectedOptionIndex = (selectedOptionIndex + 1) % options.length;
                    highlightOption(selectedOptionIndex);
                    // Scroll the container to make the selected option visible
                    options[selectedOptionIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
            } else if (event.key === 'ArrowUp') {
                event.preventDefault(); // Prevent default browser behavior
                if (options.length > 0) {
                    selectedOptionIndex = (selectedOptionIndex - 1 + options.length) % options.length;
                    highlightOption(selectedOptionIndex);
                    // Scroll the container to make the selected option visible
                    options[selectedOptionIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
            } else if (event.key === 'Enter') {
                if (selectedOptionIndex !== -1) {
                    event.preventDefault(); // Prevent form submission
                    inputField.value = options[selectedOptionIndex].textContent;
                    errorMessage.style.display = 'none'; // Hide error message
                }
                // Hide the dropdown after pressing Enter
                autocompleteDropdown.style.display = 'none';
            } else if (event.key === 'Tab') {
                autocompleteDropdown.style.display = 'none';
            }
            
        });

        // Event listener for input field
        inputField.addEventListener('input', function() {
            const inputValue = this.value.trim();
            populateAutocompleteOptions(inputValue);
        });

        // Function to populate autocomplete options
        function populateAutocompleteOptions(inputValue) {
            const dropdown = autocompleteDropdown;
            dropdown.innerHTML = '';
            autocompleteData.forEach(item => {
                if (item.toLowerCase().includes(inputValue.toLowerCase())) {
                    const option = document.createElement('div');
                    option.classList.add('autocomplete-item');
                    option.textContent = item;
                    option.addEventListener('click', () => {
                        inputField.value = item;
                        dropdown.style.display = 'none';
                        errorMessage.style.display = 'none'; // Hide error message
                    });
                    dropdown.appendChild(option);
                }
            });
            dropdown.style.display = dropdown.children.length > 0 ? 'block' : 'none';
        }

        // Event listener to hide error message when input field gains focus
        inputField.addEventListener('focus', function() {
            errorMessage.style.display = 'none';
            populateAutocompleteOptions(inputField.value);
        });

        // Event listener to validate input when input field loses focus
        inputField.addEventListener('blur', function() {
            const enteredValue = inputField.value.trim();
            if (enteredValue !== '' && !checkAutocompleteValue(enteredValue)) {
                errorMessage.textContent = 'Please select a valid location';
                errorMessage.style.display = 'block';
            } else {
                errorMessage.style.display = 'none';
            }
        });

        // Event listener for selecting an autocomplete option
        autocompleteDropdown.addEventListener('click', function(event) {
            const target = event.target;
            if (target.classList.contains('autocomplete-item')) {
                const selectedValue = target.textContent;
                inputField.value = selectedValue;
                errorMessage.style.display = 'none';
                autocompleteDropdown.style.display = 'none';
            }
        });

        window.addEventListener('click', function(event) {
            if (event.srcElement.id === 'id_2-work_location') {
                return false;
            }else if (event.srcElement.className !== 'autocomplete-item') {
                autocompleteDropdown.style.display = 'none';
            }
        });
    </script>
    <div class="form-group1">
        <label for="currentDesignation" class="bold">Current Designation<span class="text-danger">*</span></label>
        {{ form.current_designation|attr:'required:true'|attr:'class:form-control'|attr:'maxlength:30'}}
        {% if form.current_designation.errors %}
            <span class="alert-danger">Please select Current Designation</span>
        {% endif %}
    </div>
    <style>
        .autocomplete-inds {
            position: relative;
        }

        .autocomplete-items-inds {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 4px;
            overflow-y: auto;
            max-height: 200px;
            z-index: 1000;
            width: 100%;
            scrollbar-width: thin;
            scrollbar-color: silver #fff;
            margin-bottom: 10px;
        }

        .autocomplete-items-inds::-webkit-scrollbar {
            width: 10px;
        }

        .autocomplete-items-inds::-webkit-scrollbar-track {
            background: whitesmoke; 
        }

        .autocomplete-items-inds::-webkit-scrollbar-thumb {
            background-color: #ced4da; 
            border-radius: 4px;
        }

        .autocomplete-item-inds {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            transition: background-color 0.3s ease, color 0.3s ease;
            color: #333; 
        }

        .autocomplete-item-inds:hover {
            background-color: #f0f0f0;
        }

        .autocomplete-item-inds.selected {
            background-color: #007bff;
            color: #fff;
        }

        .autocomplete-item-inds.selected:hover {
            background-color: #0056b3;
        }

        .autocomplete-item-inds:not(.selected):hover {
            transition: background-color 0.3s ease, color 0.3s ease;
        }
    </style>
    <div class="form-group1">
        <label for="currentOrgIndustry" class="bold">Current Industry<span class="text-danger">*</span></label>
        <div class="autocomplete-inds">
            {{ form.current_org_industry|attr:'required:true'|attr:'class:form-control'}}
            {% if form.current_org_industry.errors %}
                <span class="alert-danger">Please select Current Industry</span>
            {% endif %}
            <div id="autocomplete-dropdown-inds" class="autocomplete-items-inds"></div>
            <span class="alert-danger fw-normal fs-4" id="coiErr" style="display: none;"></span>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                url: "{% url 'registrationForm:industry-ajax'%}",
                cache: false,
                success: function (data) {
                    autocompleteDataInds = data['industry'];
                },
                async: false,
            });
        });

        // JavaScript
        const inputFieldInds = document.getElementById('id_2-current_org_industry');
        const errorMessageInds = document.getElementById('coiErr');
        const autocompleteDropdownInds = document.getElementById('autocomplete-dropdown-inds');
        let selectedOptionIndexInds = -1; // Initialize selected option index

        // Function to check if the value is present in the autocomplete array
        function checkAutocompleteValueInds(value) {
            return autocompleteDataInds.includes(value);
        }

        function highlightOptionInds(index) {
            const options = document.querySelectorAll('.autocomplete-item-inds');
            options.forEach(option => option.classList.remove('selected'));
            if (index >= 0 && index < options.length) {
                options[index].classList.add('selected');
            }
        }
        // Event listener for keydown event on the input field
        inputFieldInds.addEventListener('keydown', function(event) {
            const optionsInds = document.querySelectorAll('.autocomplete-item-inds');
            if (event.key === 'ArrowDown') {
                event.preventDefault(); // Prevent default browser behavior
                if (optionsInds.length > 0) {
                    selectedOptionIndexInds = (selectedOptionIndexInds + 1) % optionsInds.length;
                    highlightOptionInds(selectedOptionIndexInds);
                    // Scroll the container to make the selected option visible
                    optionsInds[selectedOptionIndexInds].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
            } else if (event.key === 'ArrowUp') {
                event.preventDefault(); // Prevent default browser behavior
                if (optionsInds.length > 0) {
                    selectedOptionIndexInds = (selectedOptionIndexInds - 1 + optionsInds.length) % optionsInds.length;
                    highlightOptionInds(selectedOptionIndexInds);
                    // Scroll the container to make the selected option visible
                    optionsInds[selectedOptionIndexInds].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
            } else if (event.key === 'Enter') {
                if (selectedOptionIndexInds !== -1) {
                    event.preventDefault(); // Prevent form submission
                    inputFieldInds.value = optionsInds[selectedOptionIndexInds].textContent;
                    errorMessageInds.style.display = 'none'; // Hide error message
                }
                // Hide the dropdown after pressing Enter
                autocompleteDropdownInds.style.display = 'none';
            } else if (event.key === 'Tab') {
                autocompleteDropdownInds.style.display = 'none';
            }
            
        });

        // Event listener for input field
        inputFieldInds.addEventListener('input', function() {
            const inputValue = this.value.trim();
            populateAutocompleteOptionsInds(inputValue);
        });

        // Function to populate autocomplete options
        function populateAutocompleteOptionsInds(inputValue) {
            const dropdown = autocompleteDropdownInds;
            dropdown.innerHTML = '';
            autocompleteDataInds.forEach(item => {
                if (item.toLowerCase().includes(inputValue.toLowerCase())) {
                    const option = document.createElement('div');
                    option.classList.add('autocomplete-item-inds');
                    option.textContent = item;
                    option.addEventListener('click', () => {
                        inputFieldInds.value = item;
                        dropdown.style.display = 'none';
                        errorMessageInds.style.display = 'none'; // Hide error message
                    });
                    dropdown.appendChild(option);
                }
            });
            dropdown.style.display = dropdown.children.length > 0 ? 'block' : 'none';
        }

        // Event listener to hide error message when input field gains focus
        inputFieldInds.addEventListener('focus', function() {
            errorMessageInds.style.display = 'none';
            populateAutocompleteOptionsInds(inputFieldInds.value);
        });

        // Event listener to validate input when input field loses focus
        inputFieldInds.addEventListener('blur', function() {
            const enteredValue = inputFieldInds.value.trim();
            if (enteredValue !== '' && !checkAutocompleteValueInds(enteredValue)) {
                errorMessageInds.textContent = 'Please select a valid Industry';
                errorMessageInds.style.display = 'block';
            } else {
                errorMessageInds.style.display = 'none';
            }
        });

        // Event listener for selecting an autocomplete option
        autocompleteDropdownInds.addEventListener('click', function(event) {
            const target = event.target;
            if (target.classList.contains('autocomplete-item-inds')) {
                const selectedValue = target.textContent;
                inputFieldInds.value = selectedValue;
                errorMessageInds.style.display = 'none';
                autocompleteDropdownInds.style.display = 'none';
            }
        });

        window.addEventListener('click', function(event) {
            if (event.srcElement.id === 'id_2-current_org_industry'){
                return false;
            } else if (event.srcElement.className !== 'autocomplete-item-inds') {
                autocompleteDropdownInds.style.display = 'none';
            }
        });
    </script>
    <div class="form-group1">
        <label for="feePaymentOwner" class="bold">Fee Payment<span class="text-danger">*</span></label>
        {{ form.fee_payment_owner|attr:'required:true'|attr:'class:form-select form-select-lg'}}
        {% if form.fee_payment_owner.errors %}
            <span class="alert-danger">Please select Fee Payment Entity</span>
        {% endif %}    
    </div>
    <!-- Only for certification program -  total_work_experience_in_months-->
    {% if is_certification %}
    <div class="form-group1">
        <label for="workExperience" class="bold">Total Work Experience in Years:<span class="text-danger">*</span></label>
        {{ form.total_work_experience_in_months|attr:'required:true'|attr:'class:form-control'}}
        {% if form.total_work_experience_in_months.errors %}
            <span class="alert-danger">Please enter Work Experience in Years</span>
        {% endif %}    
    </div>
    {% endif %}
    <!-- employee number not for certification program -->
    {% if not is_certification%}
        {% if form.current_org_employee_number.label %}
            <div class="form-group1">
                <label for="currentEmpNum" class="bold">Current Employee Number</label>
                {% with org=user.email|get_ELOA_org_num %} 
                    {%if user.email|get_payfee_waiver_permission %}
                        {% render_field form.current_org_employee_number readonly="true" value=org %}
                    {% else %}
                        {{form.current_org_employee_number|attr:'maxlength:15'|attr:'class:form-control'}}
                    {% endif %}
                {% endwith %}
                {% if form.current_org_employee_number.errors %}
                    <span class="alert-danger">Please enter Employee Number</span>
                {% endif %}
            </div>
        {% endif %}
    {% endif %}
</div>
<br>
<!-- Prior Employment not for certification program -->
{% if not is_certification %}
<div class="row">
    <div class="d-flex justify-content-between align-items-center">
        <span style="color: rgb(12, 12, 140);" class="fw-bold">Prior Employment (<span class="fs-5">Prior employment dates should be EARLIER than your current organization joining date</span>)</span>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12 d-flex align-items-end table-responsive">
        <table class="table text-center table-sm">
            <thead class="table-info">
                <tr>
                    <th scope="col">Organization</th>
                    <th scope="col">Designation</th>
                    <th scope="col">Start Date</th>
                    <th scope="col">End Date</th>
                    <th scope="col">Edit</th>
                    <th scope="col">Delete</th>
                </tr>
            </thead>
            {% if not scwe %}
            <tbody class="fs-5 table-light" id="exp_tbody">
            </tbody>
            {% else %}
            <tbody class="fs-5 table-light" id="exp_tbody">
                {% for i in scwe %}
                <tr id="exp{{i.id}}">
                    <td>{{i.organization}}</td>
                    <td>{{i.designations}}</td>
                    <td>{{i.start_date}}</td>
                    <td>{{i.end_date}}</td>
                    <td><i class="fas fa-edit fa-lg" data-id="{{i.id}}" onclick="scweEdit(event)"></i></td>
                    <td><i class="fa-regular fa-trash-can  fa-lg" aria-hidden="true" data-id="{{i.id}}" onclick="scweDel(event)"></i></td>
                </tr>
                {% endfor %}
            </tbody>
            {% endif %}
        </table>
    </div>
</div>
<div class="row mb-2">
    <div class="d-flex justify-content-center">
        <button type="button" class="btn btn-rounded btn-primary btn-add-qual" id="myBtn" onclick="openPopUp('emp')">
            Add Employment
        </button>
    </div>
</div>
{% if error_exp %}
<br>
<div class="row fs-4 fw-bold text-center text-danger">
    <span>
        {{ error_exp }}
    </span>
</div>
{% endif %}
{% else %}
    
{% endif %}
<div class="modal fade" id="unemployed" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-center fw-bold fs-4" id="exampleModalLabel">Current Employment Status - Unemployed</h5>
            </div>
            <div class="modal-body text-center fw-4">
                You are not eligible for the program.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<br>