{% 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">

<form action="{{ constant('URLROOT2') }}/lms/EduCuestionarioCrear" method="post">

    <input id="id_Curso" type="hidden" name="id_Curso" value="{{ datos_educa.id_curso }}">

    <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>

{% set nro=0 %}
{% set respta1='' %}
{% set respta2='' %}

{% for pregunta in preguntas %}
<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 />

    <b><span style="font-size: small">Seleccione la Respuesta Correcta</span></b>
    {{ 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 == "V" %}
{% set verdad='checked' %}
{% else %}
{% set falsa='checked' %}
{% endif %}


        <div class="col-lg-2 col-md-6 text-center"><br>
        <input id="resp1" name="op[{{ nro }}]" type="radio" value="V" {{ verdad }} />
        </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>
        <input id="resp1" name="op[{{ nro }}]" type="radio" value="F"  {{ falsa }} />
        </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 %}
{% endfor %}


<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 />

    <b><span style="font-size: small">Seleccione la Respuesta Correcta</span></b>
</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>
        <input id="resp1" name="op[]" type="radio" value="V" >
        </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>
        <input id="resp1" name="op[]" type="radio" value="F" checked>
        </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>

<button class="btn btn-info btn-sm mt-3" name="boton" id="boton" type="button" onclick="makeClones();">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 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">

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

//add new section
//$('body').on('click', '.addsection', function() {
function makeClones() {
    //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;
};

//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("elimina");
  $(obj).closest(".section").remove();
}

</script>
{% endblock %}