{{--
IMPORTANTE:
   - No cambiar el id survey del div principal, la encuesta se localiza por este id
   - Cada una de las preguntas debe ser un obeto de tipo INPUT, TEXTAREA o SELECT
   - Cada pregunta es identificada por su atributo name, por lo que debe especificarse siempre
   - El atributo title se utiliza para mencionar la pregunta en caso de error de validación,
     por lo que debe especificarse siempre
   - Cuando una de las preguntas sea obligatoria se debe especificar el atributo required
--}}


    <div id="survey" class="max-w-7xl mx-auto py-6 w-full flex flex-col">
        <h2 class="font-semibold text-xl text-gray-600 leading-tight mb-4">
            Café senior
        </h2>
        <div class="flex flex-col">
            <div class="flex flex-col mb-4">
                <label class="font-bold" for="tipo_formacion">Tipo de formación:</label>
                <select required name="tipo_formacion" title="Tipo de formación:" class="w-full lg:w-28 rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500">
                    <option disabled selected>-</option>
                    <option value="Presencial">Presencial</option>
                    <option value="Live Meeting/Teams">Live Meeting/Teams</option>
                </select>
            </div>

            <div class="flex flex-col mb-4">
                <label class="font-bold" for="numero_asistentes">Número de asistentes:</label>
                <input required type="number" name="numero_asistentes" title="Número de asistentes" class="w-full lg:w-48 rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500" />
            </div>
            @if(env('GGCC_LEAD',false) == true && \App\Classes\MYA::idGrupo() == 2)
                {{-- NO MOSTRAR REPORTE DE PEDIDOS --}}
            @else
                {{--  BLOQUE DE PEDIDOS ASOCIADO A JS ADICIONAL EN ESTE BLADE  --}}
                <div class="flex flex-col mb-4">
                    <label class="font-bold" for="pedido">¿Se ha realizado pedido en el momento?</label>
                    <select required id="pedido" name="pedido" title="¿Se ha realizado pedido en el momento?" onchange="managePedidosObjects()" class="rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500">
                        <option disabled selected>-</option>
                        <option value="Sí">Sí</option>
                        <option value="No">No</option>
                    </select>
                </div>
                <div id="cont_pedidos">
                    <div class="flex flex-col mb-4">
                        <label class="font-bold" for="numero_pedidos">¿Número de pedidos?</label>
                        <select id="numero_pedidos" name="numero_pedidos" title="¿Número de pedidos?" class="rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500">
                            <option disabled selected>-</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div class="flex flex-col mb-4">
                        <label class="font-bold" for="codigo_pedido">Código(s) de pedido (separados por espacio):</label>
                        <input type="text" id="codigo_pedido" name="codigo_pedido" title="Código de pedido" class="rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500" />
                    </div>
                </div>
            @endif
            {{--  FIN DE BLOQUE DE PEDIDOS  --}}
        </div>

        <div class="flex flex-col mb-4">
            <label class="font-bold" for="comentarios">Comentarios adicionales:</label>
            <textarea name="comentarios" title="Comentarios adicionales" rows="3" class="rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500"></textarea>
        </div>
{{--        <div class="w-full flex flex-col lg:flex-row lg:items-end lg:gap-4">--}}
{{--            <div class="w-full lg:w-1/3 flex flex-col mb-4">--}}
{{--                <label class="font-bold" for="persona_contacto_cbk">Persona de contacto CBK:</label>--}}
{{--                <input type="text" name="persona_contacto_cbk" title="Persona de contacto CBK" class="rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500" required />--}}
{{--            </div>--}}

{{--            <div class="w-full lg:w-1/3 flex flex-col mb-4">--}}
{{--                <label class="font-bold" for="telf_persona_contacto_cbk">Teléfono persona de contacto CBK:</label>--}}
{{--                <input type="text" name="telf_persona_contacto_cbk" title="Teléfono persona de contacto CBK" class="rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500" required />--}}
{{--            </div>--}}

{{--            <div class="w-full lg:w-1/3 flex flex-col mb-4">--}}
{{--                <label class="font-bold" for="email_persona_contacto_cbk">Email persona de contacto CBK:</label>--}}
{{--                <input type="text" name="email_persona_contacto_cbk" title="Email persona de contacto CBK" class="rounded-xl border border-myagenda focus:border focus:border-caixa focus:ring-0 transition ease-in-out duration-500" required />--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>

<script>
    document.addEventListener('DOMContentLoaded', ()=>{

    })
    function postLoadFromStore() {
        managePedidosObjects();
    }
    function postValidate(){
        let pedido = document.getElementById('pedido');
        let numero_pedidos = document.getElementById('numero_pedidos');
        let codigo_pedido = document.getElementById('codigo_pedido');

        if (!pedido || !numero_pedidos || !codigo_pedido) {
            return true;
        }

        if (pedido.value == "-") {
            alert("Seleccione si se han realizado pedidos o no");
            pedido.focus();
            return false;
        }
        if (pedido.value == "Sí") {
            let numPedidos = numero_pedidos.value;
            if(numPedidos == '-'){
                alert("Indique el número de pedidos realizados");
                numero_pedidos.focus();
                return false;
            }else{
                let codigos = codigo_pedido.value;
                if(validaCodigosPedido(numPedidos, codigos) == false){
                    return false;
                }
            }
        }
        return true;
    }
    function validaCodigosPedido(total, codigosPedido){
        let codigos = codigosPedido.split(" ");
        let numPedidos = 0;
        for(c of codigos){
            c = c.trim();
            if(c != ""){
                if(validaPedido(c) == false){
                    alert("El código de pedido " + c + " no es un código válido");
                    return false;
                }
                numPedidos++;
            }
        }
        //Validar cuenta de pedidos
        if(total != numPedidos){
            alert("El número de pedidos seleccionado (" + total + ") no coincide con el total de pedidos especificado (" + numPedidos + ")");
            return false;
        }
        return true;
    }
    function validaPedido(pedido){
        const number = Number(pedido);
        if (!isNaN(number) && number >= 10600000 && number <= 12000000) {
            return true;
        }
        return false;
    }
    function managePedidosObjects(){
        let pedido = document.getElementById('pedido');
        let cont_pedidos = document.getElementById('cont_pedidos');
        let numero_pedidos = document.getElementById('numero_pedidos');
        let codigo_pedido = document.getElementById('codigo_pedido');

        if (!pedido || !cont_pedidos || !numero_pedidos || !codigo_pedido) {
            return;
        }
        if (pedido.value == "Sí") {
            cont_pedidos.style.display = "block";
        } else {
            cont_pedidos.style.display = "none";
            codigo_pedido.value = "";
            codigo_pedido.dispatchEvent(new Event('change'));
            numero_pedidos.selectedIndex = 0;
            numero_pedidos.dispatchEvent(new Event('change'));
        }
    }
</script>