@extends('layouts.theme')
@section('header')
    <h2 class="text-2xl color-bipymes-4 font-semibold">
        {{ __('Mi primer plan de negocios') }}
    </h2>
@endsection

@section('content')
    
    <div class="">
        <div class="max-w-7xl gap-4 relative px-0">
            <form id="campana-form" action="{{ route('campana.generate')}}" method="POST">
                @csrf
                <div class="flex flex-col max-w-md gap-3">    
                    <p class="color-bipymes-3">Completa la información para generar tu primer plan de negocios</p>
                    
                    <h2 class="color-bipymes-4 font-semibold">Seleccione el objetivo del plan de negocios:</h2>
                    <label>
                        <input type="radio" name="empresa_tipo" value="Empresa futura" required>
                        Empresa futura
                    </label>
                    <label>
                        <input type="radio" name="empresa_tipo" value="Empresa existente" required>
                        Empresa existente
                    </label><br><br>
                    
                    <h2 class="color-bipymes-4 font-semibold">¿Para qué utilizará este plan de negocio?</h2>
                    <label>
                        <input type="radio" name="uso_plan" value="Para solicitar fondos a inversores" required>
                        Para solicitar fondos a inversores
                    </label>
                    <label>
                        <input type="radio" name="uso_plan" value="Para solicitar fondos a un banco" required>
                        Para solicitar fondos a un banco
                    </label>
                    <label>
                        <input type="radio" name="uso_plan" value="Para aprender" required>
                        Para aprender
                    </label><br><br>
                    
                    <h2 class="color-bipymes-4 font-semibold">Introduzca la información básica de su empresa:</h2>
                    <label for="nombre_empresa">Nombre de su empresa*:</label>
                    <input class="rounded-lg border-none bg-bipymes-5" type="text" id="nombre_empresa" name="nombre_empresa" required>
                    
                    <label for="descripcion_negocio">Descripción de su negocio*:</label>
                    <textarea class="rounded-lg border-none bg-bipymes-5" id="descripcion_negocio" name="descripcion_negocio" required></textarea>
                    
                    <label for="num_empleados">Número de empleados*:</label>
                    <input class="rounded-lg border-none bg-bipymes-5" type="number" id="num_empleados" name="num_empleados" required><br><br>
                    
                    <h2 class="color-bipymes-4 font-semibold">¿Ofrece algún producto o servicio?*:</h2>
                    <label>
                        <input type="radio" name="producto_servicio" value="Producto" required>
                        Producto
                    </label>
                    <label>
                        <input type="radio" name="producto_servicio" value="Servicio" required>
                        Servicio (los comercios minoristas se consideran servicios)
                    </label><br><br>
                    
                    <h2 class="color-bipymes-4 font-semibold">¿Cómo puede el cliente obtener su producto o servicio?*:</h2>
                    <select class="rounded-lg border-none bg-bipymes-5" name="obtencion_producto" required>
                        <option value="En línea">En línea</option>
                        <option value="Ubicación física">Ubicación física</option>
                        <option value="Tanto en línea como en una ubicación física">Tanto en línea como en una ubicación física</option>
                    </select><br><br>
                    
                    <h2 class="color-bipymes-4 font-semibold">Introduzca los datos del grupo de clientes:</h2>
                    <label for="descripcion_clientes">Describa a sus clientes*:</label>
                    <textarea class="rounded-lg border-none bg-bipymes-5" id="descripcion_clientes" name="descripcion_clientes" required></textarea>
                    
                    <label for="nivel_ingresos">Nivel de ingresos de los clientes*:</label>
                    <select class="rounded-lg border-none bg-bipymes-5" id="nivel_ingresos" name="nivel_ingresos" required>
                        <option value="Ingresos bajos">Ingresos bajos</option>
                        <option value="Ingresos medios">Ingresos medios</option>
                        <option value="Ingresos altos">Ingresos altos</option>
                    </select><br><br>
                    
                    <h2 class="color-bipymes-4 font-semibold">Descripción de su producto/servicio:</h2>
                    <label for="nombre_producto">Nombre de su servicio o producto:</label>
                    <input class="rounded-lg border-none bg-bipymes-5" type="text" id="nombre_producto" name="nombre_producto">
                    
                    <label for="descripcion_producto">Describa su producto o servicio:</label>
                    <textarea class="rounded-lg border-none bg-bipymes-5" id="descripcion_producto" name="descripcion_producto"></textarea>
                    
                    <label for="inversion_inicial">Ingrese el monto de su inversión inicial en dolares:</label>
                    <input class="rounded-lg border-none bg-bipymes-5" type="number" id="inversion_inicial" name="inversion_inicial"><br><br>
                    <div class="flex items-center justify-center mt-4">
                        <x-primary-button class="font">
                            <i class="fa-regular fa-star"></i> {{ __('Generar mi plan de negocios') }}
                        </x-primary-button>
                    </div>
                </div>
            </form>
            <div style="display: none" id="loading-message" class=" absolute top-0 left-0 bg-white bg-opacity-50 w-full h-full backdrop-blur-sm text-black flex justify-center">
                <p class="p-5 text-2xl color-bipymes-4 font-semibold" id="loading-text">Procesando la solicitud...</p>
                <!-- Puedes agregar un indicador de carga aquí -->
            </div>
            
            <script>
                $(document).ready(function() {
                    const loadingText = $('#loading-text');

                    const messages = [
                        "Preparando los datos...",
                        "Calculando resultados...",
                        "Analizando información...",
                        "Cargando recursos...",
                        "¡Gracias por tu paciencia!"
                    ];

                    $('#campana-form').submit(function(e){
                        // e.preventDefault();
                        console.log('llega');
                        // Mostrar un mensaje aleatorio de la lista
                        $('main').animate({
                            scrollTop: 0
                        }, 800);
                        const randomIndex = Math.floor(Math.random() * messages.length);
                        loadingText.text(messages[randomIndex]);
                        $('#loading-message').show();
                    });

                    // Cambiar el texto del mensaje cada 5 segundos
                    setInterval(function() {
                        const randomIndex = Math.floor(Math.random() * messages.length);
                        loadingText.text(messages[randomIndex]);
                    }, 5000);
                });
            
            </script>
            
            {{-- <div class="flex flex-row bg-bipymes-6 overflow-hidden rounded-2xl max-w-sm">
                <div class="flex bg-btn-primary items-center justify-center p-5">
                    <div class="flex justify-center items-center color-bipymes-6 rounded-ss-3xl rounded-ee-3xl bg-white bg-opacity-20 w-20 aspect-square">
                        <i class="fa-solid fa-flask text-3xl"></i> 
                    </div>
                </div>
                <div class="flex items-center p-4">
                    <div>
                        <h3 class="color-bipymes-4 font-semibold">Creador de campañas</h3>
                        <p class="color-bipymes-4">Crea posibles estrategias para tu negocio.</p>
                        <a class="color-bipymes-2 text-xs" href="#">Utilizar herramienta <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div> --}}
        </div>
    </div>

@endsection

{{-- @section('aside')
    <div class="flex flex-col bg-bipymes-6 rounded-2xl p-8 gap-6">
        <img src="{{ asset('images/Frame731.png') }}" alt="">
        <div class="flex flex-col gap-2">
            <h2 class="color-bipymes-4 font-semibold text-xl">Mi agente virtual</h2>
            <p class="color-bipymes-4">Utiliza el agente virtual para responder, analizar y gestionar tus consultas.</p>
        </div>
        <button class="border-2 border-color-bipymes-1 rounded-lg color-bipymes-1 text-xs px-4 py-2 w-fit">Hablar con agente</button>
    </div>
@endsection --}}