# Personalización de Módulos por Demo

## Resumen

Este documento explica cómo personalizar las vistas de módulos para demos específicos sin afectar el módulo base. Este patrón permite que cada demo tenga su propia presentación de los módulos mientras mantiene la funcionalidad central intacta.

## Arquitectura del Sistema

### Estructura de Módulos

Los módulos están organizados en:
```
resources/views/modules/{module-name}/
├── admin/              # Vistas de administración
└── frontend/           # Vistas públicas
    ├── index.blade.php
    ├── show.blade.php
    └── partials/
        ├── dynamic-header.blade.php
        └── ...
```

### Estructura de Demos

Los demos tienen vistas específicas en:
```
resources/views/modules/cd-base/frontend/demos/
├── demo-photography-3/
├── demo-law-firm-2/
└── ...
```

### Funciones Helper Clave

- **`get_active_demo()`**: Obtiene el demo activo configurado en `config/cd-system.php`
- **`get_theme_demo()`**: Alias de `get_active_demo()` para compatibilidad
- **`view()->exists()`**: Verifica si existe una vista antes de incluirla

## Patrón de Personalización

### Opción 1: Condicionales en la Vista Base (Recomendado)

Esta es la opción más simple y directa. Se usa cuando la personalización es menor (ocultar/mostrar elementos, cambiar clases CSS, etc.).

**Ejemplo: Ocultar sidebar en Gallery para demo-photography-3**

```php
@php
    // Detectar el demo activo
    $activeDemo = get_active_demo();
    $isPhotography3 = ($activeDemo === 'demo-photography-3');
    
    // Determinar clases CSS según el demo
    $sidebarColClass = $isPhotography3 ? 'd-none' : 'col-lg-3 order-2 order-lg-1';
    $contentColClass = $isPhotography3 ? 'col-12' : 'col-lg-9 order-1 order-lg-2';
@endphp

{{-- Sidebar (oculto en demo-photography-3) --}}
@if(!$isPhotography3)
<div class="{{ $sidebarColClass }}">
    <aside class="sidebar">
        {{-- Contenido del sidebar --}}
    </aside>
</div>
@endif

{{-- Contenido principal --}}
<div class="{{ $contentColClass }}">
    {{-- Contenido de la galería --}}
</div>
```

**Ventajas:**
- ✅ Simple y directo
- ✅ No requiere crear archivos adicionales
- ✅ Fácil de mantener
- ✅ Cambios localizados en un solo archivo

**Desventajas:**
- ⚠️ Puede hacer el archivo más largo si hay muchas personalizaciones
- ⚠️ Mejor para cambios pequeños o medianos

### Opción 2: Vistas Específicas por Demo

Para personalizaciones más extensas, se pueden crear vistas específicas del demo.

**Estructura propuesta:**
```
resources/views/modules/{module}/frontend/
├── index.blade.php                    # Vista base
├── demos/                             # Vistas específicas por demo
│   └── demo-photography-3/
│       └── index.blade.php
└── partials/
    └── dynamic-header.blade.php
```

**Implementación en el controlador:**
```php
public function index()
{
    $activeDemo = get_active_demo();
    
    // Intentar cargar vista específica del demo
    $demoView = "modules.gallery.frontend.demos.{$activeDemo}.index";
    
    if (view()->exists($demoView)) {
        return view($demoView, $data);
    }
    
    // Fallback a vista base
    return view('modules.gallery.frontend.index', $data);
}
```

**Ventajas:**
- ✅ Separación clara de código
- ✅ Ideal para personalizaciones extensas
- ✅ Fácil de mantener cuando hay muchas diferencias

**Desventajas:**
- ⚠️ Requiere modificar el controlador
- ⚠️ Puede duplicar código si no se estructura bien
- ⚠️ Más archivos que mantener

### Opción 3: Partials Específicos por Demo

Para personalizar secciones específicas (como headers, sidebars, footers).

**Estructura:**
```
resources/views/modules/{module}/frontend/partials/
├── dynamic-header.blade.php          # Ya implementado
├── sidebar.blade.php                  # Partial base
└── demos/
    └── demo-photography-3/
        └── sidebar.blade.php          # Override para este demo
```

**Uso en la vista:**
```php
@php
    $activeDemo = get_active_demo();
    $sidebarView = "modules.gallery.frontend.partials.demos.{$activeDemo}.sidebar";
    if (!view()->exists($sidebarView)) {
        $sidebarView = "modules.gallery.frontend.partials.sidebar";
    }
@endphp

@include($sidebarView)
```

