EVOLUTION-NINJA

Edit File: customer_payments.php

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

/* Style table */
#datatable {
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px; /* Adjust font size */
    background-color: #fff;
}

/* Header styling */
#datatable thead {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
}

/* Row styling */
#datatable tbody tr {
    border-bottom: 1px solid #ddd;
}

#datatable tbody tr:hover {
    background-color: #f9f9f9; /* Highlight on hover */
}

/* Action buttons */
.crud--buttons .btn {
    margin: 0 5px; /* Small spacing between buttons */
    font-size: 12px; /* Smaller font for buttons */
    padding: 5px 10px; /* Compact button size */
    border-radius: 3px;
}

/* Eye icon button */
.view--butt {
    color: #fff;
    background-color: #17a2b8; /* Bootstrap 'info' color */
    border: none;
}

/* Menu icon button */
.menu--butt {
    color: #fff;
    background-color: #6c757d; /* Bootstrap 'secondary' color */
    border: none;
}

/* Icon sizes */
.fas {
    font-size: 14px;
    vertical-align: middle;
}

/* Serial number column */
#datatable td:first-child {
    text-align: center;
    font-weight: bold;
}
</style>

<br>
    <div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">Customer Payments</h1>
        </div>
    </div>
 <br>
 
<form id="payment-form">
    <div class="row">
        <div class="col-sm-4">
            <label for="scheme">SCHEME</label>
            <select class="form-control" id="scheme" name="scheme">
                <option value="">Select Scheme</option>
          
            </select>
        </div>
<div class="col-sm-4">
    <label for="user">Select User</label>
    <input type="text" class="form-control" id="user" name="user" placeholder="Search by name">
    <input type="hidden" id="user_id" name="user_id">
</div>

<div class="col-sm-4">
            <label for="amount">Amount</label>
            <input type="text" class="form-control" value="" name="amount" readonly>
    
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-4">
            <label for="date">Payment Date</label>
            <input type="date" class="form-control" placeholder="date" name="date">
        </div>
        <div class="col-sm-4">
            <label for="remarks">REMARKS</label>
            <input type="text" class="form-control" placeholder="Transaction No" name="remarks">
        </div>
    </div>
    <br><br>
    <div class="row">
        <div style="float:left;margin-left:10px;">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
        </div>
    </div>
</form>
<br><br>

<br><br>
  <div class="row">
        <div class="col-sm-12">
         <div class="container deptable">
<table id="datatable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>SL No</th>
            <th>ID</th>
            <th>Scheme</th>
            <th>Payment date</th>
            <th>Amount</th>
            <th>user</th>
        </tr>
    </thead>
    <tbody>
     
    </tbody>
</table>
            </div>
    </div>
        
        </div>
    </div>
</section>

</div>
</body>

},
                        error: function (xhr, textStatus, errorThrown) {
                            console.error(xhr.responseText);
                        }
                    })
            
            })
    
        })
    
    </script>

schemeSelect.addEventListener("change", function () {
            if (this.value) {
                amountInput.value = "1000.00";
                amountInput.readOnly = true;
            } else {
                amountInput.value = "";
                amountInput.readOnly = false;
            }
        });
    });
</script>

$(document).ready(function () {
    $.ajax({
        url: '<?php echo base_url("fetch-scheme"); ?>', 
        method: 'GET',
        success: function (response) {
          
            if (response.length > 0) {
                var options = '<option value="">Select Scheme</option>'; 
               
                $.each(response, function (key, value) {
                    options += `<option value="${value.id}">${value.scheme}</option>`;
                });
                $('#scheme').html(options); 
            } else {
                // alert('No funds found');
            }
        },
        error: function (xhr, status, error) {
            console.error("Error fetching scheme:", error);
        }
    });
});
</script>

$('#user_id').on('change', function () {
        table.ajax.reload();
    });
});
</script>

$("#user").val(ui.item.value);

$('#datatable').DataTable().ajax.reload();

return false;
        }
    });
});
</script>

</html>