@extends('layouts.app')

@section('title', 'Crear Plantilla de Correo')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-file-alt me-2"></i>Crear Plantilla de Correo
                    </h3>
                    <div>
                        <a href="{{ route('correo.plantillas') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Volver
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('correo.guardar-plantilla') }}" method="POST">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="nombre" class="form-label">Nombre de la Plantilla *</label>
                                    <input type="text" name="nombre" id="nombre" 
                                           class="form-control @error('nombre') is-invalid @enderror" 
                                           value="{{ old('nombre') }}" required>
                                    @error('nombre')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="slug" class="form-label">Slug *</label>
                                    <input type="text" name="slug" id="slug" 
                                           class="form-control @error('slug') is-invalid @enderror" 
                                           value="{{ old('slug') }}" required>
                                    @error('slug')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Identificador único para la plantilla (ej: bienvenida-usuario)</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="categoria" class="form-label">Categoría *</label>
                                    <select name="categoria" id="categoria" 
                                            class="form-control @error('categoria') is-invalid @enderror" required>
                                        <option value="">Seleccionar categoría</option>
                                        <option value="bienvenida" {{ old('categoria') == 'bienvenida' ? 'selected' : '' }}>Bienvenida</option>
                                        <option value="notificacion" {{ old('categoria') == 'notificacion' ? 'selected' : '' }}>Notificación</option>
                                        <option value="recordatorio" {{ old('categoria') == 'recordatorio' ? 'selected' : '' }}>Recordatorio</option>
                                        <option value="promocion" {{ old('categoria') == 'promocion' ? 'selected' : '' }}>Promoción</option>
                                        <option value="sistema" {{ old('categoria') == 'sistema' ? 'selected' : '' }}>Sistema</option>
                                    </select>
                                    @error('categoria')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="asunto" class="form-label">Asunto del Correo *</label>
                                    <input type="text" name="asunto" id="asunto" 
                                           class="form-control @error('asunto') is-invalid @enderror" 
                                           value="{{ old('asunto') }}" required>
                                    @error('asunto')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Puedes usar variables como @{{nombre}}, @{{email}}, etc.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="cuerpo" class="form-label">Cuerpo del Correo *</label>
                                    <textarea name="contenido_html" id="cuerpo" rows="15" 
                                              class="form-control @error('contenido_html') is-invalid @enderror" required>{{ old('contenido_html') }}</textarea>
                                    @error('contenido_html')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Puedes usar HTML y variables como @{{nombre}}, @{{email}}, etc.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="variables" class="form-label">Variables Disponibles</label>
                                    <div class="border p-3 rounded">
                                        <div class="form-check">
                                            <input type="checkbox" name="variables[]" value="nombre" id="var_nombre" 
                                                   class="form-check-input" {{ in_array('nombre', old('variables', [])) ? 'checked' : '' }}>
                                            <label for="var_nombre" class="form-check-label">@{{nombre}}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="variables[]" value="email" id="var_email" 
                                                   class="form-check-input" {{ in_array('email', old('variables', [])) ? 'checked' : '' }}>
                                            <label for="var_email" class="form-check-label">@{{email}}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="variables[]" value="fecha" id="var_fecha" 
                                                   class="form-check-input" {{ in_array('fecha', old('variables', [])) ? 'checked' : '' }}>
                                            <label for="var_fecha" class="form-check-label">@{{fecha}}</label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" name="variables[]" value="empresa" id="var_empresa" 
                                                   class="form-check-input" {{ in_array('empresa', old('variables', [])) ? 'checked' : '' }}>
                                            <label for="var_empresa" class="form-check-label">@{{empresa}}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="variables[]" value="telefono" id="var_telefono" 
                                                   class="form-check-input" {{ in_array('telefono', old('variables', [])) ? 'checked' : '' }}>
                                            <label for="var_telefono" class="form-check-label">@{{telefono}}</label>
                                        </div>
                                    </div>
                                    @error('variables')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="descripcion" class="form-label">Descripción</label>
                                    <textarea name="descripcion" id="descripcion" rows="4" 
                                              class="form-control @error('descripcion') is-invalid @enderror">{{ old('descripcion') }}</textarea>
                                    @error('descripcion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-check mb-3">
                                    <input type="checkbox" name="activa" id="activa" 
                                           class="form-check-input" {{ old('activa', true) ? 'checked' : '' }}>
                                    <label for="activa" class="form-check-label">
                                        Plantilla activa
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-info" onclick="previewPlantilla()">
                                        <i class="fas fa-eye me-2"></i>Vista Previa
                                    </button>
                                    <div>
                                        <a href="{{ route('correo.plantillas') }}" class="btn btn-secondary me-2">
                                            <i class="fas fa-times me-2"></i>Cancelar
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-2"></i>Guardar Plantilla
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para vista previa -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Vista Previa de Plantilla</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="previewContent">
                    <!-- Contenido de la vista previa se cargará aquí -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Generar slug automáticamente basado en el nombre
document.getElementById('nombre').addEventListener('input', function() {
    const nombre = this.value;
    const slug = nombre.toLowerCase()
        .replace(/[^a-z0-9\s-]/g, '') // Remover caracteres especiales
        .replace(/\s+/g, '-') // Reemplazar espacios con guiones
        .replace(/-+/g, '-') // Reemplazar múltiples guiones con uno solo
        .trim('-'); // Remover guiones al inicio y final
    
    document.getElementById('slug').value = slug;
});

function previewPlantilla() {
    const nombre = document.getElementById('nombre').value || 'Nombre de Ejemplo';
    const asunto = document.getElementById('asunto').value || 'Asunto de Ejemplo';
    const cuerpo = document.getElementById('cuerpo').value || 'Cuerpo de ejemplo';
    
    // Reemplazar variables con datos de ejemplo
    let asuntoPreview = asunto;
    let cuerpoPreview = cuerpo;
    
    const variablesEjemplo = {
        'nombre': 'Juan Pérez',
        'email': 'juan@ejemplo.com',
        'fecha': new Date().toLocaleDateString('es-ES'),
        'empresa': 'Mi Empresa',
        'telefono': '+1234567890'
    };
    
    Object.keys(variablesEjemplo).forEach(variable => {
        const regex = new RegExp(`\\{\\{${variable}\\}\\}`, 'g');
        asuntoPreview = asuntoPreview.replace(regex, variablesEjemplo[variable]);
        cuerpoPreview = cuerpoPreview.replace(regex, variablesEjemplo[variable]);
    });
    
    const previewContent = `
        <div class="card">
            <div class="card-header">
                <h6><strong>Asunto:</strong> ${asuntoPreview}</h6>
            </div>
            <div class="card-body">
                <div style="white-space: pre-wrap;">${cuerpoPreview}</div>
            </div>
        </div>
    `;
    
    document.getElementById('previewContent').innerHTML = previewContent;
    
    const modal = new bootstrap.Modal(document.getElementById('previewModal'));
    modal.show();
}
</script>
@endpush
@endsection