EVOLUTION-NINJA

Edit File: employee_application_form.php

<?php echo view('includes/home_sidebar');?>

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> -->

<style>
    /*  */

.fee-collection {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-bottom: 3px solid #8D8D8D;
    }

.fee-col-heading {
        margin: 0;
        padding: 3px;
        align-self: center;
        color: #003352;
        font-size: 20px;
        font-weight: 600;

}

.back-butt {
        color: #606060;
        font-size: 21px;
        font-weight: 500;
        outline: none;
        border: none
    }

.employee-form {
        width: 100%;
        height: auto;
        /* border: 1px solid; */
        padding: 7px 15px;
        background-color: #EFF3FC;

}

.employee-form h4 {
        font-size: 17px;
        font-weight: 600;
        color: #0065A3;
        margin-block: 10px;
    }

.employee-form label {
        font-size: 14px;
        font-weight: 500;
        color: #606060;
    }

/* uplaod image styles------  */
    .div-img--contents {
        max-width: 165px;
        height: 146px;
        margin-bottom: 30px;
    }

.img-wrapper {
        width: 100%;
        height: 100%;
        border: 0.5px solid #ccc;
        position: relative;

}

.img-wrapper .img--upload {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;

}

.img-wrapper .img--upload #up-img {
        width: 180PX;
        height: 180PX;
        /* object-fit: contain; */

}

.custom-btn {
        background-color: #0065A3;
        color: white;
        border: none;
        outline: none;
        width: 100%;
        padding: 4px 10px;
        margin: 0;
        margin-top: 8px;

}

.custom-btn:hover {
        background-color: #0065A3;
        color: white;

}

/* #about-me,#emp-address{
        width:67%
    } */
    .inp-fields-emp {
        border: none;
        box-shadow: 0px 0px 3px #ccc;
        background-color: white !important;
        color: #1d1c1c;
    }

/* submit button--------  */
    .emp-submit {
        text-align: end;
        margin-top: 20px;
    }

.submit-emp-form {

color: white;
        width: 20%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;
    }

.add-exp {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.add-row-btn {
        border: none;
        outline: none;
        font-size: 18px;
        padding: 3px 4px;
        font-weight: 500;
        background-color: #0065A3;
        color: white;
        width: 8%;
        margin-right: 10px;
    }

.add-row-btn:hover {
        background-color: #0065A3;
        opacity: 0.9;

}

.emp-table th {
        color: #0065A3;
        font-weight: 700;
        font-size: 15px;
    }

.remove-row-btn {
        color: white;
        background-color: #8D8D8D;
        padding: 2px 6px;
    }

.remove-row-btn:hover {
        color: white;
        background-color: #8D8D8D;
        opacity: 0.9;
    }

.savebtn-emp {
        margin-top: 10px;
    }

.closeemp-btn {
        float: right;
        margin-top: 10px
    }

.savebtn-emp1 {
        margin-top: 10px;
        margin-right: auto;
    }

@media screen and (max-width:728px) {
        .div-img--contents {

margin-bottom: 60px;
        }

.add-row-btn {
            width: 33%;
        }

}

.star-mad {
        color: #c83434;
        font-size: 20px;
        position: relative;
        top: 2px;
    }
    #leftDiv{
    height: 1660px !important;
    }
    #pan-number{
        text-transform: uppercase;
    }
    .ed-add-row{
    width: 35%;
    float: right;
}
    /* --work-- */
</style>

<main id="rightDiv">
        <div class="container-fluid">
            <div class="row">

<section class="fee-collection">

<h5 class="fee-col-heading">Add Employee</h5>
                        <button class="btn back-butt"><i class="fa fa-arrow-left"
                                aria-hidden="true"></i>&nbsp;Back</button>
                    </section>

<section>
                        <div class="employee-form">
                            <form id="employee-form" onsubmit="preventFormSubmit(event)">
                                <div class="basic-emp-info">
                                    <h4>Basic Info</h4>
                                    <div class="row ">
                                        <div class="col-sm-9 row">
                                            <div class="col-sm-4 mt-2">
                                                <label for="employee-id">Employee ID</label>
                                                <br>
                                                <input type="text" placeholder="" name="employee-id" id="employee-id"
                                                    class="form-control inp-fields-emp" readonly />
                                            </div>

<div class="col-sm-4">
                                                <label for="first-name">First Name<span
                                                        class="star-mad">*</span></label></br>
                                                <input type="text" placeholder="" name="first-name" id="first-name"
                                                    class="form-control inp-fields-emp"  required />
                                            </div>
                                            <div class="col-sm-4 mt-2">
                                                <label for="last-name">Last Name</label></br><input type="text"
                                                    placeholder="" id="last-name" name="last-name"
                                                    class="form-control inp-fields-emp"  required />
                                            </div>

