EVOLUTION-NINJA

Edit File: edit_emp_list.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>

.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;
    }

#leftDiv {
        height: 1660px !important;
    }

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

margin-bottom: 60px;
        }

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

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

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

<section class="fee-collection">

<h5 class="fee-col-heading">Edit 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">
                        <input type="hidden" name="employee-id" value="<?php echo $id; ?>">
                        <div class="basic-emp-info">
                            <h4>Basic Info</h4>
                            <div class="row ">
                                <div class="col-sm-9 row">
                                    <div class="col-sm-4">
                                        <label for="employee-id">Employee ID</label></br><input type="text"
                                            placeholder="" name="employee-id" id="employee-id"
                                            class="form-control inp-fields-emp" />
                                    </div>
                                    <div class="col-sm-4">
                                        <label for="first-name">First Name <span class="star-mad">*</span></label><br>
                                        <input type="text" id="firstname" name="first_name"
                                            class="form-control inp-fields-emp" required>
                                    </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">
                                            </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>
                                                <option value="3">Three</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-1">
                                            <label for="employee-status">Employee Status</label></br>
                                            <select class="form-select inp-fields-emp mt-1" 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="work_phone"
                                                class="form-control inp-fields-emp " oninput="validateInputnum(this)" maxlength="10"
                                                required />
                                        </div>

</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="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"
                                                placeholder="" name="pan-number" id="pan-number" oninput="validateInputAlphaNum(this)" maxlength="10"
                                                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">
                                            <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">
                                            <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>
                                                    
                                                    <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="update-emp-form  submit-emp-form">UPDATE</button>
                                </div>

</div>

</section>

</div>

</div>
    </div>
</main>
<script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/jquery.jqGrid.min.js'); ?>"></script>


<script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/i18n/grid.locale-en.js'); ?>"></script>

<link rel="stylesheet" type="text/css" media="screen"
    href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" />

