@extends('layouts.app')

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

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-envelope me-2 text-primary"></i>Nueva Plantilla de Correo
            </h1>
            <p class="text-muted mb-0 small">Crea una nueva plantilla de correo electrónico para el sistema</p>
        </div>
        <div>
            <a href="{{ route('plantillas.correo.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Formulario -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Información de la Plantilla</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('plantillas.correo.store') }}">
                        @csrf

                        <div class="mb-3">
                            <label for="nombre" class="form-label">
                                Nombre de la Plantilla <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control @error('nombre') is-invalid @enderror" 
                                   id="nombre" 
                                   name="nombre" 
                                   value="{{ old('nombre') }}" 
                                   required 
                                   placeholder="Ej: Notificación de Factura">
                            @error('nombre')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Ingrese un nombre descriptivo para la plantilla</small>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="categoria" class="form-label">
                                        Categoría <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select @error('categoria') is-invalid @enderror" 
                                            id="categoria" 
                                            name="categoria" 
                                            required>
                                        <option value="">Seleccionar categoría</option>
                                        @foreach($categorias as $key => $label)
                                            <option value="{{ $key }}" {{ old('categoria') == $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('categoria')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check mt-4 pt-2">
                                        <input class="form-check-input" 
                                               type="checkbox" 
                                               id="activa" 
                                               name="activa" 
                                               value="1"
                                               {{ old('activa') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="activa">
                                            Plantilla activa
                                        </label>
                                    </div>
                                    <small class="form-text text-muted">Si se desmarca, la plantilla no estará disponible para uso</small>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="asunto" class="form-label">
                                Asunto del Correo <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control @error('asunto') is-invalid @enderror" 
                                   id="asunto" 
                                   name="asunto" 
                                   value="{{ old('asunto') }}" 
                                   required 
                                   placeholder="Ej: Notificación de Factura @{{numero_factura}}">
                            @error('asunto')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Puede usar variables como @{{nombre}}, @{{numero_factura}}, etc.</small>
                        </div>

                        <div class="mb-3">
                            <label for="cuerpo" class="form-label">
                                Cuerpo del Correo (HTML) <span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control @error('cuerpo') is-invalid @enderror" 
                                      id="cuerpo" 
                                      name="cuerpo" 
                                      rows="15" 
                                      required 
                                      placeholder="Ingrese el contenido HTML del correo...">{{ old('cuerpo') }}</textarea>
                            @error('cuerpo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Puede usar HTML y variables como @{{nombre}}, @{{empresa}}, @{{fecha}}, etc.
                            </small>
                        </div>

                        <div class="mb-3">
                            <label for="variables" class="form-label">
                                Variables Disponibles
                            </label>
                            <textarea class="form-control @error('variables') is-invalid @enderror" 
                                      id="variables" 
                                      name="variables" 
                                      rows="3" 
                                      placeholder="Ej: nombre, email, numero_factura, fecha (separadas por comas)">{{ old('variables') }}</textarea>
                            @error('variables')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Liste las variables disponibles separadas por comas. Estas variables pueden usarse en el asunto y cuerpo con @{{variable}}
                            </small>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('plantillas.correo.index') }}" class="btn btn-secondary">
                                <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>
                    </form>
                </div>
            </div>
        </div>

        <!-- Panel de Ayuda -->
        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i>Información de Ayuda</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info border-0 mb-3">
                        <h6 class="alert-heading">
                            <i class="fas fa-info-circle me-1"></i>Variables Disponibles
                        </h6>
                        <p class="mb-2 small">Puede usar variables en el formato <code>@{{variable}}</code></p>
                        <ul class="small mb-0">
                            <li><code>@{{nombre}}</code> - Nombre del destinatario</li>
                            <li><code>@{{email}}</code> - Email del destinatario</li>
                            <li><code>@{{empresa}}</code> - Nombre de la empresa</li>
                            <li><code>@{{fecha}}</code> - Fecha actual</li>
                            <li><code>@{{numero_factura}}</code> - Número de factura</li>
                            <li><code>@{{monto}}</code> - Monto total</li>
                        </ul>
                    </div>

                    <div class="alert alert-warning border-0 mb-3">
                        <h6 class="alert-heading">
                            <i class="fas fa-exclamation-triangle me-1"></i>Formato HTML
                        </h6>
                        <p class="mb-0 small">
                            El cuerpo del correo acepta HTML. Puede usar etiquetas como &lt;h1&gt;, &lt;p&gt;, &lt;strong&gt;, &lt;a&gt;, etc.
                        </p>
                    </div>

                    <div class="alert alert-success border-0">
                        <h6 class="alert-heading">
                            <i class="fas fa-check-circle me-1"></i>Ejemplo de Plantilla
                        </h6>
                        <div class="small">
                            <p class="mb-1"><strong>Asunto:</strong></p>
                            <code class="d-block mb-2">Factura @{{numero_factura}} - @{{empresa}}</code>
                            <p class="mb-1"><strong>Cuerpo:</strong></p>
                            <code class="d-block">
                                &lt;h1&gt;Hola @{{nombre}}&lt;/h1&gt;<br>
                                &lt;p&gt;Su factura @{{numero_factura}} está lista.&lt;/p&gt;
                            </code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .card {
        border-radius: 8px;
    }
    
    .form-label {
        font-weight: 600;
        color: #495057;
    }
    
    .form-control:focus,
    .form-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }
    
    code {
        background-color: #f8f9fa;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 0.9em;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Previsualización de variables en tiempo real (opcional)
    $('#cuerpo, #asunto').on('input', function() {
        // Puedes agregar aquí funcionalidad de preview si lo deseas
    });
});
</script>
@endpush