EVOLUTION-NINJA

Edit File: create_scheme.php

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

<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>

<div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">Create Schemes</h1>
        </div>
    </div>

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

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);
        }
    });
}

</script>

$('#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>
<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">

</html>