485 lines
24 KiB
PHP
485 lines
24 KiB
PHP
<style>
|
||
.dataTables_filter {
|
||
position: absolute;
|
||
}
|
||
.dataTables_length label {height: 21px !important;}
|
||
</style>
|
||
|
||
<!-- End ADD and EDIT Page HTML -->
|
||
<div class="row" id="List-page">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body maincard">
|
||
<table data-custom-table-css="table" class="table table-sm m-0 table-centered dt-responsive nowrap w-100" cellspacing="a" id="user-table">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="font-weight-medium">S.No.</th>
|
||
<th class="font-weight-medium">Manager</th>
|
||
<th class="font-weight-medium">POS Name</th>
|
||
<th class="font-weight-medium">POS Code</th>
|
||
<th class="font-weight-medium">Email</th>
|
||
<th class="font-weight-medium">Mobile</th>
|
||
<th class="font-weight-medium">Status</th>
|
||
<th class="font-weight-medium">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php if(isset($data['pos_list'])) { $slno = 1; ?>
|
||
<?php foreach($data['pos_list'] as $index => $row) { ?>
|
||
<tr>
|
||
<td class="text-center"><?= $slno++; ?></td>
|
||
<td><?= $row['manager_name']; ?></td>
|
||
<td><?= $row['name']; ?></td>
|
||
<td><?= $row['pos_code']; ?></td>
|
||
<td><?= $row['email']; ?></td>
|
||
<td><?= $row['mobile']; ?></td>
|
||
<td>
|
||
<span class="<?php if($row['is_active'] == 1){ echo 'badge badge-primary'; }else{ echo 'badge badge-danger'; } ?>">
|
||
<?php if($row['is_active'] == 1){ echo 'Active'; }else{ echo 'In-Active'; } ?>
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<div class="btn-group dropdown" style="position: relative !important;left:0px !important;top:0px !important;">
|
||
<a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
|
||
<div class="dropdown-menu dropdown-menu-right" style="cursor: pointer;">
|
||
<a class="dropdown-item" data-id="<?= $row['id']; ?>" onclick="handleSaveEditAndDelete('edit', this)">
|
||
<i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit
|
||
</a>
|
||
<?php if ($row['is_active'] == 1): ?>
|
||
<a class="dropdown-item" data-id="<?= $row['id']; ?>" onclick="handleSaveEditAndDelete('remove', this)">
|
||
<i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete
|
||
</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<?php } ?>
|
||
<?php } else { ?>
|
||
<tr>
|
||
<td colspan="3" class="text-center">No data available</td>
|
||
</tr>
|
||
<?php } ?>
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- modal content -->
|
||
<div id="con-close-modal" class="modal fade app-font-family" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" data-backdrop="static">
|
||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="modalLabel">Add POS Details</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body p-4">
|
||
<!-- <form class="parsley-examples" id="partnerPOSForm" enctype="multipart/form-data"> -->
|
||
<form id="partnerPOSForm" enctype="multipart/form-data">
|
||
<input type="hidden" name="pk" id="pos_id"/>
|
||
<div class="form-group">
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="manager_id">Manager<span class="text-danger">*</span></label>
|
||
<select class="form-control" id="manager_id" name="manager_id" required>
|
||
<option value="" selected>Select Manager</option>
|
||
<?php if (!empty($data['manager_list'])): ?>
|
||
<?php foreach ($data['manager_list'] as $value): ?>
|
||
<option value="<?= esc($value['id']) ?>">
|
||
<?= esc($value['name']) ?>
|
||
</option>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-3">
|
||
<label for="name">Name<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required>
|
||
</div>
|
||
<div class="form-group col-md-3">
|
||
<label for="pos_code">POS Code<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="pos_code" name="pos_code" placeholder="Enter Code" required>
|
||
</div>
|
||
<div class="form-group col-md-3">
|
||
<label for="email">Email<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="email" name="email" placeholder="Enter Email" required>
|
||
<small id="email_error" class="text-danger d-none"></small>
|
||
</div>
|
||
<div class="form-group col-md-3">
|
||
<label for="mobile">Mobile<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Enter Mobile" maxlength="10" inputmode="numeric" pattern="[0-9]{10}" required>
|
||
<small id="mobile_error" class="text-danger d-none"></small>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-3">
|
||
<label for="address">Address<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="address" name="address" placeholder="Enter Address" required>
|
||
</div>
|
||
<div class="form-group col-md-3">
|
||
<label for="city">City<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="city" name="city" placeholder="Enter City" required>
|
||
</div>
|
||
<div class="form-group col-md-3">
|
||
<label for="state">State<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="state" name="state" placeholder="Enter State" required>
|
||
</div>
|
||
<div class="form-group col-md-3">
|
||
<label for="pincode">Pincode<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="pincode" name="pincode" placeholder="Enter Pincode" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-4">
|
||
<label for="aadhar">Aadhaar Number<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="aadhar" name="aadhar" placeholder="Enter Aadhaar Number" maxlength="12" inputmode="numeric" pattern="[0-9]{12}" required>
|
||
<small id="aadhar_error" class="text-danger d-none"></small>
|
||
</div>
|
||
<div class="form-group col-md-4">
|
||
<label for="pan">PAN Number<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="pan" name="pan" placeholder="Enter PAN Number" maxlength="10" style="text-transform:uppercase" pattern="[A-Z]{5}[0-9]{4}[A-Z]{1}" required>
|
||
<small id="pan_error" class="text-danger d-none"></small>
|
||
</div>
|
||
<div class="form-group col-md-4">
|
||
<label for="gst">GST Number</label>
|
||
<input type="text" class="form-control" id="gst" name="gst" placeholder="Enter GST Number">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-4">
|
||
<label for="aadhar_file_name">Aadhar</label>
|
||
<div class="input-icon">
|
||
<input type="file" class="form-control" name="aadhar_file_name" id="aadhar_file_name" accept="image/*,application/pdf">
|
||
<i class="mdi mdi-upload additional-icon"></i>
|
||
</div>
|
||
</div>
|
||
<div class="form-group col-md-4">
|
||
<label for="pan_file_name">PAN</label>
|
||
<div class="input-icon">
|
||
<input type="file" class="form-control" name="pan_file_name" id="pan_file_name" accept="image/*,application/pdf">
|
||
<i class="mdi mdi-upload additional-icon"></i>
|
||
</div>
|
||
</div>
|
||
<div class="form-group col-md-4">
|
||
<label for="certificate_file_name">Certificate</label>
|
||
<div class="input-icon">
|
||
<input type="file" class="form-control" name="certificate_file_name" id="certificate_file_name" accept="image/*,application/pdf">
|
||
<i class="mdi mdi-upload additional-icon"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<!-- <legend>Bank Details</legend> -->
|
||
<div class="form-group col-md-3">
|
||
<label for="bank_name">Bank Name</label>
|
||
<input type="text" id="bank_name" name="bank_name" class="form-control" placeholder="Enter Bank Name">
|
||
</div>
|
||
|
||
<div class="form-group col-md-3">
|
||
<label for="account_holder_name">Account Holder Name</label>
|
||
<input type="text" id="account_holder_name" name="account_holder_name" class="form-control" placeholder="Enter Account Holder Name">
|
||
</div>
|
||
|
||
<div class="form-group col-md-3">
|
||
<label for="account_number">Account Number</label>
|
||
<input type="text" id="account_number" name="account_number" class="form-control" placeholder="Enter Account Number">
|
||
</div>
|
||
|
||
<div class="form-group col-md-3">
|
||
<label for="ifsc_code">IFSC Code</label>
|
||
<input type="text" id="ifsc_code" name="ifsc_code" class="form-control" placeholder="Enter IFSC Code">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="form-group text-right m-b-0">
|
||
<!-- <button type="button" class="btn app-btn-secondary waves-effect waves-light" id="btnSubmit" onclick="handleSaveEditAndDelete('submit')">Submit</button> -->
|
||
<button type="submit" class="btn app-btn-secondary" id="btnSubmit">Submit</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var table;
|
||
$(document).ready(function () {
|
||
$('#manager_id').select2();
|
||
var ticketsTable = $('#user-table');
|
||
ticketsTable.DataTable({
|
||
scrollX: true,
|
||
// dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
|
||
// "<'row'<'col-sm-12'tr>>" +
|
||
// "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
|
||
dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
|
||
"<'row'<'col-sm-12'tr>>" +
|
||
"<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
|
||
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
|
||
buttons: [
|
||
{
|
||
text: 'Add',
|
||
className: 'btn app-btn-primary mr-2',
|
||
action: function(e, dt, node, config) {
|
||
resetValues();openModal();
|
||
}
|
||
},
|
||
{
|
||
extend: 'collection',
|
||
text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
|
||
className: 'btn app-btn-secondary ',
|
||
buttons: [
|
||
{
|
||
extend: 'csv',
|
||
text: '<i class="mdi mdi-file-delimited " ></i><span class=" btn-custom"> CSV </span>',
|
||
title: 'POS-List',
|
||
className: 'app-btn-primary ',
|
||
exportOptions: {
|
||
columns: ':not(:last-child)'
|
||
},
|
||
}
|
||
]
|
||
}
|
||
],
|
||
language: {
|
||
search: `
|
||
<div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
|
||
_INPUT_
|
||
<i class="mdi mdi-magnify datatable-search-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
|
||
<i class="mdi mdi-close-circle datatable-clear-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
|
||
</div>`,
|
||
searchPlaceholder: "Search",
|
||
emptyTable: '<div class="text-center text-muted">No Data found</div>'
|
||
},
|
||
paging: true, // Enable pagination
|
||
pageLength: 10, // Set default number of rows per page (optional)
|
||
// ordering: false,
|
||
});
|
||
});
|
||
|
||
$('.close').click(function(){ resetValues(); })
|
||
|
||
function openModal(){
|
||
var myModal = new bootstrap.Modal(document.getElementById('con-close-modal'));
|
||
myModal.show();
|
||
}
|
||
|
||
function handleSaveEditAndDelete(type = 'submit', el = null) {
|
||
|
||
let form = document.getElementById('partnerPOSForm');
|
||
let url = '<?= base_url('util/partnerPOS') ?>';
|
||
let method = "POST";
|
||
let pk = el ? $(el).data('id') : null;
|
||
|
||
let formData;
|
||
|
||
if (type === 'submit') {
|
||
|
||
// if (!form.checkValidity()) {
|
||
// form.reportValidity();
|
||
// return;
|
||
// }
|
||
|
||
// if (!validateForm()) return;
|
||
|
||
// CREATE FORMDATA FROM FORM
|
||
formData = new FormData(form);
|
||
|
||
// OPTIONAL: re-append file inputs (safe for edit mode)
|
||
$('#partnerPOSForm input[type="file"]').each(function () {
|
||
if (this.files.length > 0) {
|
||
formData.set(this.name, this.files[0]); // use set(), not append()
|
||
}
|
||
});
|
||
|
||
} else if (type == 'edit') {
|
||
method = "GET";
|
||
if (pk) url += '?pk=' + pk;
|
||
$('#modalLabel').text('Edit POS Details');
|
||
$('#partnerPOSForm')[0].reset();
|
||
|
||
} else if (type == 'remove') {
|
||
method = "DELETE";
|
||
if (pk) url += '?pk=' + pk;
|
||
}
|
||
|
||
$('.loader, .loader-mask').fadeIn();
|
||
|
||
$.ajax({
|
||
url: url,
|
||
type: method,
|
||
data: (type === 'submit') ? formData : null,
|
||
processData: false,
|
||
contentType: false,
|
||
success: function (response) {
|
||
console.log('Response:', response);
|
||
if (response.status) {
|
||
if(type == 'edit'){
|
||
let record = response.data.pos_list[0]; // single record
|
||
appendEditData(record);
|
||
} else if(type == 'remove'){
|
||
toastr.success(response.message, 'Success');
|
||
// if(el) $(el).closest('tr').remove();
|
||
window.location.reload();
|
||
} else if(type == 'submit'){
|
||
toastr.success(response.message, 'Success');
|
||
var myModal = new bootstrap.Modal(document.getElementById('con-close-modal'));
|
||
myModal.hide();
|
||
$('#partnerPOSForm')[0].reset();
|
||
window.location.reload();
|
||
}
|
||
} else {
|
||
toastr.warning(response.message, 'Warning');
|
||
}
|
||
$('.loader, .loader-mask').fadeOut();
|
||
},
|
||
error: function () {
|
||
$('.loader, .loader-mask').fadeOut();
|
||
}
|
||
});
|
||
}
|
||
|
||
function resetValues(){
|
||
$('#modalLabel').text('Add POS Details');
|
||
$('#partnerPOSForm')[0].reset();
|
||
$('#manager_id').val(null).trigger('change');
|
||
|
||
}
|
||
|
||
|
||
function appendEditData(data){
|
||
$('#pos_id').val(data.id);
|
||
$('#name').val(data.name);
|
||
$('#email').val(data.email);
|
||
$('#mobile').val(data.mobile);
|
||
$('#pos_code').val(data.pos_code);
|
||
|
||
// Instead of setting the file input
|
||
$('#current_file_name').text(data['certificate_file_name'] || 'No file uploaded');
|
||
|
||
$('#aadhar').val(data.aadhar);
|
||
$('#aadhar_file_name').text(data['aadhar_file_name'] || 'No file uploaded');
|
||
|
||
$('#pan').val(data.pan);
|
||
$('#pan_file_name').text(data['pan_file_name'] || 'No file uploaded');
|
||
|
||
$('#bank_name').val(data.bank_name);
|
||
$('#account_holder_name').val(data.account_holder_name);
|
||
$('#account_number').val(data.account_number);
|
||
$('#ifsc_code').val(data.ifsc_code);
|
||
|
||
$('#gst').val(data.gst);
|
||
|
||
$('#state').val(data.state);
|
||
$('#city').val(data.city);
|
||
$('#pincode').val(data.pincode);
|
||
$('#address').val(data.address);
|
||
|
||
openModal();
|
||
$('#con-close-modal').one('shown.bs.modal', function () {
|
||
$('#manager_id').val(data.manager_id).trigger('change');
|
||
});
|
||
}
|
||
|
||
|
||
$('#aadhar').on('input', function () {
|
||
this.value = this.value.replace(/[^0-9]/g, '');
|
||
});
|
||
|
||
$('#pan').on('input', function () {
|
||
this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
||
});
|
||
|
||
$('#mobile').on('input', function () {
|
||
this.value = this.value.replace(/[^0-9]/g, '');
|
||
});
|
||
|
||
|
||
|
||
$('#partnerPOSForm').on('submit', function(e) {
|
||
e.preventDefault();
|
||
const form = this;
|
||
|
||
// HTML5 built-in validation
|
||
if (!form.checkValidity()) {
|
||
form.reportValidity(); // shows required/pattern tooltips
|
||
return;
|
||
}
|
||
|
||
// Custom validation
|
||
if (!validateForm()) return;
|
||
|
||
// If valid, submit via AJAX
|
||
handleSaveEditAndDelete('submit');
|
||
});
|
||
|
||
|
||
function validateForm() {
|
||
let isValid = true;
|
||
|
||
// Clear old errors
|
||
$('.text-danger').addClass('d-none').text('');
|
||
|
||
// Regex patterns
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
const mobileRegex = /^[6-9]\d{9}$/;
|
||
const aadharRegex = /^\d{12}$/;
|
||
const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
|
||
|
||
// EMAIL
|
||
const email = $('#email').val().trim();
|
||
if (email === '') {
|
||
$('#email_error').text('Email is required').removeClass('d-none');
|
||
isValid = false;
|
||
} else if (!emailRegex.test(email)) {
|
||
$('#email_error').text('Enter a valid email').removeClass('d-none');
|
||
isValid = false;
|
||
}
|
||
|
||
// MOBILE
|
||
const mobile = $('#mobile').val().trim();
|
||
if (mobile === '') {
|
||
$('#mobile_error').text('Mobile number is required').removeClass('d-none');
|
||
isValid = false;
|
||
} else if (!mobileRegex.test(mobile)) {
|
||
$('#mobile_error').text('Enter a valid 10-digit mobile number').removeClass('d-none');
|
||
isValid = false;
|
||
}
|
||
|
||
// AADHAAR
|
||
const aadhar = $('#aadhar').val().trim();
|
||
if (aadhar === '') {
|
||
$('#aadhar_error').text('Aadhaar is required').removeClass('d-none');
|
||
isValid = false;
|
||
} else if (!aadharRegex.test(aadhar)) {
|
||
$('#aadhar_error').text('Aadhaar must be 12 digits').removeClass('d-none');
|
||
isValid = false;
|
||
}
|
||
|
||
// PAN
|
||
const pan = $('#pan').val().trim();
|
||
if (pan === '') {
|
||
$('#pan_error').text('PAN is required').removeClass('d-none');
|
||
isValid = false;
|
||
} else if (!panRegex.test(pan)) {
|
||
$('#pan_error').text('Invalid PAN format (AAAPA1234A)').removeClass('d-none');
|
||
isValid = false;
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
</script>
|
||
|