EVOLUTION-NINJA

Edit File: feestructure.php

<?php echo view('includes/home_sidebar');?>
<style>
        .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 tr {
    /* background-color: #9191a1 !important; */
    background-color: rgba(0, 72, 76, 1) !important;
    color: white;
    }
    .edit--butt{
        color: white;
        background-color: #c87221;
    }
    .delete--butt{
        color: white;
        background-color: #05749a;
    }
    .edit--butt:hover{
        color: white;
        background-color: #c87221;
    }
    .delete--butt:hover{
        color: white;
        background-color: #05749a;
    }
    #leftDiv {
        height: 1260px !important;
    }
</style>
<main id="rightDiv">
    <div class="container-fluid">
        <div class="row">

<section class="fee-structure">
                    <button class="btn fee-structure-btn">Create Fees Structure &nbsp;<i class="fa fa-plus"
                            aria-hidden="true"></i></button>
                    <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                            aria-hidden="true"></i>&nbsp;Back</button>
                </section>

<section id="feez-structure-application">
                    <div>
                        <form id="fee-form" class="fee-details">
                            <div class="fee-require-detail">
                                <label for="class-degree">Course</label></br>
                                <select class="form-select inp-boxes-fee" id="class-degree" name="header_name">
                                    <option selected disabled>Select course</option>
                                </select>
                            </div>
                            <div class="fee-require-detail">
                                <label for="description">Value</label></br>
                                <select class="form-select inp-boxes-fee" id="description" name="value_name">
                                </select>
                            </div>
                            <div class="fee-require-detail"><label for="Fee">Fees</label></br>
                                <input type="text" placeholder="" id="Fee" name="fee"
                                    class="inp-boxes-fee form-control" />
                            </div>
                            <div class="fee-require-detail">
                                <label for="Fee-Type">Duration ( in hours )</label></br>
                                <input type='text' class='inp-boxes-fee  form-control' name="duration" id="Fee-Type"/>
                                
                            </div>
                            
                            
                            <div class="fee-require-detail subm"><button type="submit" class="submit-student-form"
                                    id="fee-btn">Submit</button>
                            </div>
                        </form>
                    </div>
                </section>

<table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>id</th>
                            <th>Course</th>
                            <th>Value</th>
                            <th>Fees</th>
                            <th>Duration</th>
                            <th>Created By</th>
                            <th>Created Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

</div>

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

<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 Fees</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editFormfees">
                    <div class="mb-3">
                        <input type="hidden" name='feeid' id="feeid" />
                        <label for="editName" class="form-label">Fees</label>
                        <input type="text" class="form-control" id="editfees" name="editfees" required>
                    </div>
                    <div class="mb-3">
                        <label for="durationedit"></label>
                        <label for="durationedit">Duration ( in hours )</label></br>
                        <input type='text' class='inp-boxes-fee from-control' name="duration" id="durationedit"/>
                        
                    </div>
                    <button class="save--changes">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet">
<script>
    $(document).ready(function () {
        var table = $('#datatable').DataTable({
            ajax: {
                url: '<?php echo base_url("fees-data"); ?>',
                dataSrc: ''
            },
            columns: [
                { data: null },
                { data: 'id', visible: false },
                { data: 'header_name' },
                { data: 'value_name' },
                { data: 'fees' },
                { data: 'duration' },
                { data: 'created_by' },
                { data: 'created_at' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `<div class="crud--buttons">
                        <button class="btn edit--butt" >Edit 
                         
                        </button>
                        <button class="btn delete--butt" onclick=DeleteFee(${row.id})>Delete 
                        
                        </button>
                    </div>`;
                    }
                }
            ],
            rowCallback: function (row, data, index) {
                $('td:eq(0)', row).html(index + 1);
            },
            language: {
                emptyTable: "No data available"
            }
        });
    });

function DeleteFee(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("fee-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();
                            })
                        }
                    }
                })

}
        });
    }

// header form
    $(document).ready(function () {
        $('#fee-form').submit(function (e) {
            e.preventDefault();
            var formdata = new FormData($(this)[0]);
            $('#fee-btn').text('Creating');
            $('#fee-btn').attr('disabled', 'disabled');
            $.ajax({
                type: 'post',
                url: '<?php echo base_url("add-fee");?>',
                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();
                        $('#fee-form')[0].reset();
                    } 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 () {
                    $('#fee-btn').removeAttr('disabled').text("Add");
                }
            });
        });
    });

//select header
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: '<?php echo base_url("get-header");?>',
            dataType: 'json',
            success: function (response) {
                if (response.result == 1) {
                    var options = response.data;
                    var selectElement = $('#class-degree');
                    selectElement.empty();
                    $('#class-degree').html('<option value="" selected >Select course</option>')
                    $.each(options, function (index, option) {
                        if(option.id!=36){
                            selectElement.append($('<option>', {
                            value: option.id,
                            text: option.header_name
                        }));
                        }
                  
                    });
                } else {
                    $('#class-degree').html('<option value="">Header not found</option>');
                }
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });

// Second select dropdown
        $('#class-degree').change(function () {
            var headerId = $(this).val();
            $.ajax({
                type: 'GET',
                url: '<?php echo base_url("get-value");?>?id=' + headerId,
                dataType: 'json',
                success: function (response) {
                    if (response.result == 1) {
                        var options = response.data;
                        var selectElement = $('#description');
                        selectElement.empty();
                        $.each(options, function (index, option) {
                            selectElement.append($('<option>', {
                                value: option.id,
                                text: option.value_name
                            }));
                        });
                    } else {
                        $('#description').html('<option value="">value not found</option>');
                    }
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    });

// fee edit 
     $(document).ready(function () {
        $('#datatable tbody').on('click', '.edit--butt', function () {
            var row = $(this).closest('tr');
            var rowData = $('#datatable').DataTable().row(row).data();
            $('#editfees').val(rowData.fees);
            $('#durationedit').val(rowData.duration);
            $('#feeid').val(rowData.id);
            $('#editModal').modal('show');
        });

$('#editFormfees').submit(function (e) {
            e.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: '<?php echo base_url("update-fees");?>',
                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);
                }
            });
        });
    });
</script>