EVOLUTION-NINJA

Edit File: department.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>
<script src="<?php echo base_url('public/assets/toastr/toastr.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">Department</h1>
        </div>
    </div>

<div class="row">
        <div class="col-sm-12">
            <form id="form-department">

<div class="row m-0">

<div class="depdetail row">
                                <div class="col-sm-4">
                                    <label for="Department_Name" class="form-label inpfieldname">Department
                                        Name</label><br>
                                    <input type="text" class="fieldsbox form-control" id="Department_Name"
                                        name="Department_Name" placeholder="Enter department name" required>
                                </div>
                                <div class="col-sm-4">
                                    <label for="Shortcut_Name" class="form-label inpfieldname">Shortcut Name</label><br>
                                    <input type="text" class="fieldsbox form-control" id="Shortcut_Name"
                                        name="Shortcut_Name" placeholder="Enter shortcut 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="depdetail row dep1">

<div class="col-sm-4">
                                    <label for="Head_Of_Account" class="form-label inpfieldname">Head Of
                                        Account</label><br>
                                    <select class="form-select form-control fieldsbox"
                                        aria-label="Default select example" id="Head_Of_Account"
                                        name="header_of_account" >
                                        <option value="">Select</option>
                                        <option value="MLA">MLA</option>
                                        <option value="MLC">MLC</option>
                                        <option value="MP">MP</option>
                                        <option value="RS">RS</option>
                                        <option value="NILL">NILL</option>
                                    </select>
                                </div>

</div>

<div class="depdetail row dep3">

</div>
                        </div>

</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>
            </form>
        </div>

</div>

<div class="row mt-5 tableBlock">
        <div class="col-sm-12">
  <div class="modal fade" id="editdepartmentModal" tabindex="-1" role="dialog" aria-labelledby="editdepartmentModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editdepartmentLabel">Edit Department</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editdepartmentForm">
                <div class="modal-body">
                    <input type="hidden" name="id" id="editdepartmentId">
                    <div class="form-group">
                        <label for="editAddress">Department</label>
                     
                         <input type="text" class="fieldsbox form-control" id="editdepartment"
                                        name="department_model" placeholder="Enter department name" >
                    </div>
                   
                    <div class="form-group">
                        <label for="editAddress">Shortcut Name</label>
                     
                          <input type="text" class="fieldsbox form-control" id="edit_shortcut"
                                        name="shortcut_model" placeholder="Enter shortcut name" >
                    </div>
                  
                    
                    
                    
                    
                  
                    <div class="form-group">
                            <label for="Head_Of_Account" class="form-label inpfieldname">Head Of Account</label><br>
                            <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="edit_headOfAccount" name="header_of_account">
                                <option value="">Select</option>
                                <option value="MLA">MLA</option>
                                <option value="MLC">MLC</option>
                                <option value="MP">MP</option>
                                <option value="RS">RS</option>
                            </select>
                   
                    </div>
                    <div class="form-group">
                        <label for="editAddress">Preferences</label>
                        <input type="text" class="form-control" id="preference" name="preference_model">
                    </div>
                    <div class="form-group">
    <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>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary submit">Update</button>
                </div>
            </form>
        </div>

</div>

<div class="container deptable">
                <table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>Department</th>
                            <th>Shortcut Name</th>
                            
                            <th>Head Of Account</th>
                            <th>Preference</th>
                            <th>Department Logo</th>
                            <th>Action</th>

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

</section>

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

$(document).ready(function () {
        $('#form-department').submit(function (e) {
            e.preventDefault();
            var formdata = new FormData($(this)[0]);
            $('#app-btn').text('submitting...');
            $('#app-btn').attr('disabled', 'disabled');
            $.ajax({
                type: 'post',
                url: '<?php echo base_url('create_department'); ?>',
                data: formdata,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.result == 1) {
                        Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                        $('#form-department')[0].reset();
                        window.location.href = '<?php echo base_url("department");?>';
                    } else {
                        Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                    }
                    $('#app-btn').removeAttr('disabled').text("SUBMIT");
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.error(xhr.responseText);
                    Swal.fire({ icon: "error", title: "An error occurred", showConfirmButton: false, timer: 1000 });
                },
                complete: function () {
                    $('#app-btn').removeAttr('disabled').text("SUBMIT");
                }
            })
        });
    });
