<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connection Request - <%= companyObj.fullName %></title>
<%- include('./partials/csslinks') %>
</head>
<body>
<%- include('./partials/header') %>
<section class="dashboard-main-section">
<div class="container">
<form method="POST" action="/api/connection/request/business">
<input type="hidden" name="company" value="<%= companyObj._id %>">
<input type="hidden" name="user" value="<%= user._id %>">
<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)){ %>
<button type="button" class="dash-btn select-all-checkbox"> Select All</button>
<% } %>
<button type="submit" class="logout-btn ms-2">Proceed</button>
</div>
</div>
<h5 class="fw-bold text-center fw-head">Select Fields to Share with Company (<%= companyObj.fullName %>)</h5>
<div class="profile-banner">
<div class="banner-cover">
<label for="coverPhoto" class="custom-checkbox w-block w-100">
<input type="checkbox" name="coverPhoto" value="true" id="coverPhoto">
<label for="coverPhoto"><i class="bi bi-check2-circle"></i></label>
<img class="img-fluid" src="<%= user.coverPhoto ? user.coverPhoto : '/assets/img/cover.png' %>" alt="">
</label>
</div>
<div class="banner-info">
<div class="profile-person-history large-img">
<label class="position-relative" for="profile-checkbox">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="profile" id="profile-checkbox">
<label for="profile-checkbox"><i class="bi bi-check2-circle"></i></label>
</span>
<img src="<%= user.profilePic ? user.profilePic : '/assets/img/user-icon.webp' %>" alt="">
</label>
<div class="px-3 pb-2">
<h5>
<label for="fullName">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="fullName" id="fullName">
<label for="fullName"><i class="bi bi-check2-circle"></i>
</label>
</span><%= user.fullName %></label>
<span>
<label for="jobTitle-checkbox">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="jobTitle" id="jobTitle-checkbox">
<label for="jobTitle-checkbox"><i class="bi bi-check2-circle"></i></label>
</span> (<%= user.jobTitle ? user.jobTitle : 'Job Title Here' %>)
</label>
</span>
</h5>
<span>
<label for="subHeading-checkbox">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="subHeading" id="subHeading-checkbox">
<label for="subHeading-checkbox"><i class="bi bi-check2-circle"></i></label>
</span>
<%= user['subHeading'] ? user['subHeading'] : 'Enter Sub Heading' %>
</label>
</span>
</div>
</div>
<label for="experience-checkbox" class="profile-badge">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="experience" id="experience-checkbox">
<label for="experience-checkbox"><i class="bi bi-check2-circle"></i></label>
</span>
<%= user.experience ? user.experience : '0' %>+ Years Of Experience
</label>
</div>
</div>
<ul class="other-info">
<!-- <li>@edwardjj53</li> -->
<li>
<label for="location-checkbox">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="location" id="location-checkbox">
<label for="location-checkbox"><i class="bi bi-check2-circle"></i></label>
</span> <%= user.location %> </label>
</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><label for="memberSince-checkbox">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="memberSince" id="memberSince-checkbox">
<label for="memberSince-checkbox"><i class="bi bi-check2-circle"></i></label>
</span> Member Since, <%= joiningMonth %> <%= joiningYear %></label></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">
<label for="about-checkbox" class="custom-checkbox">
<input type="checkbox" value="true" name="about" id="about-checkbox">
<label for="about-checkbox"><i class="bi bi-check2-circle"></i></label>
About
</label>
</h6>
<% if(user.about){ %>
<p><%= user.about %></p>
<% } else { %>
<p class="text-muted">No About...</p>
<% } %>
<% if(user.profileVideo?.url){ %>
<label class="profile-video custom-checkbox d-block w-100" for="checkbox-profileVideo">
<input type="checkbox" value="true" name="profileVideo" id="checkbox-profileVideo">
<label for="checkbox-profileVideo"><i class="bi bi-check2-circle"></i></label>
<video>
<source src="<%= user.profileVideo?.url %>">
</video>
</label>
<% } %>
</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>
<label for="primaryEmail-checkbox">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="primaryEmail" id="primaryEmail-checkbox">
<label for="primaryEmail-checkbox">
<i class="bi bi-check2-circle"></i>
</label>
Email Address
</span>
</label>
<a href="mailto:<%= user.primaryEmail?.email %>"><%= user.primaryEmail?.email %></a>
</li>
<% } %>
<% if(user.phone){ %>
<li>
<label for="phone-checkbox">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="phone" id="phone-checkbox">
<label for="phone-checkbox">
<i class="bi bi-check2-circle"></i>
</label>
Phone #
</span>
</label>
<a href="tel:<%= user.phone %>"><%= user.phone %></a>
</li>
<% } %>
<% if(user.portfolio){ %>
<li>
<label for="portfolio-checkbox">
<span class="custom-checkbox">
<input type="checkbox" value="true" name="portfolio" id="portfolio-checkbox">
<label for="portfolio-checkbox">
<i class="bi bi-check2-circle"></i>
</label>
Portfolio
</span>
</label>
<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">
<li class="user-field">
<div class="item-head">
<h6 class="fw-bold">
Experience
</h6>
</div>
<% if(user.experiences?.length > 0) { %>
<input class="array-val" type="hidden" name="experiences" value="[]">
<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">
<label for="exp-item-<%= experience._id %>" class="custom-checkbox">
<input type="checkbox" class="input-multiple" value="<%= experience._id %>" id="exp-item-<%= experience._id %>">
<label for="exp-item-<%= experience._id %>"><i class="bi bi-check2-circle"></i></label>
<%= experience.title %>
</label>
</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>
<li class="user-field">
<div class="item-head">
<h6 class="fw-bold">
Education
</h6>
</div>
<% if(user.educations?.length > 0) { %>
<input class="array-val" type="hidden" name="educations" value="[]">
<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">
<label for="edu-item-<%= education._id %>" class="custom-checkbox">
<input type="checkbox" class="input-multiple" value="<%= education._id %>" id="edu-item-<%= education._id %>">
<label for="edu-item-<%= education._id %>"><i class="bi bi-check2-circle"></i></label>
<%= education.institute %>
</label>
</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 class="user-field">
<div class="item-head">
<h6 class="fw-bold">Volunteer Experience</h6>
</div>
<input class="array-val" type="hidden" name="volunteerExperiences" value="[]">
<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">
<label for="vol-exp-item-<%= experience._id %>" class="custom-checkbox">
<input type="checkbox" class="input-multiple" value="<%= experience._id %>" id="vol-exp-item-<%= experience._id %>">
<label for="vol-exp-item-<%= experience._id %>"><i class="bi bi-check2-circle"></i></label>
<%= experience.title %>
</label>
<% 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>
<% } %>
<li class="user-field">
<div class="item-head">
<h6 class="fw-bold">Projects Showcase</h6>
</div>
<!-- <input type="hidden" name="projects" value="[]"> -->
<% if(user.projects?.length > 0) { %>
<input class="array-val" type="hidden" name="projects" value="[]">
<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> -->
<h6 class="fw-bold">
<label for="projects-checkbox-<%= item._id %>" class="custom-checkbox">
<!-- <input type="checkbox" name="projects" value="<%= item._id %>" id="projects-checkbox-<%= item._id %>"> -->
<input class="input-multiple" type="checkbox" value="<%= item._id %>" id="projects-checkbox-<%= item._id %>">
<label for="projects-checkbox-<%= item._id %>"><i class="bi bi-check2-circle"></i></label>
<%= item.title %>
</label>
</h6>
<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 class="user-field">
<div class="item-head">
<h6 class="fw-bold">Licenses & Certifications</h6>
</div>
<input class="array-val" type="hidden" name="licenseCertification" value="[]">
<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">
<label for="cert-item-<%= cert._id %>" class="custom-checkbox">
<input type="checkbox" class="input-multiple" value="<%= cert._id %>" id="cert-item-<%= cert._id %>">
<label for="cert-item-<%= cert._id %>"><i class="bi bi-check2-circle"></i></label>
<%= cert?.title %>
</label>
<% 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 class="user-field">
<div class="item-head">
<h6 class="fw-bold">Personal Documents</h6>
</div>
<input class="array-val" type="hidden" name="personalDocuments" value="[]">
<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">
<label for="exp-item-<%= perDoc._id %>" class="custom-checkbox">
<input type="checkbox" class="input-multiple" value="<%= perDoc._id %>" id="exp-item-<%= perDoc._id %>">
<label for="exp-item-<%= perDoc._id %>"><i class="bi bi-check2-circle"></i></label>
<%= perDoc?.title %>
</label>
<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>
</form>
</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>
<script>
// const projectsValueUpdate = () => {
// let projects = []
// $(".project-checkbox").each(function(ind, elem) {
// if ($(elem).prop('checked')) {
// projects.push($(elem).val())
// }
// })
// $('[name="projects"]').val(JSON.stringify(projects))
// }
</script>
<script>
const convertValuesInArray = () => {
$(".user-field").each(function(ind, elem) {
let array = []
$(elem).find(".input-multiple").each(function(ind, elem) {
if ($(elem).prop('checked')) {
array.push($(elem).val())
}
})
$(elem).find('.array-val').val(JSON.stringify(array))
})
}
</script>
<script>
$(".select-all-checkbox").click(function() {
if ($(this).hasClass('selected')) {
$('input[type="checkbox"]').prop('checked', false)
$(this).removeClass('selected')
$(this).html('Select All')
} else {
$('input[type="checkbox"]').prop('checked', true)
$(this).addClass('selected')
$(this).html('Deselect All')
}
convertValuesInArray()
})
$('input[type="checkbox"]').change(function() {
$(".select-all-checkbox").removeClass('selected')
$(".select-all-checkbox").html('Select All')
})
</script>
<script>
// $(".project-checkbox").change(projectsValueUpdate)
$(".input-multiple").change(convertValuesInArray)
</script>
</body>
</html>