EVOLUTION-NINJA

Edit File: add_header.php

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

.edit--butt,
    .delete--butt {
        width: 100px;
        font-size: 14px;
        font-weight: 500;
        background-color: #E44A24;
        color: #F2F6FF;
        padding: 0px 16px;

}
    .edit--butt--expense {
        width: 100px;
        font-size: 14px;
        font-weight: 500;
        background-color: #0065A3;
        color: #F2F6FF;
        padding: 0px 16px;

}

.crud--buttons {
        display: grid;
        grid-template-columns: repeat(2, 100px);
        gap: 5px;

}

.del-upd>i {
        font-size: 18px;
        margin-inline: 7px;
    }

.update--butt {
        font-size: 14px;
        padding: 2px 8px;
        font-weight: 500;
        color: white;
        background-color:
            #244660;
    }

.save--changes {
        background-color: teal;
        color: white;
        border: none;
        outline: none;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
    }

.save--changes:hover {
        opacity: 0.9;
    }

.datatable thead th {
        border-bottom: 3px solid #B5C9F2 !important;
    }

.dataTable .no-footer {
        border-bottom: 3px solid #B5C9F2 !important;
    }

.dataTable .odd {
        border-bottom: 3px solid #B5C9F2 !important;
    }

.dataTable.no-footer {
        border-bottom: 3px solid #B5C9F2 !important;
    }

.dataTable.display tbody tr.odd {
        background-color: #E2ECFF !important;
    }

.sub-table {
        padding: 10px 0px !important;
    }

#DataTables_Table_0 tr.odd>.sorting_1,
    td {
        background-color: #F6F9FF !important;
    }

#datatable thead tr {
        background-color: white !important;
    }

#datatable thead tr {
        /* background-color: #9191a1 !important; */
        background-color: rgba(0, 72, 76, 1) !important;
        color: white;
    }
    #datatable1 thead tr {
        background-color: white !important;
    }

#datatable1 thead tr {
        /* background-color: #9191a1 !important; */
        background-color: rgba(0, 72, 76, 1) !important;
        color: white;
    }

#leftDiv {
        height: 2860px !important;
    }
    .inp-boxes-addHeader{
        text-transform: capitalize;
    }
</style>

<section class="">
                <div class="row fee-structure">
                    <div class="col-sm-2">
                        <button class="btn add-header-btn" id="add-header-btn">Add Header&nbsp;<i class="fa fa-plus"
                                aria-hidden="true"></i></button>
                    </div>
                    <div class="col-sm-3">
                        <button class="btn add-header-btn" id="add-header-btn1">Add Expense Type&nbsp;<i
                                class="fa fa-plus" aria-hidden="true"></i></button>
                    </div>
                    <div class="col-sm-4"></div>
                    <div class="col-sm-1">
                        <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                                aria-hidden="true"></i>&nbsp;Back</button>
                    </div>
                </div>

</section>

<section id="add-header" style="display: none;">
                <div>
                    <h5 class="  mt-4">Header</h5>
                    <form id="header_form" class="addHeader-details">

<label for="addheader-Name">Header Name</label></br>
                            <input type="text" placeholder="" id="addheader-Name" name="header_name"
                                class="inp-boxes-addHeader form-control" required />
                        </div>
                        <div class="addHeader-detail">
                            <label for="Description">Description</label></br>
                            <input type="text" placeholder="" id="Description" name="header_description"
                                class="inp-boxes-addHeader form-control" required />
                        </div>
                        <div class="addHeader-detail subm">
                            <button type="submit" id="add-btn" class="addHeader-submit">ADD</button>
                        </div>
                    </form>
                </div>
            </section>

<section id="add-expensetype" style="display: none;">
                <div>
                    <h5 class="  mt-4">Expense</h5>
                    <form id="expense_form" class="addHeader-details">

<div class="addHeader-detail">
                            <label for="addheader-Name">Expense Name</label></br>
                            <input type="text" placeholder="" id="addheader-Name" name="expense_name"
                                class="inp-boxes-addHeader form-control" required />
                        </div>
                        <div class="addHeader-detail">
                            <label for="Description">Description</label></br>
                            <input type="text" placeholder="" id="Description" name="description"
                                class="inp-boxes-addHeader form-control" required />
                        </div>
                        <div class="addHeader-detail subm">
                            <button type="submit" id="add-btn-exp" class="addHeader-submit">ADD EXPENSE</button>
                        </div>
                    </form>
                </div>
            </section>
            <div class="row mt-4">
                <div class="col-sm-12">

<h4 style="color: #244660;">Header List</h4>
                    <table id="datatable" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>SL no</th>
                                <th>ID</th>
                                <th>Header</th>
                                <th>Description</th>
                                <th>Created By</th>
                                <th>Created Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

