EVOLUTION-NINJA

Edit File: CustomerList.php

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

#datatable {
    min-width: 1800px; /* adjust if needed */
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

<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');?>">

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

<div class="container-fluid inp-lbl">
        
        <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>CATEGORY</th>
                    <th>MOB.NUM</th>
                    <th>FID NO.</th>
                     <th>AAdhar 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>

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>

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