{% extends 'inc/base.html.twig' %}
{% block body %}
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-6">
<h2>Educador: {{ datos_educa.id_ed }}&nbsp;-&nbsp;{{ datos_educa.ape_ed}}&nbsp;{{ datos_educa.nom_ed }}</h2>
<strong style="font-size: larger">Curso:&nbsp;{{ cuestionarios.curso }}</strong>
{{ datos_educa.id_curso }}
<a href="{{ constant('URLROOT2') }}/lms/actividades/{{ cuestionarios.curso }}" class="btn btn-danger pull-right"><i class="fa fa-backward"></i> Regresar</a>
</div>
</div>

<div class="row">
<div class="col-lg-12 col-md-6">
<hr style="width: 100%; height: 4px; background-color: #006699">
</div>
</div>

<div class="row">
<div class="col-lg-10 col-md-6">
<h3 class="text-primary">CUESTIONARIO</h3>
<div class="col-md-12 mt-3">



    <input class="form-control" tabindex="3" type="text" id="id_Anun" name="id_Anun" value="{{ cuestionarios.titulo }}" disabled />
    <textarea class="form-control" id="instrucciones" name="instrucciones" rows="3" disabled>{{ cuestionarios.instrucciones }}</textarea>
    <label><b>Puntuaci&oacute;n:</b><input class="form-control" tabindex="3" type="text" id="id_Anun" name="id_Anun" value="{{ cuestionarios.puntuacion }}" disabled /></label>
    <label><b>Fecha l&iacute;mite:</b><input class="form-control" tabindex="3" type="text" id="id_Anun" name="id_Anun" value="{{ cuestionarios.entrega | date('d/m/Y') }}" disabled /></label>

<!-- INICIO CICLO VERDADERO / FALSO -->
<div id='VOF'>
<form action="{{ constant('URLROOT2') }}/lms/EduCuestionarioCrear" method="post">

<input id="id_Curso" type="hidden" name="id_Curso" value="{{ datos_educa.id_curso }}">
{% set nro=0 %}
{% set respta1='' %}
{% set respta2='' %}
<div id="sections">
<div class="section mt-2">
<div class="row">
<hr style="width: 100%; background-color: #003399">
<div class="col-lg-10 col-md-6">
<b>.:: PREGUNTA ::.</b>
<input id="tipo_preg" type="hidden" name="tipo_preg[]" value="VOF">
<input class="form-control" tabindex="3" type="text" id="id_Anun00" name="preg[]" value="" placeholder="Escriba la prenguta a realizar" required />
</div>
<div class="col-lg-2 col-md-6 text-center">
    <b>PUNTOS:</b>
    <input class="form-control text-center" tabindex="3" type="number" id="id_Anun00" name="puntos[]" value="" min=0 placeholder="Puntos" required />


</div>

<div class="col-lg-10 col-md-6">
<label>Respuesta Verdadero:</label>
<input class="form-control" tabindex="3" type="text" id="id_Anun1" name="resp1[]" placeholder="Escriba la respuesta que aparecera como verdadero " required />
</div>
        <div class="col-lg-2 col-md-6 text-center"><br>
        <b><span style="font-size: small">Seleccione la Respuesta Correcta</span></b>
        </div>
<div class="col-lg-10 col-md-6">
<label>Respuesta Falso:</label>
<input class="form-control" tabindex="3" type="text" id="id_Anun2" name="resp2[]" placeholder="Escriba la respuesta que aparecera como falso" required />
</div>
        <div class="col-lg-2 col-md-6 text-center"><br>
        <select id="op" name="op[]" size="1">
        <option value="Verdadero" selected="selected">Verdadero</option>
        <option value="Falso">Falso</option>
        </select>
        </div>
</div>
<button class="btn btn-danger btn-sm mt-3" name="boton2" id="boton2" type="button" onclick="elimina(this);">Eliminar esta Pregunta</button>
</div>
</div>

