<!DOCTYPE html>
<html>
<head>
<title> Home </title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%- include('./parcials/cssLinks') %>
<link href="<%= baseUrl %>css/dashboard.css" rel="stylesheet" type="text/css">
</head>
<body>
<%- include('./parcials/header') %>
<main class="certificate-page">
<% if(certificate){ %>
<h2 class="theme-h2">Your Certificate</h2>
<section class="certificate-wrapper">
<div class="certificate-item">
<% if(!certificate.paid){ %>
<a href="javascript:;" data-bs-toggle="modal" data-bs-target="#editCertificate" class="edit-certificate" title="Edit Certificate"><i class="fa-solid fa-pen-to-square"></i></a>
<!-- <form id="send-certificate-form"> -->
<input type="hidden" name="certificateBase64" id="certificate-base64">
<button type="button" class="send-certificate" title="Send Certificate">
<i style="display: none;" class="fa-solid fa-spinner-third fa-spin"></i>
<i class="fa-solid fa-paper-plane"></i>
</button>
<!-- </form> -->
<input type="hidden" name="certificateBase64" id="certificate-base64">
<!-- <a href="javascript:;" download="Certificate" class="download-certificate" title="Download Certificate">
<i class="fa-solid fa-file-arrow-down"></i>
<i style="display: none;" class="fa-solid fa-spinner-third fa-spin"></i>
</a> -->
<% } %>
<h1 class="certificate-h1">CERTIFICATE OF VIRTUAL BALLZ</h1>
<h6 class="certificate-h6">PRESENTED TO</h6>
<h2 class="certificate-title">
<%= certificate.name %>
</h2>
<h6 class="certificate-h6 desc-p">
<% if(certificate.anonymousName){ %>
<%= certificate.anonymousName %>
<% } else { %>
<%= certificate.senderName %>
<% } %>
has determined that you have earned a pair of <%= certificate.ballz_type %> in recognition
of your ability to <%= certificate.reason %>
</h6>
<h6 class="certificate-h6">Awarded this <span class="date">
<%= certificate.createdAt.getDate() %>
</span> day of <span class="date month">
<%= months[certificate.createdAt.getMonth()] %>
</span>, 20<span class="date year">
<%= certificate.createdAt.getFullYear().toString().slice(-2) %>
</span></h6>
<img src="<%= baseUrl %>images/certificate-footer.png" alt="" class="img-featured">
<img class="certificate-sign" src="<%= baseUrl %>images/certificate-signature.png" alt="">
</div>
</section>
<% } else{ %>
<section class="certificate-wrapper">
<h2 class="theme-h2">Certificate Not Found...</h2>
</section>
<% } %>
<div class="modal fade sendCertificate" id="editCertificate" tabindex="-1" aria-labelledby="editCertificateLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="close-modal" data-bs-dismiss="modal" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
<h4 class="theme-h4">Generate Certificate</h4>
<form id="Generate-certificate-form" action="/api/certificate/edit-certificate" method="post">
<div class="row g-4">
<div class="col-12">
<div class="input-field">
<label for="">Receiver Email *</label>
<input type="hidden" name="id" value="<%= certificate.id %>" required>
<input type="email" name="email" value="<%= certificate.recipentemail %>" required>
</div>
</div>
<div class="col-12">
<div class="input-field">
<label for="">Ballz Type *</label>
<!-- <input type="text" name="ballz_type"> -->
<select name="ballz_type" value="<%= certificate.ballz_type %>" required>
<option value="" selected disabled>Select Ball Type</option>
<option value="Blue Ballz">Blue Ballz</option>
<option value="Brass Ballz">Brass Ballz</option>
<option value="Platinum Ballz">Platinum Ballz</option>
<option value="Glass Ballz">Glass Ballz</option>
<option value="Gold Ballz">Gold Ballz</option>
<option value="Silver Ballz">Silver Ballz</option>
<option value="Regular Ballz">Regular Ballz</option>
</select>
</div>
</div>
<div class="col-12">
<div class="input-field">
<label for="">Recipent Name *</label>
<input type="text" value="<%= certificate.name %>" name="recname" maxlength="30" required>
</div>
</div>
<div class="col-12">
<div class="input-field">
<label for="">Reason *</label>
<!-- <select name="reason" class="cerf-reason" required>
<option value="" selected disabled>Select Reason</option>
<option value="">Other (Type Yourself)</option>
<option value="possess an uncanny knack for conjuring creative and absurd excuses for any situation, proving that ingenuity knows no bounds when it comes to avoiding responsibilities.">possess an uncanny knack for conjuring creative and absurd excuses for any situation, proving that ingenuity knows no bounds when it comes to avoiding responsibilities. </option>
<option value="possess an unparalleled ability to wield sarcasm like a finely sharpened sword, leaving their audience in stitches (and perhaps slightly confused).">possess an unparalleled ability to wield sarcasm like a finely sharpened sword, leaving their audience in stitches (and perhaps slightly confused).</option>
<option value="show or possess remarkable endurance in staying up all night, dancing like nobody's watching, and embracing the true spirit of partying.">show or possess remarkable endurance in staying up all night, dancing like nobody's watching, and embracing the true spirit of partying.</option>
<option value="slip clever innuendos into everyday conversations, leaving others both amused and slightly flustered.">slip clever innuendos into everyday conversations, leaving others both amused and slightly flustered.</option>
</select> -->
<div class="select-custom">
<input type="hidden" name="reason" required>
<a href="javascript:;">Select Reason</a>
<ul class="select-options">
<li data-value="">Other (Type Yourself)</li>
<li data-value="possess an uncanny knack for conjuring creative and absurd excuses for any situation, proving that ingenuity knows no bounds when it comes to avoiding responsibilities. ">
possess an uncanny knack for conjuring creative and absurd excuses for any situation, proving that ingenuity knows no bounds when it comes to avoiding responsibilities. </li>
<li data-value="possess an unparalleled ability to wield sarcasm like a finely sharpened sword, leaving your audience in stitches (and perhaps slightly confused).">
possess an unparalleled ability to wield sarcasm like a finely sharpened sword, leaving
your audience in stitches (and perhaps slightly confused).</li>
<li data-value="show or possess remarkable endurance in staying up all night, dancing like nobody's watching, and embracing the true spirit of partying.">
show or possess remarkable endurance in staying up all night, dancing like nobody's
watching, and embracing the true spirit of partying.</li>
<li data-value="slip clever innuendos into everyday conversations, leaving others both amused and slightly flustered.">
slip clever innuendos into everyday conversations, leaving others both amused and
slightly flustered.</li>
</ul>
</div>
<div style="display: none;">
<textarea type="text" name="reasonother" class="reason-other-inp" placeholder="Mention Your Reason..."></textarea>
</div>
</div>
</div>
<% if (certificate.anonymousName){ %>
<div class="col-12">
<div class="input-field checkbox-field">
<div style="display: none;">
<label>Your Name</label>
<input placeholder="Your Name" value="<% certificate.anonymousName %>" type="text" name="anonymousName" maxlength="30">
</div>
<label class="checkbox-lbl" for="cer-anonymously">Send Anonymously <input type="checkbox" checked value="send-anonymously" name="sendanonymously" id="cer-anonymously"></label>
</div>
</div>
<% } else { %>
<div class="col-12">
<div class="input-field checkbox-field">
<div <%= certificate.senderName == 'Someone' ? 'style="display: none;"':"" %> >
<label>Your Name</label>
<input placeholder="Your Name" type="text" name="anonymousname">
</div>
<label class="checkbox-lbl" for="cer-anonymously">Send Anonymously <input type="checkbox" value="send-anonymously" name="sendanonymously" id="cer-anonymously"></label>
</div>
</div>
<% } %>
<div class="col-12">
<div class="input-field">
<input type="hidden" name="sender" value="<%= user.firstName %> <%= user.lastName %>">
<button class="theme-btn" type="submit">Update Certificate</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</main>
<a href="" download="certificate" class="cert-d"></a>
<%- include('./parcials/footer') %>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<%- include('./parcials/scriptLinks') %>
<% if(!certificate.paid){ %>
<script>
$(document).ready(function() {
$(".certificate-page .certificate-wrapper .certificate-item a,.certificate-page .certificate-wrapper .certificate-item button").hide()
let base64;
html2canvas($(".certificate-page .certificate-wrapper .certificate-item")[0]).then(function(canvas) {
$("#certificate-base64").val(canvas.toDataURL('image/png'))
$(".certificate-page .certificate-wrapper .certificate-item a,.certificate-page .certificate-wrapper .certificate-item button").show()
base64 = canvas.toDataURL('image/png')
$(".cert-d").attr("href", base64)
});
$(".download-certificate").click(async function() {
try {
$(".download-certificate").find(".fa-file-arrow-down").hide()
$(".download-certificate").find(".fa-spinner-third").show()
fetch('/api/certificate/download-certificate/<%= certificate._id %>', {
method: 'GET',
headers: {
"Content-Type": "application/json"
},
}).then((data) => {
console.log(data)
if (data.status == 200) {
createToast(`Certificate is Downloading...`, "success")
$(".cert-d")[0].click()
$(".download-certificate").find(".fa-file-arrow-down").show()
$(".download-certificate").find(".fa-spinner-third").hide()
}
})
} catch (error) {
createToast(error.message, "error")
}
})
$(".send-certificate").click(async function() {
try {
$(".send-certificate").find(".fa-paper-plane").hide()
$(".send-certificate").find(".fa-spinner-third").show()
const email = '<%= certificate.recipentemail %>'
fetch('/api/certificate/send-certificate/<%= certificate._id %>', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify([{
email
}])
}).then((res) => {
$(".send-certificate").find(".fa-paper-plane").show()
$(".send-certificate").find(".fa-spinner-third").hide()
res.json().then(data => {
if (res.status == 200) {
createToast(data.message, "success")
setTimeout(() => {
location.href='/send-now';
}, 2000);
} else {
createToast(data.message, "error")
}
})
})
} catch (error) {
createToast(error.message, "error")
}
})
})
</script>
<% } %>
</body>
</html>