<!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') %>
</head>
<body>
<%- include('./parcials/header') %>
<!-- ... (Previous HTML content) ... -->
<main>
<section class="register">
<div class="container">
<h2 class="theme-h2">Dashboard</h2>
<nav>
<div class="nav nav-tabs admin-tabs mb-3" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Sales</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Customers</button>
<button class="nav-link" id="nav-cms-tab" data-bs-toggle="tab" data-bs-target="#nav-cms" type="button" role="tab" aria-controls="nav-cms" aria-selected="false">CMS</button>
<button class="nav-link" id="nav-package-tab" data-bs-toggle="tab" data-bs-target="#nav-package" type="button" role="tab" aria-controls="nav-package" aria-selected="false">Package</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<div class="filter-wrapper">
<form class="search-form">
<div class="search-field">
<input placeholder="Seach Query..." type="text">
<button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
<button type="button"><i class="fa-solid fa-xmark"></i></button>
</div>
</form>
<div class="sale-filter">
<input class="start-date" type="date">
<input class="end-date" type="date">
</div>
</div>
<div class="table-responsive">
<table class="table table-striped admin-table sale-table">
<thead>
<tr>
<th>Date</th>
<th>Payment ID</th>
<th>Email</th>
<th>PayerId</th>
<th>Package</th>
<th>Total Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<% sales.forEach(function(sale) { %>
<%
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const paymentDate = new Date(sale.createdAt)
%>
<tr data-date="<%= `${months[paymentDate.getMonth()]} ${paymentDate.getDate()} ${paymentDate.getFullYear()}` %>">
<td>
<%= `${months[paymentDate.getMonth()]} ${paymentDate.getDate()} ${paymentDate.getFullYear()}` %>
</td>
<td><%= sale.query.paymentId %></td>
<td><a href="mailto:<%= sale.payment.payer.payer_info.email %>"><%= sale.payment.payer.payer_info.email %></a></td>
<td><%= sale.query.PayerID %></td>
<td>
<ul>
<% sale.payment.transactions[0].item_list.items.forEach((item)=>{ %>
<li class="pkg-item">
<ul>
<li>Name: <%= item.name %></li>
<li>Price: <span class="price">$<%= item.price %></span></li>
</ul>
</li>
<% }) %>
</ul>
</td>
<td><span class="price">$<%= sale.payment.transactions[0].amount.total %></span></td>
<td><button class="view-det" onclick="fetchSaleItem('<%= sale._id %>',this)"><i class="fa-solid fa-eye"></i></button></td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<form class="search-form">
<div class="search-field">
<input placeholder="Seach Query..." type="text">
<button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
<button type="button"><i class="fa-solid fa-xmark"></i></button>
</div>
</form>
<div class="table-responsive">
<table class="table table-striped admin-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>City</th>
<th>State</th>
<th>Credits</th>
<th>Role</th>
<th>Status</th>
<th>Action</th>
<th></th>
</tr>
</thead>
<tbody>
<% customers.forEach(function(customer) { %>
<tr class="customer-form" data-id="<%= customer._id %>">
<td>
<%= customer.firstName %>
<%= customer.lastName %>
</td>
<td>
<a href="mailto:<%= customer.email %>"><%= customer.email %></a>
</td>
<td>
<%= customer.city%>
</td>
<td>
<%= customer.state%>
</td>
<td>
<input type="number" name="credits" value="<%= customer.credits %>">
</td>
<td>
<select name="role" id="role">
<option value="user" <%= customer.role == "user" ? "selected" : "" %>>User</option>
<option value="admin" <%= customer.role == "admin" ? "selected" : "" %>>Admin</option>
</select>
</td>
<td>
<select name="status" id="status">
<option value="Active" <%= customer.status == "Active" ? "selected" : "" %>>Active</option>
<option value="Deactive" <%= customer.status == "Deactive" ? "selected" : "" %>>Deactive</option>
</select>
</td>
<td>
<button class="modify-customer">Update</button>
<button class="delete-item delete-user" data-id="<%= customer._id %>"><i class="fa-solid fa-trash"></i></button>
</td>
<td><button class="view-det" onclick="fetchCustomerItems('<%= customer._id %>',this)"><i class="fa-solid fa-eye"></i></button></td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
<!-- cms tab-->
<div class="tab-pane fade show" id="nav-cms" role="tabpanel" aria-labelledby="nav-cms-tab" tabindex="0">
<div class="table-responsive">
<table class="table table-striped admin-table">
<thead>
<tr>
<th>S.No.</th>
<th>Page</th>
<th>Section</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% content.forEach((section, ind) => { %>
<tr>
<td><%= ind + 1 %></td>
<td><a href=""><%= section.page %></a></td>
<td><%= section.name %></td>
<td><a href="/admin/dashboard/content/<%= section._id %>">Edit</a></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade show" id="nav-package" role="tabpanel" aria-labelledby="nav-package-tab" tabindex="0">
<div class="table-responsive">
<table class="table table-striped admin-table">
<thead>
<tr>
<th>P.No.</th>
<th>Package Name</th>
<th>Credits</th>
<th>Price</th>
<th>Best Buy</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% packages.forEach((package, ind) => { %>
<tr>
<td><%= ind + 1 %></td>
<td data-name="name"><%= package.name %></td>
<td data-name="credits"><%= package.credits %></td>
<td data-name="price"><%= package.price %></td>
<td data-name="bestbuy"><%= package.bestbuy %></td>
<td>
<div class="d-flex">
<button class="edit-pkg " data-id="<%= package._id %>"><i class="fa-solid fa-pen-to-square"></i></button>
<a class="delete-pkg" href="/api/admin/package/delete/<%= package._id %>"><i class="fa-solid fa-trash"></i></a>
</div>
</td>
</tr>
<% }) %>
<tr>
<td colspan="5">
<a class="theme-btn add-pkg" data-bs-toggle="modal" data-bs-target="#packageItemsModal" href="javascript:;">Add</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</main>
<div class="modal fade sale-modal" id="saleModal" tabindex="-1" aria-labelledby="saleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<h1 class="modal-title fs-5" id="saleModalLabel">Sale Data</h1>
<button type="button" class="modal-close" data-bs-dismiss="modal" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
<hr>
<div class="row g-4">
<div class="col-lg-6 col-12">
<div class="dashboard-card-item">
<h6 class="theme-h6 mt-0">Package Info</h6>
<ul id="saleItems"></ul>
<h6 class="theme-h6">Amount</h6>
<ul class="sale-data">
<li><strong>Subtotal:</strong> <span id="salesubtotal" class="price"></span></li>
<li><strong>Currency:</strong> <span id="salecurrency"></span></li>
<li><strong>DIscount:</strong> <span id="salediscount" class="price"></span></li>
<li><strong>Total:</strong> <span id="saletotal" class="price"></span></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="dashboard-card-item">
<ul class="sale-data">
<li><strong>Date:</strong> <span id="paymentDate"></span></li>
<li><strong>Payment ID:</strong> <span id="paymentId"></span></li>
<li><strong>Token:</strong> <span id="paymentToken"></span></li>
<li>
<h6 class="theme-h6">Payer Info</h6>
<ul>
<li><strong>Payer ID:</strong> <span id="payerpayer_id"></span></li>
<li><strong>Email:</strong> <a id="payerEmail"></a></li>
<li><strong>First Name:</strong> <span id="payerfirst_name"></span></li>
<li><strong>Last Name:</strong> <span id="payerlast_name"></span></li>
<li>
<strong>Shipping Address:</strong>
<ul>
<li><strong>Recipient Name:</strong> <span id="recipient_name"></span></li>
<li><strong>Line 1:</strong> <span id="shippingline1"></span></li>
<li><strong>Line 2:</strong> <span id="shippingline2"></span></li>
<li><strong>city:</strong> <span id="shippingcity"></span></li>
<li><strong>State:</strong> <span id="shippingstate"></span></li>
<li><strong>Postal Code:</strong> <span id="shippingpostal_code"></span></li>
<li><strong>Country Code:</strong> <span id="shippingcountry_code"></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade customerItems-modal" id="customerItemsModal" tabindex="-1" aria-labelledby="customerItemsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="modal-close" data-bs-dismiss="modal" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
<hr>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-certificates-tab" data-bs-toggle="pill" data-bs-target="#pills-certificates" type="button" role="tab" aria-controls="pills-certificates" aria-selected="true">Certificates</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-e-cards-tab" data-bs-toggle="pill" data-bs-target="#pills-e-cards" type="button" role="tab" aria-controls="pills-e-cards" aria-selected="false">Cards</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-certificates" role="tabpanel" aria-labelledby="pills-certificates-tab" tabindex="0">
<div class="dashboard-card-item">
<h6 class="theme-h6 mt-0">Certificates</h6>
<div class="table-responsive">
<table class="table table-striped admin-table">
<thead>
<tr>
<th>Date</th>
<th>Sent to</th>
<th>Receiver Email</th>
<th>From</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody id="customer-certificates"></tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-e-cards" role="tabpanel" aria-labelledby="pills-e-cards-tab" tabindex="0">
<div class="dashboard-card-item">
<h6 class="theme-h6 mt-0">Cards</h6>
<div class="table-responsive">
<table class="table table-striped admin-table">
<thead>
<tr>
<th>Date</th>
<th>Sent to</th>
<th>Receiver Email</th>
<th>From</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody id="customer-cards"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade packageItems-modal" id="packageItemsModal" tabindex="-1" aria-labelledby="packageItemsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="modal-close" data-bs-dismiss="modal" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
<hr>
<form action="/api/admin/package/create" method="POST">
<div class="row g-4">
<div class="col-12">
<input type="hidden" name="id">
<input type="hidden" name="bestbuy" value="false">
<div class="input-field">
<label for="">Package Name</label>
<input name="name" type="text">
</div>
</div>
<div class="col-12">
<div class="input-field">
<label for="">Credits</label>
<input name="credits" type="number">
</div>
</div>
<div class="col-12">
<div class="input-field">
<label for="">Price</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input name="price" step="0.01" type="number">
</div>
</div>
</div>
<div class="col-12">
<div class="checkbox-field">
<label for="best-buy-pkg">
<input name="bestbuycheckbox" id="best-buy-pkg" type="checkbox">
Best Buy Badge
</label>
</div>
</div>
<div class="col-12">
<button class="theme-btn" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- ... (Rest of your HTML content) ... -->
<%- include('./parcials/footer') %>
<%- include('./parcials/scriptLinks') %>
<script>
const fetchSaleItem = async (id, btn) => {
$(btn).html(`<i class="fa-solid fa-circle-notch fa-spin"></i>`)
const saleRes = await fetch('/api/sale/getDet', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
id
})
})
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const saleData = await saleRes.json()
const sale = saleData.sale
const paymentDate = new Date(sale.createdAt)
const formatedDate = `${months[paymentDate.getMonth()]} ${paymentDate.getDate()} ${paymentDate.getFullYear()}`
console.log(formatedDate)
$("#paymentDate").html(formatedDate)
$("#paymentId").html(sale.query.paymentId)
$("#paymentToken").html(sale.query.token)
$("#payerpayer_id").html(sale.query.PayerID)
$("#payerEmail").html(sale.payment.payer.payer_info.email)
$("#payerEmail").attr('href', 'mailto:' + sale.payment.payer.payer_info.email)
$("#payerfirst_name").html(sale.payment.payer.payer_info.first_name)
$("#payerlast_name").html(sale.payment.payer.payer_info.last_name)
$("#payerlast_name").html(sale.payment.payer.payer_info.last_name)
$("#recipient_name").html(sale.payment.payer.payer_info.shipping_address.recipient_name)
$("#shippingline1").html(sale.payment.payer.payer_info.shipping_address.line1)
$("#shippingline2").html(sale.payment.payer.payer_info.shipping_address.line2)
$("#shippingcity").html(sale.payment.payer.payer_info.shipping_address.city)
$("#shippingstate").html(sale.payment.payer.payer_info.shipping_address.state)
$("#shippingpostal_code").html(sale.payment.payer.payer_info.shipping_address.postal_code)
$("#shippingcountry_code").html(sale.payment.payer.payer_info.shipping_address.country_code)
$("#saleItems").html("")
sale.payment.transactions[0].item_list.items.forEach((item) => {
const listItem = document.createElement('li')
const itemUl = document.createElement('ul')
$(itemUl).append(`<li><strong>Name:</strong> <span>${item.name}<span></li>`)
$(itemUl).append(`<li><strong>Price:</strong> <span class="price">$${item.price}<span></li>`)
$(listItem).append(itemUl)
$("#saleItems").append(listItem)
})
$("#salesubtotal").html(`$${sale.payment.transactions[0].amount.details.subtotal}`)
$("#salecurrency").html(`${sale.payment.transactions[0].amount.currency}`)
$("#salediscount").html(`-$${sale.payment.transactions[0].amount.details.discount}`)
$("#saletotal").html(`$${sale.payment.transactions[0].amount.total}`)
$(btn).html(`<i class="fa-solid fa-eye"></i>`)
$("#saleModal").modal("show")
}
</script>
<script>
const fetchCustomerItems = async (id, btn) => {
$(btn).html(`<i class="fa-solid fa-circle-notch fa-spin"></i>`)
const itemsRes = await fetch('/api/admin/fetch-items', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
id
})
})
const itemsData = await itemsRes.json()
console.log(itemsData)
var certificateHtml = ''
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
itemsData.certificates.forEach(item => {
const certificateDate = new Date(item.createdAt)
const formatedDate = `${months[certificateDate.getMonth()]} ${certificateDate.getDate()} ${certificateDate.getFullYear()}`
let status;
if (item.sender?.email == '<%= user.email %>') {
if (!item.paid) {
status = 'Draft'
} else {
status = 'Sent'
}
} else if (item.recipentemail == '<%= user.email %>') {
if (!item.read) {
status = 'Received Unread'
} else {
status = 'Received'
}
}
certificateHtml += `
<tr>
<td>${formatedDate}</td>
<td>${item.name}</td>
<td>${item.recipentemail}</td>
<td>${item.senderName}</td>
<td>${status}</td>
<td><a href="/received-certificate/${item._id}">View</a></td>
</tr>
`
})
$("#customer-certificates").html(certificateHtml)
var cardHtml = ''
itemsData.cards.forEach(item => {
const cardDate = new Date(item.createdAt)
const formatedDate = `${months[cardDate.getMonth()]} ${cardDate.getDate()} ${cardDate.getFullYear()}`
let status;
if (item.recipentemail == '<%= user.email %>' && item.recipentemail == item.receiver?.email && !item.read) {
status = 'Received Sent Unread'
} else if (item.recipentemail == '<%= user.email %>' && item.recipentemail == item.receiver?.email && item.read) {
status = 'Received Sent'
} else if (item.recipentemail == '<%= user.email %>' && item.read) {
status = 'Received'
} else if (item.recipentemail == '<%= user.email %>') {
status = 'Received Unread'
} else if (!item.scheduled) {
status = 'Draft'
} else {
status = 'sent'
}
cardHtml += `
<tr>
<td>${formatedDate}</td>
<td>${item.recipentName}</td>
<td>${item.recipentemail}</td>
<td>${item.senderName}</td>
<td>${status}</td>
<td><a href="/e-card-preview/${item._id}">View</a></td>
</tr>
`
})
$("#customer-cards").html(cardHtml)
$("#customerItemsModal").modal('show')
$(btn).html(`<i class="fa-solid fa-eye"></i>`)
}
</script>
<script>
$(".search-form").submit((e) => {
e.preventDefault()
const query = $(e.target).find("input").val().toLowerCase()
const targetTableRows = $(e.target).next().find("tbody tr")
if (query !== "") {
$(targetTableRows).hide()
$(e.target).find(`button[type="button"]`).css(`display`, 'flex')
$(targetTableRows).each((ind, item) => {
if ($(item).html().toLowerCase().includes(query)) {
$(item).show()
}
})
} else {
$(e.target).find(`button[type="button"]`).hide()
$(targetTableRows).show()
}
})
$(".search-form button[type='button']").click(function(e) {
const targetTable = $(e.target).parents("form").next().find('tbody tr').show()
$(e.target).parents("form").find('input').val('')
$(e.target).hide()
})
</script>
<script>
$(".delete-user").click(async (e) => {
const btn = $(e.currentTarget)
const email = $(btn).parents("tr").find("a").html()
debugger
if (confirm(`Are you Sure, You Want to delete User register for email: ${email}`)) {
const id = $(btn).data("id")
debugger
const customerRes = await fetch('/api/admin/delete-user', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
id
})
})
if (customerRes.status == 200) {
const customerData = await customerRes.json()
createToast(customerData.message, 'success')
$(btn).parents('tr').remove()
}
}
})
</script>
<script>
$(".modify-customer").click(async (e) => {
const btn = $(e.currentTarget)
const targetRow = $(btn).parents("tr")
var formData = {}
formData.customerid = $(targetRow).data("id")
formData.credits = $(targetRow).find(`*[name="credits"]`).val()
formData.status = $(targetRow).find(`*[name="status"]`).val()
formData.role = $(targetRow).find(`*[name="role"]`).val()
const customerRes = await fetch('/api/admin/update-customer', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(formData)
})
if (customerRes.status == 200) {
const customerData = await customerRes.json()
createToast(customerData.message, 'success')
// $(btn).parents('tr').remove()
} else {
createToast(customerData.message, 'error')
}
})
</script>
<script>
$(".sale-filter input").change(function() {
let startDate;
let endDate;
if ($(".sale-filter .start-date").val()) {
startDate = new Date($(".sale-filter .start-date").val())
}
if ($(".sale-filter .end-date").val()) {
endDate = new Date($(".sale-filter .end-date").val())
}
const targetRows = $(".sale-table tbody tr")
$(targetRows).hide()
$(targetRows).each(function(ind, item) {
const itemDate = new Date($(item).data("date"))
if (startDate && endDate) {
if (itemDate >= startDate && itemDate <= endDate) {
$(item).show()
}
} else if (startDate) {
if (itemDate >= startDate) {
$(item).show()
}
} else if (endDate) {
if (itemDate <= endDate) {
$(item).show()
}
}
})
})
</script>
<script>
$(".add-pkg").click(function(){
$("#packageItemsModal").find('form').attr('action','/api/admin/package/create')
$("#packageItemsModal").find('[type="submit"]').html("SUBMIT")
})
$(".edit-pkg").click(function(){
const targetItem = $(this).parents('tr')
$(targetItem).find('[data-name]').each(function(ind,item){
const name = $(item).data('name')
const value = $(item).html()
$("#packageItemsModal").find(`[name="${name}"]`).val(value)
if(name == 'bestbuy' && value == 'true'){
$("#best-buy-pkg").prop('checked',true)
$("#packageItemsModal").find('[name="bestbuy"]').val('true')
}else{
$("#best-buy-pkg").prop('checked',false)
$("#packageItemsModal").find('[name="bestbuy"]').val('false')
}
})
const id = $(this).data('id')
$("#packageItemsModal").find('form').attr('action','/api/admin/package/modify')
$("#packageItemsModal").find('[name="id"]').val(id)
$("#packageItemsModal").find('[type="submit"]').html("UPDATE")
$("#packageItemsModal").modal('show')
})
$("#best-buy-pkg").change(function(){
$("#packageItemsModal").find('[name="bestbuy"]').val($(this).prop('checked'))
})
</script>
</body>
</html>