<style>

.profile-container{
display: flex;
width: 100%
}
.container-profile{
background-color: #F8F8F8;
width: 100%;
}

.bannerProfile{
height: 35vh;
width: 70%;
background-color: #383838;
color: white;
margin: auto;
}

#preview{
position: absolute;
bottom: -29%;
display: flex;
justify-content: center;
align-items: center;
left: 5%;
}

.boxProfile{
height: 100%;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
position: relative;
}

.photoProfile {
border-radius: 50%;
width: 168px;
height: 168px;
object-fit: cover;
margin-right:2%;
}

.coverPhoto {
width: 100%;
height: 100%;
object-fit: cover;
}

.settings{
display: none;
}

.informationProfile>p{
margin: 10px;
color: black;
width: max-content;
}
#formImage{
display: flex;
flex-direction: column;
margin-left: 10px;
}

.containerLoadImage #btnFile, .inputBTN{

display: block;
padding: 0.2rem;
border: none;
color: white;
background-color: #d82a16;
border-radius: 3px;
cursor: pointer;
font-family: sans-serif;
width: 200px;
height: 40px;
font-family: EuclidMedium;
}
.containerLoadImage #btnFile:hover, .inputBTN:hover{
transition: all .2s;
}

.containerLoadImage #inputFile{
color: transparent;
position: absolute;
z-index: -1;
}

.boxProfile form #inputFilePort{

color: transparent;
position: absolute;
z-index: -1;
}

#buttonSave{
background: #d82a16;
color: white;
border: none;
width: 120px;
height: 30px;
cursor: pointer;
position: absolute;
right: -37%;
}

.box{
height: auto;
margin: 20px 0;
}

.box > p{
margin: 20px 0;
font-size: 22pt;
}
.containerCourses{
background-color: #f2f2f2;
padding: 10px;
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, 50%);
}

.containerProyects{
background-color: #f2f2f2;
padding: 10px;
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, 50%);
}

.targetItem{
display: flex;
max-height: 120px;
margin: 10px 20px;
box-sizing: border-box;
border: 1px solid #939393;
}

.targetItem img{
height: 100%;
width: 160px;
object-fit: contain;
}
.informationText{
padding: 20px;
}

.targetItem .titleItem{
font-size: 18pt;
margin-bottom: 5px;
max-height: 57%;
overflow-y: auto;
}

.targetItem .titleItem:hover{
color: #e90a29;
}

.targetItem .descriptionItem{
max-height: 60%;
overflow-y: auto;
}

.completarInfo{
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: end;
height: 34px;
background-color: #d82a16;
 border: none;
font-size: 14pt;
font-family: EuclidMedium;
-webkit-clip-path: polygon(0 0, 99% 0, 100% 100%, 2% 100%);
padding: 5px 10px;
color: white;
position: absolute;
right: 0;
}

#formularioLogin{
display: none;
background: #11253a;
padding: 20px;
color: white;
width: 50%;
margin: auto auto 40px auto;
position: absolute;
transform: translate(-50%);
left: 50%;
}

#formularioLogin div input, select{

background: #11253a;
color: white;
margin: 10px 0;
}
#formularioLogin div input::placeholder{
color: white;
}

.closeForm{
cursor: pointer;
}

.modalOptions{
display: none;
position: fixed;
color: black;
z-index: 5;
background-color: gray;
width: 45%;
top: 48%;
left: 50%;
transform: translate(-50%);
padding: 40px;
padding: 30px;
}

.containerInformation {
background-color: white;
padding: 30px;
display: flex;
width: 70%;
margin: auto;
position: relative;
margin-top: 100px;
}
.resumenPost{
width: 30%;
padding: 0 20px;
}

.resumenPost p{
text-align: center;
background-color: #D9D9D9;
padding: 5px 3px;
}

.containerPost {
gap: 30px;
width: 40%;
display: flex;
flex-direction: column;
margin: auto;
}

.post{
width: 100%;
background-color: #11253A;
color: white;
padding: 30px;
}

.header-entrepreneurship{
display: flex;
justify-content: space-between;
margin: 0 0 10px 0;
}

.name-entrepreneurship{
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: end;
height: 34px;
background-color: #d82a16;
border: none;
font-size: 14pt;
font-family: EuclidMedium;
-webkit-clip-path: polygon(0 0, 99% 0, 100% 100%, 2% 100%);
padding: 5px 10px;
color: white;
width: fit-content;
}

.media-entrepreneurship{
margin: 10px 0;
}

.carruselMedia{
display: flex;
overflow: hidden;
}

