donation/app/Views/notifications_form.php

284 lines
15 KiB
PHP

<style>
/* Show the form section by default */
#mailFormDiv { display: none; }
#whatsappFormDiv { display: none; }
</style>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<a class="dropdown-icon-item" id="showMailLink">
<img src="<?= base_url() . "public/assets/images/brands/gmail.png" ?>" alt="mail">
<span>Mail Custom Notification</span>
</a>
</div>
<div class="col">
<a class="dropdown-icon-item" id="showWhatsappLink">
<img src="<?= base_url() . "public/assets/images/brands/whatsapp.png" ?>" alt="whatsapp">
<span>Whatsapp Custom Notification</span>
</a>
</div>
<!-- <div class="col">
<a class="dropdown-icon-item" href="<?= base_url()."send_whatsapp_message"; ?>">
<img src="<?= base_url() . "public/assets/images/brands/whatsapp.png" ?>" alt="whatsapp">
<span>Whatsapp Static Notification</span>
</a>
</div> -->
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title"><?= $page_name; ?></h4>
</br>
<?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">&times;</span>
</button>
</div>
<?php 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">&times;</span>
</button>
</div>
<?php endif; ?>
<?php endif; ?>
<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 Your Choice....."; ?></p>
</div>
</span>
</div>
<!-- <div id="textDiv">
<span class="widget-simple text-center">
<div class="media-body align-self-center font-24 avatar-title">
<?php if (isset($validationErrors)) { ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<?= $validationErrors ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<?php } elseif (isset($successMessage)) { ?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<?= $successMessage ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<?php } ?>
<p style="color: #0a0a0a!important;" class="mt-0" style><?= "Please Choose Your Choice....."; ?></p>
</div>
</span>
</div> -->
<div id="mailFormDiv">
<form role="form" class="parsley-examples" method="POST" enctype="multipart/form-data" action="<?= base_url() . "mail_custom_notifications"; ?>" id="myForm2">
<div class="form-group row">
<label for="recipient" class="col-4 col-form-label">Recipient Email</label>
<div class="col-7">
<input type="email" placeholder="Recipient Email" class="form-control" id="recipient" name="recipient_email" parsley-type="email">
</div>
</div>
<div class="form-group row">
<label for="CC" class="col-4 col-form-label">CC</label>
<div class="col-7">
<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-4 col-form-label">BCC</label>
<div class="col-7">
<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-4 col-form-label">Subject</label>
<div class="col-7">
<input type="text" placeholder="Subject" class="form-control" id="subject" name="subject">
</div>
</div>
<div class="form-group row">
<label for="body" class="col-4 col-form-label">Body</label>
<div class="col-7">
<textarea id="summernote-basic" name="description" class="form-control" rows="7">
<h5>Hello {User}, </h5>
<p>We create simple, flat & responsive custom mail template.</p>
<p>Please, write text here!</p>
</textarea>
</div>
</div>
<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>
</form>
</div>
<div id="whatsappFormDiv">
<form role="form" class="parsley-examples" method="POST" enctype="multipart/form-data" action="<?= base_url() . "whatsapp_custom_notifications"; ?>">
<!-- <div class="form-group row">
<label for="group_id" class="col-4 col-form-label">Categories</label>
<div class="col-7">
<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-4 col-form-label">Group Id</label>
<div class="col-7">
<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-4 col-form-label">Mobile Number</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">
</div>
</div>
</div>
<div class="form-group row">
<label for="type" class="col-4 col-form-label">Message Type</label>
<div class="col-7">
<select class="form-control" id="type" name="type">
<option value="">Choose your Message Type</option>
<option value="text">Text</option>
<option value="media">Media</option>
</select>
</div>
</div>
<div id="fields-for-mediaurl" style="display: none;">
<div class="form-group row">
<label for="media_url" class="col-4 col-form-label">Media Url</label>
<div class="col-7">
<input type="text" placeholder="Media URL" class="form-control" id="media_url" name="media_url">
</div>
</div>
</div>
<div class="form-group row">
<label for="message" class="col-4 col-form-label">Message</label>
<div class="col-7">
<textarea id="message" name="description" class="form-control" rows="5">Hello {User},Please,write text here!</textarea>
</div>
</div>
<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>
</form>
</div>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div><!-- end col -->
</div><!-- end row -->
<script>
const textDiv = document.getElementById('textDiv');
const showMailLink = document.getElementById('showMailLink');
const mailFormDiv = document.getElementById('mailFormDiv');
const showWhatsappLink = document.getElementById('showWhatsappLink');
const whatsappFormDiv = document.getElementById('whatsappFormDiv');
// Add a click event listener to the link
showMailLink.addEventListener('click', function() {
// Toggle the display of the div
// mailFormDiv.style.display = (mailFormDiv.style.display === 'none') ? 'block' : 'none';
mailFormDiv.style.display = 'block';
whatsappFormDiv.style.display = 'none';
textDiv.style.display = 'none';
const elements = document.getElementsByClassName("header-title");
for (let i = 0; i < elements.length; i++) {
elements[i].textContent = "Mail Custom Notification";
}
});
// Add a click event listener to the link
showWhatsappLink.addEventListener('click', function() {
// Toggle the display of the div
mailFormDiv.style.display = 'none';
textDiv.style.display = 'none';
// whatsappFormDiv.style.display = (whatsappFormDiv.style.display === 'none') ? 'block' : 'none';
whatsappFormDiv.style.display = 'block';
const elements = document.getElementsByClassName("header-title");
for (let i = 0; i < elements.length; i++) {
elements[i].textContent = "Whatsapp Custom Notification";
}
});
// Get references to the dropdown and field divs
const dropdown = document.getElementById("type");
const fieldsForMediaURL = document.getElementById("fields-for-mediaurl");
// Add a change event listener to the dropdown
dropdown.addEventListener("change", function() {
// Determine which option is selected and show the corresponding fields
const selectedOption = dropdown.value;
if(selectedOption === "media"){
fieldsForMediaURL.style.display = "block";
} else {
fieldsForMediaURL.style.display = "none";
document.getElementById("media_url").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>
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>