EVOLUTION-NINJA

Edit File: roleCreation.php

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

<script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script>

<link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css'); ?>">
<script src="<?php echo base_url('public/assets/toastr/toastr.min.js'); ?>"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

.container {
        margin: 0 auto;
        padding: 20px;
        max-width: 1400px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.tableBlock {
        margin-top: 70px !important;
    }

.crud--buttons {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.editbtn {
        background-color: Green;
        color: white;
        padding: 5px 24px;
        width: 150px
    }

.deletebtn {
        background-color: Red;
        color: white;
        padding: 5px 14px;
        margin-left: 5px;
        width: 90px
    }

/* Table Styling */
    #datatable {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        background-color: #fff;
    }

#datatable thead th {
        background-color: #4B0B0B;
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: bold;
        border: 1px solid #ddd;
    }

#datatable tbody td {
        padding: 12px;
        border: 1px solid #ddd;
        text-align: left;
    }

/* Row Hover Effect */
    #datatable tbody tr:hover {
        background-color: #f1f1f1;
    }

/* Action Button Styling */
    #datatable tbody td .action-btn {
        padding: 6px 14px !important;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

#datatable tbody td .action-btn:hover {
        background-color: #45a049;
    }

.deptable{
        overflow-x:auto;
    }
    /* Responsive Table */
    @media screen and (max-width: 768px) {
        .container {
            padding: 10px;
        }

#datatable {
            font-size: 14px;
        }
    }
</style>

<section class="home-section fullpage">
    <div class="home-content">
        <i class='bx bx-menu'></i>
        
    </div>
    <div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">Role Creation</h1>
        </div>
    </div>
    
    <form id="formRoleCreation">

<div class="row m-0">
            <div class="constuency_page">
                <div class="constuencydetails">
                    <div class="constuencydetail row">
                        <div class="col-sm-4">
                        <label for="Role_Name" class="form-label inpfieldname">Role Name</label><br>
                        <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="Role_Name" name="role" required>
                                
                            
                            </select>
                        </div>
                        <div class="col-sm-4">
                        <label for="apm" class="form-label inpfieldname">APM</label><br>
                        <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="APM" name="apm" required>
                                <option value="">Select APM</option>
                          
                            
                            </select>
                        </div>
                    </div>
                    <div class="constuencydetail row">
                        
                        <div class="col-sm-4">
                        <label for="Engineer" class="form-label inpfieldname">Engineer</label><br>
                            <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="Engineer" name="Engineer" required>
                                <option value="">Select Engineer</option>
                          
                            </select>
                        </div>
                    </div>
                    <br>
                    
                    <br>
                    <div class="addemployeedetail row ">

<div class="col-sm-4">
                  <label for="First_Name" class="form-label inpfieldname">First Name</label><br>
                     <input type="text" class="fieldsbox form-control" id="First_Name" name="First_Name"
                   placeholder="Enter first name" required>
               </div>

<div class="col-sm-4">
                <label for="Last_Name" class="form-label inpfieldname">Second Name</label><br>
                <input type="text" class="fieldsbox form-control" id="Last_Name" name="Last_Name"
                placeholder="Enter second name" required>
             </div>

<div class="col-sm-4">
             <div class="div-img--contents">
              <label for="upload-photo" class="form-label inpfieldname">Upload Department Logo</label>
               <div class="img-wrapper">
              <div class="img--upload">
                <img src="" alt="" id="up-img" hidden>
                
            </div>
        </div>
        <input type="file" class="default-btn fieldsbox" name="file" id="upload-photo" hidden>
        <button type="button" class="custom-btn btn" onclick="referDefaultBtn()">UPLOAD</button>
    </div>
</div>
</div>

<div class="addemployeedetail row emp2">

<div class="col-sm-4">
    <label for="Phone_Number" class="form-label inpfieldname">Phone Number</label><br>
    <input type="tel"
        class="fieldsbox form-control"
        id="Phone_Number"
        name="Phone_Number"
        placeholder="Enter 10-digit phone number"
        required
        maxlength="10"
        pattern="^\d{10}$"
        oninput="this.value = this.value.replace(/[^0-9]/g, '')"
        oninvalid="this.setCustomValidity('Please enter exactly 10 digits (numbers only).')"
        oninput="this.setCustomValidity('')">
</div>

</div>

<br>
<div class="addemployeedetail row ">

<div class="col-sm-4">
    <label for="Gender" class="form-label inpfieldname">Gender</label><br>
    <select class="form-select form-control fieldsbox" aria-label="Default select example"
        id="Gender" name="gender"  required>
        <option value="">Select</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select>