</tbody>
                    </table>

<br />
                    
                    <h4 style="color: #244660;">Expense Type List</h4>
                    <table id="datatable1" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>SL no</th>
                                <th>ID</th>
                                <th>Expense Name</th>
                                <th>Description</th>
                                <th>Created By</th>
                                <th>Created Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

</tbody>
                    </table>
                </div>
            </div>
        </div>

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

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Header </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editFormheader">
                    <div class="mb-3">
                        <input type="hidden" name='headerid' id="headerid" />
                        <label for="editName" class="form-label">Name</label>
                        <input type="text" class="form-control" id="editName" name="header_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="editDescription" class="form-label">Description</label>
                        <input type="text" class="form-control" id="editDescription" name="header_description" required>
                    </div>
                    <button class="save--changes">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editModalexpense" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Expense </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editFormexpense">
                    <div class="mb-3">
                        <input type="hidden" name='expenseid' id="expenseid" />
                        <label for="editName" class="form-label">Expense Name</label>
                        <input type="text" class="form-control" id="editNameexpense" name="expense_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="editDescription" class="form-label">Description</label>
                        <input type="text" class="form-control" id="editDescriptionexpense" name="description" required>
                    </div>
                    <button class="save--changes">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editValueModal" tabindex="-1" aria-labelledby="editValueModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editValueModalLabel">Edit Value</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editValueForm">
                    <div class="mb-3">
                        <label for="editValueName" class="form-label">Value Name</label>
                        <input type="text" class="form-control" id="editValueName" name="value_name" required>
                        <input type="hidden" class="form-control" id="valueid" name="valueid">
                    </div>
                    <div class="mb-3">
                        <label for="editValueDescription" class="form-label">Value Description</label>
                        <input type="text" class="form-control" id="editValueDescription" name="value_description"
                            required>
                    </div>
                    <button type="submit" class="save--changes">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>

//    header table
    $(document).ready(function () {
        var table = $('#datatable').DataTable({
            ajax: {
                url: '<?php echo base_url("header-data"); ?>',
                dataSrc: ''
            },
            columns: [
                { data: null },
                { data: 'id', visible: false },
                { data: 'header_name' },
                { data: 'header_description' },
                { data: 'created_by' },
                { data: 'created_at' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `<div class="crud--buttons">
                        <button class="btn add--value toggle-sub-row">Add Value <i class="fa fa-caret-down" aria-hidden="true"></i></button>
                        <button class="btn edit--butt" >Edit</button>
                        <button class="btn delete--butt" onclick=DeleteHeader(${row.id})>Delete</button>
                    </div>`;
                    }
                }
            ],
            rowCallback: function (row, data, index) {
                $('td:eq(0)', row).html(index + 1);
            },
            language: {
                emptyTable: "No data available"
            }
        });

});
    // expense table
    $(document).ready(function () {
        var table = $('#datatable1').DataTable({
            ajax: {
                url: '<?php echo base_url("expense-data"); ?>',
                dataSrc: ''
            },
            columns: [
                { data: null },
                { data: 'id', visible: false },
                { data: 'expense_name' },
                { data: 'description' },
                { data: 'created_by' },
                { data: 'created_at' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `<div class="crud--buttons">
                        <button class="btn edit--butt--expense" >Edit</button>
                        <button class="btn delete--butt" onclick=DeleteExpense(${row.id})>Delete</button>
                    </div>`;
                    }
                }
            ],
            rowCallback: function (row, data, index) {
                $('td:eq(0)', row).html(index + 1);
            },
            language: {
                emptyTable: "No data available"
            }
        });

});

// sub table
    $(document).ready(function () {
        var table = $('#datatable').DataTable();
        $('#datatable tbody').on('click', '.toggle-sub-row', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
            } else {
                var rowData = row.data();
                var id = rowData.id;
                addvalue(id, function (html) {
                    row.child(html).show();
                    tr.addClass('shown');
                    var subTable = tr.next().find('table').DataTable();
                    subTable.on('click', 'i.edit-value', function () {
                        var subRow = $(this).closest('tr');
                        var subRowData = subTable.row(subRow).data();

if (subRowData) {
                            var valueName = subRowData[2] || '';
                            var valueDescription = subRowData[3] || '';
                            var valueid = subRowData[1];
                            $('#editValueName').val(valueName);
                            $('#editValueDescription').val(valueDescription);
                            $('#valueid').val(valueid);
                            $('#editValueModal').modal('show');
                        } else {
                            console.error('Sub-row data is undefined');
                        }
                    });
                });
            }
        });
    });

