EVOLUTION-NINJA

Edit File: customer_details.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 Details</h1>
        </div>
        <button id="exportBtn" class="btn btn-success" style="margin:20px 0 0 20px !important;">Export to Excel</button>
    </div>
 <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>Name</th>
            
            <th>User Id</th>
            <th>Scheme</th>
            <th>Card Number</th>
            <th>Mobile No</th>
            <th>Created At</th>
            <th style="width:250px;">Actions</th>
        </tr>
    </thead>
    <tbody>
     
    </tbody>
</table>
            </div>
    </div>
        
        </div>
    </div>
    </div>

<div class="modal fade" id="customerModal" tabindex="-1" role="dialog" aria-labelledby="customerModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customerModalLabel">Customer Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#customerModal').modal('hide')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
                <div id="customerDetails">
                    <p><strong>Name:</strong> <span id="customerName"></span></p>
                    <p><strong>Email:</strong> <span id="customerEmail"></span></p>
                    <p><strong>Mobile:</strong> <span id="customerMobile"></span></p>
                    <p><strong>Address:</strong> <span id="customerAddress"></span></p>
                    <p><strong>Card No:</strong> <span id="customerCardNo"></span></p>
                    <p><strong>State:</strong> <span id="customerState"></span></p>
                    <p><strong>City:</strong> <span id="customerCity"></span></p>
                    <p><strong>Pincode:</strong> <span id="customerPincode"></span></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="$('#customerModal').modal('hide')">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="customerModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        
            <div class="modal-header">
                <h5 class="modal-title" id="customerModalLabel">Customer Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#editModal').modal('hide')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="delete-msg" style="display:none; background:#d4edda; color:#155724; padding:10px; margin:10px 0; border:1px solid #c3e6cb; border-radius:4px;">
    Customer deleted successfully
</div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="editcustomerId">

<div class="form-group">
                        <label for="editcustomerEmail">Email</label>
                        <input type="email" class="form-control" id="editcustomerEmail">
                    </div>

<div class="form-group">
                        <label for="editcustomerMobile">Mobile No</label>
                        <input type="text" class="form-control" id="editcustomerMobile">
                    </div>

<div class="form-group">
                        <label for="editcustomerAddress">Address</label>
                        <input type="text" class="form-control" id="editcustomerAddress">
                    </div>

<div class="form-group">
                        <label for="editcustomerState">State</label>
                        <input type="text" class="form-control" id="editcustomerState">
                    </div>

<div class="form-group">
                        <label for="editcustomerPincode">Pincode</label>
                        <input type="text" class="form-control" id="editcustomerPincode">
                    </div>

<button type="submit" class="btn btn-success btn-block">Submit</button>
                </form>
            </div>

<div class="modal-footer">
                
            </div>

</div>
    </div>
</div>

<div class="modal fade" id="customerTableModal" tabindex="-1" role="dialog" aria-labelledby="customerTableModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customerTableModalLabel">Customer Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#customerTableModal').modal('hide')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="customerDataTable" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>SL NO</th>
                            <th>Name</th>
                            <th>User ID</th>
                            
                            <th>amount</th>
                            <th>Date</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                      
                    </tbody>
                    <tfoot>
                        
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="$('#customerTableModal').modal('hide')">Close</button>
            </div>
        </div>
    </div>
</div>

</section>

</div>
</body>

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

