# PWA Icon Upload Implementation

## Cambios Realizados

### 1. Migración de Base de Datos ✅
**Archivo**: `database/migrations/2025_11_20_151341_add_pwa_icon_to_events_table.php`

- Agrega columna `pwa_icon` a la tabla `events`
- Campo nullable después de `header_logo`
- **Estado**: Migración ejecutada exitosamente ✅

```bash
php artisan migrate
```

### 2. Modelo Event ✅
**Archivo**: `app/Models/Event.php`

- Agregado `pwa_icon` al array `$fillable`
- Permite asignación masiva del campo

### 3. Controlador EventController ✅
**Archivo**: `app/Http/Controllers/Admin/EventController.php`

**Validación**:
```php
'pwa_icon' => 'nullable|image|mimes:png|max:2048|dimensions:min_width=512,min_height=512'
```

**Características**:
- Solo acepta PNG
- Mínimo 512x512px
- Máximo 2MB
- Guarda en `storage/app/public/events/pwa-icons/`
- Elimina icono anterior al subir uno nuevo
- Limpia caché de iconos generados

### 4. Vista Admin ✅
**Archivo**: `resources/views/admin/events/edit.blade.php`

**Nuevo campo agregado después del header_logo**:
- Input file con preview
- Muestra icono actual si existe
- Help text explicativo: "PNG de 512x512px con fondo incluido"
- Preview con bordes redondeados y sombra
- Función JavaScript `previewPWAIcon()` para vista previa

### 5. Controlador PublicManifestController ✅
**Archivo**: `app/Http/Controllers/PublicManifestController.php`

**Lógica actualizada**:

1. **Método `icon()`**: 
   - **Prioridad 1**: Usa `pwa_icon` subido si existe
   - Si tamaño = 512px → devuelve original directo
   - Otros tamaños → redimensiona con `resizePWAIcon()`
   - **Prioridad 2**: Fallback a `header_logo` con generación automática
   - **Prioridad 3**: Fallback a icono por defecto

2. **Nuevo método `resizePWAIcon()`**:
   - Redimensiona el icono PWA subido a diferentes tamaños
   - Mantiene transparencia si existe
   - Cachea iconos redimensionados en `storage/app/public/pwa-icons/{event_id}/`
   - Solo genera una vez, reutiliza si existe

3. **Método `generateIcons()`**:
   - **Prioridad 1**: Usa `pwa_icon` si existe
   - **Prioridad 2**: Usa `header_logo` si existe
   - **Prioridad 3**: Iconos por defecto

## Flujo de Funcionamiento

### Caso 1: Con PWA Icon Subido (Recomendado)
1. Admin sube PNG de 512x512px con fondo incluido
2. Se guarda en `events/pwa-icons/`
3. Al solicitar icono:
   - Tamaño 512px → archivo original
   - Otros tamaños → redimensionado automáticamente
4. Resultado: **Icono perfecto sin deformaciones ni fondos blancos**

### Caso 2: Sin PWA Icon (Fallback)
1. Sistema intenta usar `header_logo`
2. Genera iconos con fondo de color del header
3. Puede tener problemas en iOS (fondos blancos, estiramientos)

## Ventajas del Nuevo Sistema

✅ **Control Total**: Diseñador crea el icono exacto que quiere  
✅ **Sin Deformaciones**: No hay cálculos de aspect ratio  
✅ **Sin Problemas de Color**: El fondo viene en el PNG  
✅ **Compatible iOS**: Funciona perfecto en iPhone y iPad  
✅ **Fácil de Usar**: Solo subir un PNG de 512x512px  
✅ **Cacheo Inteligente**: Iconos redimensionados se guardan para reutilizar  
✅ **Fallback Robusto**: Si no hay pwa_icon, usa el sistema anterior  

## Instrucciones de Uso

### Para Administradores

1. **Preparar el icono**:
   - Tamaño: 512x512px (exacto)
   - Formato: PNG
   - Fondo: Incluir el color/degradado deseado (NO transparente)
   - Diseño: Logo centrado con padding adecuado

2. **Subir el icono**:
   - Ir a `/admin/events/{id}/edit`
   - Buscar sección "Icono PWA (Opcional)"
   - Seleccionar archivo PNG
   - Guardar evento

3. **Verificar**:
   - El icono aparece en preview
   - Abrir `/events/{id}/map` en navegador
   - Verificar manifest.json: `/events/{id}/manifest.json`
   - Probar instalación PWA