<div class="row">
                                                <div class="col-sm-4">
                                                    <label for="email-id">E-Mail ID<span
                                                            class="star-mad">*</span></label></br>
                                                    <input type="email" placeholder="" id="email-id" name="email-id"
                                                        class="form-control inp-fields-emp "  required />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="div-img--contents">
                                                <label for="">Upload Photo</label>
                                                <div class="img-wrapper">
                                                    <div class="img--upload">
                                                        <img src="" alt="" id="up-img" name="profile_img" hidden>
                                                    </div>
                                                </div>
                                                <input type="file" class="default-btn" name="profile_img" hidden>
                                                <button type="button" class="custom-btn btn"
                                                    onclick="referDefaultBtn()">UPLOAD</button>
                                            </div>
                                        </div>
                                        <div class="emp-work-info mt-4">
                                            <h4>Work</h4>
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <label for="department">Department</label></br>
                                                    <select class="form-select inp-fields-emp" id="department"
                                                        name="department">
                                                        <option value="">Select</option>
                                                        <option value="Academiv Counselor">Academic Counselor</option>
                                                        <option value="Teachning Faculty">Teachning Faculty</option>
                                                        <option value="Developer">Developer</option>
                                                        <option value="Manager">Manager</option>
                                                    </select>
                                                </div>

<div class="col-sm-4">
                                                    <label for="title">Title</label></br><input type="text"
                                                        placeholder="" id="title" name="title"
                                                        class="form-control inp-fields-emp"  />
                                                </div>

<div class="col-sm-4">
                                                    <label for="source-of-hire">Source of Hire</label></br>
                                                    <select class="form-select inp-fields-emp" id="source-of-hire"
                                                        name="source-of-hire">
                                                        <option value="">Select</option>
                                                        <option value="Online">Online</option>
                                                        <option value="Offline">Offline</option>
                                                        
                                                    </select>
                                                </div>
                                            </div>

<div class="row  mt-4">
                                                <div class="col-sm-4 ">
                                                    <label for="dateofjoining">Date of Joining (dd/mm/yyyy)<span
                                                            class="star-mad">*</span></label></br>
                                                    <input type="date" placeholder="" id="dateofjoining"
                                                        name="dateofjoining" class="form-control inp-fields-emp"
                                                        required />
                                                </div>

<div class="col-sm-4 mt-2">
                                                    <label for="employee-status">Employee Status</label></br>
                                                    <select class="form-select inp-fields-emp" id="employee-status"
                                                        name="employee-status">
                                                        <option value="">Select</option>
                                                        <option value="Employed">Employed</option>
                                                        <option value="UnEmployed">Unemployed</option>
                                                        
                                                    </select>
                                                </div>

<div class="col-sm-4">
                                                    <label for="wokphone">Work/ Phone<span
                                                            class="star-mad">*</span></label></br>
                                                    
                                                    <input type="tel" placeholder="" id="wokphone" name="workphone"
                                                        oninput="validateInputnum(this)" maxlength="10"
                                                        class="form-control inp-fields-emp" required />

</div>

<div class="row mt-4">
                                                <div class="col-sm-4 ">
                                                    <label for="employee-type">Employee Type</label></br>
                                                    <select class="form-select inp-fields-emp" id="employee-type"
                                                        name="employee-type">
                                                        <option value="">Select</option>
                                                        <option value="IT">IT</option>
                                                        <option value="NON-IT">NON-IT</option>
                                                        
                                                    </select>
                                                </div>

<div class="col-sm-4 ">
                                                    <label for="role">Role</label></br>
                                                    <select class="form-select inp-fields-emp" id="role" name="role">
                                                        <option value="">Select</option>
                                                        <option value="HR">HR</option>
                                                        <option value="Super Admin">Super Admin</option>
                                                        <option value="Admin">Admin</option>
                                                        <option value="Employee">Employee</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

<div class="personal-emp-info">
                                            <h4>Personal</h4>
                                            <div class="row ">
                                                <div class="col-sm-4">
                                                    <label for="pan-number">Pan Number<span
                                                            class="star-mad">*</span></label></br><input type="text" maxlength="10"
                                                        placeholder="" name="pan-number" oninput="validateInputAlphaNum(this)" id="pan-number"
                                                        class="form-control inp-fields-emp" required />
                                                </div>
                                                <div class="col-sm-4">
                                                    <label for="dateofbirth">Date of Birth (dd/mm/yyyy)<span
                                                            class="star-mad">*</span></label></br><input type="date"
                                                        placeholder="" name="dateofbirth" id="dateofbirth"
                                                        class="form-control inp-fields-emp" required />
                                                </div>
                                                <div class="col-sm-4 mt-2">
                                                    <label for="marital-status">Marital Status</label></br>
                                                    <select class="form-select inp-fields-emp" id="marital-status"
                                                        name="marital-status">
                                                        <option value="">Select</option>
                                                        <option value="Married">Married</option>
                                                        <option value="UnMarried">UnMarried</option>
                                                        
                                                    </select>
                                                </div>

