@extends("pages.evaluate.evaluate-layout")
@section('content-questions')
<div class="row mt-5 justify-content-md-center">
    <div class="col-md-6 col-sm-12 text-center">
        <div class="question ml-5 text-left">
            <p class="m-Si"><span class="question-number evaluate-text-color font-weight-bold">7 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>¿Has usado o aplicado todas o alguna de las herramientas?</p>
            <div class="bd-example mt-3 text-left ml-25">
                <div class="mt-2">
                    <button class="btn btn-outline-warning question-button-text button-number-evaluate font-weight-bold" onclick="clickOption('Si')" id="opt-Si">Si</button>
                </div>
                <div class="mt-1">
                    <button class="btn btn-outline-warning question-button-text button-number-evaluate font-weight-bold" onclick="clickOption('No')" id="opt-No">No</button>
                </div>
            </div>
            <div class="question mt-5 ml-5 text-left">
                <p class="m-0"><span class="question-number evaluate-text-color font-weight-bold">8 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>Si tu respuesta fue SI, marca cuale(s) herramienta(s) usaste o aplicaste</p>
                <p class="m-0 text-secondary evaluate-text-color"><b>Puedes seleccionar más de una opción </b></p>
                <div class="d-flex mt-3">
                    <input type="checkbox" id="cards" name="tools" class="custom-checkbox" value="Tarjetas datos y cifras">
                    <label for="cards"><b>Tarjetas datos y cifras</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="Normativa" name="tools" class="custom-checkbox" value="Normativa">
                    <label for="Normativa"><b>Normativa</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="Casos" name="tools" class="custom-checkbox" value="Casos de estudio">
                    <label for="Casos"><b>Casos de estudio</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="Gosario" name="tools" class="custom-checkbox" value="Gosario">
                    <label for="Gosario"><b>Gosario</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="Video" name="tools" class="custom-checkbox" value="Video Charlas">
                    <label for="Video"><b>Video Charlas</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="Test" name="tools" class="custom-checkbox" value="Test empresarial">
                    <label for="Test"><b>Test empresarial</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="personal" name="tools" class="custom-checkbox" value="Guia metodológica">
                    <label for="personal"><b>Test personal</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="guia" name="tools" class="custom-checkbox" value="Guia metodológica">
                    <label for="guia"><b>Guia metodológica</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="Actividades" name="tools" class="custom-checkbox" value="Actividades">
                    <label for="Actividades"><b>Actividades</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="Acuerdo" name="tools" class="custom-checkbox" value="Acuerdo no vinculante">
                    <label for="Acuerdo"><b>Acuerdo no vinculante</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="politica" name="tools" class="custom-checkbox" value="Politica de trabajo">
                    <label for="politica"><b>Politica de trabajo</b></label><br>
                </div>
                <div class="d-flex">
                    <input type="checkbox" id="recomendaciones" name="tools" class="custom-checkbox" value="Recomendaciones y centros de consulta">
                    <label for="recomendaciones"><b>Recomendaciones y centros de consulta</b></label><br>
                </div>
            </div>

            <div class="question mt-5 ml-5 text-left">
                <p class="m-0"><span class="question-number evaluate-text-color font-weight-bold">9 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>Como nuestra intención es mejorar, quisieras compartirnos tu experiencia en el uso y aplicación
                    de las herramientas (puede ser general o alguna experiencia específica)</p>
                <input type="text" class="mt-4 custom-input-text evaluate-text-color" id="evaluate-q3" placeholder="Escribe tu respuesta acá">
            </div>
            <div class="question mt-5 ml-5 text-left">
                <p class="m-0"><span class="question-number evaluate-text-color font-weight-bold">10 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>¿Recomendarías esta herramienta para la implementación en otras áreas de tu empresa o a
                    otras empresas?</p>
                <div class="bd-example mt-3 text-left ml-25">
                    <div class="mt-2">
                        <button class="btn btn-outline-warning question-button-text button-number-evaluate font-weight-bold" onclick="clickOption('Si')" id="opt-Si">Si</button>
                    </div>
                    <div class="mt-1">
                        <button class="btn btn-outline-warning question-button-text button-number-evaluate font-weight-bold" onclick="clickOption('No')" id="opt-No">No</button>
                    </div>
                </div>
            </div>
            <div class="question mt-5 ml-5 text-left">
                <p class="m-0"><span class="question-number evaluate-text-color font-weight-bold">11 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>Si tu respuesta fue No, Cuéntanos el porqué no has usado o implementado ninguna de las
                    herramientas.</p>
                <input type="text" class="mt-4 custom-input-text evaluate-text-color" id="evaluate-q3" placeholder="Escribe tu respuesta acá">
            </div>
            <div class="text-center mt-5">
                <a href="{{ url('evaluar/q3')}}" type="button " class="btn btn-light send-button font-weight-bold">Anterior</a>
                <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(4)">Siguiente</button>
            </div>
        </div>
    </div>
</div>

@endsection