@extends('layouts.dashboardnew')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12 mb-3 d-flex align-items-center justify-content-between">
            <div>
                <h2 class="fw-bold text-primary mb-1">Editor Modular de Embudos</h2>
                <p class="text-muted">Enciende o apaga las secciones según tu estrategia.</p>
            </div>
            <a href="{{ route('funnels.index') }}" class="btn btn-outline-primary rounded-pill"><i class="fa-solid fa-arrow-left me-1"></i> Volver</a>
        </div>
    </div>

    <ul class="nav nav-tabs mb-4 fw-bold">
        <li class="nav-item"><a class="nav-link {{ $plantilla_actual == 'v1' ? 'active text-primary border-bottom-0' : 'text-secondary' }}" href="{{ route('funnels.config', ['plantilla' => 'v1']) }}"><i class="fa-solid fa-earth-americas me-1"></i> Global</a></li>
        <li class="nav-item"><a class="nav-link {{ $plantilla_actual == 'v2' ? 'active text-danger border-bottom-0' : 'text-secondary' }}" href="{{ route('funnels.config', ['plantilla' => 'v2']) }}"><i class="fa-solid fa-user-tie me-1"></i> VIP</a></li>
        <li class="nav-item"><a class="nav-link {{ $plantilla_actual == 'v3' ? 'active border-bottom-0' : 'text-secondary' }}" style="{{ $plantilla_actual == 'v3' ? 'color: #7928CA;' : '' }}" href="{{ route('funnels.config', ['plantilla' => 'v3']) }}"><i class="fa-solid fa-microchip me-1"></i> Futurista</a></li>
    </ul>
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow mb-4" role="alert" style="background-color: #d1e7dd; color: #0f5132; border-left: 5px solid #198754 !important;">
            <h5 class="alert-heading mb-1"><i class="fa-solid fa-circle-check me-2"></i>¡Excelente!</h5>
            <p class="mb-0 fw-bold">{{ session('success') }}</p>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <form id="form-embudo" action="{{ route('funnels.saveConfig') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="plantilla" value="{{ $plantilla_actual }}">
        
        <div class="row">
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <div class="mb-4 p-3 bg-light rounded border border-2 border-primary">
                            <h6 class="fw-bold text-uppercase text-primary mb-3"><i class="fa-solid fa-toggle-on"></i> Activar Módulos</h6>
                            <div class="form-check form-switch mb-2"><input class="form-check-input" type="checkbox" name="mostrar_producto" value="1" {{ ($config->mostrar_producto ?? 1) == 1 ? 'checked' : '' }}><label class="form-check-label small fw-bold">Mostrar Producto y Galería</label></div>
                            <div class="form-check form-switch mb-2"><input class="form-check-input" type="checkbox" name="mostrar_caracteristicas" value="1" {{ ($config->mostrar_caracteristicas ?? 1) == 1 ? 'checked' : '' }}><label class="form-check-label small fw-bold">Mostrar 3 Características</label></div>
                            <div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" name="mostrar_testimonios" value="1" {{ ($config->mostrar_testimonios ?? 1) == 1 ? 'checked' : '' }}><label class="form-check-label small fw-bold">Mostrar Testimonios</label></div>
                            <hr>
                            <div class="form-check form-switch mb-2"><input class="form-check-input" type="checkbox" name="academia_activa" value="1" {{ ($config->academia_activa ?? 0) == 1 ? 'checked' : '' }}><label class="form-check-label small fw-bold text-success">Activar Botón Academia</label></div>
                            <div class="mb-2 mt-2"><input type="text" name="texto_academia" class="form-control border-2 form-control-sm" value="{{ $config->texto_academia ?? 'Academia' }}" placeholder="Nombre del Botón"></div>
                            <div class="mb-2"><input type="text" name="link_academia" class="form-control border-2 form-control-sm" value="{{ $config->link_academia ?? '' }}" placeholder="Link de la academia https://..."></div>
                        </div>

                        <h5 class="fw-bold mb-3 text-primary"><i class="fa-solid fa-palette me-2"></i> Identidad y Estilo</h5>
                        <div class="row mb-4">
                            <div class="col-6"><label class="form-label small fw-bold">Color Principal</label><input type="color" name="color_primario" class="form-control form-control-color w-100 border-2" value="{{ $config->color_primario ?? ($plantilla_actual == 'v1' ? '#0A58CA' : ($plantilla_actual == 'v2' ? '#FF0080' : '#7928CA')) }}"></div>
                            <div class="col-6"><label class="form-label small fw-bold">Color Brillo</label><input type="color" name="color_secundario" class="form-control form-control-color w-100 border-2" value="{{ $config->color_secundario ?? ($plantilla_actual == 'v1' ? '#00d2ff' : ($plantilla_actual == 'v2' ? '#7928CA' : '#00d2ff')) }}"></div>
                        </div>
                        <div class="mb-4"><label class="form-label small fw-bold">Nombre del Socio</label><input type="text" name="nombre_personalizado" class="form-control border-2" value="{{ $config->nombre_personalizado ?? '' }}" placeholder="Ej: Juan Perez"></div>
                        
                        <div class="mb-2">
                            <label class="form-label small fw-bold text-primary"><i class="fa-regular fa-image"></i> Portada para la Galería</label>
                            <input type="file" name="imagen_portada" class="form-control border-2" accept="image/png, image/jpeg, image/jpg">
                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;"><i class="fa-solid fa-circle-info"></i> <b>Recomendado:</b> 800x600px. Formatos: JPG, PNG. Máx: 3MB.</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        
                        <h5 class="fw-bold mb-4 text-primary"><i class="fa-solid fa-pen-to-square me-2"></i> Contenido Principal</h5>
                        <div class="row">
                            <div class="col-md-12 mb-3"><label class="form-label small fw-bold">Título Impactante (Inicio)</label><input type="text" name="titulo" class="form-control border-2" value="{{ $config->titulo ?? '' }}"></div>
                            <div class="col-md-12 mb-4"><label class="form-label small fw-bold text-danger"><i class="fa-brands fa-youtube"></i> Link Video Youtube (Embed)</label><input type="text" name="video_url" class="form-control border-2" value="{{ $config->video_url ?? '' }}"></div>
                        </div>

                        <div class="row border-top pt-3">
                            <div class="col-12"><p class="fw-bold small text-primary text-uppercase mb-2">3 Características</p></div>
                            <div class="col-md-4 mb-4"><input type="text" name="caracteristica_1" class="form-control border-2 form-control-sm" value="{{ $config->caracteristica_1 ?? '' }}"></div>
                            <div class="col-md-4 mb-4"><input type="text" name="caracteristica_2" class="form-control border-2 form-control-sm" value="{{ $config->caracteristica_2 ?? '' }}"></div>
                            <div class="col-md-4 mb-4"><input type="text" name="caracteristica_3" class="form-control border-2 form-control-sm" value="{{ $config->caracteristica_3 ?? '' }}"></div>
                        </div>

                        <div class="row border-top pt-3">
                            <div class="col-12"><p class="fw-bold small text-primary text-uppercase mb-2">Producto Estrella, Beneficios y Galería</p></div>
                            <div class="col-md-6 mb-3"><label class="form-label small fw-bold">Nombre del Producto</label><input type="text" name="nombre_producto" class="form-control border-2" value="{{ $config->nombre_producto ?? '' }}"></div>
                            <div class="col-md-6 mb-3"><label class="form-label small fw-bold">Link (Tienda)</label><input type="text" name="link_producto" class="form-control border-2" value="{{ $config->link_producto ?? '' }}"></div>
                            
                            <div class="col-md-12 mb-3">
                                <label class="form-label small fw-bold">Beneficios / Detalles profundos</label>
                                <textarea name="beneficios_producto" class="form-control border-2" rows="3" placeholder="Ej: 1. Aumenta la energía... 2. 100% Natural...">{{ $config->beneficios_producto ?? '' }}</textarea>
                            </div>

                            <div class="col-md-12 mb-4">
                                <label class="form-label small fw-bold text-info"><i class="fa-solid fa-upload"></i> Foto Principal del Producto</label>
                                <input type="file" name="imagen_producto" class="form-control border-2" accept="image/png, image/jpeg, image/jpg">
                                <small class="text-muted d-block mt-1" style="font-size: 0.7rem;"><i class="fa-solid fa-circle-info"></i> <b>Recomendado:</b> Imagen cuadrada (800x800px). Formatos: JPG, PNG. Máx: 3MB.</small>
                            </div>
                            
                            <div class="col-12"><p class="fw-bold small text-secondary text-uppercase mb-1">Fotos de Galería Adicionales</p>
                            <small class="text-muted d-block mb-2" style="font-size: 0.7rem;"><i class="fa-solid fa-circle-info"></i> Opcional: Máximo 3MB por cada foto. Formatos permitidos: JPG, PNG.</small></div>
                            <div class="col-md-4 mb-4"><label class="form-label small fw-bold text-secondary">Foto Galería 1</label><input type="file" name="galeria_1" class="form-control form-control-sm border-2" accept="image/png, image/jpeg, image/jpg"></div>
                            <div class="col-md-4 mb-4"><label class="form-label small fw-bold text-secondary">Foto Galería 2</label><input type="file" name="galeria_2" class="form-control form-control-sm border-2" accept="image/png, image/jpeg, image/jpg"></div>
                            <div class="col-md-4 mb-4"><label class="form-label small fw-bold text-secondary">Foto Galería 3</label><input type="file" name="galeria_3" class="form-control form-control-sm border-2" accept="image/png, image/jpeg, image/jpg"></div>
                        </div>

                        <div class="row border-top pt-3">
                            <div class="col-12"><p class="fw-bold small text-primary text-uppercase mb-2">Testimonios</p></div>
                            <div class="col-md-8 mb-2"><input type="text" name="testimonio_texto" class="form-control border-2" value="{{ $config->testimonio_texto ?? '' }}" placeholder="Testimonio 1"></div><div class="col-md-4 mb-3"><input type="text" name="testimonio_nombre" class="form-control border-2" value="{{ $config->testimonio_nombre ?? '' }}" placeholder="Nombre 1"></div>
                            <div class="col-md-8 mb-2"><input type="text" name="testimonio_texto_2" class="form-control border-2" value="{{ $config->testimonio_texto_2 ?? '' }}" placeholder="Testimonio 2"></div><div class="col-md-4 mb-3"><input type="text" name="testimonio_nombre_2" class="form-control border-2" value="{{ $config->testimonio_nombre_2 ?? '' }}" placeholder="Nombre 2"></div>
                            <div class="col-md-8 mb-2"><input type="text" name="testimonio_texto_3" class="form-control border-2" value="{{ $config->testimonio_texto_3 ?? '' }}" placeholder="Testimonio 3"></div><div class="col-md-4 mb-4"><input type="text" name="testimonio_nombre_3" class="form-control border-2" value="{{ $config->testimonio_nombre_3 ?? '' }}" placeholder="Nombre 3"></div>
                        </div>

                        <div class="row border-top pt-3">
                            <div class="col-12"><p class="fw-bold small text-primary text-uppercase mb-2">Llamado a la Acción (Cierre) y Redes</p></div>
                            
                            <div class="col-md-12 mb-3">
                                <label class="form-label small fw-bold">Título de la sección final</label>
                                <input type="text" name="titulo_registro" class="form-control border-2" value="{{ $config->titulo_registro ?? '¿Estás listo para Construir tu Imperio?' }}">
                            </div>
                            <div class="col-md-12 mb-4">
                                <label class="form-label small fw-bold">Subtexto de la sección final</label>
                                <textarea name="texto_registro" class="form-control border-2" rows="2">{{ $config->texto_registro ?? 'Toma acción hoy. Únete a nuestra red global de emprendedores.' }}</textarea>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label small fw-bold">WhatsApp</label>
                                <input type="text" name="whatsapp" class="form-control border-2" value="{{ $config->whatsapp ?? '' }}" placeholder="Ej: 573001234567">
                                <small class="text-danger d-block mt-1" style="font-size: 0.7rem;"><i class="fa-solid fa-triangle-exclamation"></i> <b>Importante:</b> Coloca el código de país sin el signo '+'</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label small fw-bold">Mensaje Predefinido de WhatsApp</label>
                                <input type="text" name="mensaje_whatsapp" class="form-control border-2" value="{{ $config->mensaje_whatsapp ?? 'Hola, quiero unirme a tu equipo' }}">
                            </div>
                            <div class="col-md-6 mb-3"><label class="form-label small fw-bold">Link Facebook</label><input type="text" name="facebook" class="form-control border-2" value="{{ $config->facebook ?? '' }}"></div>
                            <div class="col-md-6 mb-3"><label class="form-label small fw-bold">Link Instagram</label><input type="text" name="instagram" class="form-control border-2" value="{{ $config->instagram ?? '' }}"></div>
                        </div>

                        <div class="text-end mt-4">
                            <button type="submit" id="btn-guardar" class="btn btn-primary px-5 rounded-pill fw-bold shadow-lg">
                                <i class="fa-solid fa-save me-2"></i> GUARDAR EMBUDO {{ strtoupper($plantilla_actual) }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    document.getElementById('form-embudo').addEventListener('submit', function() {
        var btn = document.getElementById('btn-guardar');
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-2"></i> Procesando datos...';
        // Permite que el formulario se envíe antes de bloquear el botón
        setTimeout(function() {
            btn.disabled = true;
        }, 50);
    });
</script>
@endsection