{% extends 'base.html.twig' %}
{% block title %}{{categoria['nombre']}}{% endblock %}
{% block body %}
<!--lista de datos-->
<!--el js grid-standard.js va a montar siempre un minimo de 8 items,
si hay menos en esta lista el js completa con items vacios solo para cuestion visual, si son mas no hay problema-->
<ul class="list-standard-grid d-none" data-title="{{ categoria['nombre'] }}" data-logo="{{ logo_page }}">
{% for propiedad in propiedades %}
<li data-link="{{ path('dossier-interno', {propiedad: propiedad.id, _locale: locale}) }}" data-img="{{product_images~propiedad.image}}" data-text="{{ propiedad.name }}">{{ propiedad.name }}</li>
{% endfor %}
</ul>
<div class="container">
{% set tabs = [
{
id: 'tab-categoria',
label: 'Categoria',
menu: categoriasMenu
},
{
id: 'tab-precio',
label: 'Precio',
component: {
template: 'home/components/_range_price.html.twig',
context: {
min: 0,
max: 1000000
}
}
},
{ id: 'tab-galeria', label: 'Galería', active: true },
{ id: 'tab-mapa', label: 'Mapa' }
] %}
{{ include('home/components/_tabs.html.twig', {
tabs: tabs
}) }}
<div class="tab-content">
{# <div class="tab-pane" id="tab-categoria">
</div>
<div class="tab-pane" id="tab-precio">
</div> #}
<div class="tab-pane active" id="tab-galeria">
<!--no modificar el standard-grid-->
<div class="container-standard-grid-properties">
<div class="standard-grid">
<div class="container">
<div class="row"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-mapa">
<div class="map-container p-4">
{% if qi.mapKey %}
<div class="img-p iri-complex-map" style="width: 100%; height: 500px;border-radius:8px; overflow:hidden;"
data-lat="4.71"
data-lng="−74.07"
data-positions='{{ propiedades | serialize | raw}}'
data-zoom="5"
data-min-zoom="5"
>
</div>
{% else %}
<style>
.map-no-disponible {
position: absolute;
color: white;
background: rgba(0,0,0, 0.8);
width: 100%;
height: 100%;
text-align: center;
font-weight: 700;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
font-size: 35px;
}
</style>
<div class="img-p">
<div class="map-no-disponible">{{ "text_no_available"|trad }}</div>
<img src="/images/image_62.jpg"/>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!--anuncios-->
{% if anuncios is defined and anuncios is not empty %}
<div class="container-standard-grid-properties">
{{ include('home/aliados.html.twig') }}
</div>
{% endif %}
<script>
//console.log('grid standard');
const list = {{ propiedades | serialize | raw}};
console.log({list});
var listLink = Array.from(document.querySelectorAll('.list-standard-grid li')).map(function (link) {
return link.getAttribute('data-link');
});
var listImg = Array.from(document.querySelectorAll('.list-standard-grid li')).map(function (img) {
return img.getAttribute('data-img');
});
var listText = Array.from(document.querySelectorAll('.list-standard-grid li')).map(function (text) {
return text.getAttribute('data-text');
});
// ITEM CENTRAL LOGO
// var logo = document.querySelector('.list-standard-grid').getAttribute('data-logo');
var title = document.querySelector('.list-standard-grid').getAttribute('data-title');
const breadcrumbHeader = document.getElementsByClassName('breadcrumb-header');
for (let i = 0; i < breadcrumbHeader.length; i++) {
breadcrumbHeader[i].style.display = "block";
breadcrumbHeader[i].innerText = title;
}
// var centerItem = '<div class="col col-12 col-md-4 p-0"><div class="item-grid center">'+
// '<div class="logo"><a href="/"><img src="'+logo+'"/></a></div>'+
// '<h1 class="open-sans fw-bold fst-italic">'+title+'</h1>'+
// '</div></div>';
var emptyItem = '<div class="col col-12 col-md-4 p-0">'+
'<div class="item-grid empty"></div>'+
'</div>';
// Colores para badges
const colorVenta = "#CCFFFF";
const colorArriendo = "#FFCC66";
// Función para determinar el tipo de propiedad
function getTipoPropiedad(propiedad) {
if (propiedad.valorAlquiler && propiedad.valorAlquiler > 0) {
return { tipo: 'Arriendo', color: colorArriendo };
} else {
return { tipo: 'Venta', color: colorVenta };
}
}
// PINTAR LOS ELEMENTOS
if(list.length > 0) {
// Determinar posición aleatoria para el anuncio (entre 0 y la longitud de la lista)
const posicionAnuncio = Math.floor(Math.random() * (list.length + 1));
for (let i = 0; i <= list.length; i++) {
// Insertar card de anuncio en la posición aleatoria
if (i === posicionAnuncio) {
const adItem = `
<div class="col col-12 col-md-4 p-0">
<div class="item-grid item-normal">
<img src="/images_v2/ad/ad.jpg" alt="Anuncio"/>
</div>
</div>
`;
document.querySelector('.standard-grid .row').innerHTML += adItem;
}
// Si ya procesamos todos los items, salir
if (i >= list.length) break;
const primerObjeto = list[i];
const serviciosObjeto = JSON.parse('[' + primerObjeto.servicios + ']');
const tipoProp = getTipoPropiedad(primerObjeto);
console.log('servicios', serviciosObjeto)
if(listImg[i] == '' || listImg[i] == null){
var contentItem = `
<div class="col col-12 col-md-4 p-0">
<div class="item-grid item-normal no-img" data-title="${list[i].name}">
<span class="badge-categoria" style="background-color: ${tipoProp.color}; position: absolute; top: 10px; left: 10px; padding: 5px 15px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; z-index: 10;">${tipoProp.tipo}</span>
<div class="post-hover">
<div class="wp">
<h2 class="open-sans fw-bold fst-italic">${list[i].name}</h2>
<p>${listText[i]}</p>
</div>
</div>
</div>
<a href="${listLink[i]}"></a>
</div>
`;
}else{
var contentItem = `
<div class="col col-12 col-md-4 p-0">
<div class="item-grid item-normal" data-title="${list[i]}">
<img src="${listImg[i]}"/>
<span class="badge-categoria" style="background-color: ${tipoProp.color}; position: absolute; top: 10px; left: 10px; padding: 5px 15px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; z-index: 10; color: #333;">${tipoProp.tipo}</span>
</div>
<a href="${listLink[i]}"></a>
</div>
`;
}
document.querySelector('.standard-grid .row').innerHTML += contentItem;
}
}
// TAMAÑO PARA CADA ITEM
function SizeItems() {
var hCellContent = document.querySelector('.cell-content').offsetHeight;
const mediaQueryMin768 = window.matchMedia("(min-width: 768px)");
const mediaQueryMin992 = window.matchMedia("(min-width: 992px)");
const mediaQueryMin1200 = window.matchMedia("(min-width: 1200px)");
var hItem = hCellContent;
if (mediaQueryMin768.matches) {
console.log("Entro en 768px");
hItem = hCellContent / 3.5;
}
if (mediaQueryMin992.matches) {
console.log("Entro en 992px");
hItem = hCellContent / 3.3;
}
if (mediaQueryMin1200.matches) {
console.log("Entro en 1200px");
hItem = hCellContent / 3;
}
var col = document.querySelectorAll('.col');
col.forEach(function (col) {
//console.log('col', col);
col.style.height = hItem + 'px';
});
}
//SizeItems();
// RESIZE WINDOW
window.addEventListener('resize', function(){
//SizeItems();
});
// AGREGAR ANIMACIONES
var itemGrid = document.querySelectorAll('.item-grid.item-normal, .item-grid.empty');
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
function animItemGrid(){
for (let i = 0; i < itemGrid.length; i++) {
var time = getRandomInt(500, 2000);
setTimeout(function(i) {
itemGrid[i].classList.add('show');
}, time, i);
}
}
// lanza todo
var itemCenter = document.querySelectorAll('.item-grid.item-normal');
setTimeout(function() {
itemCenter.forEach(function (item) {
item.classList.add('show');
/* item.addEventListener('animationend', function(){
animItemGrid();
}); */
setTimeout(function() {
animItemGrid();
}, 400);
});
}, 1000);
</script>
{% endblock %}