donation/app/Views/customer_form.php

450 lines
26 KiB
PHP

<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="header-title"><?= $page_name; ?></h4>
<?php if ($page_name === 'Edit Customer Details') : ?>
<ul class="nav nav-tabs" id="customerTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="customerDetails-tab" data-toggle="tab" href="#customerDetails" role="tab" aria-controls="customerDetails" aria-selected="true">Customer Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="subscriptionDetails-tab" data-toggle="tab" href="#subscriptionDetails" role="tab" aria-controls="subscriptionDetails" aria-selected="false">Subscription Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="invoiceDetails-tab" data-toggle="tab" href="#invoiceDetails" role="tab" aria-controls="invoiceDetails" aria-selected="false">Invoice Details</a>
</li>
</ul>
<?php endif; ?>
<div class="tab-content">
<!-- Customer Details Tab -->
<div class="tab-pane fade show active" id="customerDetails" role="tabpanel" aria-labelledby="customerDetails-tab">
<!-- Customer details form fields -->
<form class="needs-validation" novalidate method="POST" enctype="multipart/form-data" action="<?= base_url() . "insert_customer"; ?>" id="myForm" name="myForm">
<!-- <img src="<?= base_url() . "public/assets/images/plugins/loading.gif" ?>" alt="loader1" style="display:none; height:30px; width:auto;" id="loaderImg"> -->
<div class="form-row">
<div class="form-group col-md-4">
<label for="donerType" class="col-form-label">Doner Type<span class="text-danger"> *</span></label>
<select class="form-control" id="donerType" name="donerType" required>
<option value="<?= isset($customer['doner_type']) ? $customer['doner_type'] : '' ?>"><?= isset($customer['doner_type']) ? ($customer['doner_type'] === 'option1' ? 'Individual' : ($customer['doner_type'] === 'option2' ? 'Organization' : 'Select Donor Type')) : 'Select Donor Type'; ?></option>
<option value="option1">Individual</option>
<option value="option2">Organization</option>
</select>
<div class="invalid-feedback">Please provide.</div>
</div>
<div class="form-group col-md-4" id="org_name">
<label for="csname" class="col-form-label">Organization Name<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="org_name_field" name="org_name" value="<?= isset($customer['org_name']) ? $customer['org_name'] : '' ?>" placeholder="Organization Name"/>
<div class="invalid-feedback"> Please provide. </div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="cfname" class="col-form-label"><span class="contactPerson">Contact Person </span>First Name<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="cfname" name="cfname" value="<?= isset($customer['first_name']) ? $customer['first_name'] : '' ?>" placeholder="First Name" required />
<div class="invalid-feedback"> Please provide. </div>
</div>
<div class="form-group col-md-4">
<label for="csname" class="col-form-label"><span class="contactPerson">Contact Person </span>Last Name<span class="text-danger"> *</span></label>
<input type="text" class="form-control" name="csname" value="<?= isset($customer['last_name']) ? $customer['last_name'] : '' ?>" placeholder="Last Name" required />
<div class="invalid-feedback"> Please provide. </div>
</div>
<div class="form-group col-md-4">
<label for="cmail" class="col-form-label"><span class="contactPerson">Contact Person </span>Email</label>
<input type="text" class="form-control" id="cmail" name="cmail" value="<?= isset($customer['email']) ? $customer['email'] : '' ?>" placeholder="Email" onkeyup="validateEmail(this.value)" />
<span id="emailValidationMessage"></span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="cmobile" class="col-form-label"><span class="contactPerson">Contact Person </span>Mobile<span class="text-danger"> *</span></label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">+91</div>
</div>
<input type="text" class="form-control" name="cmobile" value="<?= isset($customer['mobile_no']) ? $customer['mobile_no'] : '' ?>" placeholder="Mobile Number (Enter only numbers)" required maxlength="10" onkeypress="return restriction(event)" />
<div class="invalid-feedback"> Please provide. </div>
</div>
</div>
<div class="form-group col-md-4">
<label for="dob" class="col-form-label">Date Of Birth</label>
<input type="date" class="form-control" name="dob" value="<?= isset($customer['date_of_birth']) ? $customer['date_of_birth'] : '' ?>" placeholder="Date Of Birth" />
</div>
<div class="form-group col-md-4">
<label for="csname" class="col-form-label">PAN<span class="text-danger"> *</span></label>
<input type="text" class="form-control" name="pan_no" value="<?= isset($customer['pan_no']) ? $customer['pan_no'] : '' ?>" placeholder="PAN Number" required />
<div class="invalid-feedback"> Please provide. </div>
</div>
</div>
<input type="hidden" id="doner_id" name="doner_id" placeholder="hidden for customer id" value="<?= isset($customer['doner_id']) ? $customer['doner_id'] : '' ?>" />
<input type="hidden" id="business_id" name="business_id" placeholder="hidden for business id" value="<?= $session_bid ?>" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br />
<div class="after-add-more">
<hr />
<div class="form-group">
<div class="form-row">
<div class="form-group col-md-6">
<label for="baddress1" class="col-form-label">Address<span class="text-danger"> *</span></label>
<textarea type="text" class="form-control" id="baddress1" name="address" placeholder="Address (eg : 1234 Main St)" required style="width:202%"><?= isset($customer['address']) ? $customer['address'] : '' ?></textarea>
<div class="invalid-feedback"> Please provide. </div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="bcountry" class="col-form-label">Country<span class="text-danger"> *</span></label>
<select class="form-control" id="bcountry" name="country" required>
<option value=""><?= isset($customer['country']) ? $customer['country'] : ''?><?= isset($customer['country']) ? '' : 'Choose your Country';?></option>
<?php foreach ($country_details as $value) { ?>
<option value="<?php echo $value['country_name']; ?>">
<?php
if($customer['country'] === $value['country_name']){
echo $value['country_name'];
}
else{
echo $value['country_name'];
}
?>
</option>
<?php } ?>
</select>
<div class="invalid-feedback"> Please provide. </div>
</div>
<div class="form-group col-md-3">
<div id="billinput" style="display: block">
<label for="bistate" class="col-form-label">State</label>
<input type="text" class="form-control" id="bistate" name="state_text" placeholder="State" value="<?= isset($customer['state']) ? $customer['state'] : ''?>"/>
<!-- <div class="invalid-feedback"> Please provide. </div> -->
</div>
</div>
<div class="form-group col-md-3">
<label for="bcity" class="col-form-label">City<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="bcity" name="city" value="<?= isset($customer['city']) ? $customer['city'] : '' ?>" placeholder="City" required />
<div class="invalid-feedback"> Please provide. </div>
</div>
<div class="form-group col-md-3">
<label for="bzip" class="col-form-label">Postal Code<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="bzip" name="zip" value="<?= isset($customer['postal_code']) ? $customer['postal_code'] : '' ?>" placeholder="Postal Code" required pattern="\d*" maxlength="10" />
<div class="invalid-feedback"> Please provide. </div>
</div>
</div>
<input type="hidden" id="bcustomer_address_id" name="bcustomer_address_id[]" placeholder="hidden for billing customer address id" />
</div>
</div>
<br />
<?php if (!empty($customer)) { ?>
<div class="form-group text-right m-b-0 checkbox checkbox-purple">
<input type="checkbox" id="isactive" name="isactive" class="form-control" <?= isset($customer) && $customer['isactive'] == 1 ? 'checked' : '' ?>>
<label for="isactive"> Is Active</label>
</div>
<br>
<?php } ?>
<div class="form-group text-right m-b-0">
<button class="btn btn-success waves-effect waves-light mr-1" id="submitBtn" type="submit">Submit</button>
<!-- <button type="reset" class="btn btn-primary waves-effect mr-1">Reset</button> -->
<button type="button" class="btn btn-primary waves-effect mr-1" onclick="refreshPage()">Reset</button>
<a href="<?= base_url() . "customer_list"; ?>" class="btn btn-secondary waves-effect">Cancel</a>
</div>
</form>
</div><!-- end customer Details Tab -->
</div><!-- end tab-content-->
</div><!-- end card-body-->
</div>
</div>
</div>
<!-- <script>
$("#addressCopiedAsShipping").on("change", function() {
var count = $(".after-shipping-addr-add-more").length;
var counter = $("#counter").val() === "" ? count : parseInt($("#counter").val(), 10);
if ($(this).is(":checked")) {
var customerAddress1 = $("#baddress1").val();
var customerAddress2 = $("#baddress2").val();
var customerCountry = $("#bcountry").val();
var customerDropdownState = $("#bdstate").val();
var customerInputState = $("#bistate").val();
var customerCity = $("#bcity").val();
var customerPostalCode = $("#bzip").val();
$("#saddress1").val(customerAddress1).prop("readonly", false);
$("#saddress2").val(customerAddress2).prop("readonly", false);
$("#scountry"+counter).val(customerCountry).prop("readonly", false);
if (customerCountry == 'IN') {
$("#sistate"+counter).val(customerInputState).css("display", "none").prop("readonly", false);
$("#sdstate"+counter).val(customerDropdownState).css("display", "block").prop("readonly", false);
} else {
$("#sistate"+counter).val(customerInputState).css("display", "block").prop("readonly", false);
$("#sdstate"+counter).val(customerDropdownState).css("display", "none").prop("readonly", false);
}
$("#scity").val(customerCity).prop("readonly", false);
$("#szip").val(customerPostalCode).prop("readonly", false);
$("#counter").val(counter++).prop("readonly", true);
} else {
// Clear the billing address fields when the checkbox is unchecked
$("#saddress1").val("").prop("readonly", false);
$("#saddress2").val("").prop("readonly", false);
$("#scity").val("").prop("readonly", false);
$("#scountry"+counter).val("").prop("readonly", false);
$("#sistate"+counter).val("").css("display", "block").prop("readonly", false);
$("#sdstate"+counter).val("").css("display", "none").prop("readonly", false);
$("#szip").val("").prop("readonly", false);
$("#scustomer_address_id").val("") // Hidden Field ressetted bcoz Adress history
}
});
$("#bcountry").on("change", function() {
var country = $("#bcountry").val();
var dropdownField = $("#billdropdown");
var textField = $("#billinput");
if (country === 'IN') {
dropdownField.show();
textField.hide();
} else {
dropdownField.hide();
textField.show();
}
});
$(document).ready(function() {
if (barray.length > 0) {
for (var i = 0; i < barray.length; i++) {
$("#baddress1").val(barray[i]['address_1']);
$("#baddress2").val(barray[i]['address_2']);
$("#bcountry").val(barray[i]['country']);
$("#bcity").val(barray[i]['city']);
if (barray[i]['country'] == 'IN') {
$("#bdstate").val(barray[i]['state']);
$("#billdropdown").show();
$("#billinput").hide();
} else {
$("#bistate").val(barray[i]['state']);
$("#billdropdown").hide();
$("#billinput").show();
}
$("#bzip").val(barray[i]['postal_code']);
$('#bcustomer_address_id').val(barray[i]['customer_address_id']);
}
}
/*****************************************************************************************/
if (sarray.length > 0) {
j = 0;
for (var i = 0; i < sarray.length; i++) {
if (i == 0) {
var html = $(".after-shipping-addr-add-more").first();
} else {
var html = $(".after-shipping-addr-add-more").first().clone();
}
if ((barray[0]['address_1'] == sarray[i]['address_1']) &&
(barray[0]['city'] == sarray[i]['city']) &&
(barray[0]['state'] == sarray[i]['state']) &&
(barray[0]['country'] == sarray[i]['country']) &&
(barray[0]['postal_code'] == sarray[i]['postal_code'])) {
$("#addressCopiedAsShipping").prop("checked", true);
}
html.find('input#scustomer_address_id').val(sarray[i]['customer_address_id']);
html.find('input#saddress1').val(sarray[i]['address_1']);
html.find('input#saddress2').val(sarray[i]['address_2']);
html.find('input#scity').val(sarray[i]['city']);
html.find('select#scountry0').val(sarray[i]['country']);
html.find('select#scountry0').attr('id', 'scountry' + j);
html.find('input#counter').val(j).prop("readonly", true);
if (sarray[i]['country'] === 'IN') {
// html.find('select#sdstate0').attr('id','sdstate'+$j).val(sarray[i]['state']);
html.find('select#sdstate0').attr('id', 'sdstate' + j).css("display", "block").val(sarray[i]['state']);
html.find('input#sistate0').attr('id', 'sistate' + j).css("display", "none").val('');
} else {
html.find('input#sistate0').attr('id', 'sistate' + j).css("display", "block").val(sarray[i]['state']);
html.find('select#sdstate0').attr('id', 'sdstate' + j).css("display", "none").val('');
}
html.find('input#szip').val(sarray[i]['postal_code']);
if (i !== 0) {
html.find(".shipping-addr-div-change").html("<a class='btn btn-success waves-effect waves-light mr-1 shipping-addr-add-more'>+ Add More Shipping Address </a><a class='btn btn-danger waves-effect waves-light mr-1 shipping-addr-remove'>- Remove </a>");
html.insertAfter(".after-shipping-addr-add-more:last");
}
j++;
toggleButtons();
}
} else {
toggleButtons();
}
$("body").on("click", ".shipping-addr-add-more", function() {
var html = $(".after-shipping-addr-add-more").first().clone();
var count = $(".after-shipping-addr-add-more").length;
html.find('select#scountry0').attr('id', 'scountry' + count).val('')
html.find('select#sdstate0').attr('id', 'sdstate' + count).css("display", "none").val('');
html.find('input#sistate0').attr('id', 'sistate' + count).css("display", "block").val('');
html.find('input').val(''); // Clear input values in the cloned element
html.find('input#counter').val(count).prop("readonly", true);
html.find(".shipping-addr-div-change").html("<a class='btn btn-success waves-effect waves-light mr-1 shipping-addr-add-more'>+ Add More Shipping Address </a><a class='btn btn-danger waves-effect waves-light mr-1 shipping-addr-remove'>- Remove </a>");
html.insertAfter(".after-shipping-addr-add-more:last");
toggleButtons();
});
$("body").on("click", ".shipping-addr-remove", function() {
var rows = $(".after-shipping-addr-add-more");
if (rows.length > 1) {
$(this).parents(".after-shipping-addr-add-more").remove();
} else {
alert("At least one Shipping Address must be displayed.");
}
toggleButtons();
// if($('#addressCopiedAsShipping').is(':checked')){}
// else{ $('#addressCopiedAsShipping').prop("checked", false); }
});
function toggleButtons() {
var elementCount = $(".after-shipping-addr-add-more").length;
// console.log('elementCount == ' + elementCount);
if (elementCount > 1) {
$(".shipping-addr-remove").show(); // Show the "shipping-addr-remove" buttons
} else {
$(".shipping-addr-remove").hide(); // Hide the "shipping-addr-remove" buttons
}
$(".after-shipping-addr-add-more .shipping-addr-add-more").hide();
$(".after-shipping-addr-add-more:last .shipping-addr-add-more").show();
}
$('#submit-button').click(function() {
// Disable the button
$(this).prop('disabled', true);
// Change the button content to a spinner
$(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');
// Simulate a delay to demonstrate loading (you can replace this with your actual loading logic)
setTimeout(function() {
// Re-enable the button and restore the original text
$('#submit-button').prop('disabled', false);
$('#submit-button').html('Submit');
}, 3000); // Replace 3000 with the actual loading time in milliseconds
});
});
function changeFields(element) {
var selectedValue = $(element).val();
var elementId = $(element).attr('id');
var match = elementId.match(/\d+/);
if (match) {
var idnumber = parseInt(match[0], 10);
if (selectedValue == 'IN') {
$("#sdstate" + idnumber).show();
$("#sistate" + idnumber).hide();
} else {
$("#sdstate" + idnumber).hide();
$("#sistate" + idnumber).show();
}
} else {
// alert("No number found in the ID");
}
}
</script> -->
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
var form = event.target;
if (form.checkValidity() === false) {
form.reportValidity(); // Display validation error messages
event.preventDefault(); // Prevent form submission if it's not valid
$('#submitBtn').prop('disabled', false);
} else {
$('#submitBtn').prop('disabled', true);
}
});
</script>
<script>
function validateEmail(email) {
// Regular expression for a basic email validation
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var emailInput = document.getElementById("cmail");
var validationMessage = document.getElementById("emailValidationMessage");
if (emailPattern.test(email)) {
validationMessage.textContent = "";
} else if (email == "") {
validationMessage.textContent = "";
} else {
validationMessage.textContent = "Invalid email address";
validationMessage.style.color = "red";
}
}
</script>
<script>
function restriction(event) {
var charCode = event.which || event.keyCode;
if ((charCode >= 48 && charCode <= 57)) {
return true;
} else {
event.preventDefault(); // Prevent the character from being entered
return false;
}
}
$(document).ready(function(){
$('#org_name').hide();
$('.contactPerson').hide();
let orgName = $('#org_name_field').val()
if(orgName !== '' && orgName !== null){
$('#org_name').show();
$('.contactPerson').show();
$('#org_name_field').prop('required', true);
}
else{
$('#org_name').hide();
$('.contactPerson').hide();
$('#org_name_field').prop('required', false);
}
$('#donerType').on('change', function(){
let donerType = $(this).val();
if(donerType === 'option2'){
$('#org_name').show();
$('.contactPerson').show();
$('#org_name_field').prop('required', true);
}
else{
$('#org_name').hide();
$('.contactPerson').hide();
}
})
});
</script>