TenerifeProp/public/admin/properties.html

<!-- Properties Section -->
<div class="section" id="section-properties">
    <div class="page-header">
        <div>
            <h1 class="page-title">Propiedades</h1>
            <p class="page-subtitle">Gestión de terrenos y propiedades</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary" onclick="exportProperties()">
                <i class="bi bi-download me-2"></i>Exportar
            </button>
            <button class="btn btn-primary" onclick="showPropertyModal()">
                <i class="bi bi-plus-lg me-2"></i>Nueva Propiedad
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Buscar</label>
                    <input type="text" class="form-control" id="searchProperty" placeholder="Buscar por título...">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Tipo</label>
                    <select class="form-select" id="filterType">
                        <option value="">Todos</option>
                        <option value="urban">Urbano</option>
                        <option value="agricultural">Agrícola</option>
                        <option value="house">Casa</option>
                        <option value="apartment">Apartamento</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Estado</label>
                    <select class="form-select" id="filterStatus">
                        <option value="">Todos</option>
                        <option value="active">Activo</option>
                        <option value="reserved">Reservado</option>
                        <option value="sold">Vendido</option>
                        <option value="inactive">Inactivo</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Ciudad</label>
                    <select class="form-select" id="filterCity">
                        <option value="">Todas</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <button class="btn btn-primary w-100" onclick="loadProperties()">
                        <i class="bi bi-funnel me-2"></i>Filtrar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Results -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="propertiesTable">
                    <thead>
                        <tr>
                            <th>Referencia</th>
                            <th>Título</th>
                            <th>Tipo</th>
                            <th>Ubicación</th>
                            <th>Precio</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Cargando...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
let allProperties = [];

async function loadProperties() {
    try {
        const filters = {
            type: document.getElementById('filterType').value,
            status: document.getElementById('filterStatus').value,
            city: document.getElementById('filterCity').value,
            search: document.getElementById('searchProperty').value
        };
        
        const res = await API.getProperties({ limit: 100, ...filters });
        allProperties = res.data || [];
        
        // Populate cities filter
        if (!document.getElementById('filterCity').options.length) {
            const cities = [...new Set(allProperties.map(p => p.city))];
            cities.forEach(city => {
                const opt = document.createElement('option');
                opt.value = city;
                opt.textContent = city;
                document.getElementById('filterCity').appendChild(opt);
            });
        }
        
        renderProperties(allProperties);
    } catch (e) {
        console.error('Failed to load properties:', e);
    }
}

function renderProperties(properties) {
    const tbody = document.querySelector('#propertiesTable tbody');
    if (properties.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4">No se encontraron propiedades</td></tr>';
        return;
    }
    
    tbody.innerHTML = properties.map(p => `
        <tr>
            <td><code>${p.reference}</code></td>
            <td>
                <div class="d-flex align-items-center">
                    <img src="${JSON.parse(p.images)[0]}" class="rounded me-2" style="width:50px;height:50px;object-fit:cover">
                    <div>
                        <div class="fw-medium">${p.title_es.substring(0, 30)}...</div>
                        <small class="text-muted">${p.area.toLocaleString()} m²</small>
                    </div>
                </div>
            </td>
            <td><span class="badge bg-secondary">${p.type}</span></td>
            <td>${p.city}</td>
            <td><strong>€${p.price.toLocaleString()}</strong></td>
            <td><span class="badge bg-${p.status === 'active' ? 'success' : 'warning'}">${p.status}</span></td>
            <td>
                <div class="btn-group">
                    <button class="btn btn-sm btn-outline-primary" onclick="editProperty('${p.id}')" title="Editar">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteProperty('${p.id}')" title="Eliminar">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

async function deleteProperty(id) {
    if (!confirm('¿Está seguro de eliminar esta propiedad?')) return;
    try {
        await API.deleteProperty(id);
        await loadProperties();
    } catch (e) {
        alert('Error al eliminar la propiedad');
    }
}

function editProperty(id) {
    // TODO: Open edit modal
    console.log('Edit property:', id);
}

function showPropertyModal() {
    // TODO: Open create modal
    console.log('Show property modal');
}

function exportProperties() {
    const csv = allProperties.map(p => 
        `${p.reference},${p.title_es},${p.type},${p.city},${p.price},${p.status}`
    ).join('\n');
    
    const blob = new Blob(['Referencia,Título,Tipo,Ciudad,Precio,Estado\n' + csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'propiedades.csv';
    a.click();
}
</script>