</div>

<div class="row mt-3">
                                                <div class="col-sm-12">
                                                    <label for="emp-address">Address<span
                                                            class="star-mad">*</span></label></br>
                                                    <textarea name="emp-address" id="emp-address"
                                                        class="inp-fields-emp form-control" 
                                                        required></textarea>
                                                </div>
                                            </div>

<div class="row mt-3">
                                                <div class="col-sm-8">
                                                    <label for="residential-address">Residential Address</label></br>
                                                    <textarea rows="2" cols="20" name="residential-address"
                                                        id="residential-address" class="inp-fields-emp form-control"
                                                       ></textarea>
                                                </div>
                                            </div>
                                        </div>

<div class="emp-summary ">
                                            <h4>Summary</h4>
                                            <div class="row ">
                                                <div class="col-sm-4 mt-2">
                                                    <label for="job-description">Job description</label></br><input
                                                        type="text" placeholder="" name="job-description"
                                                        id="job-description" class="form-control inp-fields-emp" />
                                                </div>

<div class="col-sm-4">
                                                    <label for="emp-grnder">Gender<span
                                                            class="star-mad">*</span></label></br>
                                                    <select class="form-select inp-fields-emp" id="emp-grnder"
                                                        name="gender" required>
                                                        <option value="">Select</option>
                                                        <option value="Male">Male</option>
                                                        <option value="Female">Female</option>  
                                                        <option value="Other">Other</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-8">
                                                    <label for="about-me">About Me</label></br>
                                                    <textarea rows="2" cols="20" name="about-me" id="about-me"
                                                        class="inp-fields-emp form-control"></textarea>
                                                </div>
                                            </div>

</div>
                                        
                                        <div class="emp-Work-Experience mt-2">

<div class="add-exp">
                                                <h4>Work Experience</h4>
                                                
                                                <button type="button" class="btn add-row-btn">Add Row</button>
                                            </div>

<table class="table emp-table">
                                                        <thead>
                                                            <tr>
                                                                <th>Previous Company Name</th>
                                                                <th>Job Title</th>
                                                                <th>From Date</th>
                                                                <th>To Date</th>
                                                                <th>Job Description</th>
                                                                <th>Remove</th>
                                                                <th></th> 
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            
                                                        </tbody>
                                                        <tfoot>
                                                            <tr>

</tr>
                                                        </tfoot>
                                                    </table>

</div>
                                            </div>
                                        </div>
                                        
                                        <div class="emp-Education-Experience mt-2">
    <div class="add-education">
        <div class="row">
            <div class="col-sm-3">
                <h4>Education</h4>
            </div>
            <div class="col-sm-6"></div>
            <div class="col-sm-3">
        <button type="button" class="btn add-row-btn ed-add-row" onclick="addEducationRow()"  >Add Row</button>

</div>
        </div>
        
    </div>

<div class="row mt-3">
        <div class="col-sm-12">
            <table class="table emp-table" id="educationTable">
                <thead>
                    <tr>
                        <th>College Name</th>
                        <th>Diploma/Degree</th>
                        <th>Field of study</th>
                        <th>Date of completion</th>
                        <th>Additional Notes</th>
                        <th>Interests</th>
                        <th>Aggregate</th>
                        
                        <th>Remove</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
</div>
                                        
                                        <div class="emp-dependent mt-2">
    <div class="add-exp">
        <h4>Dependent</h4>
        <button class="btn add-row-btn dep" onclick="addDependentRow(event)">Add Row</button>
    </div>

<div class="row mt-3">
        <div class="col-sm-12">
            <table class="table emp-table" id="dependentTable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Relationship</th>
                        <th>Date of birth (dd/mm/yyyy)</th>
                        <th>Remove</th>
                    </tr>
                </thead>
                <tbody id="table-body">
                    
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="emp-submit">
                                            <button type="button" id="submit-btn"
                                                class="submit-emp-form">SUBMIT</button>
                                        </div>

</form>

</div>

</section>

</div>

</div>
        </div>
    </main>
    </section>

<script type="text/javascript" src="<?php echo base_url('public/assets/js/intlTelInput.js');?>"></script>
    <script>
        var input = document.querySelector("#wokphone");
        window.intlTelInput(input, {
          autoPlaceholder: "on",
          utilsScript: "<?php echo base_url('public/assets/js/utils.js');?>",
        });
      </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const addRowButton = document.querySelector('.add-row-btn');
            const tableBody = document.querySelector('.emp-table tbody');