{% for pregunta in preguntas %}
{% if pregunta.pregunta_tipo == 'VOF' %}
<div id="sections">
<div class="section mt-2">
<div class="row">
<hr style="width: 100%; background-color: #003399">
<div class="col-lg-10 col-md-6">
<b>.:: PREGUNTA ::.</b>
<input id="tipo_preg" type="hidden" name="tipo_preg[]" value="VOF">
<input class="form-control" tabindex="3" type="text" id="id_Anun00" name="preg[]" value="{{ pregunta.pregunta }}" placeholder="Escriba la prenguta a realizar" required />
</div>
<div class="col-lg-2 col-md-6 text-center">
    <b>PUNTOS:</b>
    <input class="form-control text-center" tabindex="3" type="number" id="id_Anun00" name="puntos[]" value="{{ pregunta.puntos }}" min=0 placeholder="Puntos" required />


    {{ pregunta.correcta }}
</div>
{% for respuesta in respuestas %}
    {% if respuesta.pregunta_nro == nro+1 %}
    {% set respta1=respuesta.respuesta %}
    {% set respta2=respuesta.respuesta2 %}
        {% set break = true %}
    {% endif %}

{% endfor %}
<div class="col-lg-10 col-md-6">
<label>Respuesta Verdadero:</label>
<input class="form-control" tabindex="3" type="text" id="id_Anun1" name="resp1[]" value=" {{ respta1 }} " placeholder="Escriba la respuesta que aparecera como verdadero " required />
</div>
{% if pregunta.correcta == "Verdadero" %}
{% set verdad='selected="selected"' %}
{% else %}
{% set falsa='selected="selected"' %}
{% endif %}


        <div class="col-lg-2 col-md-6 text-center"><br>
        <b><span style="font-size: small">Seleccione la Respuesta Correcta</span></b>
        </div>
<div class="col-lg-10 col-md-6">
<label>Respuesta Falso:</label>
<input class="form-control" tabindex="3" type="text" id="id_Anun2" name="resp2[]" value="{{ respta2 }}" placeholder="Escriba la respuesta que aparecera como falso" required />
</div>
        <div class="col-lg-2 col-md-6 text-center"><br>
        <select id="op" name="op[]" size="1">
        <option {{ verdad }} value="Verdadero" >Verdadero</option>
        <option {{ falsa }} value="Falso">Falso</option>
        </select>
        </div>
</div>
<button class="btn btn-danger btn-sm mt-3" name="boton2" id="boton2" type="button" onclick="elimina(this);">Eliminar esta Pregunta</button>
</div>
</div>
{% set nro=nro+1 %}
{% endif %}
{% endfor %}


<button class="btn btn-info btn-sm mt-3" name="boton" id="boton" type="button" onclick="makeClones2();">Agregar Nueva Pregunta</button>

<input class="btn btn-success btn-lg mt-3 pull-right" tabindex="11" id="btnguardar" name="enviar" type="submit" value="Guardar Cuestionario">

</form>
</div>
<!-- FIN CICLO VERDADERO / FALSO -->

<!-- INICIO CICLO SELECCION MULTIPLE -->
<div id='SMT'>
<form action="{{ constant('URLROOT2') }}/lms/EduCuestionarioCrear" method="post">

<input id="id_Curso" type="hidden" name="id_Curso" value="{{ datos_educa.id_curso }}">
{% set nro=0 %}
{% set respta1='' %}
{% set respta2='' %}
<div class="row">
<div class="col-lg-10 col-md-6">
<h3><b>SELECCI&Oacute;N M&Uacute;LTIPLE</b></h3>
</div>
</div>

<div id="sections2">
<div class="section2 mt-2">
<div class="row">
<hr style="width: 100%; background-color: #003399">
<div class="col-lg-10 col-md-6">
<b>.:: PREGUNTA ::.</b>
<input id="tipo_preg" type="hidden" name="tipo_preg[]" value="SMT">
<input class="form-control" tabindex="3" type="text" id="id_Anun00" name="preg[]" value="" placeholder="Escriba la prenguta a realizar" required />
</div>
<div class="col-lg-2 col-md-6 text-center">
    <b>PUNTOS:</b>
    <input class="form-control text-center" tabindex="3" type="number" id="id_Anun00" name="puntos[]" value="" min=0 placeholder="Puntos" required />

</div>
        <div class="col-lg-10 col-md-6">
        <label><b>Respuestas:</b></label>
        </div>
        <div class="col-lg-2 col-md-6 text-center">
        <b><span style="font-size: x-small">Seleccione las Respuestas</span></b>
        </div>
