# 🚀 Guía Rápida: Agregar Nuevos Demos

## 📋 Resumen Ejecutivo

Esta guía proporciona el **proceso rápido y eficiente** para agregar nuevos demos de Porto 12.1.0 al sistema CD-System, siguiendo el estándar establecido y validado.

**Tiempo estimado:** 2-4 horas por demo (dependiendo de complejidad)

---

## ✅ Estado Actual: 4 Demos Estandarizados

### Demos Disponibles y Validados:
- ✅ `demo-accounting-1` - **100% estandarizado**
- ✅ `demo-insurance` - **100% estandarizado**
- ✅ `demo-law-firm-2` - **100% estandarizado**
- ✅ `demo-construction` - **100% estandarizado** (con extensión custom)

---

## 🎯 Proceso Rápido (Checklist)

### Paso 1: Análisis del HTML Original (15 min)

```bash
# Ubicación del template Porto
cd /Users/cokecolombres/Downloads/themeforest-DR9jyGXD-porto-responsive-html5-template/HTML/

# Revisar demo-{nombre}.html
```

**Verificar:**
- [ ] Línea ~40: `css/demos/demo-{nombre}.css`
- [ ] Línea ~43: `css/skins/skin-{nombre}.css`
- [ ] Línea ~1180-1200: `js/demos/demo-{nombre}.js` (puede no existir)

**Documentar:**
- [ ] Funcionalidades especiales
- [ ] Necesidades de extensión propia

---

### Paso 2: Copiar Archivos Base (10 min)

```bash
# Desde el template Porto
PORTO_PATH="/Users/cokecolombres/Downloads/themeforest-DR9jyGXD-porto-responsive-html5-template/HTML"
PROJECT_PATH="/Applications/XAMPP/xamppfiles/htdocs/cokecolombres"
DEMO="demo-{nombre}"

# CSS Demo
cp "$PORTO_PATH/css/demos/$DEMO.css" "$PROJECT_PATH/public/template/css/demos/"

# CSS Skin
cp "$PORTO_PATH/css/skins/skin-{nombre}.css" "$PROJECT_PATH/public/template/css/skins/"

# JS Demo (solo si existe en Porto)
if [ -f "$PORTO_PATH/js/demos/$DEMO.js" ]; then
    cp "$PORTO_PATH/js/demos/$DEMO.js" "$PROJECT_PATH/public/template/js/demos/"
fi

# Assets de imágenes
cp -r "$PORTO_PATH/img/demos/{nombre}"/* "$PROJECT_PATH/public/cd-project/img/demos/{nombre}/"
```

---

### Paso 3: Crear Extensiones Custom (Si Necesario) (30 min)

#### JavaScript Custom:
```bash
# Solo si necesitamos funcionalidad adicional
touch "$PROJECT_PATH/public/template/js/demos/demo-{nombre}-custom.js"
```

**Template del archivo:**
```javascript
/*
Name: 			{nombre} - Custom Extensions
Written by: 	CD-System (Compañía Digital)
Base: 			Porto 12.1.0
Purpose: 		Custom JavaScript extensions for demo-{nombre}
				Includes: [descripción de funcionalidades]
				
Note: 			This is a CD-System extension.
*/

(function ($) {
	'use strict';
	
	// Tu código custom aquí
	
}).apply(this, [jQuery]);
```

#### CSS Custom:
```bash
# Solo si necesitamos estilos adicionales
touch "$PROJECT_PATH/public/template/css/demos/demo-{nombre}-custom.css"
```

---

### Paso 4: Crear Vistas Blade (2-3 horas)

#### 4.1: Header
```bash
# Crear archivo
touch "resources/views/layout/front/headers/demo-{nombre}.blade.php"
```

**Adaptaciones necesarias:**
- ✅ `<a href="demo-{nombre}.html">` → `{{ route('front.homepage') }}`
- ✅ `<img src="img/...">` → `{{ asset('cd-project/img/...') }}`
- ✅ Textos estáticos → `{{ __('Texto') }}`
- ✅ Navegación estática → `@php $navigation = get_dynamic_navigation('header'); @endphp`
- ✅ Datos estáticos → `{{ config('site.contact.phone') }}`

#### 4.2: Footer
```bash
# Crear archivo
touch "resources/views/layout/front/footers/demo-{nombre}.blade.php"
```

**Adaptaciones necesarias:**
- ✅ Mismas que header
- ✅ Formulario newsletter → `{{ route('front.newsletter.subscribe') }}`
- ✅ Redes sociales → `@foreach(config('site.social_media') as $social)`

#### 4.3: Vistas de Contenido (OBLIGATORIAS)
```bash
# Crear directorio
mkdir -p "resources/views/modules/cd-base/frontend/demos/demo-{nombre}"

# Crear archivos OBLIGATORIOS del demo
touch "resources/views/modules/cd-base/frontend/demos/demo-{nombre}/welcome.blade.php"
touch "resources/views/modules/cd-base/frontend/demos/demo-{nombre}/about.blade.php"
touch "resources/views/modules/cd-base/frontend/demos/demo-{nombre}/contact.blade.php"
```