</div>
 <div class="col-sm-4">
   <label for="doj" class="form-label inpfieldname">Date of Joining (dd/mm/yyyy)</label><br>
    <input type="text" class="fieldsbox form-control" id="doj" name="doj" placeholder="dd/mm/yy" required>
  </div>
</div>
<br>

<div class="addemployeedetail row ">
                     
                    </div>

</div>
        <div class="col-sm-6 buttns-cnl">
            <button type="submit" class="submit" id="app-btn">Submit</button>
            <button type="button" class="cancel" id="btn-cancel">Cancel</button>

</div>
        
</div>

</form>

<br><br><br>
    <div class="container deptable">
                <table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>Role Name</th>
                            <th>APM</th>
                            <th>Engineer</th>
                            <th>First Name</th>
                            <th>Second Name</th>
                            <th>Phone Number</th>
                            <th>Email</th>
                            
                            <th>Gender</th></th>
                            
                            <th>Date Of Joining</th>
                            
                            
                            
                            <th>Department Logo</th>
                            <th>Action</th>

</tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

<br />
                <div id="resultID"></div>
            </div>
         
<div id="editModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Role</h5>
              <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editForm" enctype="multipart/form-data">
                    <input type="hidden" id="editId" name="id" />
                    <div class="form-group">
                        <label for="">Role</label>
                        <select class="form-select form-control fieldsbox" id="role_Name" name="role" required> </select>
                    </div>
                    <div class="form-group">
                        <label for="apm">APM</label>
                         <select class="form-select form-control fieldsbox" id="apm"  name="apm" > </select>
                    </div>
                    <div class="form-group">
                        <label for="Engineer">Engineer</label>
                      
                          <select class="form-select form-control fieldsbox" id="engineer"  name="engineer" > </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="firstName">First Name</label>
                        <input type="text" class="form-control" id="firstName" name="first_name" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="lastName">Second Name</label>
                        <input type="text" class="form-control" id="lastName" name="last_name" required />
                    </div>
                    
                    <div class="form-group">
    <label for="Phone_Number" >Phone Number</label>
    <input type="tel"
        class="form-control"
        id="Phone_Number"
        name="Phone_Number"
        placeholder="Enter 10-digit phone number"
        required
        maxlength="10"
        pattern="^\d{10}$"
        oninput="this.value = this.value.replace(/[^0-9]/g, '')"
        
        oninput="this.setCustomValidity('')">
</div>

<div class="form-group">
                        <label for="email">Email-Id</label>
                        <input type="text" class="form-control" id="email-id" name="email" required />
                    </div>
                   
                    <div class="form-group">
                         <label for="Gender" class="form-group">Gender</label><br>
                         <select class="form-select form-control " aria-label="Default select example"
                         id="gender" name="gender"  required>
                         <option value="">Select</option>
                         <option value="Male">Male</option>
                         <option value="Female">Female</option>
                          </select>
                    </div>
                 
                    <div class="form-group">
                        <label for="date-of-joining">Date-Of-Joining</label>
                        <input type="text" class="form-control" id="date-of-joining" name="date_of_joining" placeholder="dd/mm/yy" required />
                    </div>
                   
                    <div class="form-group">
                        <label for="editlogo">Logo</label>
                        <input type="file" class="form-control" id="editlogo" name="file">
                        <br>
                        <img id="logoPreview" src="" alt="Department Logo Preview" style="width:100px;height:100px;margin-bottom:10px;">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
              
                <button type="submit" class="btn btn-primary" form="editForm">Update</button>
            </div>
        </div>
</div>
</div>
<script>

// Attach the function to the form on DOM load
document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("formRoleCreation");
    if (form) {
        form.addEventListener("submit", function (e) {
            if (!validateForm()) {
                e.preventDefault(); // Stop form submission
            }
        });
    }
});
</script>

$(document).ready(function () {
        var table = $('#datatable').DataTable({
            pageLength: 20,
            ajax: {
                url: '<?php echo base_url("roles-data"); ?>',
                dataSrc: ''
            },
            columns: [
                { data: null },
                { data: 'id', visible: false },
                { data: 'role_name'},
                { data: 'apm_username' },
                { data: 'engineer_username' },
                { data: 'first_name' },
                { data: 'last_name' },
                { data: 'phone_no' },
                { data: 'email' },
                // { data: 'dob' },
                { data: 'gender' },
                // { data: 'department_name' },
                { data: 'date_of_joining', render:formatDate },
                // { data: 'pan_no' },
                // { data: 'status' },
                // { data: 'address' },
                {
                    data: 'upload_photo',
                    render: function (data, type, row) {
                        var imageUrl = '<?php echo base_url('public/employeeImages/'); ?>' + data;
                        return '<img src="' + imageUrl + '" alt="Logo" height="50" />';
                    }
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        var access = '<div class="crud--buttons">';
                        access += '<button class="btn edit--butt v-e-d editbtn" id="Edit--button" onclick="Edit(' + row.id + ')">Edit</button>';
                        access += '<button class="btn delete--butt v-e-d deletebtn" id="delete--button" onclick="Delete(' + row.id + ')">Delete</button>';
                        access += '</div>';
                        return access;
                    }
                }
            ],
            rowCallback: function (row, data, index) {
                $('td:eq(0)', row).html(index + 1);
            },
            language: {
                emptyTable: "No data available"
            }
        });
    });
