EVOLUTION-NINJA

Edit File: constituency_master.php

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

.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">Constituency Master</h1>
        </div>
    </div>
    
    <form id="formconstituency">

<div class="row m-0">
            <div class="constuency_page"> 
                <div class="constuencydetails">
                    <div class="constuencydetail row">
                        <div class="col-sm-3">
                            <label for="Constituency_Name" class="form-label inpfieldname">Constituency Name</label><br>
                            <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="constituency"  name="constituency">
                                <option value=""></option>
                            </select>
                        </div>
                     <div class="col-sm-3">
                            <label for="mla" class="form-label inpfieldname">MLA</label><br>
                           <input type="text" name="mla" class="form-control fieldsbox" id="mla">
                        </div>
                        
                          <div class="col-sm-3">
                            <label for="mla" class="form-label inpfieldname">MP</label><br>
                           <input type="text" name="mp" class="form-control fieldsbox" id="mla">
                        </div>
                        
                          <div class="col-sm-3">
                            <label for="mla" class="form-label inpfieldname">MLC</label><br>
                           <input type="text" name="mlc" class="form-control fieldsbox" id="mla">
                        </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>
        </div>
        
    </form>
    
    
    
    <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 Constituency</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editdepartmentForm">
                <div class="modal-body">
                    <input type="hidden" name="id" id="editconstituencyId">
                    <div class="form-group">
                        <label for="editAddress">Constituency</label>
                        <select class="form-select form-control fieldsbox" id="editconstituency" 
                        name="constituency_model" required> </select>
                    </div>
          
                 
             
                    <div class="form-group">
                        <label for="editAddress">MLA/MP/MLC</label>
                        <input type="text" class="form-control" id="editmla" name="mla_model">
                    </div>
         </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary submit">Update</button>
                </div>
            </form>
        </div>

</div>

</div>
  <div class="container deptable">
                <table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>Constituency Name</th>
                            <th>MLA Name</th>
                            <th>MP Name</th>
                            <th>MLC Name</th>
                            <th>Action</th>

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

</section>

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

</script>

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

// Populate the department dropdown only with department names
                    response.constituency.forEach(function(constituency) {
                       constituencySelect.append(`<option value="${constituency.id}" ${data.constituency_name === constituency.id ? 'selected' : ''}>${constituency.constituency_name}</option>`);
                    });

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

</script>

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