182 lines
8.9 KiB
HTML
182 lines
8.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Preferencias — Casa Hunter FL{% endblock %}
|
|
{% block content %}
|
|
|
|
<h2 class="fw-bold mb-1" style="color:var(--primary)"><i class="fas fa-sliders-h me-2" style="color:var(--accent)"></i>Preferencias de Búsqueda</h2>
|
|
<p class="text-muted mb-4">Configura dónde y hasta cuánto buscar. La próxima búsqueda usará estos ajustes.</p>
|
|
|
|
<div class="row g-4">
|
|
|
|
<!-- Presupuesto y Down Payment -->
|
|
<div class="col-12 col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h6 class="fw-bold mb-3" style="color:var(--primary)"><i class="fas fa-dollar-sign me-2" style="color:var(--accent)"></i>Mi Presupuesto</h6>
|
|
<form method="post">
|
|
<input type="hidden" name="action" value="save_config">
|
|
|
|
<label class="form-label small fw-bold">Precio máximo de compra (USD)</label>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text">$</span>
|
|
<input type="number" name="max_price" id="max_price_input" class="form-control form-control-lg fw-bold"
|
|
value="{{ max_price }}" min="50000" max="1000000" step="5000"
|
|
oninput="document.getElementById('price-display').textContent='$'+Number(this.value).toLocaleString('en-US')">
|
|
</div>
|
|
<input type="range" class="form-range mb-1" min="50000" max="500000" step="5000" value="{{ max_price }}"
|
|
oninput="document.getElementById('max_price_input').value=this.value;document.getElementById('price-display').textContent='$'+Number(this.value).toLocaleString('en-US')">
|
|
<div class="d-flex justify-content-between text-muted" style="font-size:.7rem">
|
|
<span>$50K</span><span>$250K</span><span>$500K</span>
|
|
</div>
|
|
<div class="text-center my-2 fw-bold" style="color:var(--accent)" id="price-display">${{ "{:,}".format(max_price) }}</div>
|
|
|
|
<hr class="my-3">
|
|
|
|
<label class="form-label small fw-bold">Down Payment disponible (USD)</label>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text">$</span>
|
|
<input type="number" name="down_payment" id="down_input" class="form-control form-control-lg fw-bold"
|
|
value="{{ down_payment }}" min="5000" max="500000" step="1000"
|
|
oninput="document.getElementById('dp-display').textContent='$'+Number(this.value).toLocaleString('en-US')">
|
|
</div>
|
|
<input type="range" class="form-range mb-1" min="5000" max="200000" step="1000" value="{{ down_payment }}"
|
|
oninput="document.getElementById('down_input').value=this.value;document.getElementById('dp-display').textContent='$'+Number(this.value).toLocaleString('en-US')">
|
|
<div class="text-center fw-bold mb-3" style="color:var(--accent)" id="dp-display">${{ "{:,}".format(down_payment) }}</div>
|
|
|
|
<div class="bg-light rounded p-2 small mb-3">
|
|
<i class="fas fa-calculator me-1"></i>
|
|
Down del <strong id="pct-display">{{ ((down_payment / max_price) * 100)|round(1) }}%</strong> sobre precio máximo
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-100"><i class="fas fa-save me-2"></i>Guardar</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agregar ciudad -->
|
|
<div class="col-12 col-md-8">
|
|
<div class="card mb-3">
|
|
<div class="card-body">
|
|
<h6 class="fw-bold mb-3" style="color:var(--primary)"><i class="fas fa-plus-circle me-2" style="color:var(--accent)"></i>Agregar Ciudad</h6>
|
|
<form method="post" class="d-flex gap-2">
|
|
<input type="hidden" name="action" value="add_city">
|
|
<div class="flex-fill position-relative">
|
|
<input type="text" name="city" id="city-input" class="form-control"
|
|
placeholder="Escribe una ciudad de Florida..." autocomplete="off" required>
|
|
<ul id="city-suggestions" class="list-group position-absolute w-100 shadow-sm"
|
|
style="z-index:1000;display:none;max-height:200px;overflow-y:auto;top:100%"></ul>
|
|
</div>
|
|
<button type="submit" class="btn btn-accent"><i class="fas fa-plus me-1"></i>Agregar</button>
|
|
</form>
|
|
<p class="text-muted small mt-2 mb-0"><i class="fas fa-info-circle me-1"></i>Puedes agregar cualquier ciudad de Florida — Vero Beach, Palm Coast, Ponte Vedra, etc.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cities list -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h6 class="fw-bold mb-3" style="color:var(--primary)">
|
|
<i class="fas fa-map-marker-alt me-2" style="color:var(--accent)"></i>
|
|
Ciudades en tu búsqueda
|
|
<span class="badge ms-1" style="background:var(--accent)">{{ cities|selectattr('active')|list|length }} activas</span>
|
|
</h6>
|
|
{% if cities %}
|
|
<div class="row g-2">
|
|
{% for c in cities %}
|
|
<div class="col-12 col-sm-6 col-md-4">
|
|
<div class="d-flex align-items-center justify-content-between border rounded px-3 py-2 {% if not c.active %}opacity-50{% endif %}">
|
|
<div>
|
|
<i class="fas fa-map-pin me-2 {% if c.active %}text-success{% else %}text-muted{% endif %}"></i>
|
|
<span class="small fw-bold">{{ c.city }}</span>
|
|
</div>
|
|
<div class="d-flex gap-1">
|
|
<form method="post" class="d-inline">
|
|
<input type="hidden" name="action" value="toggle_city">
|
|
<input type="hidden" name="city_id" value="{{ c.id }}">
|
|
<button type="submit" class="btn btn-xs p-1 border-0 bg-transparent" title="{% if c.active %}Desactivar{% else %}Activar{% endif %}">
|
|
<i class="fas fa-{% if c.active %}eye{% else %}eye-slash{% endif %} text-muted" style="font-size:.8rem"></i>
|
|
</button>
|
|
</form>
|
|
<form method="post" class="d-inline" onsubmit="return confirm('¿Eliminar {{ c.city }}?')">
|
|
<input type="hidden" name="action" value="remove_city">
|
|
<input type="hidden" name="city_id" value="{{ c.id }}">
|
|
<button type="submit" class="btn btn-xs p-1 border-0 bg-transparent">
|
|
<i class="fas fa-times text-danger" style="font-size:.8rem"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-muted">No hay ciudades configuradas.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick add coastal cities -->
|
|
<div class="card mt-4">
|
|
<div class="card-body">
|
|
<h6 class="fw-bold mb-3" style="color:var(--primary)"><i class="fas fa-water me-2" style="color:var(--accent)"></i>Agregar rápido — Ciudades costeras populares</h6>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
{% set quick_cities = ["Vero Beach","Sebastian","Melbourne","Cocoa Beach","Titusville","Stuart","Jensen Beach",
|
|
"Daytona Beach","Ormond Beach","New Smyrna Beach","Flagler Beach","Palm Coast",
|
|
"St. Augustine","St. Augustine Beach","Ponte Vedra Beach",
|
|
"Jacksonville Beach","Atlantic Beach","Neptune Beach","Fernandina Beach",
|
|
"Port St. Lucie","Fort Pierce","Palm City","Hobe Sound"] %}
|
|
{% for qc in quick_cities %}
|
|
{% set already = cities|selectattr('city','equalto',qc)|list %}
|
|
{% if not already %}
|
|
<form method="post" class="d-inline">
|
|
<input type="hidden" name="action" value="add_city">
|
|
<input type="hidden" name="city" value="{{ qc }}">
|
|
<button type="submit" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-plus me-1" style="font-size:.7rem"></i>{{ qc }}
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<span class="btn btn-sm btn-success disabled" style="font-size:.8rem">
|
|
<i class="fas fa-check me-1"></i>{{ qc }}
|
|
</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script>
|
|
const input = document.getElementById('city-input');
|
|
const suggestions = document.getElementById('city-suggestions');
|
|
|
|
input.addEventListener('input', async function() {
|
|
const q = this.value.trim();
|
|
if (q.length < 2) { suggestions.style.display='none'; return; }
|
|
const res = await fetch(`/api/cities?q=${encodeURIComponent(q)}`);
|
|
const cities = await res.json();
|
|
suggestions.innerHTML = '';
|
|
if (cities.length === 0) { suggestions.style.display='none'; return; }
|
|
cities.forEach(city => {
|
|
const li = document.createElement('li');
|
|
li.className = 'list-group-item list-group-item-action py-2 small';
|
|
li.textContent = city + ', FL';
|
|
li.style.cursor = 'pointer';
|
|
li.addEventListener('click', () => {
|
|
input.value = city;
|
|
suggestions.style.display = 'none';
|
|
});
|
|
suggestions.appendChild(li);
|
|
});
|
|
suggestions.style.display = 'block';
|
|
});
|
|
|
|
document.addEventListener('click', e => {
|
|
if (!input.contains(e.target)) suggestions.style.display = 'none';
|
|
});
|
|
</script>
|
|
{% endblock %}
|