addRowButton.addEventListener('click', function () {
                const newRow = `
                    <tr>
                        <td><input type="text" name="company_name[]" class="form-control"></td>
                        <td><input type="text" name="job_title[]" class="form-control"></td>
                        <td><input type="date" name="from_date[]" class="form-control"></td>
                        <td><input type="date" name="to_date[]" class="form-control"></td>
                        <td><input type="text" name="job_description[]" class="form-control"></td>
                        <td><button class="btn btn-danger" onclick="removeRow(this)">Remove</button></td>'
                        <td></td>
                    </tr>
                `;
                tableBody.insertAdjacentHTML('beforeend', newRow);
            });

function removeRow(btn) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }

// Event delegation to handle removal of dynamically added rows
            tableBody.addEventListener('click', function (event) {
                if (event.target.classList.contains('remove-row-btn')) {
                    event.target.closest('tr').remove();
                }
            });
        });

// ----------------------------------------------------------------------------

function addEducationRow() {
        var newRow = '<tr>' +
            '<td><input type="text" name="collegeName[]" class="form-control"></td>' +
            '<td><input type="text" name="degree[]" class="form-control"></td>' +
            '<td><input type="text" name="fieldOfStudy[]" class="form-control"></td>' +
            '<td><input type="date" name="completionDate[]" class="form-control"></td>' +
            '<td><input type="text" name="additionalNotes[]" class="form-control"></td>' +
            '<td><input type="text" name="interests[]" class="form-control"></td>' +
            '<td><input type="number" name="aggregate[]" class="form-control"></td>' +
            // '<td><input type="file" name="upload[]" class="form-control-file"></td>' +
            ' <td><button class="btn btn-danger" onclick="removeRow(this)">Remove</button></td>' +
            '</tr>';
        $('#educationTable tbody').append(newRow);
    }

function removeRow(btn) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }

// -------------------------------------------------------

function addDependentRow(event) {
        if (event) {
            event.preventDefault();
        }
        var tableBody = document.getElementById("table-body");
        var newRow = document.createElement("tr");
        newRow.innerHTML = `
            <td><input type="text" name="name[]" class="form-control"></td>
            <td><input type="text" name="relationship[]" class="form-control"></td>
            <td><input type="date" name="dob[]" class="form-control"></td>
            <td><button class="btn btn-danger" onclick="removeRow(this)">Remove</button></td>
        `;
        tableBody.appendChild(newRow);
    }

// Get the height of the right div
            const rightDivHeight = rightDiv.offsetHeight;

// Set the height of the left div to match the height of the right div
            leftDiv.style.height = rightDivHeight + 'px';
        };

</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

$.ajax({
        url: "<?php echo site_url('get-latest-employee-id'); ?>",
        type: "GET",
        success: function (response) {
            $('#employee-id').val(response.employee_id);
        },
        error: function (xhr, status, error) {
            console.error("Error fetching the latest employee ID:", xhr.responseText);
        }
    });
   function validateForm() {
    var isValid = true;

// Check specific required input fields
    if ($('#first-name').val() === '') {
        isValid = false;
    }
    if ($('#email').val() === '') {
        isValid = false;
    }
    if ($('#date-of-joining').val() === '') {
        isValid = false;
    }
    if ($('#wokphone').val() === '') {
        isValid = false;
    }
    if ($('#dateofbirth').val() === '') {
        isValid = false;
    }
    if ($('#pan-number').val() === '') {
        isValid = false;
    }
    if ($('#emp-address').val() === '') {
        isValid = false;
    }
    if ($('#emp-grnder').val() === '') { 
        isValid = false;
        console.log($('#emp-grnder').val());

}
    
//     if ($('#emp-grnder').val() === null || $('#emp-grnder').val() === '') {
//     isValid = false;
// }

return isValid;
}

$("#submit-btn").click(function () {

if (!validateForm()) {
           
            Swal.fire({
                title: "Error!",
                text: "Please fill in all required fields.",
                icon: "error",
            });
            return; 
        }

var form = $('#employee-form')[0];
        var formData = new FormData(form);

$("#submit-btn").prop("disabled", true);

$.ajax({
            url: "<?php echo site_url('Add-employee'); ?>",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log(response);
                Swal.fire({
                    title: "Success!",
                    text: response.message,
                    icon: "success",
                }).then(() => {
                    window.location.href = "<?php echo base_url('employee-list'); ?>";
                });
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
                Swal.fire({
                    title: "Error!",
                    text: "Error: " + xhr.responseText,
                    icon: "error",
                });
            },
            complete: function() {
               
                $("#submit-btn").prop("disabled", false);
            }
        });
    });
});
</script>
    <!-- </body>

</html> -->