### Para Desarrolladores

**Archivos modificados**:
- `database/migrations/2025_11_20_151341_add_pwa_icon_to_events_table.php`
- `app/Models/Event.php`
- `app/Http/Controllers/Admin/EventController.php`
- `app/Http/Controllers/PublicManifestController.php`
- `resources/views/admin/events/edit.blade.php`

**Deployment**:
```bash
# 1. Pull cambios en producción
git pull origin main

# 2. Correr migración
php artisan migrate

# 3. Limpiar caché de iconos antiguos (opcional)
rm -rf storage/app/public/pwa-icons/*

# 4. Limpiar caché de aplicación
php artisan cache:clear
php artisan config:clear
php artisan route:clear
```

## Testing

### Test 1: Upload y Preview
1. Ir a `/admin/events/5/edit`
2. Subir PNG de 512x512px
3. Verificar preview muestra el icono
4. Guardar y verificar se guarda correctamente

### Test 2: Manifest.json
1. Abrir: `/events/5/manifest.json`
2. Verificar sección `icons` contiene múltiples tamaños
3. Verificar URLs apuntan a `/events/5/apple-touch-icon-{size}.png`

### Test 3: Iconos Generados
1. Abrir en navegador: `/events/5/apple-touch-icon-512.png`
2. Debe devolver el icono original
3. Abrir: `/events/5/apple-touch-icon-192.png`
4. Debe devolver versión redimensionada

### Test 4: PWA Installation (iOS)
1. Abrir `/events/5/map` en Safari (iPhone)
2. Tap "Compartir" → "Agregar a pantalla de inicio"
3. Verificar icono se ve correcto (sin fondo blanco)
4. Abrir app instalada
5. Verificar funciona offline

### Test 5: PWA Installation (Android)
1. Abrir `/events/5/map` en Chrome (Android)
2. Tap menú → "Instalar aplicación"
3. Verificar icono se ve correcto
4. Abrir app instalada
5. Verificar funciona offline

## Troubleshooting

### Problema: "The image must be at least 512 pixels in width"
**Solución**: El PNG debe ser exactamente 512x512px o mayor. Usar herramienta de diseño para ajustar.

### Problema: Icono no se actualiza en PWA instalada
**Solución**: 
1. Desinstalar PWA del dispositivo
2. Limpiar caché: `rm -rf storage/app/public/pwa-icons/{event_id}/`
3. Reinstalar PWA

### Problema: "File::deleteDirectory() not found"
**Solución**: Usar `\File::deleteDirectory()` con backslash o `use Illuminate\Support\Facades\File;`

### Problema: Iconos antiguos siguen apareciendo
**Solución**: Limpiar directorio completo:
```bash
rm -rf storage/app/public/pwa-icons/*
```

## Notas Técnicas

- **Formato requerido**: PNG (no JPEG, no SVG)
- **Tamaño mínimo**: 512x512px
- **Tamaño recomendado**: Exactamente 512x512px
- **Almacenamiento**: `storage/app/public/events/pwa-icons/`
- **Caché**: `storage/app/public/pwa-icons/{event_id}/`
- **Tamaños generados**: 72, 96, 128, 144, 152, 192, 384, 512
- **Función PHP**: `imagecopyresampled()` para redimensionar
- **Transparencia**: Se mantiene si existe en el PNG original

## Estado Actual

✅ Migración ejecutada  
✅ Modelo actualizado  
✅ Controlador EventController actualizado  
✅ Controlador PublicManifestController actualizado  
✅ Vista admin actualizada  
✅ JavaScript preview agregado  
⏳ **Pendiente**: Commit y push a producción  
⏳ **Pendiente**: Testing en dispositivos reales  

## Próximos Pasos

1. **Commit cambios**:
   ```bash
   git add -A
   git commit -m "feat: Agregar campo pwa_icon para iconos PWA personalizados"
   git push origin main
   ```

2. **Deploy en producción**:
   ```bash
   ssh servidor
   cd /path/to/app
   git pull origin main
   php artisan migrate
   php artisan cache:clear
   ```

3. **Upload icono de prueba**:
   - Crear PNG 512x512px para Japan Meet
   - Subir en `/admin/events/5/edit`
   - Testear en iPhone y Android

4. **Documentar para cliente**:
   - Especificaciones del icono PWA
   - Pasos para subir
   - Ejemplos visuales