EVOLUTION-NINJA
Edit File: create_scheme.php
<!--<?//php echo view('includes/sidebar'); ?>--> <?php echo view('includes/headerSidebar'); ?> <script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.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> <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> <style> .approve-btn{ padding:5px; border-radius: 4px; color:white; background-color:#198754; margin-left:40px; border-color:grey; } .delete-btn{ padding:5px 10px; border-radius: 4px; color:white; background-color:maroon; margin-left:70px; border-color:grey; } .btn-close { background:white; border: none; appearance: none; width: 2em; height: 2em; opacity: 0.5; border-radius:25px; } .btn-close::before { content: "×"; font-size: 1.5rem; color: #000; } /* Table container */ .dataTables_wrapper { font-family: Arial, sans-serif; font-size: 14px; margin: 20px 0; } /* Table headers */ .dataTable thead th { background-color: #1B344F; color: white; font-weight: bold; text-align: center; border: 1px solid #dddddd; } /* Table rows */ .dataTable tbody tr { background-color: #f9f9f9; } .dataTable tbody tr:nth-child(even) { background-color: #f1f1f1; } .dataTable tbody tr:hover { background-color: #eaf3fc; cursor: pointer; } /* Table cells */ .userTable tbody td { text-align: center; padding: 10px; border: 1px solid #dddddd; } /* Table footer */ .userTable tfoot th { background-color: #f2f2f2; color: #333; text-align: center; padding: 8px; } /* Pagination controls */ .dataTables_wrapper .dataTables_paginate { margin: 10px 0; } .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 6px 12px; margin-left: 2px; border: 1px solid #dddddd; background-color: #ffffff; color:#1B344F; border-radius: 4px; cursor: pointer; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color:#1B344F; color: white; } /* Active pagination button */ .dataTables_wrapper .dataTables_paginate .paginate_button.current { background-color:#1B344F; color: white; border: 1px solid:#1B344F; } /* Search box */ .dataTables_wrapper .dataTables_filter input { margin-left: 8px; padding: 6px 10px; border: 1px solid #cccccc; border-radius: 4px; } /* Length dropdown */ .dataTables_wrapper .dataTables_length select { margin-left: 8px; padding: 6px 10px; border: 1px solid #cccccc; border-radius: 4px; } /* Information text */ .dataTables_wrapper .dataTables_info { margin: 10px 0; font-size: 12px; color: #555; } .editbtn{ padding:5px 20px; border-radius: 4px; color:white; background-color:#198754; margin-left:40px; border-color:grey; } .deletebtn{ padding:5px 10px; border-radius: 4px; color:white; background-color:red; margin-left:70px; border-color:grey; } /* Responsive Table */ @media screen and (max-width: 768px) { .container { padding: 10px; } #datatable { font-size: 14px; } } </style> <div id="main" class="p-4"> <section class="home-section fullpage"> <div class="home-content"> <i class='bx bx-menu'></i> </div> <!-- heading row --> <div class="row m-0"> <div class="col-sm-12"> <h1 class="crt-pjt">Create Schemes</h1> </div> </div> <br><br> <div class="container"> <form id="scheme-form"> <div class="row"> <div class="col-sm-4"> <label for="">Scheme Name</label> <input type="text" class="form-control" placeholder="SCHEME NAME" name="scheme" id="scheme"> </div> </div> <br><br> <button type="submit" class="btn btn-success">Submit</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button> </div> </form> <br><br> <div> <div class="container"> <table id="datatable" class="table table-striped table-bordered"> <thead> <tr> <th>SL No</th> <th>ID</th> <th>Scheme Name</th> <th>Actions</th> </tr> </thead> <tbody> <!-- DataTables will populate the rows dynamically --> </tbody> </table> </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 Scheme</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <form id="editSchemeForm"> <div class="modal-body"> <input type="hidden" name="id" id="editschemeId"> <div class="form-group"> <label for="editAddress">Scheme Name</label> <input type="text" class="form-control" placeholder="SCHEME NAME" name="scheme_model" id="scheme_model"> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary submit">Update</button> </div> </form> </div> </div> </div> </section> </div> <script> $(document).ready(function () { $('#scheme-form').submit(function (e) { e.preventDefault() formdata = new FormData($(this)[0]); $.ajax({ type: 'post', url: '<?php echo base_url("add-scheme");?>', data: formdata, contentType: false, processData: false, success: function (response) { // console.log(response); if (response.result == 1) { Swal.fire({ icon: "success", title: response.message, timer: 3000, toast: true, position: 'top-right', showConfirmButton: false, timerProgressBar: true, customClass: { popup: 'swal-toast-green' }, didOpen: (toast) => { toast.addEventListener('mouseenter', Swal.stopTimer); toast.addEventListener('mouseleave', Swal.resumeTimer); } }); $('#scheme-form')[0].reset(); $('#datatable').DataTable().ajax.reload(); } else if (response.result == 0) { Swal.fire({ icon: "error", title: response.message }); $('#scheme-form')[0].reset(); } else { Swal.fire({ icon: "error", title: response.message }); $('#scheme-form')[0].reset(); } }, error: function (xhr, textStatus, errorThrown) { console.error(xhr.responseText); } }) }) }) </script> <script> function Delete(Id) { // alert(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({ url: '<?php echo base_url('delete-scheme/') ?>' + Id, method: 'POST', dataType: 'json', 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: "Failed to delete department", showConfirmButton: false, timer: 2000 }); } }, error: function () { console.log('Error deleting department'); } }); } }); } </script> <!--<script>--> <!-- $(document).ready(function () {--> <!-- var table = $('#datatable').DataTable({--> <!-- pageLength: 20,--> <!-- ajax: {--> <!-- url: '',--> <!-- dataSrc: ''--> <!-- },--> <!-- columns: [--> <!-- { data: null }, --> <!-- { data: 'id', visible: false }, --> <!-- { data: 'scheme' }, --> <!-- {--> <!-- data: null,--> <!-- render: function (data, type, row) {--> <!-- let access = `<div class="crud--buttons">--> <!-- <button class="btn edit--butt v-e-d editbtn" onclick="Edit(${row.id})">Edit</button>--> <!-- <button class="btn ${data.status === 'active' ? 'btn-success' : 'btn-danger'} delete--butt v-e-d deletebtn"--> <!-- onclick="Delete(${row.id})">--> <!-- ${data.status === 'active' ? 'Active' : 'Inactive'}--> <!-- </button>--> <!-- </div>`;--> <!-- return access;--> <!-- }--> <!-- }--> <!-- ],--> <!-- rowCallback: function (row, data, index) {--> <!-- $('td:eq(0)', row).html(index + 1);--> <!-- },--> <!-- language: {--> <!-- emptyTable: "No data available"--> <!-- }--> <!-- });--> <!-- });--> <!--</script>--> <script> $(document).ready(function () { var table = $('#datatable').DataTable({ pageLength: 20, ajax: { url: '<?php echo base_url("scheme-list"); ?>', dataSrc: '' }, columns: [ { data: null }, { data: 'id', visible: false }, { data: 'scheme' }, { data: null, render: function (data, type, row) { let isInactive = data.status.toLowerCase() === 'inactive'; let access = `<div class="crud--buttons"> <button class="btn edit--butt v-e-d editbtn" onclick="Edit(${row.id})">Edit</button> <button class="btn ${isInactive ? 'btn-danger' : 'btn-primary'} delete--butt v-e-d deletebtn" onclick="${isInactive ? '' : `confirmToggle(${row.id}, '${data.status}')`}" ${isInactive ? 'disabled' : ''}> ${data.status === 'active' ? 'Active' : 'Inactive'} </button> </div>`; return access; } } ], rowCallback: function (row, data, index) { $('td:eq(0)', row).html(index + 1); }, language: { emptyTable: "No data available" } }); }); function confirmToggle(id, currentStatus) { let newStatus = currentStatus === 'active' ? 'inactive' : 'active'; Swal.fire({ title: "Are you sure?", text: "Do you want to change the status to " + newStatus.toUpperCase() + "?", icon: "warning", showCancelButton: true, confirmButtonColor: "#d33", cancelButtonColor: "#3085d6", confirmButtonText: "Yes, Change it!", cancelButtonText: "Cancel" }).then((result) => { if (result.isConfirmed) { ToggleStatus(id, newStatus); } }); } function ToggleStatus(id, newStatus) { $.ajax({ url: '<?php echo base_url("update-scheme-status"); ?>', type: 'POST', data: { id: id, status: newStatus }, success: function (response) { if (response.success) { Swal.fire("Success!", "Status updated successfully.", "success"); $('#datatable').DataTable().ajax.reload(); // Refresh the table } else { Swal.fire("Error!", response.message || "Failed to update status.", "error"); } }, error: function () { Swal.fire("Error!", "Something went wrong.", "error"); } }); } </script> <script> function Edit(Id) { $.ajax({ url: "<?php echo base_url('edit-scheme'); ?>/" + Id, type: "GET", success: function(response) { if (response.result === 1) { let data = response.data[0]; $('#editschemeId').val(data.id); $('#scheme_model').val(data.scheme); $('#editdepartmentModal').modal('show'); } else { alert(response.message); } }, error: function(xhr, status, error) { console.error('Error fetching department data:', error); } }); } </script> <script> $(document).ready(function () { $('#editSchemeForm').submit(function (e) { e.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({ url: "<?php echo base_url('update-scheme') ?>", type: "POST", data: formData, processData: false, contentType: false, success: function (response) { if (response.result === 1) { Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 }); $('#editdepartmentModal').modal('hide'); $('#datatable').DataTable().ajax.reload(null, false); } else { alert(response.message); } }, error: function (xhr, status, error) { alert('An error occurred: ' + xhr.responseText); } }); }); }); </script> <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> 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> </html>