//delete header
    function DeleteHeader(id) {
        // console.log(id)
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: 'post',
                    url: '<?php echo base_url("header-delete");?>?id=' + id,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.result == 1) {
                            Swal.fire({
                                title: "Deleted!",
                                text: "Your file has been deleted.",
                                icon: "success",
                            }).then(function () {
                                $('#datatable').DataTable().ajax.reload();
                            })
                        }
                    }
                })

}
        });
    }
    //delete header
    function DeleteExpense(id) {
        // console.log(id)
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: 'post',
                    url: '<?php echo base_url("expense-delete");?>?id=' + id,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.result == 1) {
                            Swal.fire({
                                title: "Deleted!",
                                text: "Your file has been deleted.",
                                icon: "success",
                            }).then(function () {
                                $('#datatable1').DataTable().ajax.reload();
                            })
                        }
                    }
                })

}
        });
    }
    //delete value
    function DeleteValue(id) {
        // console.log(id)
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: 'post',
                    url: '<?php echo base_url("value-delete");?>?id=' + id,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.result == 1) {
                            Swal.fire({
                                title: "Deleted!",
                                text: "Your file has been deleted.",
                                icon: "success",
                            }).then(function () {
                                $('#datatable').DataTable().ajax.reload();
                            })
                        }
                    }
                })

}
        });
    }

// value form
    $(document).ready(function () {
        $(document).on('submit', '#value_form', function (e) {
            e.preventDefault();
            var formdata = new FormData($(this)[0]);
            $('#add-btn-value').text('Creating value');
            $('#add-btn-value').attr('disabled', 'disabled');
            // alert('hell0')
            $.ajax({
                type: 'post',
                url: '<?php echo base_url("value-form");?>',
                data: formdata,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.result == 1) {
                        Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                        $('#datatable').DataTable().ajax.reload();
                    } else {
                        Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.error(xhr.responseText);
                    Swal.fire({ icon: "error", title: "An error occurred", showConfirmButton: false, timer: 1000 });
                },
                complete: function () {
                    $('#add-btn-value').removeAttr('disabled').text("Add value");
                }
            });
        });
    });

// header edit 
    $(document).ready(function () {
        $('#datatable tbody').on('click', '.edit--butt', function () {
            var row = $(this).closest('tr');
            var rowData = $('#datatable').DataTable().row(row).data();
            $('#editName').val(rowData.header_name);
            $('#editDescription').val(rowData.header_description);
            $('#headerid').val(rowData.id);
            $('#editModal').modal('show');
        });

$('#editFormheader').submit(function (e) {
            e.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url("update-header");?>',
                data: formData,
                success: function (response) {
                    if (response.result == 1) {
                        $('#editModal').modal('hide');
                        Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                        $('#datatable').DataTable().ajax.reload();
                    } else {
                        Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                        $('#editModal').modal('hide');
                    }

},
                error: function (xhr, textStatus, errorThrown) {
                    console.error(xhr.responseText);
                }
            });
        });
    });
    // expense edit 
    $(document).ready(function () {
        $('#datatable1 tbody').on('click', '.edit--butt--expense', function () {
            var row = $(this).closest('tr');
            var rowData = $('#datatable1').DataTable().row(row).data();
            $('#editNameexpense').val(rowData.expense_name);
            $('#editDescriptionexpense').val(rowData.description);
            $('#expenseid').val(rowData.id);
            $('#editModalexpense').modal('show');
        });

$('#editFormexpense').submit(function (e) {
            e.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url("update-expense");?>',
                data: formData,
                success: function (response) {
                    if (response.result == 1) {
                        $('#editModalexpense').modal('hide');
                        Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                        $('#datatable1').DataTable().ajax.reload();
                    } else {
                        Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                        $('#editModalexpense').modal('hide');
                    }

},
                error: function (xhr, textStatus, errorThrown) {
                    console.error(xhr.responseText);
                }
            });
        });
    });

// edit value
    $(document).ready(function () {
        $('#editValueForm').submit(function (e) {
            e.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url("update-value");?>',
                data: formData,
                success: function (response) {
                    $('#editValueModal').modal('hide');
                    if (response.result == 1) {
                        $('#editValueModal').modal('hide');
                        Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                        $('#datatable').DataTable().ajax.reload();
                    } else {
                        $('#editValueModal').modal('hide');
                        Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.error(xhr.responseText);
                }
            });
        });
    });

</script>

add_header_btn.addEventListener("click", function () {
        add_header_form.style.display = (add_header_form.style.display === 'none') ? 'block' : 'none';
        add_header_form1.style.display = 'none';
    });

add_header_btn1.addEventListener("click", function () {
        add_header_form1.style.display = (add_header_form1.style.display === 'none') ? 'block' : 'none';
        add_header_form.style.display = 'none';
    });

// Initially show the 'add-header' section and hide the 'add-expensetype' section
    add_header_form.style.display = 'none';
    add_header_form1.style.display = 'none';
</script>