<div class="col-lg-10 col-md-6">
<input class="form-control" tabindex="3" type="text" id="id_Anun2" name="resp1[]" placeholder="Escriba la respuesta y seleccione si es correcta o incorrecta" required />
</div>
        <div class="col-lg-2 col-md-6 text-center">
        <select class="form-control" id="op" name="op[]" size="1">
        <option value="Incorrecto" selected="selected">Incorrecto</option>
        <option value="Correcto">Correcto</option>
        </select>
        </div>

<div class="col-lg-10 col-md-6">
<input class="form-control" tabindex="3" type="text" id="id_Anun2" name="resp1[]" placeholder="Escriba la respuesta y seleccione si es correcta o incorrecta" required />
</div>
        <div class="col-lg-2 col-md-6 text-center">
        <select class="form-control" id="op" name="op[]" size="1">
        <option value="Incorrecto" selected="selected">Incorrecto</option>
        <option value="Correcto">Correcto</option>
        </select>
        </div>

<div class="col-lg-10 col-md-6">
<input class="form-control" tabindex="3" type="text" id="id_Anun2" name="resp1[]" placeholder="Escriba la respuesta y seleccione si es correcta o incorrecta" required />
</div>
        <div class="col-lg-2 col-md-6 text-center">
        <select class="form-control" id="op" name="op[]" size="1">
        <option value="Incorrecto" selected="selected">Incorrecto</option>
        <option value="Correcto">Correcto</option>
        </select>
        </div>

<div class="col-lg-10 col-md-6">
<input class="form-control" tabindex="3" type="text" id="id_Anun2" name="resp1[]" placeholder="Escriba la respuesta y seleccione si es correcta o incorrecta" required />
</div>
        <div class="col-lg-2 col-md-6 text-center">
        <select class="form-control" id="op" name="op[]" size="1">
        <option value="Incorrecto" selected="selected">Incorrecto</option>
        <option value="Correcto">Correcto</option>
        </select>
        </div>

</div>
<button class="btn btn-danger btn-sm mt-3" name="boton2" id="boton2" type="button" onclick="elimina2(this);">Eliminar esta Pregunta</button>
</div>
</div>

{% for pregunta in preguntas %}
{% if pregunta.pregunta_tipo == 'SMT' %}
<div id="sections2">
<div class="section2 mt-2">
<div class="row">
<hr style="width: 100%; background-color: #003399">
<div class="col-lg-10 col-md-6">
<b>.:: PREGUNTA ::.</b>
<input id="tipo_preg" type="hidden" name="tipo_preg[]" value="VOF">
<input class="form-control" tabindex="3" type="text" id="id_Anun00" name="preg[]" value="{{ pregunta.pregunta }}" placeholder="Escriba la prenguta a realizar" required />
</div>
<div class="col-lg-2 col-md-6 text-center">
    <b>PUNTOS:</b>
    <input class="form-control text-center" tabindex="3" type="number" id="id_Anun00" name="puntos[]" value="{{ pregunta.puntos }}" min=0 placeholder="Puntos" required />


    {{ pregunta.correcta }}
</div>
{% for respuesta in respuestas %}
    {% if respuesta.pregunta_nro == nro+1 %}
    {% set respta1=respuesta.respuesta %}
    {% set respta2=respuesta.respuesta2 %}
        {% set break = true %}
    {% endif %}

{% endfor %}
<div class="col-lg-10 col-md-6">
<input class="form-control" tabindex="3" type="text" id="id_Anun2" name="resp1[]" placeholder="Escriba la respuesta y seleccione si es correcta o incorrecta" required />
</div>
{% if pregunta.correcta == "Verdadero" %}
{% set verdad='selected="selected"' %}
{% else %}
{% set falsa='selected="selected"' %}
{% endif %}


        <div class="col-lg-2 col-md-6 text-center">
        <select class="form-control" id="op" name="op[]" size="1">
        <option value="Incorrecto" selected="selected">Incorrecto</option>
        <option value="Correcto">Correcto</option>
        </select>
        </div>

