@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Crear Nueva Plantilla</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('plantillas.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nombre">Nombre *</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">
                                    <label for="slug">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
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tipo">Tipo *</label>
                                    <select name="tipo" id="tipo" class="form-control @error('tipo') is-invalid @enderror" required>
                                        <option value="">Seleccionar tipo</option>
                                        <option value="factura" {{ old('tipo') == 'factura' ? 'selected' : '' }}>Factura</option>
                                        <option value="cotizacion" {{ old('tipo') == 'cotizacion' ? 'selected' : '' }}>Cotización</option>
                                        <option value="recibo" {{ old('tipo') == 'recibo' ? 'selected' : '' }}>Recibo</option>
                                        <option value="reporte" {{ old('tipo') == 'reporte' ? 'selected' : '' }}>Reporte</option>
                                        <option value="contrato" {{ old('tipo') == 'contrato' ? 'selected' : '' }}>Contrato</option>
                                        <option value="certificado" {{ old('tipo') == 'certificado' ? 'selected' : '' }}>Certificado</option>
                                        <option value="otro" {{ old('tipo') == 'otro' ? 'selected' : '' }}>Otro</option>
                                    </select>
                                    @error('tipo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="archivo_ejemplo">Archivo de Ejemplo</label>
                                    <input type="file" name="archivo_ejemplo" id="archivo_ejemplo" class="form-control @error('archivo_ejemplo') is-invalid @enderror" accept=".pdf,.doc,.docx">
                                    <small class="form-text text-muted">Formatos permitidos: PDF, DOC, DOCX (máx. 10MB)</small>
                                    @error('archivo_ejemplo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="descripcion">Descripción</label>
                            <textarea name="descripcion" id="descripcion" class="form-control @error('descripcion') is-invalid @enderror" rows="3">{{ old('descripcion') }}</textarea>
                            @error('descripcion')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contenido_html">Contenido HTML *</label>
                                    <textarea name="contenido_html" id="contenido_html" class="form-control @error('contenido_html') is-invalid @enderror" rows="15" required>{{ old('contenido_html') }}</textarea>
                                    <small class="form-text text-muted">Use {{variable}} para variables dinámicas</small>
                                    @error('contenido_html')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contenido_css">Contenido CSS</label>
                                    <textarea name="contenido_css" id="contenido_css" class="form-control @error('contenido_css') is-invalid @enderror" rows="15">{{ old('contenido_css') }}</textarea>
                                    @error('contenido_css')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="campos_disponibles_json">Campos Disponibles (JSON)</label>
                                    <textarea name="campos_disponibles_json" id="campos_disponibles_json" class="form-control @error('campos_disponibles') is-invalid @enderror" rows="5">{{ old('campos_disponibles_json', '[]') }}</textarea>
                                    <small class="form-text text-muted">Array JSON con los campos disponibles</small>
                                    @error('campos_disponibles')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="configuracion_json">Configuración (JSON)</label>
                                    <textarea name="configuracion_json" id="configuracion_json" class="form-control @error('configuracion') is-invalid @enderror" rows="5">{{ old('configuracion_json', '{}') }}</textarea>
                                    <small class="form-text text-muted">Configuración adicional en formato JSON</small>
                                    @error('configuracion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input type="checkbox" name="activo" id="activo" class="form-check-input" {{ old('activo', true) ? 'checked' : '' }}>
                                    <label for="activo" class="form-check-label">Activo</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input type="checkbox" name="predeterminada" id="predeterminada" class="form-check-input" {{ old('predeterminada') ? 'checked' : '' }}>
                                    <label for="predeterminada" class="form-check-label">Predeterminada</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Guardar Plantilla
                            </button>
                            <a href="{{ route('plantillas.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('nombre').addEventListener('input', function() {
    const slug = this.value
        .toLowerCase()
        .replace(/[^a-z0-9\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-')
        .trim('-');
    document.getElementById('slug').value = slug;
});
</script>
@endsection