<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= user.fullName %></title>
<%- include('./partials/csslinks') %>
</head>
<body>
<%- include('./partials/header') %>
<section class="dashboard-main-section">
<div class="container">
<div class="dashboard-main-setting profile-info mx-auto">
<div class="profile-history">
<div class="profile-person-history">
<img src="<%= user.profilePic ? user.profilePic : '/assets/img/user-icon.webp' %>" alt="">
<div class="px-3">
<h6><%= user.fullName %></h6>
<span><%= user['subHeading'] ? user['subHeading'] : 'Enter Sub Heading' %></span>
</div>
</div>
<div class="d-flex align-items-center flex-wrap justify-content-center">
<% if(JSON.stringify(user._id) == JSON.stringify(user.id)){ %>
<a href="/edit/profile" class="dash-btn"> <i class="bi bi-pencil-square text-white px-1"></i> Edit</a>
<% } %>
<a class="chat-btn" href="/chat"><i class="bi bi-chat"></i></a>
<button type="button" class="logout-btn ms-2"><i class="bi bi-bell"></i></button>
</div>
</div>
<div class="row justify-content-between my-4">
<div class="col-lg-4 col-12">
<div class="history-btn-design">
<a href="/dashboard" class="dash-btn">
Dashboard</a>
<!-- <button type="button" class="dash-btn">
Show History</button> -->
</div>
</div>
</div>
<h5 class="fw-bold text-center fw-head">Profile Portfolio</h5>
<div class="profile-banner">
<div class="banner-cover">
<img class="img-fluid" src="<%= user.coverPhoto ? user.coverPhoto : '/assets/img/cover.png' %>" alt="">
</div>
<div class="banner-info">
<div class="profile-person-history large-img">
<img src="<%= user.profilePic ? user.profilePic : '/assets/img/user-icon.webp' %>" alt="">
<div class="px-3 pb-2">
<h5><%= user.fullName %><span> (<%= user.jobTitle ? user.jobTitle : 'Job Title Here' %>)</span></h5>
<span><%= user['subHeading'] ? user['subHeading'] : 'Enter Sub Heading' %></span>
</div>
</div>
<span class="profile-badge"><%= user.experience ? user.experience : '0' %>+ Years Of Experience</span>
</div>
</div>
<ul class="other-info">
<!-- <li>@edwardjj53</li> -->
<li><%- user.location %></li>
<%
const monthsShort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const joiningDate = new Date(user.createdAt)
const joiningMonth = monthsShort[joiningDate.getMonth()]
const joiningYear = joiningDate.getFullYear()
%>
<li>Member Since, <%= joiningMonth %> <%= joiningYear %></li>
</ul>
<div class="additional-info">
<div class="row g-0">
<div class="col-lg-8 col-12 panel">
<div class="info-item-l h-100">
<h6 class="fw-bold">About</h6>
<% if(user.about){ %>
<p><%= user.about %></p>
<% } else { %>
<p class="text-muted">No About...</p>
<% } %>
<% if(user.profileVideo?.url){ %>
<div class="profile-video">
<!-- <a href="javascript:;">
<i class="bi bi-play-fill"></i>
</a> -->
<!-- <img src="/assets/img/video-poster.png"> -->
<video controls>
<source src="<%= user.profileVideo?.url %>">
</video>
</div>
<% } %>
</div>
</div>
<div class="col-lg-4 col-12 panel">
<div class="info-item-r h-100">
<h6 class="fw-bold">Connect With Me</h6>
<ul class="contact-links">
<% if(user.primaryEmail?.email){ %>
<li>
<span>Email Address</span>
<a href="mailto:<%= user.primaryEmail?.email %>"><%= user.primaryEmail?.email %></a>
</li>
<% } %>
<% if(user.phone){ %>
<li>
<span>Phone #</span>
<a href="tel:<%= user.phone %>"><%= user.phone %></a>
</li>
<% } %>
<% if(user.portfolio){ %>
<li>
<span>Portfolio</span>
<a href="<%= user.portfolio %>" target="_blank"><%= user.portfolio %></a>
</li>
<% } %>
</ul>
<div class="position-details">
<!-- <span>UI/UX</span>
<span>Branding</span>
<span>Logo</span> -->
<% user.skills.forEach((item)=>{ %>
<span><%= item %></span>
<% }) %>
</div>
<!-- <img class="img-fluid mt-3" src="/assets/img/social.png" alt=""> -->
<% if(user.socialLinks.length > 0) { %>
<!-- <hr> -->
<div class="follow-more">
<h6>Follow To Know More About Me!</h6>
<ul>
<% user.socialLinks.forEach((item) => { %>
<li>
<a href="<%= item.baseUrl %><%= item.username %>" target="_blank">
<img src="/assets/img/social-icons/<%= item.platform %>.png" alt="">
</a>
</li>
<% }) %>
</ul>
</div>
<% } %>
</div>
</div>
</div>
</div>
<div class="portfolio-showcase">
<ul class="user-academic">
<% if(user.experiences?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Experience</h6>
</div>
<ul class="listing">
<% user.experiences.forEach((experience,ind) => { %>
<li class="<%= ind > 2 ? 'hidden' : '' %>">
<div class="thumb">
<span class="year"><%= calculateYearsDifference(experience.startingDate,experience.endingDate).split(' ')[0] %></span>
<span class="txt">Years</span>
</div>
<div class="data">
<%
const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
%>
<h5 class="title"><%= experience.title %>
<% if(experience.fileUrl) { %>
<a class="file-link" href="<%= experience.fileUrl %>"><i class="bi bi-filetype-<%= experience.fileUrl.split('.')[experience.fileUrl.split('.').length - 1] %>"></i></a>
<% } %>
</h5>
<h6 class="info"><%= experience.companyName %> · <%= experience.locationType %></h6>
<h6 class="info"><%= experience.startingDate ? monthsShort[experience.startingDate?.getMonth()] : '' %> <%= experience.startingDate ? experience.startingDate?.getFullYear() : '' %> - <%= experience.endingDate ? monthsShort[experience.endingDate?.getMonth()] : '' %> <%= experience.endingDate ? experience.endingDate?.getFullYear() : '' %> · <%= calculateYearsDifference(experience.startingDate,experience.endingDate) %></h6>
<h6 class="info"><%= experience.location %></h6>
<div class="desc">
<%- experience.description.replaceAll(' ','') %>
</div>
</div>
</li>
<% }) %>
</ul>
<%- user.experiences?.length > 3 ? `<button class="show-all-btn">Show all ${user.experiences?.length} Experiences</button>` : '' %>
</li>
<% } %>
<% if(user.educations?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Education</h6>
</div>
<ul class="listing">
<% user.educations.forEach((education,ind) => { %>
<%
function getFirstLetters(input) {
// Split the input string by spaces to get the words
const words = input.trim().split(/\s+/);
// Extract the first letter of the first two words
const firstLetters = words.slice(0, 2).map(word => word.charAt(0).toUpperCase());
// Combine and return the letters
return firstLetters.join('');
}
const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
%>
<li class="<%= ind > 2 ? 'hidden' : '' %>">
<div class="thumb">
<span class="year"><%= getFirstLetters(education.institute) %></span>
</div>
<div class="data">
<h5 class="title"><%= education.institute %>
<% if(education.fileUrl) { %>
<a class="file-link" href="<%= education.fileUrl %>"><i class="bi bi-filetype-<%= education.fileUrl.split('.')[education.fileUrl.split('.').length - 1] %>"></i></a>
<% } %>
</h5>
<h6 class="info"><%= education.degree %></h6>
<h6 class="info"><%= education.startingDate ? monthsShort[education.startingDate?.getMonth()] : '' %> <%= education.startingDate ? education.startingDate?.getFullYear() : '' %> - <%= education.endingDate ? monthsShort[education.endingDate?.getMonth()] : '' %> <%= education.endingDate ? education.endingDate?.getFullYear() : '' %></h6>
<h6 class="info"><%= education.location %></h6>
</div>
</li>
<% }) %>
</ul>
<%- user.educations?.length > 3 ? `<button class="show-all-btn">Show all ${user.educations?.length} Experiences</button>` : '' %>
</li>
<% } %>
<% if(user.volunteerExperiences?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Volunteer Experience</h6>
</div>
<ul class="listing">
<% user.volunteerExperiences.forEach((experience,ind) => { %>
<li class="<%= ind > 2 ? 'hidden' : '' %>">
<div class="thumb">
<span class="year"><%= calculateYearsDifference(experience.startingDate,experience.endingDate).split(' ')[0] %></span>
<span class="txt">Years</span>
</div>
<div class="data">
<%
const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
%>
<h5 class="title"><%= experience.title %>
<% if(experience.fileUrl) { %>
<a class="file-link" href="<%= experience.fileUrl %>"><i class="bi bi-filetype-<%= experience.fileUrl.split('.')[experience.fileUrl.split('.').length - 1] %>"></i></a>
<% } %>
</h5>
<h6 class="info"><%= experience.companyName %> · <%= experience.locationType %></h6>
<h6 class="info"><%= experience.startingDate ? monthsShort[experience.startingDate?.getMonth()] : '' %> <%= experience.startingDate ? experience.startingDate?.getFullYear() : '' %> - <%= experience.endingDate ? monthsShort[experience.endingDate?.getMonth()] : '' %> <%= experience.endingDate ? experience.endingDate?.getFullYear() : '' %> · <%= calculateYearsDifference(experience.startingDate,experience.endingDate) %></h6>
<h6 class="info"><%= experience.location %></h6>
</div>
</li>
<% }) %>
</ul>
<%- user.volunteerExperiences?.length > 3 ? `<button class="show-all-btn">Show all ${user.volunteerExperiences?.length} Experiences</button>` : '' %>
</li>
<% } %>
<% if(user.projects?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Projects Showcase</h6>
</div>
<div class="row g-4 project-listing">
<% user.projects.forEach((item) => { %>
<div class="col-lg-4 col-12">
<div class="project-item">
<h6><%= item.title %></h6>
<% if(item.image.split('.')[1].includes('mp4')){ %>
<video class="w-100" controls>
<source src="<%= item.image %>">
</video>
<% } else { %>
<a href="<%= item.image %>" data-fancybox="Projects">
<img class="img-fluid" src="<%= item.image %>" alt="<%= item.title %>">
</a>
<% } %>
</div>
</div>
<% }) %>
</div>
</li>
<% } %>
<% if(user.licenseCertification?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Licenses & Certifications</h6>
</div>
<ul class="listing">
<% user.licenseCertification.forEach((cert) => { %>
<li>
<div class="file-icon">
<img src="/assets/img/file-icon.png" alt="">
</div>
<div class="data">
<%
const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
%>
<h5 class="title"><%= cert?.title %> <% if(cert.fileUrl) { %>
<a class="file-link" href="<%= cert.fileUrl %>"><i class="bi bi-filetype-<%= cert.fileUrl.split('.')[cert.fileUrl.split('.').length - 1] %>"></i></a>
<% } %>
</h5>
<h6 class="info"><%= cert?.organization %> - <%= cert?.issueDate ? monthsShort[cert?.issueDate?.getMonth()] : '' %> <%= cert?.issueDate ? cert?.issueDate?.getFullYear() : '' %></h6>
</div>
</li>
<% }) %>
</ul>
</li>
<% if(user.personalDocuments?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Personal Documents</h6>
</div>
<ul class="listing">
<% user.personalDocuments.forEach((perDoc) => { %>
<li class="align-items-center">
<div class="file-icon">
<img src="/assets/img/file-icon.png" alt="">
</div>
<div class="data">
<%
const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
%>
<h5 class="title"><%= perDoc?.title %>
<a class="file-link" href="<%= perDoc.fileUrl %>"><i class="bi bi-filetype-<%= perDoc.fileUrl.split('.')[perDoc.fileUrl.split('.').length - 1] %>"></i></a>
</h5>
</div>
</li>
<% }) %>
</ul>
</li>
<% } %>
<% } %>
</ul>
<h6 class="craft-experience">Crafting Excellence in Every Task</h6>
</div>
</div>
</div>
</div>
</section>
<%- include('./partials/query') %>
<%- include('./partials/footer') %>
<%- include('./partials/scriptlinks') %>
<script>
$(".show-all-btn").click(function() {
$(this).parent().find('.listing .hidden').removeClass('hidden')
$(this).remove()
debugger
})
</script>
</body>
</html>