</div>
<button class="btn btn-danger btn-sm mt-3" name="boton2" id="boton2" type="button" onclick="elimina2(this);">Eliminar esta Pregunta</button>
</div>
</div>
{% set nro=nro+1 %}
{% endif %}
{% endfor %}

<!-- FIN CICLO SELECCION MULTIPLE -->

<button class="btn btn-info btn-sm mt-3" name="boton" id="boton" type="button" onclick="makeClones2();">Agregar Nueva Pregunta</button>

<input class="btn btn-success btn-lg mt-3 pull-right" tabindex="11" id="btnguardar" name="enviar" type="submit" value="Guardar Cuestionario">

</form>
</div>
</div>
</div>

<!-- HAST AQUI -->
    <div class="col-lg-2 col-md-6">
    <h5 style="color:#003366" >Selecciona prenguta a agregarxxx</h5>

    <div class="col-lg-12 col-md-6">
    <div class="card">
    <a onclick="procesando();" style="background-color: #007A00;color:#FF6600;" href="{{ constant('URLROOT2') }}/educadores/cuestionario/{{ datos_educa.id_asiste }}" data-toggle="tooltip" data-placement="top" title="Ir a Tarea">
    <h6 class="card-header text-white text-center" style="background-color: #FF7029" >Pregunta Abierta</h6>
    </a>
    <div class="card-body text-center" style="background-color: #9E5F00">
    <i class="fa fa-comments fa-2x text-white"></i>
    </div>
    </div>
    </div>

    <div class="col-lg-12 col-md-6">
    <div class="card">
    <a onclick="procesando();" style="background-color: #007A00;color:#FF6600;" href="{{ constant('URLROOT2') }}/lms/cuestionario/{{ datos_educa.id_asiste }}" data-toggle="tooltip" data-placement="top" title="Ir a Tarea">
    <h6 class="card-header text-white text-center" style="background-color: #FF7029" >Verdadero o Falso</h6>
    </a>
    <div class="card-body text-center" style="background-color: #9E5F00">
    <i class="fa fa-comments fa-2x text-white"></i>
    </div>
    </div>
    </div>

    <div class="col-lg-12 col-md-6">
    <div class="card">
    <a onclick="procesando();" style="background-color: #007A00;color:#FF6600;" href="{{ constant('URLROOT2') }}/educadores/cuestionario/{{ datos_educa.id_asiste }}" data-toggle="tooltip" data-placement="top" title="Ir a Tarea">
    <h6 class="card-header text-white text-center" style="background-color: #FF7029" >Seleccion Multiple</h6>
    </a>
    <div class="card-body text-center" style="background-color: #9E5F00">
    <i class="fa fa-comments fa-2x text-white"></i>
    </div>
    </div>
    </div>
    </div>
</div>
<br><br><br>
</div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript">

$("#VOF").hide();
$("#SMT").show("slow");

function clonar(){
$("#sections").clone(true,true).appendTo("#destino");
}

var template = $('#sections .section:last').clone();
var template2 = $('#sections2 .section2:last').clone();
//define counter
var sectionsCount = 1;

//add new section
//$('body').on('click', '.addsection', function() {
function makeClones() {
        alert('section1');
    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone().find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for', newId);

        //update id
        this.id = newId;

        if (this.name) {
            this.name = this.name+sectionsCount;
        }

    }).end()

    //inject new section
    .appendTo('#sections');
    return false;
};

function makeClones2() {
    alert('section2');
    //increment
    sectionsCount++;

    //loop through each input
    var section2 = template2.clone().find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for', newId);

        //update id
        this.id = newId;

        if (this.name) {
        //    alert(this.name);
            this.name = this.name+sectionsCount;
        }

    }).end()

    //inject new section
    .appendTo('#sections2');
    return false;
};

//remove section
//$('#sections').on('click', '.remove', function() {
function removes() {
    //fade out section
    $(this).parent().fadeOut(300, function(){
        //remove parent element (main section)
        $(this).parent().parent().empty();
        return false;
    });
    return false;
};



$("#makeclone").click(function() {
    alert("Clicked Fired");
    makeClones();
});

function elimina(obj) {
  //alert(obj);
  $(obj).closest(".section").remove();
}

function elimina2(obj) {
    //alert(obj);
    $(obj).closest(".section2").remove();
}

</script>
{% endblock %}