.media-entrepreneurship img{
 object-fit: cover;
height: 446px;
min-width: 450px;
}

.footer-entrepreneurship{
display: flex;
flex-direction: column;
margin: 10px 0 0 0;
}

.footer-entrepreneurship div{
margin: 10px 0;
}

.likes{
display: flex;
width: 10%;
justify-content: space-between;
font-size: 12pt;
}

.likes i:hover{
color: gray;
cursor: pointer;
}

.entrepreneurs-followed{
width: 30%;
padding: 0 20px;
}

.titulo-emprendidores-followed{
text-align: center;
background-color: #D9D9D9;
padding: 5px 3px;
}

.followed{
display: flex;
flex-direction: column;
padding: 10px 0;
}

.following{
display: flex;
gap: 10px;
align-items: center;
margin: 10px 0;
}

.following img{
border-radius: 50%;
width: 40px;
height: 40px;
object-fit: cover;
}
@media screen and (max-width: 1770px){
 .containerCourses{
grid-template-columns: repeat(auto-fill, 100%);
}
.containerProyects{
grid-template-columns: repeat(auto-fill, 100%);
}

.containerInformation {
width: 90%;
}

.bannerProfile{
width: 90%;
}
}

@media screen and (max-width: 1370px){

.header-entrepreneurship{
flex-direction: column;
}

@media screen and (max-width: 950px){

.header-entrepreneurship{
flex-direction: initial;
}
.targetItem .descriptionItem{
max-height: 40%;
}
.targetItem{
max-height: 150px;
}
.containerInformation {
width: 95%;
flex-direction: column;
}

.resumenPost{
display: none;
}

.entrepreneurs-followed{
display: none;
}
.containerPost{
width: 90%;
}

.settings{
display: block;
width: 10%;
right: 0;
position: absolute;
}

.settings i{
 color: gray;
font-size: 15pt;
margin: 5px auto;
}

.settings i:hover{
cursor: pointer;
}

.name-entrepreneurship {
font-size: 11pt;
}

}
@media screen and (max-width: 660px){

.targetItem{
max-height: 100%;
flex-direction: column;
}
.containerInformation {
width: 95%;
padding: 0;
flex-direction: column;
}
.containerPost{
width: 100%;
}

.header-entrepreneurship{
flex-direction: column;
}

.post{
margin: 10px auto;
}

@media screen and (max-width: 768px){

.boxProfile {
display: block;
}
}
</style>
<div class = "profile-container">
{% render 'comunidad-menu' %}
<div class="container-profile">
<div class="bannerProfile">
<div class="boxProfile">
<img
class="coverPhoto"
id="coverPhoto"
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/banner_1.png?
v=1698510415"
>
<form action="" id="formImagePort" style="position: absolute;right:
3%;bottom: 3%;">
<input
 type="button"
class="inputBTN"
id="btnFilePort"
value="Cambiar foto portada"
onclick="document.getElementById('inputFilePort').click()"
>
<input
id="inputFilePort"
type="file"
accept="image/jpeg"
max="15"
id="contentItemUploaderMultiple"
name="contentItemUploaderMultiple"
>
</form>
<div id="preview">
<img
class="photoProfile"
id="photoProfile"

src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/banner_1.png?
v=1698510415"
>
<div class="informationProfile">
<div class="containerLoadImage">
<form action="" id="formImage">
<input
type="button"
id="btnFile"
value="Cambiar foto"
onclick="document.getElementById('inputFile').click()"
>
<input
id="inputFile"
type="file"
accept="image/jpeg"
max="15"
id="contentItemUploaderMultiple"
name="contentItemUploaderMultiple"
>
</form>
</div>
<p class="userName" id="userName">Nombre emprendedor</p>
<input
type="button"
class="inputBTN"
id="btnUpdateInfo"
style="margin-left: 10px;"
value="Actualizar información"
>
</div>
</div>
</div>
<div class="settings">
<i class="fa-solid fa-gear"></i>
</div>
</div>
<div class="containerInformation">
<div class="resumenPost" id="resumenPost">
 <p>Actividad de emprendedor</p>
</div>
<div class="containerPost" id="containerPost"></div>

<div class="entrepreneurs-followed" id="entrepreneurs-followed">

<p class="titulo-emprendidores-followed">Emprendidores followed</p>
<div class="followed">
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
 <p class="nombre-following">Nombre emprendidor</p>
</div>
<div class="following">
<img
src="https://cdn.shopify.com/s/files/1/0662/2681/5204/files/11._Santiago_Morales_Ar
ango_-_Coordinador_academico.heic?v=1700749197">
<p class="nombre-following">Nombre emprendidor</p>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

$loader.style.display="flex";
document.addEventListener("DOMContentLoaded",(e)=>{
document.getElementById("loader").style.display = "none"
})

/* CODIGO PARA PONER CONTENEDORES EN FIXED AL HACER SCROLL */

var pixelsDesplazados = 0;
var lastScrollPosition = window.scrollY;
let resumenPost = document.getElementById("resumenPost")
let entrepreneursFollowed = document.getElementById("entrepreneurs-followed")
var lastScrollPosition = 0;

function handleScrollAndMediaQueries() {
var currentScrollPosition = window.scrollY;
var screenWidth = window.innerWidth;

if (screenWidth >= 1770) {

if (currentScrollPosition < lastScrollPosition && currentScrollPosition <= 420)
{
entrepreneursFollowed.style.width = "30%";
entrepreneursFollowed.style.position = "static";
entrepreneursFollowed.style.right = "0";
entrepreneursFollowed.style.top = "0";

resumenPost.style.width = "30%";
resumenPost.style.position = "static";
resumenPost.style.left = "0";
resumenPost.style.top = "0";
} else if (currentScrollPosition >= 408) {
entrepreneursFollowed.style.width = "20.1%";
entrepreneursFollowed.style.position = "fixed";
entrepreneursFollowed.style.right = "16.5%";
entrepreneursFollowed.style.top = "7.15rem";

resumenPost.style.width = "20.1%";
resumenPost.style.position = "fixed";
resumenPost.style.left = "16.5%";
resumenPost.style.top = "7.15rem";
}
} else {
 if (currentScrollPosition < lastScrollPosition && currentScrollPosition <= 420) {
entrepreneursFollowed.style.width = "30%";
entrepreneursFollowed.style.position = "static";
entrepreneursFollowed.style.right = "0";
entrepreneursFollowed.style.top = "0";

resumenPost.style.width = "30%";
resumenPost.style.position = "static";
resumenPost.style.left = "0";
resumenPost.style.top = "0";
} else if (currentScrollPosition >= 408) {
entrepreneursFollowed.style.width = "25.9%";
entrepreneursFollowed.style.position = "fixed";
entrepreneursFollowed.style.right = "6.8%";
entrepreneursFollowed.style.top = "7.15rem";

resumenPost.style.width = "25.9%";
resumenPost.style.position = "fixed";
resumenPost.style.left = "6.8%";
resumenPost.style.top = "7.15rem";
}
}

lastScrollPosition = currentScrollPosition;
}

window.addEventListener('scroll', handleScrollAndMediaQueries);

var mediaQueryList = window.matchMedia("(min-width: 768px)");

mediaQueryList.addListener(handleScrollAndMediaQueries);

handleScrollAndMediaQueries();

/* FIN CODIGO SCROLL */

let userName = document.getElementById("userName");

let photoProfile = document.getElementById("photoProfile")
let coverPhoto = document.getElementById("coverPhoto")
let nombreCompleto
document.addEventListener("DOMContentLoaded", (e) => {
document.getElementById("loader").style.display = "flex"
getStudent()
})

/* FUNCION PARA OBTENER LOS DATOS DEL ESTUDIANTE */

function getStudent(){
let userId = document.cookie.replace(/(?:(?:^|.*;\s*)estudianteID\s*\=\
s*([^;]*).*$)|^.*$/, "$1");
fetch(URLbase+`/api/FundacionEstudiantes?id=`+userId)
.then((response) => response.json())
.then((data) => {
nombreCompleto = data.nombreCompleto
loadInfoUser(data)
})
}

function loadInfoUser(data){
 userName.textContent = nombreCompleto;
photoProfile.src = data.imagenPerfil;
coverPhoto.src = data.imagenPortada;
setTimeout(function() {
document.getElementById("loader").style.display = "none"
}, 1500);
}

/* FUNCION PARA CAPTURAR LAS IMAGENES Y HACER LA PETICION PARA ACTUALIZARLAS */

let attachment;

let buttonSave;
let jsonObj
document.getElementById('inputFile').addEventListener('change', (event) => {
jsonObj = {
"fotoPerfil": 1
}
const fileList = event.target.files;
for (let i = 0; i < fileList.length; i++) {
const reader = new FileReader();
const file = fileList[i];
reader.addEventListener('load', (event) => {

const url = event.target.result;

attachment = url.split(",")[1];

var img = document.getElementById('photoProfile');

img.src = url;

buttonSave = document.createElement("button")
buttonSave.id = "buttonSave"
buttonSave.textContent = "Guardar"

let formImage = document.getElementById('formImage')

formImage.appendChild(buttonSave)

});

reader.readAsDataURL(file);
}

});

document.getElementById('inputFilePort').addEventListener('change', (event) => {

jsonObj = {
"fotoPerfil": 0
}
const fileListCover = event.target.files;
for (let i = 0; i < fileListCover.length; i++) {
const reader = new FileReader();
const fileCover = fileListCover[i];
reader.addEventListener('load', (event) => {

const url = event.target.result;

attachment = url.split(",")[1];

var imgCover = document.getElementById('coverPhoto');

imgCover.src = url;
 buttonSave = document.createElement("button")
buttonSave.id = "buttonSave"
buttonSave.textContent = "Guardar"

let formImage = document.getElementById('formImage')

formImage.appendChild(buttonSave)

});

reader.readAsDataURL(fileCover);
}

});

document.addEventListener("click", (e) => {

if(e.target.matches("#buttonSave")){
jsonObj.estudianteID = estudianteID
jsonObj.attachment = attachment
$loader.style.display="flex";
e.preventDefault()
fetch(URLbase+`/api/CambioFoto`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body:
JSON.stringify(jsonObj)
})
.then(response => response.json())
.then((data) => {
if(data == "ok"){
$loader.style.display="none";
Swal.fire({
icon: 'success',
title: 'Foto actualizada',
text: ''
})
buttonSave.classList.add("hidden")
}else{
$loader.style.display="none";
Swal.fire({
icon: 'error',
title: 'Ocurrio un error',
text: ''
})
}
});
}
})

/* FUNCION PARA OBTENER LOS EMPRENDIMIENTOS DE EL ESTUDIANTE */

let containerPost = document.getElementById("containerPost");

function getEmprendimientos(){
 let userId = document.cookie.replace(/(?:(?:^|.*;\s*)estudianteID\s*\=\
s*([^;]*).*$)|^.*$/, "$1");
fetch(URLbase+`/api/Emprendimientos/EmprendimientosByEstudianteID?id=`+userId)
.then((response) => response.json())
.then((data) => {
loadEmprendimientos(data.$values)
})
}
getEmprendimientos()

function loadEmprendimientos(data){
let containerPost = document.getElementById("containerPost")
data.forEach((e)=>{
let actualizarEmprendimiento = document.createElement("a");
actualizarEmprendimiento.href = "https://fundacionpanaca.co/pages/actualizar-
emprendimiento?id="+e.emprendimientoID

let post = document.createElement("div")

post.className = "post"
actualizarEmprendimiento.appendChild(post)

let headerPost = document.createElement("div")

headerPost.className = "header-entrepreneurship"

let mediaPost = document.createElement("div")

mediaPost.className = "media-entrepreneurship"

let footerPost = document.createElement("div")

footerPost.className = "footer-entrepreneurship"

post.appendChild(headerPost)
post.appendChild(mediaPost)
post.appendChild(footerPost)

let headerP1 = document.createElement("p");

headerP1.className = "name-entrepreneurship"

headerP1.textContent = e.nombreEmpresa

let headerP2 = document.createElement("p");

headerP2.textContent = nombreCompleto

headerPost.appendChild(headerP1)
headerPost.appendChild(headerP2)

let carruselMedia = document.createElement("div")

carruselMedia.className = "carruselMedia"

e.EmprendimientosMultimedias.$values.forEach((event)=>{

let mediaImg = document.createElement("img")

mediaImg.src = event.imagen

carruselMedia.appendChild(mediaImg)
 })
mediaPost.appendChild(carruselMedia)

let likesFooter = document.createElement("div");

likesFooter.className = "likes"

let thumbsUp = document.createElement("i")

thumbsUp.className = "fa-solid fa-thumbs-up"

let thumbsDown = document.createElement("i")

thumbsDown.className = "fa-solid fa-thumbs-down"

likesFooter.appendChild(thumbsUp)
likesFooter.appendChild(thumbsDown)

let descriptionFooter = document.createElement("div");

descriptionFooter.className = "description"

let descriptionP = document.createElement("p");

descriptionP.textContent = e.descripcion
descriptionFooter.appendChild(descriptionP)

footerPost.appendChild(likesFooter)
footerPost.appendChild(descriptionFooter)

containerPost.appendChild(actualizarEmprendimiento)
})
}
</script>
{% schema %}
{
"name": "Comunidad-perfil",
"settings": [
],
"presets": [
{
"name": "Comunidad-perfil"

}
]
}
{% endschema %}