Untitled

mail@pastecode.io avatar
unknown
plain_text
2 months ago
32 kB
7
Indexable
Never
{% load widget_tweaks %}

<div id="toastContainer1" class="toast-container"></div>
<form action="">
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
        {% if wizard.steps.current == '1' %}
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title fw-bolder fs-3" id="exampleModalLabel">Add Qualification</h4>
            </div>
            <!-- Modal Body -->
            <div class="modal-body fw-bolder">
                <div class="row">
                    <div class="col-md-5">
                        <label for="qualCat" class="fw-normal fs-4">Qualification Level<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-md-6">
                        {{ form.qual_cat|attr:'required:true'|attr:'class:form-select form-select-lg'|attr:'onchange:QualCategory();' }}
                        {% if form.qual_cat.errors %}
                        <span class="alert-danger">Please select Qualification Level</span>
                        {% endif %}
                    </div>
                </div>
                <br>
                <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; 
                        font-weight: normal;
                    }
            
                    .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="row">
                    <div class="col-md-5">
                        <label for="degree" class="fw-normal fs-4">Qualification Name<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-md-6">
                        <div class="autocomplete-inds">
                            {{ form.degree|attr:'required:true'|attr:'class:form-control'|attr:'onchange:OtherBox(this);'|attr:'onfocusout:ListOfDiscipline();'}}
                            <div id="autocomplete-dropdown-inds" class="autocomplete-items-inds"></div>
                            {{ form.other_degree|attr:'class:form-control'|attr:'placeholder:Other Qualification' }}
                            <span class="alert-danger fw-normal fs-4" id="degErr" style="display: none;"></span>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        $.ajax({
                            type: "GET",
                            url: "{% url 'registrationForm:qual-category-ajax1'%}",
                            cache: false,
                            success: function (data) {
                                autocompleteDataInds = data['degree'];
                            },
                            async: false,
                        });
                    });
            
                    // JavaScript
                    const inputFieldInds = document.getElementById('id_1-degree');
                    const errorMessageInds = document.getElementById('degErr');
                    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 Qualification Name';
                            errorMessageInds.style.display = 'block';
                        } else {
                            errorMessageInds.style.display = 'none';
                        }
                        $("#id_1-discipline").val('');
                    });
            
                    // Event listener for selecting an autocomplete option
                    autocompleteDropdownInds.addEventListener('click', function(event) {
                        const target = event.target;
                        if (target.classList.contains('autocomplete-item-inds')) {
                            ListOfDiscipline();
                            const selectedValue = target.textContent;
                            inputFieldInds.value = selectedValue;
                            let select_input = $("#id_1-other_degree");
                            if (selectedValue == "Others"){
                                select_input.attr("type", "text");
                                select_input.show();
                                select_input.attr("required","true");
                            }
                            else{
                                select_input.attr("type","hidden");
                                select_input.removeAttr("required");
                                select_input.val('');
                            }
                            $("#id_1-discipline").val('');      
                            errorMessageInds.style.display = 'none';
                            autocompleteDropdownInds.style.display = 'none';
                        }
                    });
            
                    window.addEventListener('click', function(event) {
                        if (event.srcElement.id === 'id_1-degree'){
                            return false;
                        } else if (event.srcElement.className !== 'autocomplete-item-inds') {
                            autocompleteDropdownInds.style.display = 'none';
                        }
                    });
                </script>
                <br>
                <div class="row">
                    <div class="col-md-5">
                        <label for="schoolCollege" class="fw-normal fs-4">Board/University<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-md-6">
                        {{ form.school_college|attr:'required:true'|attr:'class:form-control'}}
                        {% if form.school_college.errors %}
                        <span class="alert-danger">Please enter Board/University</span>
                        {% endif %}
                    </div>
                </div>
                <br>
                <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; 
                        font-weight: normal;
                    }
            
                    .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="row">
                    <div class="col-md-5">
                        <label for="discipline" class="fw-normal fs-4">Discipline<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-md-6">
                        <div class="autocomplete">
                            {{ form.discipline|attr:'required:true'|attr:'class:form-control'|attr:'onchange:OtherBox(this);'}}
                            <div id="autocomplete-dropdown" class="autocomplete-items"></div>
                            {{ form.other_discipline|attr:'class:form-control'|attr:'placeholder:Other Discipline'}}
                            <span class="alert-danger fw-normal fs-4" id="dicErr" style="display: none;"></span>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        $.ajax({
                            type: "GET",
                            url: "{% url 'registrationForm:discipline-ajax'%}",
                            cache: false,
                            success: function (data) {
                                autocompleteData = data['disciplines'];
                            },
                            async: false,
                        });
                    });
                    // JavaScript
                    const inputField = document.getElementById('id_1-discipline');
                    const errorMessage = document.getElementById('dicErr');
                    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() {
                        populateAutocompleteOptions(inputField.value);
                        errorMessage.style.display = 'none';
                    });
                
                    // 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 Discipline';
                            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;
                            let select_input = $("#id_1-other_discipline");
                            if (selectedValue == "Others"){
                                select_input.attr("type", "text");
                                select_input.show();
                                select_input.attr("required","true");
                            }
                            else{
                                select_input.attr("type","hidden");
                                select_input.removeAttr("required");
                                select_input.val('');
                            }
                            errorMessage.style.display = 'none';
                            autocompleteDropdown.style.display = 'none';
                        }
                    });
                
                    window.addEventListener('click', function(event) {
                        if (event.srcElement.id === 'id_1-discipline'){
                            return false;
                        } else if (event.srcElement.className !== 'autocomplete-item') {
                            autocompleteDropdown.style.display = 'none';
                        }
                    });
                </script>
                <br>
                <div class="row">
                    <div class="col-md-5">
                        <label for="startYear" class="fw-normal fs-4">Start Year<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-md-6">
                        {{ form.start_year|attr:'required:true'|attr:'class:form-control'|attr:'type:number'|attr:'onchange:StartEndYear(this);'}}
                        <span class="alert-danger fw-normal fs-4" id="startYearErr" style="display: none;"></span>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-5">
                        <label for="endYear" class="fw-normal fs-4">End Year<span class="text-danger">*</span></label>
                    </div>
                    <div class="col-md-6">
                        {{ form.completion_year|attr:'required:true'|attr:'class:form-control'|attr:'type:number'|attr:'onchange:StartEndYear(this);'}}
                        <span class="alert-danger fw-normal fs-4" id="endYearErr" style="display: none;"></span>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-5">
                        <label for="percentCpga" class="fw-normal fs-4" data-toggle="tooltip" data-placement="top"
                            title="Enter your percentage or CGPA">Select % Marks or CGPA<span
                                class="text-danger">*</span></label>
                    </div>
                    <div class="col-md-6">
                        <input type="radio" id="percentMarks" name="marksOrCgpa" value="percent" checked>
                        <label for="percentMarks" class="fw-normal fs-4">Percentage</label>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" id="cgpa" name="marksOrCgpa" value="cgpa">
                        <label for="cgpa" class="fw-normal fs-4">CGPA</label>
                        <div class="row">
                            <div class="col-md-4">
                                {{ form.percentage_marks_cgpa|attr:'required:true'|attr:'class:form-control'}}
                            </div>
                            <div class="col-md-4" id="cpgaContainer">
                                {{ form.cpga_outoff | attr:'class:form-control' | attr:'placeholder:Out of' | attr:'type:number' | attr:'onchange:cgpaValidate(this)' }}
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row justify-content-center" style="display: none;" id="eduErrRow">
                    <div class="col-12 text-center">
                        <div class="alert alert-danger" role="alert" id="eduErrContainer">
                            <p class="fw-normal" id="eduErr"></p>
                        </div>
                    </div>
                </div>                            
            </div>
            <input type="hidden" value="" id="edit_rows">
            <!-- Modal Footer -->
            <div class="modal-footer justify-content-evenly">
                <button type="button" class="btn btn-rounded btn-primary btn-P fw-bold fs-4" onclick="closePopUp('edu')">Close</button>
                <button type="submit" class="btn btn-rounded btn-primary btn-P fw-bold fs-4" data-dismiss="modal" id="save_rec" name="Save" onclick="saveRec(event)">Save</button>
            </div>
        </div>
        {% endif %}
        {% if wizard.steps.current == '2' %}
        <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title fw-bolder fs-3" id="exampleModalLabel1">Add Employment Details</h4>
                </div>
                <!-- Modal Body -->
                <div class="modal-body fw-bolder">
                    <div class="row">
                        <div class="col-md-5">
                            <label for="organization" class="fw-normal fs-4">Organization <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-6">
                            {{ form.organization|attr:'required:true'|attr:'class:form-control' }}
                            {% if form.organization.errors %}
                            <span class="alert-danger">Please enter Organization</span>
                            {% endif %}
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-5">
                            <label for="designations" class="fw-normal fs-4">Designations <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-6">
                            {{ form.designations|attr:'required:true'|attr:'class:form-control'}}
                            {% if form.designations.errors %}
                            <span class="alert-danger">Please enter Designations</span>
                            {% endif %}
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-5">
                            <label for="startDate" class="fw-normal fs-4">Start Date<span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-6">
                            {{ form.start_date|attr:'required:true'|attr:'class:form-control'|attr:'type:date'|attr:'onchange:updateStartDate()'}}
                            {% if form.start_date.errors %}
                            <span class="alert-danger">Please select Start Date</span>
                            {% endif %}
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-5">
                            <label for="endDate" class="fw-normal fs-4">End Date<span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-6">
                            {{ form.end_date|attr:'required:true'|attr:'class:form-control'|attr:'type:date'}}
                            {% if form.end_date.errors %}
                            <span class="alert-danger">Please select End Date</span>
                            {% endif %}
                        </div>
                    </div>
                    <br>
                    <div class="row justify-content-center" style="display: none;" id="empErrRow">
                        <div class="col-12 text-center">
                            <div class="alert alert-danger" role="alert" id="empErrContainer">
                                <p class="fw-normal" id="empErr"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" value="" id="edit_rows_exp">
                <!-- Modal Footer -->
                <div class="modal-footer justify-content-evenly">
                    <button type="button" class="btn btn-rounded btn-primary btn-P fw-bold fs-4" onclick="closePopUp('emp')">Close</button>
                    <button type="submit" class="btn btn-rounded btn-primary btn-P fw-bold fs-4" data-dismiss="modal" id="save_rec_exp" name="Save" onclick="saveExpRec(event)">Save</button>
                </div>
        </div>
        {% endif %}
        </div>
    </div>
</form>
Leave a Comment