428 lines
23 KiB
PHP
Executable File
428 lines
23 KiB
PHP
Executable File
<style>
|
|
/* Show the form section by default */
|
|
#mailSection { display: none; }
|
|
#whatsappSection { display: none; }
|
|
#buttonSection { display: none; }
|
|
|
|
</style>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h4 class="header-title"><?= $page_name; ?></h4>
|
|
</div>
|
|
</div>
|
|
<?php if (session()->getFlashdata('success') || session()->getFlashdata('error')) : ?>
|
|
<?php if (session()->getFlashdata('success')) : ?>
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
<?= session('success') ?>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<?php session()->setFlashdata('reset', true); endif; ?>
|
|
<?php if (session()->getFlashdata('error')) : ?>
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
<?= session('error') ?>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<?php session()->setFlashdata('reset', true); endif; ?>
|
|
<?php endif; ?>
|
|
<br>
|
|
<form role="form" class="parsley-examples" method="POST" enctype="multipart/form-data" action="<?= base_url() . "custom_notifications"; ?>" id="notifyCustomForm">
|
|
<div class="form-group row">
|
|
<label class="col-3 col-form-label" for="mode">Mode</label>
|
|
<div class="col-9">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="mode" value="Email" onchange="get_notify_mode(this.value);">
|
|
<span class="form-check-label">Mail</span>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="mode" value="Whatsapp" onchange="get_notify_mode(this.value);">
|
|
<span class="form-check-label">Whatsapp</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span id="mailSection">
|
|
<div class="form-group row">
|
|
<label for="recipient" class="col-3 col-form-label" >Recipient Email<span class="text-danger"> *</span></label>
|
|
<div class="col-9">
|
|
<input type="email" placeholder="Recipient Email" class="form-control" id="recipient" name="recipient_email" parsley-type="email" onkeyup="validateEmail(this.value)">
|
|
<span id="emailValidationMessage"></span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="CC" class="col-3 col-form-label">CC</label>
|
|
<div class="col-9">
|
|
<input type="text" placeholder="Enter multiple email addresses separated by commas" class="form-control" id="CC" name="carboncopy">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="BCC" class="col-3 col-form-label">BCC</label>
|
|
<div class="col-9">
|
|
<input type="text" placeholder="Enter multiple email addresses separated by commas" class="form-control" id="BCC" name="blindcarboncopy">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="subject" class="col-3 col-form-label">Subject<span class="text-danger"> *</span></label>
|
|
<div class="col-9">
|
|
<input type="text" placeholder="Subject" class="form-control" id="subject" name="subject">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="body" class="col-3 col-form-label">Body<span class="text-danger"> *</span></label>
|
|
<div class="col-9">
|
|
<textarea id="summernote-basic" name="maildescription" class="form-control" rows="7">
|
|
<h5>Hello {USER_NAME}, </h5>
|
|
<p>We create simple, flat & responsive custom mail template.</p>
|
|
<p>Please, write text here!</p>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
</span>
|
|
<span id="whatsappSection">
|
|
|
|
<!-- <div class="form-group row">
|
|
<label for="group_id" class="col-3 col-form-label">Categories</label>
|
|
<div class="col-9">
|
|
<select class="form-control" id="categories" name="categories">
|
|
<option value="">Choose your Category Type</option>
|
|
<option value="SEND_WAAI_URL">Individual</option>
|
|
<option value="SEND_WAAI_GROUP_URL">Group</option>
|
|
</select>
|
|
</div>
|
|
</div> -->
|
|
<input type="hidden" id="categories" name="categories" value="SEND_WAAI_URL" />
|
|
<div id="fields-for-groupid" style="display: none;">
|
|
<div class="form-group row">
|
|
<label for="group_id" class="col-3 col-form-label">Group Id</label>
|
|
<div class="col-9">
|
|
<input type="text" placeholder="Group ID" class="form-control" id="group_id" name="group_id">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="fields-for-mobile">
|
|
<div class="form-group row">
|
|
<label for="mobile" class="col-3 col-form-label">Mobile Number<span class="text-danger symbol"> *</span></label>
|
|
<div class="col-7">
|
|
<!-- <input type="number" placeholder="Mobile Number" class="form-control" id="mobile" name="mobile"> -->
|
|
<!-- <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" data-toggle="input-mask" data-mask-format="0000000000" <input type="text" class="form-control" id="cmobile" name="cmobile" value="<?= isset($customer['mobile_no']) ? $customer['mobile_no'] : '' ?>" placeholder="Mobile Number (Enter only numbers)" required maxlength="10" onkeypress="return restriction(event)" /> -->
|
|
<!-- <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" data-toggle="input-mask" data-mask-format="0000000000"> -->
|
|
<!-- Modified input with validation -->
|
|
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" onkeypress="return restrictNonNumeric(event)">
|
|
<span id="mobileValidationMessage"></span>
|
|
</div>
|
|
<div class="col-2" style="display: none;">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="all_customers" name="all_customers">
|
|
<label class="form-check-label" for="all_customers">All Customers</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-group row">
|
|
<label class="col-3 col-form-label">Message Type</label>
|
|
<div class="col-9">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="type" value="text" onchange="change_fields(this.value);" checked>
|
|
<span class="form-check-label">Text</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="type" value="media" onchange="change_fields(this.value);">
|
|
<span class="form-check-label">Media URL</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="type" value="document" onchange="change_fields(this.value);">
|
|
<span class="form-check-label">Upload Image</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="fields-for-mediaurl" style="display: none;">
|
|
<div class="form-group row">
|
|
<label for="media_url" class="col-3 col-form-label">Media Link</label>
|
|
<div class="col-9">
|
|
<input type="text" placeholder="Media Link" class="form-control" id="media_url" name="media_url">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="fields-for-doc" style="display: none;">
|
|
<div class="form-group row">
|
|
<label for="media_doc" class="col-3 col-form-label">Document</label>
|
|
<div class="col-9">
|
|
<div>
|
|
<input type="file" id="media_doc" name="media_doc" accept="image/jpeg"/>
|
|
</div>
|
|
<span class="help-block"><small>Upload JPEG Images Only.</small></span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="message" class="col-3 col-form-label">Message <span class="text-danger"> *</span></label>
|
|
<div class="col-9">
|
|
<textarea id="message" name="description" class="form-control" rows="5">Message text here</textarea>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span id="buttonSection">
|
|
<div class="form-group text-right m-b-0 ">
|
|
<button type="submit" class="btn btn-primary waves-effect waves-light mr-1" id="submitBtn">
|
|
Send
|
|
</button>
|
|
</div>
|
|
</span>
|
|
|
|
</form>
|
|
<div id="textDiv">
|
|
<span class="widget-simple text-center">
|
|
<div class="media-body align-self-center font-24 avatar-title">
|
|
<!-- <p style="color: #0a0a0a!important;" class="mt-0" style><?= "Please Choose Message Mode....."; ?></p> -->
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const textDiv = document.getElementById('textDiv');
|
|
const mailSection = document.getElementById('mailSection');
|
|
const whatsappSection = document.getElementById('whatsappSection');
|
|
const buttonSection = document.getElementById('buttonSection');
|
|
|
|
|
|
function get_notify_mode(option) {
|
|
if (option == 'Email') {
|
|
mailSection.style.display = 'block';
|
|
whatsappSection.style.display = 'none';
|
|
textDiv.style.display = 'none';
|
|
buttonSection.style.display = 'block';
|
|
|
|
document.getElementById("mobile").required = false;
|
|
document.getElementById("mobile").value = "";
|
|
|
|
document.getElementById("message").required = false;
|
|
document.getElementById("message").value="";
|
|
|
|
document.getElementById("recipient").required = true;
|
|
document.getElementById("subject").required = true;
|
|
|
|
document.getElementById("summernote-basic").required = true;
|
|
|
|
|
|
} else {
|
|
whatsappSection.style.display = 'block';
|
|
mailSection.style.display = 'none';
|
|
textDiv.style.display = 'none';
|
|
buttonSection.style.display = 'block';
|
|
// whatsappSection.style.display = (whatsappSection.style.display === 'none') ? 'block' : 'none';
|
|
|
|
document.getElementById("recipient").required = false;
|
|
document.getElementById("subject").required = false;
|
|
|
|
document.getElementById("mobile").required = true;
|
|
document.getElementById("summernote-basic").required = true;
|
|
// document.getElementById("summernote-basic").value = "Hello {USER_NAME}, \n" +
|
|
// " We create simple, flat & responsive custom mail template\n" +
|
|
// " Please, write text here!";
|
|
// makeFormEmpty();
|
|
}
|
|
}
|
|
|
|
|
|
const checkbox = document.getElementById("all_customers");
|
|
|
|
|
|
// When the checkbox is changed
|
|
checkbox.addEventListener("change", function () {
|
|
// Get the mobile input element
|
|
const mobileInput = document.getElementById("mobile");
|
|
document.getElementById('mobileValidationMessage').textContent = "";
|
|
// If the checkbox is checked
|
|
if (this.checked) {
|
|
// Set mobile input field to readonly and clear its value
|
|
mobileInput.readOnly = true;
|
|
mobileInput.value = "";
|
|
// Make the mobile input field not required
|
|
mobileInput.removeAttribute("required");
|
|
} else {
|
|
// If the checkbox is not checked, remove readonly attribute
|
|
mobileInput.readOnly = false;
|
|
// Make the mobile input field required
|
|
mobileInput.setAttribute("required", "required");
|
|
}
|
|
});
|
|
|
|
// Get references to the dropdown and field divs
|
|
const fieldsForMediaURL = document.getElementById("fields-for-mediaurl");
|
|
const fieldsForDoc = document.getElementById("fields-for-doc");
|
|
function change_fields(option) {
|
|
if (option == 'document'){
|
|
fieldsForDoc.style.display = "block";
|
|
fieldsForMediaURL.style.display = "none";
|
|
document.getElementById("media_url").value = "";
|
|
}
|
|
if (option == 'media') {
|
|
fieldsForDoc.style.display = "none";
|
|
fieldsForMediaURL.style.display = "block";
|
|
document.getElementById("media_doc").value = "";
|
|
}
|
|
if (option == 'text') {
|
|
fieldsForDoc.style.display = "none";
|
|
fieldsForMediaURL.style.display = "none";
|
|
document.getElementById("media_url").value = "";
|
|
document.getElementById("media_doc").value = "";
|
|
}
|
|
}
|
|
|
|
|
|
const categories = document.getElementById("categories");
|
|
const fieldsForGroupID = document.getElementById("fields-for-groupid");
|
|
const fieldsForMobile = document.getElementById("fields-for-mobile");
|
|
|
|
// Add a change event listener to the dropdown
|
|
categories.addEventListener("change", function () {
|
|
// Determine which option is selected and show the corresponding fields
|
|
const selectedCategories = categories.value;
|
|
|
|
if (selectedCategories === "SEND_WAAI_GROUP_URL") {
|
|
fieldsForGroupID.style.display = "block";
|
|
fieldsForMobile.style.display = "none";
|
|
document.getElementById("mobile").value = "";
|
|
} else if (selectedCategories === "SEND_WAAI_URL") {
|
|
fieldsForMobile.style.display = "block";
|
|
fieldsForGroupID.style.display = "none";
|
|
document.getElementById("group_id").value = "";
|
|
} else {
|
|
fieldsForMobile.style.display = "none";
|
|
fieldsForGroupID.style.display = "none";
|
|
document.getElementById("mobile").value = "";
|
|
document.getElementById("group_id").value = "";
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
// Get the rich text field element
|
|
var summernote = document.getElementById("summernote-basic");
|
|
|
|
// Add an event listener for the input event
|
|
summernote.addEventListener("input", function() {
|
|
// This function will be called whenever the content of the rich text field changes
|
|
// You can perform your desired actions here
|
|
console.log("Content changed:", summernote.value);
|
|
// Call your onchange function here
|
|
yourOnChangeFunction();
|
|
});
|
|
|
|
// Define your onchange function
|
|
function yourOnChangeFunction() {
|
|
// Your logic here
|
|
console.log("Rich text field content changed!");
|
|
}
|
|
</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("recipient");
|
|
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>
|
|
document.getElementById('notifyCustomForm').addEventListener('submit', function(event) {
|
|
var form = event.target;
|
|
|
|
var mode = document.getElementById('mode').value;
|
|
|
|
if(mode == 'Email'){
|
|
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);
|
|
}
|
|
}else{
|
|
// Get the mobile input value
|
|
var mobileInput = document.getElementById('mobile');
|
|
var mobileValue = mobileInput.value;
|
|
// Check the validity of the mobile number
|
|
var isMobileValid = /^[0-9]{10}$/.test(mobileValue);
|
|
// alert(isMobileValid);
|
|
if (!isMobileValid) {
|
|
// alert(isMobileValid);
|
|
if (form.checkValidity() === false || !isMobileValid) {
|
|
// alert("if-if");
|
|
form.reportValidity(); // Display validation error messages
|
|
event.preventDefault(); // Prevent form submission if it's not valid
|
|
$('#submitBtn').prop('disabled', false);
|
|
} else {
|
|
// alert("if-else");
|
|
$('#submitBtn').prop('disabled', true);
|
|
}
|
|
}else{
|
|
// alert("else");
|
|
$('#submitBtn').prop('disabled', true);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
function restrictNonNumeric(event) {
|
|
var keyCode = event.which ? event.which : event.keyCode;
|
|
var isValid = (keyCode >= 48 && keyCode <= 57) || // Numeric keys
|
|
keyCode === 8 || // Backspace
|
|
keyCode === 44; // Comma
|
|
if (!isValid) {
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// document.getElementById('mobile').addEventListener('input', function() {
|
|
// var mobileNumber = this.value;
|
|
// var isValid = /^[0-9]{10}$/.test(mobileNumber);
|
|
// var validationMessage = document.getElementById('mobileValidationMessage');
|
|
|
|
// if (isValid) {
|
|
// validationMessage.textContent = 'Valid mobile number';
|
|
// validationMessage.style.color = "green";
|
|
// } else {
|
|
// validationMessage.textContent = 'Invalid mobile number';
|
|
// validationMessage.style.color = "red";
|
|
// }
|
|
// });
|
|
</script>
|
|
<script>
|
|
function makeFormEmpty() {
|
|
var form = document.getElementById('notifyCustomForm');
|
|
var inputs = form.querySelectorAll('input, textarea'); // Include textarea fields as well
|
|
|
|
inputs.forEach(function(input) {
|
|
input.value = ''; // Clear the value of each input field
|
|
});
|
|
|
|
return true; // Form is now empty
|
|
}
|
|
</script>
|