# 📋 Pendientes y Mejoras - GKACHELE™

**© 2025 GKACHELE™. Todos los derechos reservados.**

**Hash:** `gkachele-pendientes-20250115-004`

**Fecha:** 2025-01-15

**⚠️ VER:** `PROBLEMAS_CRITICOS_CUSTOMIZER.md` - **REHACER COMPLETAMENTE EL CUSTOMIZER**

---

## ✅ FUNCIONALIDADES COMPLETADAS

1. ✅ **Sistema de bloques añadibles COMPLETO** (video, imagen, texto, redes sociales, mapa)
   - ✅ Función `addNewBlock()` implementada
   - ✅ Función `removeBlock()` implementada
   - ✅ Función `loadBlocksList()` implementada
   - ✅ Lista de bloques en sidebar funcional
   - ✅ Integración completa con backend
   - ✅ Notificaciones de éxito/error
2. ✅ Iconos SVG para redes sociales
3. ✅ Click to edit en preview
4. ✅ Gestión de platos del menú (añadir/eliminar)
5. ✅ Actualización en tiempo real del preview
6. ✅ Drag & drop básico para bloques

---

## 🔧 MEJORAS PENDIENTES

### 1. 🗺️ Mapa Automático desde Dirección

**Estado:** Pendiente

**Requisito:**
- El mapa debe generarse automáticamente usando la dirección del campo "Dirección"
- No debe requerir URL manual
- Usar Google Maps Embed API sin API key (o geocoding simple)

**Implementación:**
```javascript
// Cuando cambie la dirección, generar automáticamente el mapa
function generateMapFromAddress(address) {
    // Convertir dirección a URL de Google Maps embed
    const encodedAddress = encodeURIComponent(address);
    const mapUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSy...&q=${encodedAddress}`;
    // O usar iframe con búsqueda directa
    const mapUrl = `https://www.google.com/maps?q=${encodedAddress}&output=embed`;
    return mapUrl;
}
```

**Archivos a modificar:**
- `demo/templates/customizer.html` - Auto-generar mapa_url cuando cambie dirección
- `demo/themes/restaurante-moderno/template.html` - Usar dirección si no hay mapa_url

---

### 2. 📁 Upload de Archivos (Drag & Drop)

**Estado:** Pendiente

**Requisito:**
- Arrastrar y soltar archivos en campos de Media
- O abrir navegador de archivos
- No usar URLs manuales
- Subir a servidor y guardar ruta

**Implementación:**
```html
<!-- En customizer.html -->
<div class="media-upload-area" ondrop="handleFileDrop(event)" ondragover="allowDrop(event)">
    <input type="file" id="media_upload" style="display: none;" onchange="handleFileSelect(event)">
    <button onclick="document.getElementById('media_upload').click()">📁 Seleccionar archivo</button>
    <p>O arrastra y suelta aquí</p>
</div>
```

```python
# En app.py
@app.route('/api/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return jsonify({'error': 'No file'}), 400
    file = request.files['file']
    if file.filename == '':
        return jsonify({'error': 'No file selected'}), 400
    filename = secure_filename(file.filename)
    filepath = os.path.join(UPLOAD_FOLDER, filename)
    file.save(filepath)
    return jsonify({'url': f'/uploads/{filename}'})
```

**Archivos a modificar:**
- `demo/templates/customizer.html` - Añadir drag & drop a campos Media
- `demo/app.py` - Endpoint de upload
- `demo/static/` - Carpeta para uploads

---

### 3. ✏️ Editar Contenido de Bloques Existentes

**Estado:** Pendiente

**Problema:**
- Los bloques se pueden añadir y eliminar, pero no editar su contenido
- No hay forma de modificar el contenido de un bloque después de crearlo

**Solución:**
```javascript
// En template.html - función debe estar disponible globalmente
function removeBlockFromPreview(blockId) {
    if (window.parent !== window) {
        window.parent.postMessage({
            type: 'remove-block',
            block_id: blockId
        }, '*');
    } else {
        // Si no está en iframe, llamar directamente
        removeBlock(blockId);
    }
}

// En customizer.html - escuchar mensaje
window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'remove-block') {
        removeBlock(e.data.block_id);
    }
});
```

**Archivos a modificar:**
- `demo/templates/customizer.html` - Añadir función `editBlock(blockId)` que abra modal según tipo
- `demo/templates/customizer.html` - Hacer bloques clickeables en la lista para editar
- `demo/app.py` - Endpoint `/api/customizer/update-block` para actualizar contenido

---

### 4. 🧩 Eliminar Zonas/Secciones (Como WordPress)

**Estado:** Pendiente

**Requisito:**
- Poder eliminar secciones completas (Hero, Menú, Horarios, Contacto, etc.)
- Como WordPress: cada sección puede ocultarse/eliminarse
- Guardar estado en content_json

**Implementación:**
```json
{
  "sections": {
    "hero": {"visible": true, "enabled": true},
    "menu": {"visible": true, "enabled": true},
    "horarios": {"visible": false, "enabled": false},
    "contacto": {"visible": true, "enabled": true}
  }
}
```

```html
<!-- En template.html -->
{% if sections.hero.enabled %}
<section id="hero" class="section hero">
    <!-- Contenido -->
    <button class="section-delete" onclick="toggleSection('hero')">🗑️ Ocultar sección</button>