</script>

$(document).ready(function () {
        var table = $('#datatable').DataTable({
            pageLength: 20,
            ajax: {
                url: '<?php echo base_url("department-list-data"); ?>',
                dataSrc: ''
            },
            columns: [
                { data: null },
                { data: 'id', visible: false },
                { data: 'department_name' },
                { data: 'shortcut_name' },
                // { data: 'fund_name' },
                { data: 'head_of_account' },
                { data: 'preference' },
                {
                    data: 'department_logo',
                    render: function (data, type, row) {
                        var imageUrl = '<?php echo base_url('public/departmentLogo/'); ?>' + 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>

// Set the values in the modal
                    $('#editdepartmentId').val(data.id);
                    $('#preference').val(data.preference);
                    $('#editdepartment').val(data.department_name);
                    $('#edit_shortcut').val(data.shortcut_name);
                    $('#edit_headOfAccount').val(data.head_of_account);
                    $('#logoPreview').attr('src', '<?php echo base_url('public/departmentLogo/'); ?>' + data.department_logo); // Set logo preview
                    
                  
                    // const departmentSelect = $('#editdepartment'); // Ensure this matches your input field's ID
                    // departmentSelect.empty(); // Clear existing options
                    // departmentSelect.append('<option value="">Select Department</option>'); // Add default option

// // Populate the department dropdown only with department names
                    // response.departments.forEach(function(department) {
                    //     departmentSelect.append(`<option value="${department.department_name}" ${data.department_name === department.department_name ? 'selected' : ''}>${department.department_name}</option>`);
                    // });

// // Populate the shortcut name dropdown
                    // const shortcutSelect = $('#edit_shortcut'); // ID of the shortcut dropdown
                    // shortcutSelect.empty(); // Clear existing options
                    // shortcutSelect.append('<option value="">Select Shortcut</option>'); // Add default option

// // Populate the shortcut name dropdown dynamically
                    // response.departments.forEach(function(shortcut_name) {
                    //     shortcutSelect.append(`<option value="${shortcut_name.shortcut_name}" ${data.shortcut_name === shortcut_name.shortcut_name ? 'selected' : ''}>${shortcut_name.shortcut_name}</option>`);
                    // });

$('#editdepartmentModal').modal('show');
                } else {
                    alert(response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching department data:', error);
            }
        });
    }
</script>

</script>
<script>
    let arrow = document.querySelectorAll(".arrow");
    for (var i = 0; i < arrow.length; i++) {
        arrow[i].addEventListener("click", (e) => {
            let arrowParent = e.target.parentElement.parentElement;
            arrowParent.classList.toggle("showMenu");
        });
    }
    let sidebar = document.querySelector(".sidebar");
    let sidebarBtn = document.querySelector(".bx-menu");
    console.log(sidebarBtn);
    sidebarBtn.addEventListener("click", () => {
        sidebar.classList.toggle("close");
    });
</script>

let file = null;

plusIcon.addEventListener('click', () => {
            fileInput.click(); // Trigger the file input click event
        });

fileInput.addEventListener('change', (e) => {
            file = e.target.files[0];
        });

uploadButton.addEventListener('click', () => {
            const fileName = fileNameInput.value.trim();

if (file && fileName) {
                const reader = new FileReader();

reader.onload = (event) => {
                    const fileData = {
                        name: fileName,
                        content: event.target.result
                    };
                    addToUploadedFiles(fileData);
                    fileInput.value = ''; // Clear the file input
                    fileNameInput.value = ''; // Clear the file name input
                    file = null;
                };

reader.readAsDataURL(file); // Read file as a base64 encoded string
            } else {
                alert('Please select a file and enter a file name.');
            }
        });

saveButton.addEventListener('click', () => {
            alert('Files saved.'); // Replace this with actual file saving logic if needed
        });

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>

$('#editlogo').on('change', function (event) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#logoPreview').attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    });

</script>

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