**⚠️ IMPORTANTE:** 
- Estas 3 vistas son **OBLIGATORIAS** para cada demo:
  - `welcome.blade.php` → Página principal (homepage)
  - `about.blade.php` → Página "Quiénes Somos" / "About Us"
  - `contact.blade.php` → Página de contacto
- Las demás vistas (projects, services, blog, team, etc.) **corresponden a módulos** y se gestionan por separado en sus respectivos controladores y vistas de módulos.

**Adaptaciones necesarias:**
- ✅ Extender layout: `@extends('layout.front.master')`
- ✅ Rutas HTML → `route()` (**⚠️ IMPORTANTE:** Ver [RUTAS-ESTANDAR-DEMOS.md](RUTAS-ESTANDAR-DEMOS.md))
- ✅ Assets → `asset()`
- ✅ Textos → `__()`
- ✅ Integrar módulos: `@if(is_module_active('services'))`
- ✅ Datos dinámicos: `$services`, `$posts`, etc.

**📋 Referencia de Rutas:**
- **Servicios:** `route('frontend.services.detail', $slug)` (NO `show`)
- **Proyectos:** `route('frontend.projects.show', $slug)`
- **Blog:** `route('blog.post', $slug)` (NO `frontend.blog.show`)
- **News:** `route('frontend.news.show', $slug)`
- **Páginas básicas:** `route('front.homepage')`, `route('front.about')`, `route('front.contact')`

**Ver documentación completa:** [RUTAS-ESTANDAR-DEMOS.md](RUTAS-ESTANDAR-DEMOS.md)
- ✅ Para `about.blade.php`: Buscar `demo-{nombre}-who-we-are.html` en Porto
- ✅ Para `contact.blade.php`: Buscar `demo-{nombre}-contact-us.html` en Porto

---

### Paso 5: Configurar Sistema (5 min)

#### 5.1: Skin Mapping
```php
// En app/helpers.php → get_demo_skin_mapping()
'demo-{nombre}' => 'skin-{nombre}',
```

#### 5.2: Layout Mapping
```php
// En app/helpers.php → get_demo_layout_mapping()
'demo-{nombre}' => [
    'header' => 'demo-{nombre}',
    'footer' => 'demo-{nombre}',
    'sidebar' => 'default',
    'description' => 'Template para [descripción]',
    'features' => ['feature1', 'feature2', ...],
    'extensions' => [
        'js' => true/false,   // Tiene JS custom?
        'css' => true/false, // Tiene CSS custom?
    ],
],
```

---

### Paso 6: Validación (15 min)

```bash
# Ejecutar script de validación (si existe)
./scripts/validate-demo.sh demo-{nombre}
```

**Checklist manual:**
- [ ] Todos los archivos base copiados
- [ ] Extensiones custom creadas (si necesario)
- [ ] Vistas Blade adaptadas
- [ ] Configuración en helpers.php
- [ ] Probar en navegador
- [ ] Verificar carga de assets
- [ ] Validar responsive

---

## 📐 Estructura de Archivos (Referencia Rápida)

### Archivos Obligatorios:
```
✅ public/template/css/demos/demo-{nombre}.css
✅ public/template/css/skins/skin-{nombre}.css
✅ resources/views/layout/front/headers/demo-{nombre}.blade.php
✅ resources/views/layout/front/footers/demo-{nombre}.blade.php
✅ resources/views/modules/cd-base/frontend/demos/demo-{nombre}/welcome.blade.php
✅ resources/views/modules/cd-base/frontend/demos/demo-{nombre}/about.blade.php
✅ resources/views/modules/cd-base/frontend/demos/demo-{nombre}/contact.blade.php
✅ public/cd-project/img/demos/{nombre}/ (carpeta con imágenes)
✅ Configuración en app/helpers.php
```

### Archivos Opcionales:
```
⚠️ public/template/js/demos/demo-{nombre}.js (solo si existe en Porto)
⚠️ public/template/js/demos/demo-{nombre}-custom.js (si necesitamos extensión)
⚠️ public/template/css/demos/demo-{nombre}-custom.css (si necesitamos estilos)
```

---

## 🔄 Adaptaciones Comunes (Copy-Paste)

### Header - Logo:
```blade
<a href="{{ route('front.homepage') }}">
    <img alt="{{ config('site.assets.main_logo_alt') }}" 
         src="{{ asset(config('site.assets.main_logo')) }}">
</a>
```