{
                    data: null,
                    render: function (data, type, row) {
                        var access = '<div class="crud--buttons">';
     
                        access += '<button class="btn btn-info view--butt" id="view--button" onclick="view(' + row.id + ')" title="View Details">';
                        access += '<i class="fas fa-eye"></i>';
                        access += '</button> ';
                        
                        access += '<button class="btn btn-secondary menu--butt" id="menu--button" onclick="Edit(' + row.id + ')" title="Edit Details">';
                        access += '<i class="fas fa-pencil"></i>';
                        access += '</button> ';

access += '<button class="btn btn-danger menu--butt" id="menu--button" onclick="Delete(' + row.id + ')" title="Delete Details">';
                        access += '<i class="fas fa-trash"></i>';
                        access += '</button> ';

access += '<button class="btn btn-secondary menu--butt" id="menu--button" onclick="openCustomerTableModal(' + row.id + ')" title="More Actions">';
                        access += '<i class="fas fa-bars"></i>';
                        access += '</button> ';
                       
                       
                        access += '<button class="btn btn-secondary menu--butt" id="menu--button" onclick="openCustomerTableModal1(' + row.id + ')" title="More Actions">';
                        access += '<i class="fas fa-bars"></i>';
                        access += '</button> ';
                        
                       
                        
                        access += '</div>';
                        return access;
                    }
                }
            ],
            rowCallback: function (row, data, index) {
                // Serial number
                $('td:eq(0)', row).html(index + 1);
            },
            language: {
                emptyTable: "No data available"
            }
        });
        
        
        
 $('#exportBtn').on('click', function() {

var data = table.rows({ search: 'applied' }).data().toArray();

var headers = ['SL No', 'Name', 'User Id', 'Scheme', 'Card No', 'Mobile No','Created At'];

var ws = XLSX.utils.aoa_to_sheet([headers].concat(data.map(function(row, index) {
        return [
            index + 1, 
            row.name, 
            row.user_id, 
            row.scheme, 
            row.card_no, 
            row.mobile,
            row.created_at ? row.created_at.split(' ')[0] : ''
        ];
    })));

var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Withdraw Report");

XLSX.writeFile(wb, "withdraw_report.xlsx");
});
    });
</script>

// Show the modal
                    $('#customerModal').modal('show');
                } else {
                    alert('Failed to fetch customer details.');
                }
            },
            error: function() {
                alert('Error fetching data.');
            }
        });
    }
</script>

// Show the modal
                    $('#editModal').modal('show');
                } else {
                    alert('Failed to fetch customer details.');
                }
            },
            error: function() {
                alert('Error fetching data.');
            }
        });
    }
</script>

// Remove the row from the DOM
                    location.reload();
                } else {
                    Swal.fire('Failed', 'Could not delete customer', 'error');
                }
            },
            error: function() {
                Swal.fire('Error', 'Something went wrong while deleting', 'error');
            }
        });
    }
}

</script>

tableBody.empty();
                data.data.forEach(function(customer, index) {
                    let serialNumber = index + 1;
                    let amountPaid = parseFloat(customer.amount) || 0;

if (amountPaid > 0) {
                        totalAmount += amountPaid;
                        rowCount++;
                    }

let totalRow = `<tr>
                    <td colspan="3"><strong>Total</strong></td>
                    <td><strong>${totalAmount.toFixed(2)}</strong></td>
                    <td>${rowCount > 0 ? `<strong>Total Months: ${rowCount}</strong>` : ''}</td>
                </tr>`;
                tableBody.append(totalRow);

$('#customerTableModal').modal('show');
            } else {
                alert("No customer data found.");
            }
        },
        error: function() {
            alert("Error fetching customer data.");
        }
    });
}

</script>

</script>

// Collect form data
        var formData = {
            id: $('#editcustomerId').val(),
            name: $('#editcustomerName').val(),
            email: $('#editcustomerEmail').val(),
            mobile: $('#editcustomerMobile').val(),
            card_no: $('#editcustomerCardNo').val(),
            address: $('#editcustomerAddress').val(),
            state: $('#editcustomerState').val(),
            city: $('#editcustomerCity').val(),
            pinCode: $('#editcustomerPincode').val()
        };

$.ajax({
            url: '<?php echo base_url("update-customer-details"); ?>', // Set your correct endpoint
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function (response) {
                if (response.result === 1) {
                    alert('Customer updated successfully!');
                    $('#editModal').modal('hide');
                    // Optionally, refresh the data list or update the row in table
                } else {
                    alert('Failed to update customer.');
                }
            },
            error: function () {
                alert('Error while updating customer.');
            }
        });
    });
});
</script>

</html>