</section>
{% endif %}
```

**Archivos a modificar:**
- `demo/templates/customizer.html` - Añadir controles para secciones
- `demo/themes/restaurante-moderno/template.html` - Renderizar condicionalmente
- `demo/app.py` - Endpoint para toggle de secciones

---

### 5. ✏️ Edición de Contenido de Bloques

**Estado:** Pendiente

**Requisito:**
- Cada bloque añadido debe ser editable
- Click en bloque → editar contenido
- Modal o inline editor según tipo

**Implementación:**
```javascript
function editBlock(blockId) {
    const block = blocks.find(b => b.id === blockId);
    if (!block) return;
    
    // Abrir modal según tipo
    if (block.type === 'texto') {
        openTextEditor(block);
    } else if (block.type === 'video') {
        openVideoEditor(block);
    } else if (block.type === 'redes_sociales') {
        openSocialEditor(block);
    }
}
```

**Archivos a modificar:**
- `demo/templates/customizer.html` - Añadir función editBlock
- `demo/themes/restaurante-moderno/template.html` - Hacer bloques clickeables

---

### 6. 🔄 Guardado Automático de Orden (Drag & Drop)

**Estado:** Pendiente

**Requisito:**
- Al arrastrar y soltar bloques, guardar orden automáticamente
- No esperar a añadir/eliminar

**Implementación:**
```javascript
function handleDrop(e) {
    e.preventDefault();
    // Reordenar bloques
    const newOrder = Array.from(document.querySelectorAll('.gk-block'))
        .map(block => block.dataset.blockId);
    
    // Guardar orden inmediatamente
    fetch('/api/customizer/reorder-blocks', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            site_id: siteId,
            block_ids: newOrder
        })
    });
}
```

**Archivos a modificar:**
- `demo/themes/restaurante-moderno/template.html` - Mejorar drag & drop
- `demo/templates/customizer.html` - Guardar orden automáticamente

---

## 🚨 PROBLEMAS CRÍTICOS (REHACER COMPLETAMENTE)

**Ver documento completo:** `PROBLEMAS_CRITICOS_CUSTOMIZER.md`

### Problemas Identificados:
1. ❌ **Diseño horrible** - No se parece a WordPress
2. ❌ **Colores horribles** - No usa paleta WordPress
3. ❌ **Guardado inconsistente** - Algunas cosas guardan, otras no
4. ❌ **No hay botón Cancelar** - Hay que refrescar o salir
5. ❌ **Mapa no funciona**
6. ❌ **No hay WhatsApp flotante**
7. ❌ **No hay scroll suave**
8. ❌ **No hay iconos a elegir** (solo emojis)

**Solución:** REHACER COMPLETAMENTE copiando EXACTAMENTE WordPress Customizer

---

## 📝 CHECKLIST DE IMPLEMENTACIÓN

### Prioridad CRÍTICA (REHACER TODO)
- [ ] **Rehacer diseño visual** - Copiar EXACTAMENTE WordPress
- [ ] **Rehacer sistema de guardado** - Botón "Guardar y Publicar" + "Descartar"
- [ ] **Arreglar mapa** - Generar automáticamente desde dirección
- [ ] **Añadir WhatsApp flotante** - Configurable desde sidebar
- [ ] **Añadir selector de iconos** - Dashicons o Font Awesome
- [ ] **Añadir scroll suave** - Mejorar navegación

### Prioridad Alta
- [ ] Editar contenido de bloques existentes
- [ ] Upload de archivos (drag & drop)

### Prioridad Media
- [ ] Eliminar/ocultar secciones
- [ ] Edición de contenido de bloques
- [ ] Guardado automático de orden

### Prioridad Baja
- [ ] Mejoras de UI/UX
- [ ] Validaciones adicionales
- [ ] Optimizaciones de rendimiento

---

## 🔗 REFERENCIAS

- WordPress: Sistema de secciones ocultables
- Elementor: Drag & drop de bloques
- Google Maps: Embed sin API key (búsqueda directa)

---

## 📌 NOTAS

- El menú de platos ya funciona correctamente (añadir/eliminar) ✅
- Los iconos de redes sociales ya están implementados ✅
- **El sistema de bloques está COMPLETAMENTE funcional (añadir/eliminar/listar) ✅**
- **Hash de implementación:** `gkachele-bloques-funcionales-20250115-001`

---

**Última actualización:** 2025-01-15  
**Hash:** `gkachele-pendientes-20250115-004`  
**Próxima sesión:** **REHACER COMPLETAMENTE EL CUSTOMIZER** - Ver `PROBLEMAS_CRITICOS_CUSTOMIZER.md`