<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<% connectionUser = connection.user %>
<title><%= connection.fullName ? connectionUser.fullName : 'Connection Request' %></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">
<% if(connection.profile) { %>
<img src="<%= connectionUser.profilePic ? connectionUser.profilePic : '/assets/img/user-icon.webp' %>" alt="">
<% } else { %>
<span class="lock-img">
<i class="bi bi-lock"></i>
</span>
<% } %>
<div class="px-3">
<h6><%= connection.fullName ? connectionUser.fullName : 'Hidden' %></h6>
<span><%= connection.subHeading ? (connectionUser['subHeading'] ? connectionUser['subHeading'] : '') : 'Hidden' %></span>
</div>
</div>
<div class="d-flex align-items-center flex-wrap justify-content-center">
<% if(JSON.stringify(connectionUser._id) == JSON.stringify(connectionUser.id)){ %>
<% if (!connection.approved) { %>
<form action="/api/connection/approval" method="post">
<input type="hidden" name="id" value="<%= connection._id %>">
<input type="hidden" name="user" value="<%= connectionUser._id %>">
<input type="hidden" name="business" value="<%= connection.business._id %>">
<button type="submit" class="dash-btn">Accept</button>
</form>
<form action="/api/connection/decline" method="post">
<input type="hidden" name="id" value="<%= connection._id %>">
<input type="hidden" name="user" value="<%= connectionUser._id %>">
<input type="hidden" name="business" value="<%= connection.business._id %>">
<button type="submit" class="dash-btn">Decline</button>
</form>
<% } %>
<% } %>
<a class="chat-btn" href="/chat"><i class="bi bi-chat"></i></a>
<div class="dropdown-wrapper">
<% const unreadNotificationCount = business.notifications.filter(notification => !notification.isRead).length; %>
<button type="button" class="dropdown-toggler logout-btn ms-2">
<i class="bi bi-bell"></i>
<% if(unreadNotificationCount > 0) { %>
<span class="count"><%= unreadNotificationCount %></span>
<% } %>
</button>
<div class="dropdown">
<% if(business.notifications?.length > 0) { %>
<ul>
<% business.notifications.forEach((notification)=>{ %>
<li>
<a href="<%= notification.url %>">
<span class="icon"><i class="bi bi-check-circle"></i></span>
<span class="text"><%= notification.message %></span>
</a>
</li>
<% }) %>
</ul>
<% } else { %>
<p>No Notifications Found!</p>
<% } %>
</div>
</div>
</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">
<% if(connection.coverPhoto) { %>
<img class="img-fluid" src="<%= connectionUser.coverPhoto ? connectionUser.coverPhoto : '/assets/img/cover.png' %>" alt="">
<% } else { %>
<span class="lock-img">
<i class="bi bi-lock"></i>
</span>
<% } %>
</div>
<div class="banner-info">
<div class="profile-person-history large-img">
<% if(connection.profile) { %>
<img src="<%= connectionUser.profilePic ? connectionUser.profilePic : '/assets/img/user-icon.webp' %>" alt="">
<% } else { %>
<span class="lock-img">
<i class="bi bi-lock"></i>
</span>
<% } %>
<div class="px-3 pb-2">
<h5>
<%= connection.fullName ? connectionUser.fullName : 'Hidden' %>
<span>(<%= connection.jobTitle ? (connectionUser.jobTitle ? connectionUser.jobTitle : 'Job Title Here') : 'Hidden' %>)</span>
</h5>
<span><%= connection.subHeading ? (connectionUser['subHeading'] ? connectionUser['subHeading'] : '' ) : 'Hidden' %></span>
</div>
</div>
<span class="profile-badge"><%- connection.experience ? (connectionUser.experience ? connectionUser.experience + '+' : '0+') : '<i class="bi bi-lock"></i>' %> Years Of Experience</span>
</div>
</div>
<ul class="other-info">
<!-- <li>@edwardjj53</li> -->
<li>Sydney, Australia</li>
<%
const monthsShort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const joiningDate = new Date(connectionUser.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(connectionUser.about){ %>
<% if(connection.about) { %>
<p><%= connectionUser.about %></p>
<% } else { %>
<p class="text-muted"><i class="bi bi-lock"></i> Hidden</p>
<% } %>
<% } else { %>
<p class="text-muted">No About...</p>
<% } %>
<% if(connectionUser.profileVideo?.url){ %>
<div class="profile-video">
<% if (connection.profileVideo) { %>
<!-- <a href="javascript:;">
<i class="bi bi-play-fill"></i>
</a> -->
<!-- <img src="/assets/img/video-poster.png"> -->
<video controls>
<source src="<%= connectionUser.profileVideo?.url %>">
</video>
<% } else { %>
<div class="lock-img">
<img src="/assets/img/lock-video.png" alt="">
<p>Profile Video Hidden</p>
</div>
<% } %>
</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(connectionUser.primaryEmail?.email){ %>
<li>
<span>Email Address</span>
<% if(connection.primaryEmail) { %>
<a href="mailto:<%= connectionUser.primaryEmail?.email %>"><%= connectionUser.primaryEmail?.email %></a>
<% } else { %>
<span><i class="bi bi-lock"></i> Hidden</span>
<% } %>
</li>
<% } %>
<% if(connectionUser.phone){ %>
<li>
<span>Phone #</span>
<% if(connection.phone) { %>
<a href="tel:<%= connectionUser.phone %>"><%= connectionUser.phone %></a>
<% } else { %>
<span><i class="bi bi-lock"></i> Hidden</span>
<% } %>
</li>
<% } %>
<% if(connectionUser.portfolio){ %>
<li>
<span>Portfolio</span>
<% if(connection.portfolio) { %>
<a href="<%= connectionUser.portfolio %>" target="_blank"><%= connectionUser.portfolio %></a>
<% } else { %>
<span><i class="bi bi-lock"></i> Hidden</span>
<% } %>
</li>
<% } %>
</ul>
<div class="position-details">
<!-- <span>UI/UX</span>
<span>Branding</span>
<span>Logo</span> -->
<% connectionUser.skills.forEach((item)=>{ %>
<span><%= item %></span>
<% }) %>
</div>
<!-- <img class="img-fluid mt-3" src="/assets/img/social.png" alt=""> -->
<% if(connectionUser.socialLinks.length > 0) { %>
<!-- <hr> -->
<div class="follow-more">
<h6>Follow To Know More About Me!</h6>
<ul>
<% connectionUser.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(connectionUser.experiences?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Experience</h6>
</div>
<% if(connection.experiences?.length > 0) { %>
<ul class="listing">
<% connectionUser.experiences.forEach((experience,ind) => { %>
<% if(connection.experiences.includes(experience._id.toString())) { %>
<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 %></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>
<%- (connection.experiences?.length > 3 && connectionUser.experiences?.length > 3) ? `<button class="show-all-btn">Show all ${connectionUser.experiences?.length} Experiences</button>` : '' %>
<% } else { %>
<p class="mb-0 mt-3 text-muted"><i class="bi bi-lock"></i> Hidden</p>
<% } %>
</li>
<% } %>
<li>
<% if(connectionUser.educations?.length > 0) { %>
<div class="item-head">
<h6 class="fw-bold">Education</h6>
</div>
<% if (connection.educations.length > 0) { %>
<ul class="listing">
<% connectionUser.educations.forEach((education,ind) => { %>
<% if (connection.educations.includes(education._id.toString())) { %>
<%
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 %></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>
<%- connectionUser.educations?.length > 3 ? `<button class="show-all-btn">Show all ${connectionUser.educations?.length} Experiences</button>` : '' %>
<% } else { %>
<p class="mb-0 mt-3 text-muted"><i class="bi bi-lock"></i> Hidden</p>
<% } %>
</li>
<% } %>
<% if(connectionUser.volunteerExperiences.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Volunteer Experience</h6>
</div>
<ul class="listing">
<% connectionUser.volunteerExperiences.forEach((experience,ind) => { %>
<% if(connection.volunteerExperiences.includes(experience._id)) { %>
<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>
<%- connectionUser.volunteerExperiences?.length > 3 ? `<button class="show-all-btn">Show all ${connectionUser.volunteerExperiences?.length} Experiences</button>` : '' %>
</li>
<% } %>
<% if(connectionUser.projects?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Projects Showcase</h6>
</div>
<% if (connection.projects?.length > 0) { %>
<div class="row g-4 project-listing">
<% connectionUser.projects.forEach((item) => { %>
<% if (connection.projects?.includes(item._id.toString())) { %>
<div class="col-lg-4 col-12">
<div class="project-item">
<h6><%= item.title %></h6>
<a href="<%= item.image %>" data-fancybox="Projects">
<img class="img-fluid" src="<%= item.image %>" alt="<%= item.title %>">
</a>
</div>
</div>
<% } %>
<% }) %>
</div>
<% } else { %>
<p class="mb-0 mt-3 text-muted"><i class="bi bi-lock"></i> Hidden</p>
<% } %>
</li>
<% } %>
<% if(connection.licenseCertification?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Licenses & Certifications</h6>
</div>
<ul class="listing">
<% connectionUser.licenseCertification.forEach((cert) => { %>
<% if(connection.licenseCertification.includes(cert._id.toString())) { %>
<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(connection.personalDocuments?.length > 0) { %>
<li>
<div class="item-head">
<h6 class="fw-bold">Personal Documents</h6>
</div>
<ul class="listing">
<% connectionUser.personalDocuments.forEach((perDoc) => { %>
<% if(connection.personalDocuments.includes(perDoc._id.toString())) { %>
<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>
</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>