EVOLUTION-NINJA

Edit File: createConstituency.php

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

.container {
        margin: 0 auto;
        padding: 20px;
        max-width: 1200px;
        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 20px;

}

.deletebtn {
        background-color: Red;
        color: white;
        padding: 5px 14px;
        margin-left: 5px;
    }

/* 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: #ddd;
    }

/* Action Button Styling */
    #datatable tbody td .action-btn {
        padding: 6px 12px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

.constable{
    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">Create Constituency</h1>
        </div>
    </div>

<div class="row m-0">
                    <div class="constuency_page">
                        <div class="constuencydetails">
                            <div class="constuencydetail row">
                                <div class="col-sm-4">
                                    <label for="Constituency_Name" class="form-label inpfieldname">Constituency
                                        Name</label><br>
                                    <input type="text" class="fieldsbox form-control" id="Constituency_Name"
                                        name="Constituency_Name" placeholder="Enter constituency name" required>
                                </div>
                                <div class="col-sm-4">

<label for="District" class="form-label inpfieldname">District</label><br>
                                    <input type="text" class="fieldsbox form-control" id="District" name="district"
                                        placeholder="Enter District" value="Mysore" readonly>

</select>
                                </div>
                            </div>
                            
                            <div class="constuencydetail row">

<div class="col-sm-4">
                                    <label for="Taluk" class="form-label inpfieldname">Taluk</label><br>
                                    <select class="form-select form-control fieldsbox"
                                        aria-label="Default select example" id="Taluk" name="taluk" required>
                                        <option value="">Select</option>
                                        <option value="Mysore Urban">Mysore Urban</option>
                                        <option value="Mysore rural">Mysore Rural</option>
                                        <option value="T Narasipura">T Narasipura</option>
                                        <option value="T Narasipura">Nanjanagud</option>
                                        <option value="H D kote">H D Kote</option>
                                        <option value="Varuna">Varuna</option>
                                        <option value="PeeriyaPatna">PeeriyaPatna</option>
                                        <option value="Hunsur">Hunsuru</option>
                                        <option value="K R Nagara">K R Nagara</option>
                                        <option value="Sarguru">Sarguru</option>
                                        <option value="Saligrama">Saligrama</option>
                                    </select>
                                </div>
                            </div>
                            <div class="constuencydetail row ">
                                
                                
                                
                                
                                
                            </div>
                        </div>
                    </div>
                </div>

<div class="col-sm-6 buttns-cnl">
                    <button type="submit" class="submit">Submit</button>
                    <button type="button" class="cancel" id="btn-cancel">Cancel</button>
                </div>
            </form>
        </div>
    </div>

<div class="modal fade" id="editConstituencyModal" tabindex="-1" role="dialog" aria-labelledby="editConstituencyrModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editConstituencyLabel">Edit Constituency</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editConstituencyForm">
                <div class="modal-body">
                    <input type="hidden" name="id" id="editConstituencyId">
                    <div class="form-group">
                        <label for="editAddress">Constituency</label>
                  
                          <input type="text" class="form-control" id="editConstituency" name="Constituency_model">
                    </div>
                    
                    
                    <br>
                    <div class="form-group">
                        <label for="editAddress">District</label>
                        <input type="text" class="form-control" id="editDistrict" name="district_model" readonly>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="editTaluk">Taluk</label>
                        <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="editTaluk"  name="taluk_model" required>
                                <option value="Mysore Urban">Mysore Urban</option>
                                <option value="Mysore rural">Mysore Rural</option>
                                <option value="T Narasipura">T Narasipura</option>
                                <option value="T Narasipura">Nanjanagud</option>
                                <option value="H D kote">H D Kote</option>
                                <option value="Varuna">Varuna</option>
                                <option value="PeeriyaPatna">PeeriyaPatna</option>
                                <option value="Hunsur">Hunsuru</option>
                                <option value="K R Nagara">K R Nagara</option>
                                <option value="Sarguru">Sarguru</option>
                                <option value="Saligrama">Saligrama</option>
                            </select>
                    </div>
                    
                    
                    
                    
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary submit">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container constable">
                <table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>Constituency name</th>
                            
                            <th>District</th>
                            <th>Taluk</th>
                            
                            <th>Action</th>

</tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

</div>
    </div>

</section>

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

var formdata = new FormData($(this)[0]);
            $('#app-btn').text('Sumitting...');
            $('#app-btn').attr('disabled', 'disabled');
            $.ajax({
                type: 'post',
                url: '<?php echo base_url("create-constituency");?>',
                data: formdata,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.result == 1) {
                        Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                        $('#formconstituency')[0].reset();

</script>

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

// Set the values in the modal
                    $('#editConstituencyId').val(data.id);
                    $('#editConstituency').val(data.constituency_name);
                    $('#edit_MLA_Name').val(data.mla_name);
                    $('#editDistrict').val(data.district);
                    $('#editTaluk').val(data.taluk);
                    $('#editAddress').val(data.address);

$('#editConstituencyModal').modal('show');
                } else {
                    alert(response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching constituency data:', error);
            }
        });
    }
</script>

var formData = new FormData($(this)[0]);

$.ajax({
                url: "<?php echo base_url('update-constituency') ?>",
                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
                        });

$('#editConstituencyModal').modal('hide');
                        $('#datatable').DataTable().ajax.reload(null, false); // Reload DataTable
                    } else {
                        alert(response.message);
                    }
                },
                error: function (xhr, status, error) {
                    alert('An error occurred: ' + xhr.responseText);
                }
            });
        });
    });
</script>

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