### Header - Navegación:
```blade
@php
    $navigation = get_dynamic_navigation('header');
@endphp
@foreach($navigation as $key => $item)
    @if($item['active'])
        <li class="{{ request()->is(str_replace(url('/'), '', $item['url']) . '*') ? 'active' : '' }}">
            <a href="{{ $item['url'] }}">{{ __($item['title']) }}</a>
        </li>
    @endif
@endforeach
```

### Footer - Redes Sociales:
```blade
@foreach(config('site.social_media') as $key => $social)
    @if($social['active'])
        <li class="social-icons-{{ $key }}">
            <a href="{{ $social['url'] }}" target="_blank">
                <i class="{{ $social['icon'] }}"></i>
            </a>
        </li>
    @endif
@endforeach
```

### Footer - Newsletter:
```blade
@if(is_module_active('newsletter'))
    <form action="{{ route('front.newsletter.subscribe') }}" method="POST">
        @csrf
        <input type="email" name="newsletterEmail" required>
        <button type="submit">{{ __('Submit') }}</button>
    </form>
@endif
```

### Vistas - Integrar Servicios:
```blade
@if(is_module_active('services'))
    @foreach($services ?? [] as $service)
        <div>
            <h4>{{ $service->title }}</h4>
            <p>{{ $service->description }}</p>
            <a href="{{ route('frontend.services.detail', $service->slug) }}">
                {{ __('View Details') }}
            </a>
        </div>
    @endforeach
@endif
```

### Vistas - Integrar Blog:
```blade
@if(is_module_active('blog'))
    @forelse($recentPosts as $post)
        <article>
            <h4><a href="{{ route('blog.post', $post->slug) }}">{{ $post->title }}</a></h4>
            <p>{{ Str::limit($post->excerpt, 100) }}</p>
        </article>
    @empty
        <p>{{ __('No posts available') }}</p>
    @endforelse
@endif
```

---

## 📊 Matriz de Decisión Rápida

### ¿Tiene JS en Porto?
```
SÍ → Copiar demo-{nombre}.js
NO → ¿Necesitamos funcionalidad?
     SÍ → Crear demo-{nombre}-custom.js
     NO → No crear nada
```

### ¿Necesitamos CSS Custom?
```
SÍ → Crear demo-{nombre}-custom.css
NO → No crear nada
```

---

## 🎯 Ejemplo Completo: Nuevo Demo

### Supongamos: `demo-medical`

#### 1. Análisis (15 min)
- ✅ Revisar `demo-medical.html` en Porto
- ✅ Identificar: CSS, Skin, JS (si existe)
- ✅ Documentar funcionalidades

#### 2. Copiar Base (10 min)
```bash
cp Porto/HTML/css/demos/demo-medical.css public/template/css/demos/
cp Porto/HTML/css/skins/skin-medical.css public/template/css/skins/
# JS no existe en Porto, no copiar
cp -r Porto/HTML/img/demos/medical/* public/cd-project/img/demos/medical/
```

#### 3. Extensiones (0 min - no necesarias)
- ❌ No crear JS custom (no necesario)
- ❌ No crear CSS custom (no necesario)

#### 4. Vistas Blade (2-3 horas)
- ✅ Adaptar header
- ✅ Adaptar footer
- ✅ Adaptar welcome, about, contact

#### 5. Configurar (5 min)
```php
// Skin mapping
'demo-medical' => 'skin-medical',

// Layout mapping
'demo-medical' => [
    'header' => 'demo-medical',
    'footer' => 'demo-medical',
    'sidebar' => 'default',
    'description' => 'Template para clínicas y servicios médicos',
    'features' => ['appointments', 'services', 'doctors'],
    'extensions' => [
        'js' => false,
        'css' => false,
    ],
],
```

#### 6. Validar (15 min)
- ✅ Probar en navegador
- ✅ Verificar funcionalidad

**Tiempo total:** ~3 horas

---

## 📝 Checklist Final Rápido

### Pre-Implementación:
- [ ] HTML original revisado
- [ ] Archivos necesarios identificados

### Implementación:
- [ ] Archivos base copiados
- [ ] Extensiones creadas (si necesario)
- [ ] Vistas Blade adaptadas
- [ ] Configuración completa

### Post-Implementación:
- [ ] Validación en navegador
- [ ] Documentación actualizada

---

## ✅ Conclusión

### Estado: ✅ **LISTO PARA ESCALAR**

**4 Demos Estandarizados:**
- ✅ `demo-accounting-1`
- ✅ `demo-insurance`
- ✅ `demo-law-firm-2`
- ✅ `demo-construction`

**Sistema Implementado:**
- ✅ Estructura estándar establecida
- ✅ Proceso documentado
- ✅ Guía rápida disponible
- ✅ Listo para nuevos demos

**Próximos Pasos:**
1. Seguir esta guía para nuevos demos
2. Mantener consistencia con el estándar
3. Documentar extensiones custom
4. Validar antes de producción

---

**Versión:** 1.0
**Última actualización:** $(date)
**Estado:** ✅ Listo para uso