<?php if (isset($form)): ?>
<div class="container mt-2">
<style>
.nav-pills .nav-link {
font-size: 1rem !important;
border-radius: 100px;
color: #fff;
}
.flex-container {
display: flex;
padding: 0px;
justify-content: center;
}
.flex-container div {
flex-direction: row;
}
.nav-pills .nav-link.active {
background: rgb(242, 242, 242);
border-radius: 100px;
color: #7f1c8a;
transition: none;
border-radius: 0px;
border: 0;
}
select {
text-align: center;
font-size: 1rem !important;
display: block;
text-align: center;
margin: 12px;
line-height: 36px;
letter-spacing: .1px;
width: 200px !important;
height: 40px !important;
border-radius:50px;
}
input {
width: 200px !important;
line-height: 36px;
font-size: 1rem !important;
text-align: center;
margin: 12px;
height: 40px !important;
border-radius:50px;
}
.contenedor-buscador {
display: flex;
background-color: #fff;
border-radius: 50px;
justify-content: center;
padding: 0 50px;
}
@media screen and (max-width:990px) {
.flex-container {
flex-direction: column;
align-items: center;
}
.flex-container div {
flex-direction: row;
}
}
@media screen and (max-width:438px) {
.nav-pills .nav-link {
font-size: 18px;
}
}
}
@media screen and (max-width:405px) {
.nav-pills .nav-link {
font-size: 16px;
}
}
@media screen and (max-width:392px) {
.nav-pills .nav-link {
font-size: 14px;
}
}
</style>
<div class="flex-container" style="display:flex; justify-content: center;">
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#arrendar"
type="button" role="tab" aria-controls="arrendar" aria-selected="true"
style="border-radius:100px;">Arrendar</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#comprar"
type="button" role="tab" aria-controls="comprar" aria-selected="false"
style="border-radius:100px;">Comprar</button>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="arrendar">
<div class="row">
<div class="col">
<form class="visualinmueble-formulario-widget-inicio"
id="<?php echo $form['id']; ?>"action="<?php echo $form['action']; ?>" method="<?php echo $form['method']; ?>"
x-data="VISUALINMU_SEARCH_FORM">
<style>
select {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
}
select:hover {
background-image: url("https://i.imgur.com/L5s79BW.png");
}
</style>
<select class="form-control" id="visualinmu_tipogestion" name="tipoGestion"
style="visibility:hidden; line-height: 0px; margin-top: 0px; height: 0px;">
<option value="1" selected=""></option>
</select>
<div class="visua_inmueble_tipo_gestion">
<div class="flex-container contenedor-buscador">
<div class="visua_inmueble_tipo_inmueble">
<select class="form-control" id="<?php echo $form['filters']['tipoInmueble']['id']; ?>" name="<?php echo $form['filters']['tipoInmueble']['inputName']; ?>">
<option value="" <?php echo empty($form['filters']['tipoInmueble']['old']) ? 'selected' : ''; ?>><?php echo $form['filters']['tipoInmueble']['label']; ?></option>
<template x-for="tipoInmueble in tiposInmueble">
<option x-model="tipoInmueble.codigo" x-text="tipoInmueble.nombre"></option>
</template><?php foreach ($form["filters"]["tipoInmueble"]["options"] as $tipoInmueble): ?>
<option value="<?php echo $tipoInmueble->codigo(); ?>" <?php echo $tipoInmueble->codigo() == $form['filters']['tipoInmueble']['old'] ? 'selected' : ''; ?>><?php echo $tipoInmueble->nombre(); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="visua_inmueble_tipo_inmueble">
<select class="form-control" name="<?php echo $form['filters']['ciudades']['inputName']; ?>" id="<?php echo $form['filters']['ciudades']['id']; ?>"
x-model="ciudadSelected" x-on:change="cambioCiudad($event)">¿
<template x-for="ciudad in ciudades">
<option :selected="ciudad.codigo == ciudadSelected" :key="ciudad.codigo"
:value="ciudad.codigo" x-text="ciudad.nombre"></option>
</template>
</select>
</div>
<div class="visua_inmueble_codigo">
<input type="text" class="form-control" id="floatingInputGrid"
name="<?php echo $form['filters']['codigo']['inputName']; ?>" placeholder="<?php echo $form['filters']['codigo']['label']; ?> (opcional)"
value="<?php echo !empty($form['filters']['codigo']['old']) ? $form['filters']['codigo']['old'] : ''; ?>">
</div>
<div class="vi-boton-buscar">
<input type="submit" class="btn btn-primary btn-bus" value="Buscar">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="comprar">
<div class="row">
<div class="col">
<form class="visualinmueble-formulario-widget-inicio"
id="<?php echo $form['id']; ?>"action="<?php echo $form['action']; ?>" method="<?php echo $form['method']; ?>"
x-data="VISUALINMU_SEARCH_FORM">
<style>
select {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
}
select:hover {
background-image: url("https://i.imgur.com/L5s79BW.png");
}
</style>
<select class="form-control" id="visualinmu_tipogestion" name="tipoGestion"
style="visibility:hidden; line-height: 0px; margin-top: 0px; height: 0px;">
<option value="2" selected=""></option>
</select>
<div class="visua_inmueble_tipo_gestion">
<div class="contenedor-buscador">
<div class="visua_inmueble_tipo_inmueble">
<select class="form-control" id="<?php echo $form['filters']['tipoInmueble']['id']; ?>" name="<?php echo $form['filters']['tipoInmueble']['inputName']; ?>">
<option value="" <?php echo empty($form['filters']['tipoInmueble']['old']) ? 'selected' : ''; ?>><?php echo $form['filters']['tipoInmueble']['label']; ?></option>
<template x-for="tipoInmueble in tiposInmueble">
<option x-model="tipoInmueble.codigo" x-text="tipoInmueble.nombre">
</option>
</template><?php foreach ($form["filters"]["tipoInmueble"]["options"] as $tipoInmueble): ?>
<option value="<?php echo $tipoInmueble->codigo(); ?>" <?php echo $tipoInmueble->codigo() == $form['filters']['tipoInmueble']['old'] ? 'selected' : ''; ?>><?php echo $tipoInmueble->nombre(); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="visua_inmueble_tipo_inmueble">
<select class="form-control" name="<?php echo $form['filters']['ciudades']['inputName']; ?>" id="<?php echo $form['filters']['ciudades']['id']; ?>"
x-model="ciudadSelected" x-on:change="cambioCiudad($event)">
<template x-for="ciudad in ciudades">
<option :selected="ciudad.codigo == ciudadSelected" :key="ciudad.codigo"
:value="ciudad.codigo" x-text="ciudad.nombre"></option>
</template>
</select>
</div>
<div class="visua_inmueble_codigo">
<input type="text" class="form-control" id="floatingInputGrid"
name="<?php echo $form['filters']['codigo']['inputName']; ?>" placeholder="<?php echo $form['filters']['codigo']['label']; ?> (opcional)"
value="<?php echo !empty($form['filters']['codigo']['old']) ? $form['filters']['codigo']['old'] : ''; ?>">
</div>
<div class="vi-boton-buscar">
<input type="submit" class="btn btn-primary btn-bus" value="Buscar">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
var activeElements = []; // Array para almacenar las etiquetas con la clase "active"
var scrollTriggered = false; // Bandera para indicar si se ha activado el evento de scroll
// Función para verificar si se ha llegado a 400 píxeles antes del final de la página
function isScrollTriggered() {
return (window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 400);
}
// Función para guardar las etiquetas con la clase "active"
function saveActiveElements() {
var activeElementsList = document.querySelectorAll('.active');
activeElements = Array.from(activeElementsList);
}
// Función para aplicar la clase "active" a las etiquetas guardadas
function applyActiveClass() {
activeElements.forEach(function(element) {
element.classList.add('active');
});
}
// Función para manejar el evento de scroll
function handleScroll() {
if (!scrollTriggered && isScrollTriggered()) {
saveActiveElements();
scrollTriggered = true;
}
}
// Asignar el controlador de eventos de scroll
window.addEventListener('scroll', handleScroll);
// Función para manejar el evento de subir la página
function handlePageUp(event) {
if (scrollTriggered && event.deltaY < 0 && window.scrollY === 0) {
applyActiveClass();
scrollTriggered = false;
window.removeEventListener('wheel', handlePageUp);
}
}
// Asignar el controlador de eventos de subir la página
window.addEventListener('wheel', handlePageUp);
</script>
<?php endif; ?>
