EVOLUTION-NINJA
Edit File: CustomerList.php
<?php echo view('includes/sidebar'); ?> <style> .table-responsive { width: 100%; overflow-x: auto; } #datatable { min-width: 1800px; /* adjust if needed */ } </style> <!-- ✅ LOAD JQUERY FIRST --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- ✅ DATATABLE --> <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"> <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script> <!-- ✅ TOASTR --> <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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="home-section"> <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">Customer List</h1> </div> </div> <form id="report"> <div class="row m-0"> <div class="constuency_page"> <div class="constuencydetails"> <div class="constuencydetail row"> <div class="col-sm-4"> <label class="form-label inpfieldname">Farmer Name</label> <select class="form-select form-control fieldsbox" name="farmer_name"> <option value=""></option> </select> </div> <div class="col-sm-4"> <label class="form-label inpfieldname">Taluk</label> <select class="form-select form-control fieldsbox" name="taluk"> <option value=""></option> </select> </div> <div class="col-sm-4"> <label class="form-label inpfieldname">Dealer</label> <select class="form-select form-control fieldsbox" name="dealer_name"> <option value=""></option> </select> </div> </div> <div class="col-sm-6 buttns-cnl"> <button type="submit" class="submit" style="width:200px">Get report</button> </div> </div> </div> </div> </form> <br><br> <div class="container-fluid inp-lbl"> <!--<table id="datatable" class="display" style="width:100%">--> <div class="table-responsive"> <table id="datatable" class="display" style="width:100%"> <thead> <tr> <th>SL NO</th> <th>Farmer Name</th> <th>Farmer ID</th> <th>Farmer Address</th> <th>Taluk</th> <th>Dealer</th> <!--<th>FARMER SHARE AMT</th>--> <!--<th>FARMER SHARE UTR NO.</th>--> <th>CATEGORY</th> <th>MOB.NUM</th> <th>FID NO.</th> <th>AAdhar No</th> <!--<th>Unique code no.</th>--> <th>Product Type</th> <th>Product Model</th> <th>RC Price</th> <th>GST %</th> <th>Basic Price</th> <th>Engine No.</th> <th>Chasis No.</th> <th>Paid Amount</th> <th>Payment Type</th> <th>Farmer Share UTR No</th> <th>Action</th> </tr> </thead> </table> <div id="resultID"></div> </div> </div> </section> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script> var role = '<?php echo session()->get('role'); ?>'; function fetchreport(formData = null) { console.log("🔥 Loading Data..."); console.log("jQuery:", typeof $); if ($.fn.DataTable.isDataTable('#datatable')) { $('#datatable').DataTable().destroy(); } $('#datatable').DataTable({ processing: true, ajax: { url: "<?= base_url('project-list-data') ?>", type: "POST", data: function (d) { if (formData) { formData.forEach((value, key) => { d[key] = value; }); } }, dataSrc: function (json) { console.log("📦 API DATA:", json); return json; }, error: function (xhr) { console.log("❌ AJAX ERROR:", xhr.responseText); } }, columns: [ // { data: "id" }, { data: null, render: function (data, type, row, meta) { return meta.row + 1; } }, { data: "farmer_name" }, { data: "farmer_id" }, { data: "address" }, { data: "taluk" }, { data: "dealer_name" }, // { data: "share_amount" }, // { data: "utr_no" }, { data: "category" }, { data: "phone_no" }, { data: "fid_no" }, { data: "aadhar_no" }, // { data: "unique_code" }, { data: "product_type" }, { data: "product_model" }, { data: "rc_price" }, { data: "gst_percent" }, { data: "basic_price" }, { data: "engine_no" }, { data: "chasis_no" }, { data: "paid_amount" }, { data: "payment_type" }, { data: "upi" }, // { // data: null, // render: function (data, type, row) { // return ` // <div style="display:flex; gap:8px; align-items:center;"> // <button class="btn btn-sm btn-warning editBtn" data-id="${row.id}">Edit</button> // <button class="btn btn-sm btn-danger deleteBtn" data-id="${row.id}">Delete</button> // <button class="btn btn-sm btn-success paymentBtn" data-id="${row.id}">Payment</button> // </div> // `; // } // } { data: null, render: function (data, type, row) { let paymentButton = ''; // If payment already submitted if (row.paid_amount && row.paid_amount > 0) { paymentButton = ` <button class="btn btn-sm btn-secondary" style="width:90px"; disabled> Paid </button> `; } else { paymentButton = ` <button class="btn btn-sm btn-success paymentBtn" style="width:90px"; data-id="${row.id}"> Payment </button> `; } return ` <div style="display:flex; gap:8px; align-items:center;"> <button class="btn btn-sm btn-warning editBtn" data-id="${row.id}" title="Edit"> <i class="fa fa-pencil"></i> </button> <button class="btn btn-sm btn-danger deleteBtn" data-id="${row.id}" title="Delete"> <i class="fa fa-trash"></i> </button> ${paymentButton} <a href="<?= base_url('view-invoice') ?>/${row.id}" class="btn btn-sm btn-primary" style="width:80px;"> Invoice </a> ${row.invoice_file ? ` <a href="<?= base_url('public/uploads/invoices/') ?>${row.invoice_file}" target="_blank" class="btn btn-sm btn-info" style="width:120px;"> View Invoice </a> ` : ` <button class="btn btn-sm btn-secondary" style="width:120px;" disabled> No Invoice </button> `} </div> `; } } ] }); } //edit button // <button class="btn btn-sm btn-warning editBtn" data-id="${row.id}"> // Edit // </button> // <button class="btn btn-sm btn-danger deleteBtn" data-id="${row.id}"> // Delete // </button> function loadFilters() { $.ajax({ url: "<?= base_url('get-filters') ?>", type: "GET", success: function (res) { console.log("Dropdown Data:", res); // Farmer Name let farmerDropdown = $("select[name='farmer_name']"); farmerDropdown.append('<option value="">All</option>'); res.farmer.forEach(function (item) { farmerDropdown.append( `<option value="${item.farmer_name}">${item.farmer_name}</option>` ); }); // Taluk let talukDropdown = $("select[name='taluk']"); talukDropdown.append('<option value="">All</option>'); res.taluk.forEach(function (item) { talukDropdown.append( `<option value="${item.taluk}">${item.taluk}</option>` ); }); // Dealer let dealerDropdown = $("select[name='dealer_name']"); dealerDropdown.append('<option value="">All</option>'); res.dealer.forEach(function (item) { dealerDropdown.append( `<option value="${item.dealer_name}">${item.dealer_name}</option>` ); }); }, error: function (err) { console.log("Dropdown Error:", err); } }); } // DELETE $(document).on('click', '.deleteBtn', function () { let id = $(this).data('id'); if (confirm("Delete this record?")) { $.post("<?= base_url('project-delete/') ?>" + id, function () { toastr.success("Deleted successfully"); fetchreport(); }); } }); // ✅ EDIT REDIRECT $(document).on('click', '.editBtn', function () { let id = $(this).data('id'); // redirect to edit page window.location.href = "<?= base_url('project-edit') ?>/" + id; }); $(document).ready(function () { console.log("✅ PAGE READY"); loadFilters(); // ✅ AUTO LOAD ALL DATA fetchreport(); // ✅ FILTER SUBMIT $('#report').on('submit', function (e) { e.preventDefault(); const formData = new FormData(this); fetchreport(formData); }); }); $(document).on('click', '.paymentBtn', function () { let id = $(this).data('id'); // Example: redirect to payment page window.location.href = "<?= base_url('project-payment-edit') ?>/" + id; // OR if you want popup / API call instead, tell me 👍 }); </script>