</script>

// Clear previous messages
    document.querySelectorAll('.error-msg').forEach(span => span.innerText = '');
    document.querySelectorAll('input, select').forEach(el => el.classList.remove('error'));

// First Name
    const firstName = document.getElementById('First_Name');
    if (!firstName.value.trim()) {
        document.getElementById('errorFirstName').innerText = 'First Name is required';
        firstName.classList.add('error');
        isValid = false;
    }

// Last Name
    const lastName = document.getElementById('Last_Name');
    if (!lastName.value.trim()) {
        document.getElementById('errorLastName').innerText = 'Last Name is required';
        lastName.classList.add('error');
        isValid = false;
    }

// Phone
    const phone = document.getElementById('Phone_Number');
    if (!phone.value.trim()) {
        document.getElementById('errorPhone').innerText = 'Phone Number is required';
        phone.classList.add('error');
        isValid = false;
    }

// Email
    const email = document.getElementById('E-Mail');
    if (!email.value.trim()) {
        document.getElementById('errorEmail').innerText = 'Email is required';
        email.classList.add('error');
        isValid = false;
    }

// Role
    const role = document.getElementById('Role_Name');
    if (!role.value.trim()) {
        document.getElementById('errorRole').innerText = 'Role is required';
        role.classList.add('error');
        isValid = false;
    }

if (!isValid) {
        e.preventDefault(); // prevent form submission if any field is invalid
    }
});
</script>

var Doj = $('#date-of-joining').val();
            var formattedDoj = formatDate(Doj);

// Optionally, handle button click to submit the form if needed
        $('.submit').click(function() {
            $('#editForm').submit(); // Trigger form submission
        });
    });
</script>

// Populate form fields with data
                    $('#editId').val(item.id);
                    $('#Engineer').val(item.engineer);
                    $('#firstName').val(item.first_name);
                    $('#lastName').val(item.last_name);
                    $('#phoneNumber').val(item.phone_no);
                    $('#email-id').val(item.email);
                    $('#date-of-birth').val(item.dob);
                    $('#gender').val(item.gender);
                    // $('#department').val(item.department);
                    // $('#date-of-joining').val(item.date_of_joining);
                    let date = new Date(item.date_of_joining);
                     let formattedDate = date.toLocaleDateString('en-GB'); // Formats as dd/mm/yyyy
                     $('#date-of-joining').val(formattedDate);

$('#Pan-Number').val(item.pan_no);
                    $('#address').val(item.address);
                    $('#logoPreview').attr('src', '<?php echo base_url('public/employeeImages/'); ?>' + item.upload_photo);

// Populate roles dropdown
                    const roleSelect = $('#role_Name'); 
                    roleSelect.empty(); 
                    roleSelect.append('<option value="">Select Role</option>'); 
                    
                    response.roles.forEach(function(role) {
                        roleSelect.append(`<option value="${role.role}" ${item.role === role.role ? 'selected' : ''}>${role.role_name}</option>`);
                    });

