<!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>
<div id="loader">
<div class="loader-content">
<span class="loader-text">Generating Certificate...</span>
<div class="loader-spinner"></div>
</div>
</div>
<%- include('./parcials/dashboard-header') %>
<main>
<section class="dashboard-wrapper">
<div class="container">
<%- include('./parcials/dashboard-topsec') %>
<div class="card-design">
<div class="row justify-content-center">
<div class="col-lg-8 col-12 panel">
<div class="e-card-form">
<h2 class="theme-h2">Card Design</h2>
<form id="e-card-form">
<input type="hidden" name="id" id="card-id">
<input type="hidden" value="<%= card ? 'PUT' : 'POST' %>" id="form-method">
<div class="row g-4">
<div class="col-md-6 col-12">
<div class="input-field">
<label for="">Type</label>
<select name="ballzType" id="e-card-balls" required>
<option value="" disabled selected>Select Ballz</option>
<option value="<%= baseUrl %>images/balls/Blue_Ballz.jpg">Blue Ballz</option>
<option value="<%= baseUrl %>images/balls/Brass_Ballz.jpg">Brass Ballz</option>
<option value="<%= baseUrl %>images/balls/Gold_Ballz.jpg">Gold Ballz</option>
<option value="<%= baseUrl %>images/balls/Platinum_Ballz.jpg">Platinum Ballz</option>
<option value="<%= baseUrl %>images/balls/Glass_Ballz.jpg">Glass Ballz</option>
<option value="<%= baseUrl %>images/balls/Silver_Ballz.jpg">Silver Ballz</option>
<option value="<%= baseUrl %>images/balls/Regular_Ballz.jpg">Regular Ballz</option>
</select>
</div>
</div>
<div class="col-md-6 col-12">
<div class="input-field">
<label for="">Recipent Name</label>
<input id="E-Card-RecipentName" name="recipentName" value="<%= card ? card.recipentName : '' %>" type="text" required>
</div>
</div>
<div class="col-md-6 col-12">
<div class="input-field">
<label for="">Recipent Email</label>
<input id="E-Card-RecipentEmail" name="recipentemail" value="<%= card ? card.recipentemail : '' %>" type="email" required>
<span class="input-message">(Enter Recipent Email)</span>
</div>
</div>
<div class="col-md-6 col-12">
<div class="input-field">
<label for="">Card Delivery Date</label>
<input id="E-Card-DeliveryDate" name="deliveryDate" value="<%= card ? card.deliveryDate.toISOString().substr(0, 10) : '' %>" type="date" required>
</div>
</div>
<div class="col-md-6 col-12">
<div class="input-field">
<label for="">Text Color</label>
<input id="E-Card-text-color" value="<%= card ? JSON.parse(card.cardJson).objects[1].fill : '' %>" type="color">
</div>
</div>
<div class="col-md-6 col-12">
<div class="input-field">
<label for="">Background Color</label>
<input id="e-card-background" value="<%= card ? JSON.parse(card.cardJson).background : '#fff' %>" type="color">
</div>
</div>
<div class="col-md-6 col-12">
<div class="input-field">
<label for="">Your Name</label>
<input name="senderName" id="sender-name-ecard" value="<%= card ? card.senderName : (user.firstName + ' ' + user.lastName) %>" type="text" required>
<div class="input-field checkbox-field">
<label class="checkbox-lbl">Send Anonymously <input type="checkbox" id="send-anonymously"></label>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="input-field">
<label for="">Card Message <span class="text-counter">(Remaining: 300 characters)</span></label>
<textarea name="message" id="E-Card-Message" type="text" required><%= card ? JSON.parse(card.cardJson).objects[3].text : '' %></textarea>
</div>
</div>
<input type="hidden" name="ecardbase64">
<div class="col-12">
<button class="theme-btn ms-auto" type="submit">Preview</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="ecard-offcanvas offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<!--<div class="offcanvas-header">
<button type="button" class="close-offcanvas close-btn-ecard" data-bs-dismiss="offcanvas" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
</div>-->
<div class="offcanvas-body">
<div class="design-wrapper">
<h3 class="theme-h3">Card Preview</h3>
<a href="/send-now" class="dashboard-link">Dashboard</a>
<canvas id="design"></canvas>
<form id="send-card-form">
<input type="hidden" name="id" id="id-for-mail">
<ul class="cta-btn">
<li><button class="theme-btn close-btn-ecard" type="button" data-bs-dismiss="offcanvas" aria-label="Close">Edit</button></li>
<li><button class="theme-btn" type="submit">Send</button></li>
</ul>
</form>
</div>
</div>
</div>
<div class="loader">
<img class="img-fluid" src="<%= baseUrl %>images/loading.svg" alt="">
</div>
<%- include('./parcials/dashboard-footer') %>
<%- include('./parcials/scriptLinks') %>
<%- include('./parcials/e-card-links') %>
<script>
$("#loader").css("display", "none")
$("#Generate-certificate-form").submit(function() {
$("#loader").css("display", "block")
})
window.addEventListener('beforeunload', function() {
$("#loader").css("display", "none")
});
</script>
<script>
$("#send-card-form").submit(function(e) {
e.preventDefault()
let formData = {}
formData.id = $("#id-for-mail").val()
$("#loader").css("display", "block")
fetch('/api/e-card/send', {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(formData)
}).then(res => {
res.json().then(data => {
if (res.status == 200) {
createToast(data.message, 'success')
setTimeout(() => {
location.href='/send-now';
}, 2000);
} else {
createToast(data.message, 'error')
}
})
})
})
</script>
</body>
</html