**Ventajas:**
- ✅ Reutiliza la estructura base
- ✅ Solo personaliza lo necesario
- ✅ Mantiene el código organizado

## Ejemplo Real: Gallery Module - Ocultar Sidebar en demo-photography-3

### Implementación

**Archivo:** `resources/views/modules/gallery/frontend/index.blade.php`

```php
@php
    // Detectar si el demo activo es demo-photography-3
    $activeDemo = get_active_demo();
    $isPhotography3 = ($activeDemo === 'demo-photography-3');
    
    // Determinar clases CSS según si hay sidebar o no
    $sidebarColClass = $isPhotography3 ? 'd-none' : 'col-lg-3 order-2 order-lg-1';
    $contentColClass = $isPhotography3 ? 'col-12' : 'col-lg-9 order-1 order-lg-2';
@endphp

{{-- Sidebar de navegación (oculto en demo-photography-3) --}}
@if(!$isPhotography3)
<div class="{{ $sidebarColClass }}">
    <aside class="sidebar position-sticky" style="top: 100px;">
        {{-- Contenido del sidebar --}}
    </aside>
</div>
@endif

{{-- Contenido principal de la galería --}}
<div class="{{ $contentColClass }}">
    {{-- Contenido de la galería --}}
</div>
```

### Resultado

- **En otros demos**: El sidebar se muestra normalmente (col-lg-3) y el contenido ocupa col-lg-9
- **En demo-photography-3**: El sidebar está oculto y el contenido ocupa todo el ancho (col-12)

## Mejores Prácticas

### 1. Usar Variables PHP al Inicio

Siempre detecta el demo activo al inicio del archivo para evitar repetir código:

```php
@php
    $activeDemo = get_active_demo();
    $isDemoX = ($activeDemo === 'demo-x');
    $isDemoY = ($activeDemo === 'demo-y');
@endphp
```

### 2. Documentar las Personalizaciones

Agrega comentarios explicando por qué se hace la personalización:

```php
{{-- Sidebar de navegación (oculto en demo-photography-3) --}}
@if(!$isPhotography3)
    {{-- Contenido --}}
@endif
```

### 3. Mantener la Vista Base Funcional

Asegúrate de que la vista base funcione correctamente cuando no hay personalizaciones específicas del demo.

### 4. Usar Condicionales Consistentes

Si varios módulos necesitan la misma personalización, considera crear un helper:

```php
// En app/helpers.php
if (!function_exists('is_demo_photography_3')) {
    function is_demo_photography_3(): bool
    {
        return get_active_demo() === 'demo-photography-3';
    }
}
```

## Casos de Uso Comunes

### 1. Ocultar/Mostrar Elementos

```php
@if(!$isPhotography3)
    <div class="sidebar">
        {{-- Sidebar content --}}
    </div>
@endif
```

### 2. Cambiar Clases CSS

```php
<div class="{{ $isPhotography3 ? 'col-12' : 'col-lg-9' }}">
    {{-- Content --}}
</div>
```

### 3. Cambiar Estilos Inline

```php
<section class="section" style="{{ $isPhotography3 ? 'padding-top: 4rem;' : 'padding-top: 8rem;' }}">
    {{-- Content --}}
</section>
```

### 4. Incluir Partials Diferentes

```php
@if($isPhotography3)
    @include('modules.gallery.frontend.partials.photography-header')
@else
    @include('modules.gallery.frontend.partials.default-header')
@endif
```

## Configuración del Demo Activo

El demo activo se configura en `config/cd-system.php`:

```php
'theme' => [
    'demo' => 'demo-photography-3',  // Cambiar aquí
    'skin' => 'auto',
    // ...
],
```

## Verificación

Para verificar qué demo está activo, puedes usar:

```php
dd(get_active_demo()); // Muestra el demo activo
```

O en la vista:

```php
{{-- Debug: {{ get_active_demo() }} --}}
```

## Referencias

- **Dynamic Headers**: Ver `resources/views/modules/*/frontend/partials/dynamic-header.blade.php`
- **Helper Functions**: Ver `app/helpers.php`
- **Page Header Helper**: Ver `app/Helpers/PageHeaderHelper.php`
- **Configuración**: Ver `config/cd-system.php` y `config/page-headers.php`

## Conclusión

El patrón de personalización por demo permite mantener la modularidad del sistema mientras se adapta a las necesidades específicas de cada demo. La opción 1 (condicionales) es la más recomendada para la mayoría de casos, mientras que las opciones 2 y 3 son útiles para personalizaciones más extensas.