EVOLUTION-NINJA

Edit File: fund_master.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>
<link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css');?>">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.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: 90px
    }

.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">Fund Management</h1>
        </div>
    </div>
    
    <form id="form-fund">

<div class="row m-0">

<div class="depdetail row">
                       <div class="col-sm-4">
                            <label for="Department" class="form-label inpfieldname">Department</label><br>
                            <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="Department" name="department" required>
                                
                                
                                
                            </select>
                        </div>
                            </select>
                          <div class="col-sm-4">
                            <label for="Fund_Name" class="form-label inpfieldname">Fund Name</label><br>
                            <input type="text" class="fieldsbox form-control" id="Fund_Name" name="Fund_Name"
                                placeholder="Enter fund name"  required>
                        </div>
                         
                          
                         <div class="col-sm-6 buttns-cnl">
                              <br>
                          <br>
                     <button type="submit" class="submit" id="app-btn">Submit</button>
                      <button type="button" class="cancel" id="btn-cancel">Cancel</button>
        </div>
        </div>
        </div>
    </form>
    <br><br>
       <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>Fund Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

<br />
                <div id="resultID"></div>
            </div>
        </div>
    </div>
    </div>
</section>
    <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 Funds</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editFundForm">
                <div class="modal-body">
                    <input type="hidden" name="id" id="editfundId">
                    <div class="form-group">
                        <label for="editAddress">Department</label>
                        <select class="form-select form-control fieldsbox" id="editdepartment" 
                        name="department_model" required> </select>
                    </div>
                   
                   <div class="form-group">
                        <label for="editfund">Fund Name</label>
                        <input type="text" class="form-control  fieldsbox" id="edit_fund" name="fund_model">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary submit">Update</button>
                </div>
            </form>
        </div>

</div>

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

$(document).ready(function () {
        var table = $('#datatable').DataTable({
            pageLength: 20,
            ajax: {
                url: '<?php echo base_url("fund-list-data"); ?>',
                dataSrc: ''
            },
            columns: [
                { data: null },
                { data: 'id', visible: false },
                { data: 'department_name' },
                { data: 'fund_name' },
              
            
                {
                    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>

</script>

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