addRowButton.addEventListener('click', function () {
            const newRow = `
                    <tr>
                       <td><input type="hidden" name="id[]" class="form-control">
                        <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>'
                        
                    </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="hidden" name="id[]" class="form-control"><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="hidden" name="id[]" class="form-control">
            <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);
    }

function removeRow(btn) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }
</script>

// Check specific required input fields
            if ($('#firstname').val() === '') {
                isValid = false;
            }
            if ($('#email-id').val() === '') {
                isValid = false;
            }
            if ($('#dateofjoining').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() === '') { // assuming 'emp-gender' is the id of the dropdown
        isValid = false;
        console.log($('#emp-grnder').val());

}

return isValid;
        }

// Function to gather form data and update employee
        function updateEmployee() {
          
            if (!validateForm()) {
              
                Swal.fire({
                    title: "Error!",
                    text: "Please fill in all required fields.",
                    icon: "error",
                });
                return; 
            }

var formData = new FormData();

// Basic Info
formData.append('employee_id', $('input[name="employee-id"]').val());
formData.append('first_name', $('input[name="first_name"]').val());
formData.append('last_name', $('input[name="last-name"]').val());
formData.append('email', $('input[name="email-id"]').val());

// Work
formData.append('department', $('#department').val());
formData.append('title', $('#title').val());
formData.append('source_of_hire', $('#source-of-hire').val());
formData.append('date_of_joining', $('#dateofjoining').val());
formData.append('employee_status', $('#employee-status').val());
formData.append('work_phone', $('#wokphone').val());
formData.append('employee_type', $('#employee-type').val());
formData.append('role', $('#role').val());

// Personal
formData.append('pan_number', $('#pan-number').val());
formData.append('date_of_birth', $('#dateofbirth').val());
formData.append('marital_status', $('#marital-status').val());
formData.append('emp_address', $('#emp-address').val());
formData.append('residential_address', $('#residential-address').val());

// Summary
formData.append('job_description', $('#job-description').val());
formData.append('gender', $('#emp-grnder').val());
formData.append('about_me', $('#about-me').val());

// Profile Image
var profileImgInput = $('input[name="profile_img"]');
if (profileImgInput[0] && profileImgInput[0].files[0]) {
    formData.append('profile_img', profileImgInput[0].files[0]);
}
    
// Work Experience
var workExperienceData = getFormData('work');
formData.append('work_experience', JSON.stringify(workExperienceData));

//Education
var educationData = getFormData('education');
formData.append('education_data', JSON.stringify(educationData));

// Dependent
var dependentsData = getFormData('dependents');
formData.append('dependents_data', JSON.stringify(dependentsData));

$.ajax({
    type: "POST",
    url: "<?php echo site_url('update_employee');?>",
    data: formData,
    contentType: false,
    processData: false,
    success: function (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",
        });
    }
});
        }

// Event listener for form submission
        $(document).on('click', '#submit-btn', function (event) {
        event.preventDefault();
        updateEmployee();
    });
    });

populateWorkExperience(response.work_experience);
                    populateEducation(response.education);
                    populateDependents(response.dependents);

if (response.profile_img) {
                        $('#up-img').attr('src', response.profile_img).show();
                    } else {
                        $('#up-img').hide();
                    }
                },
                error: function (xhr, status, error) {
                    console.error(error);
                  
                }
            });
        }

function populateEducation(education) {
    const educationTableBody = $('.emp-Education-Experience table tbody');
    educationTableBody.empty();

education.forEach(item => {
        const newRow = `
            <tr data-id="${item.id}">
                <td><input type="text" name="collegeName[]" class="form-control" value="${item.college_name}"></td>
                <td><input type="text" name="degree[]" class="form-control" value="${item.diploma_degree}"></td>
                <td><input type="text" name="fieldOfStudy[]" class="form-control" value="${item.field_of_study}"></td>
                <td><input type="date" name="completionDate[]" class="form-control" value="${item.completion_date}"></td>
                <td><input type="text" name="additionalNotes[]" class="form-control" value="${item.additional_notes}"></td>
                <td><input type="text" name="interests[]" class="form-control" value="${item.interests}"></td>
                <td><input type="number" name="aggregate[]" class="form-control" value="${item.aggregate}"></td>
                <td><button class="btn btn-danger delete-row-btn">Delete</button></td>
            </tr>
        `;
        educationTableBody.append(newRow);
    });
}

// Assuming this function is used to fetch and populate dependents data
function populateDependents(dependents) {
    const dependentTableBody = $('.emp-dependent table tbody');
    dependentTableBody.empty();

dependents.forEach(item => {
        const newRow = `
            <tr data-id="${item.id}">
                <td><input type="text" name="name[]" class="form-control" value="${item.name}"></td>
                <td><input type="text" name="relationship[]" class="form-control" value="${item.relationship}"></td>
                <td><input type="date" name="dob[]" class="form-control" value="${item.dob}"></td>
                <td><button class="btn btn-danger delete-row-btn">Delete</button></td>
            </tr>
        `;
        dependentTableBody.append(newRow);
    });
}
        var employeeId = '<?php echo $id; ?>'; 
        if (employeeId) {
            fetchEmployeeData(employeeId);
        }

$(document).on('click', '.remove-row-btn', function () {
            $(this).closest('tr').remove();
        });
    });

$(document).on('click', '.delete-row-btn', function () {
    var deleteButton = $(this); 
    var rowId = deleteButton.closest('tr').data('id');
    $.ajax({
        type: "POST",
        url: "<?php echo base_url('delete_row'); ?>",
        data: { id: rowId },
        dataType: "json",
        success: function (response) {
            if (response.success) {
                deleteButton.closest('tr').remove();
            } else {
                // Handle deletion failure
            }
        },
        error: function (xhr, status, error) {
            console.error(error);
        }
    });
});

</script>

leftDiv.style.height = rightDivHeight + 'px';
    };

</script>

<script>
    function goBack() {
        window.location.href = 'dashboard';
    }
</script>

    <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: "js/utils.js",
        });
      </script>

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