// Populate APM dropdown
                    const apmSelect = $('#apm'); 
                    apmSelect.empty(); 
                    apmSelect.append('<option value="">Select APM</option>'); 
                    response.apms.forEach(function(apm) {
                        apmSelect.append(`<option value="${apm.id}" ${item.apm === apm.id ? 'selected' : ''}>${apm.username}</option>`);
                    });
                    
                    // Populate Engineer dropdown
                    const engineerSelect = $('#engineer'); 
                    engineerSelect.empty(); 
                    engineerSelect.append('<option value="">Select Engineer</option>'); 
                    response.Engineers.forEach(function(Engineer) {
                        engineerSelect.append(`<option value="${Engineer.id}" ${item.Engineer === Engineer.id ? 'selected' : ''}>${Engineer.username}</option>`);
                    });
                    
                    const departmentSelect = $('#department'); 
                   departmentSelect.empty(); 
                    departmentSelect.append('<option value="">Select Department</option>'); 
                    response.departments.forEach(function(department) {
                       departmentSelect.append(`<option value="${department.id}" ${item.department === department.id ? 'selected' : ''}>${department.department_name}</option>`);
                    });
                    
                    $('#editModal').modal('show');
                } else {
                    Swal.fire('Error', 'Unable to fetch data.', 'error');
                }
            },
            error: function(xhr, status, error) {
                console.error("Error occurred: ", error);
                Swal.fire('Error', 'An error occurred while fetching data.', 'error'); // Added user feedback
            }
        });
        
        // Change event for role selection
        document.getElementById('role_Name').addEventListener('change', function() {
            var selectedRole = this.value;

var apmDropdown = document.getElementById('apm');
            var engineerDropdown = document.getElementById('engineer');
            var firstname = document.getElementById('firstName');

// Reset fields and disable/enable dropdowns based on role
            firstname.value = '';
            firstname.removeAttribute('required');
            firstname.readOnly = true;

apmDropdown.disabled = false;
            engineerDropdown.disabled = false;

firstname.value = baseName + currentNum;  
                    },
                    error: function(xhr, status, error) {
                        console.error("Error occurred: " + error);
                    }
                });
            }

// Logic to enable/disable APM and Engineer dropdowns based on selected role
            if (selectedRole === '1') {
                apmDropdown.disabled = true;
                engineerDropdown.disabled = true;
                firstname.setAttribute('required', 'required'); 
                firstname.readOnly = false; 
            } else if (selectedRole === '2') {
                apmDropdown.disabled = true;
                engineerDropdown.disabled = true;
                getNextAvailableName('APM');  
            } else if (selectedRole === '3') {
                apmDropdown.disabled = false;
                engineerDropdown.disabled = true;
                getNextAvailableName('AssistantEngineer');  
            } else if (selectedRole === '4') {
                apmDropdown.disabled = false;
                engineerDropdown.disabled = false;
                getNextAvailableName('Supervisor');  
            }
             else if (selectedRole === '5') {
               apmDropdown.disabled = false;
                engineerDropdown.disabled = true;
                getNextAvailableName('JuniorEngineer');  
            }else {
                apmDropdown.disabled = false;
                engineerDropdown.disabled = false;
            }
        });
    }
</script>

$('#btn-cancel').click(function(e){
            e.preventDefault();
            $('#formRoleCreation')[0].reset();
        })
    })
</script>

var Doj = $('#doj').val();
            var formattedDoj = formatDate(Doj);

apmDropdown.disabled = false;
    engineerDropdown.disabled = false;
    firstname.value = '';

firstname.removeAttribute('required');
    firstname.readOnly = true;

firstname.value = baseName + currentNum;  
            },
            error: function(xhr, status, error) {
                console.error("Error occurred: " + error);
            }
        });
    }

if (selectedRole === '1') {
        apmDropdown.disabled = true;
        engineerDropdown.disabled = true;
        firstname.value = '';
        firstname.setAttribute('required', 'required'); 
        firstname.readOnly = false; 
    } else if (selectedRole === '2') {
        apmDropdown.disabled = true;
        engineerDropdown.disabled = true;
        getNextAvailableName('APM');  
        firstname.removeAttribute('required'); 
        firstname.readOnly = true; 
    } else if (selectedRole === '3') {
        apmDropdown.disabled = false;
        engineerDropdown.disabled = true;
        getNextAvailableName('AssistantEngineer');  
        firstname.removeAttribute('required');
        firstname.readOnly = true;
    } else if (selectedRole === '4') {
        apmDropdown.disabled = false;
        engineerDropdown.disabled = false;
        getNextAvailableName('Supervisor');  
        firstname.removeAttribute('required');
        firstname.readOnly = true; 
    }else if (selectedRole === '5') {
          apmDropdown.disabled = false;
        engineerDropdown.disabled = true;
        getNextAvailableName('JuniorEngineer');  
        firstname.removeAttribute('required');
        firstname.readOnly = true; 
    }
    else {
        apmDropdown.disabled = false;
        engineerDropdown.disabled = false;
        firstname.value = '';
        firstname.removeAttribute('required'); 
        firstname.readOnly = true;
    }
});
</script>

function referDefaultBtn() {
        defaultButton.click();
    }

function cancelUpload() {
        image.src = "";
        image.hidden = true;
        defaultButton.value = "";
        cancelIcon.style.display = "none";
    }

defaultButton.addEventListener("change", function () {
        const file = this.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function () {
                const result = reader.result;
                image.hidden = false;
                image.src = result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>

</script>

$('#date-of-joining').datepicker({
        dateFormat: 'dd/mm/yy', // Custom format: dd/mm/yy
        changeMonth: true,      // Allow changing the month
        changeYear: true        // Allow changing the year
    });

});

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