{% extends "principal.html" %}
{% load staticfiles %}
{% block title %}Registro Actividad{% endblock %}
{% block extrahead %}




    <!-- Icon Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/fonts/glyphicons/style.css" %}" media="screen">
    <!--  Main Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.css" %}" media="screen">
    <!-- Demo Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/demo.css" %}" media="screen">

    <!-- Login Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/form.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "assets/css/login.css" %}" media="screen">

    <link rel="stylesheet" href="{% static "plugins/zocial/zocial.css" %}" media="screen">

    <!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}"  media="screen">

<!-- Theme Stylesheet -->
<link rel="stylesheet" href="{% static "assets/css/dandelion.theme.css" %}"  media="screen">
<!-- Icon Stylesheet -->
<link rel="stylesheet" href="{% static "assets/css/fonts/glyphicons/style.css" %}"  media="screen">
<link rel="stylesheet" href="{% static "assets/js/plugins/growl/css/jquery.growl.css" %}"  media="screen">
<!-- Demo Stylesheet -->
<link rel="stylesheet" href="{% static "assets/css/demo.css" media=" %}" screen">

<link rel="stylesheet" href="{% static "autocompletable/jquery-ui.css" media=" %}" screen">
<script src="{% static "autocompletable/jquery.min.js" %}"></script>
<script src="{% static "autocompletable/jquery-ui.min.js" %}"></script>

 <script language="javascript">
$(function() {

//Bloque para el combo de actividad
if ($("#id_tipo_actividad").find("option:selected").text() != 'Otro' )
    {
        $("input#id_especificar_actividad").val('');
        $("input#id_especificar_actividad").attr('disabled', 'disabled');
    }


    $("#id_tipo_actividad").change(function() {


    if ($(this).find("option:selected").text() == 'Otro')
        {
            $("input#id_especificar_actividad").removeAttr('disabled');
            $("input#id_especificar_actividad").focus();
        }
    else
        {
            $("input#id_especificar_actividad").val('');
            $("input#id_especificar_actividad").attr('disabled', 'disabled');
        }

    });
});



</script>


<script>
$(function(){
    $("#id_nombre").autocomplete({
        source: "/ajaxautocompletable/",
        minLength: 2,
        });
});
</script>

    <script type="text/javascript">

     function soloNumeros(evt){
       var charCode = (evt.which) ? evt.which : event.keyCode5285
           return ((charCode > 7 && charCode < 10) || (charCode >= 48 && charCode <= 57 ) || (charCode > 95 && charCode <106 ) || charCode==37 || charCode==39);
        }

        </script>

<script type="text/javascript">

function suma(form){

    var v1=form.Docentes.value;
    var v2=form.Estudiantes_de_nivel_superior.value;
    var v3=form.Investigadores.value;
    var v4=form.Jóvenes_de_bachillerato.value;
    var v5=form.Jóvenes_de_secundaria.value;
    var v6=form.Niños_de_preescolar.value;
    var v7=form.Niños_de_primaria.value;
    var v8=form.Público_general.value;
    var pubId1=document.getElementById("id_tipo_publico_0")
    var pubId2=document.getElementById("id_tipo_publico_1")
    var pubId3=document.getElementById("id_tipo_publico_2")
    var pubId4=document.getElementById("id_tipo_publico_3")
    var pubId5=document.getElementById("id_tipo_publico_4")
    var pubId6=document.getElementById("id_tipo_publico_5")
    var pubId7=document.getElementById("id_tipo_publico_6")
    var pubId8=document.getElementById("id_tipo_publico_7")
    var regex2 = /^[0-9]{3}$/;

    if (v1==""){
        v1=0;
        pubId1.checked=false;
    }else{
        pubId1.checked=true;
    }

    if (v2==""){
        v2=0;
        pubId2.checked=false;
    }else{
        pubId2.checked=true;
    }
    if (v3==""){
        v3=0;
        pubId3.checked=false;
    }else{
        pubId3.checked=true;
    }
    if (v4==""){
        v4=0;
        pubId4.checked=false;
    }else{
        pubId4.checked=true;
    }
    if (v5==""){
        v5=0;
        pubId5.checked=false;
    }else{
        pubId5.checked=true;
    }
    if (v6==""){
        v6=0;
        pubId6.checked=false;
    }else{
        pubId6.checked=true;
    }
    if (v7==""){
        v7=0;
        pubId7.checked=false;
    }else{
        pubId7.checked=true;
    }
    if (v8==""){
        v8=0;
        pubId8.checked=false;
    }else{
        pubId8.checked=true;
    }
    form.cupo.value=parseFloat(v1)+parseFloat(v2)+parseFloat(v3)+parseFloat(v4)+parseFloat(v5)+parseFloat(v6)+parseFloat(v7)+parseFloat(v8);
    return;
}

</script>

<script type="text/javascript">
function confirmar(id) {
    if (confirm("¿Seguro que desea eliminar la actividad")) {
        // Respuesta afirmativa...

        window.location.href = '/borrar/' + id;
    }
}

function eliminar_expositor(id, exp_id) {

    if (confirm("¿Seguro que desea eliminar al expositor")) {
        // Respuesta afirmativa...

        window.location.href = '/borrar_expositor/' + id + ' and ' + exp_id;
    }
}

</script>

    {% endblock %}

   {% block headertoolbar %}

                    <!-- Header Toolbar Menu -->
                    <div id="dgtic-header-toolbar" class="clearfix">
                        <div id="dgtic-user-profile-wrap">
                            <div id="dgtic-user-profile" data-toggle="dropdown" class="clearfix">

                                <div id="dgtic-user-info">
                                   <i class="icol-user"></i>
                                    {{user.first_name}} {{user.last_name}}
                                    <span class="dgtic-user-title">{%if user.is_active%}{%for p in nombre_institucion %}{{p.nombre}}{%endfor%}{%endif%}</span>
                                </div>
                            </div>
                            <ul class="dropdown-menu">
                                <li><a href="/programa_actividad/">Inicio</a></li>
                                <li class="divider"></li>
                                <li><a href="/cambio_password/chpasswd/{{user.id}}">Cambiar Contraseña</a></li>
                            </ul>
                        </div>
                        <div id="dgtic-header-button-container">
                            <ul>
                                <li class="dgtic-header-button-wrap">
                                    <div class="dgtic-header-button">
                                        <a href="/logout_user/"><i class="icon-power"></i></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {% endblock %}


{% block breadcrumbs %}
{{ block.super }}
<li class="active"><a href="/programa_actividad/"><i class="icon-pen"></i>Actividades</a></li>
{% endblock %}
{% block maincontent %}


{% if user.is_superuser%}

 <div class="row-fluid">
                            <div class="span12 dgtic-panel">
                                <div class="dgtic-panel-header">
                                    <span class="dgtic-panel-title"><i class="icol-control-wheel"></i>Indicadores </span>
                                </div>

                               <div class="dgtic-panel-content">
                                   <ul class="dgtic-stats-container">
                                    <li data-provide="circular" data-fill-color="#FF0000" data-initial-value="{{municipios.count}}" data-max-value="{{municipios.count}}" data-label="Municipios" style="width: 136px; height: 136px;"></li>
                                    <li data-provide="circular" data-fill-color="#FFAA00" data-initial-value="{{instituciones_.count}}" data-max-value="{{instituciones_.count}}" data-label="Instituciones registradas" style="width: 136px; height: 136px;"></li>
                                    <li data-provide="circular" data-fill-color="#009999" data-initial-value="{{actividades_confirmadas.count}}" data-max-value="{{total_actividades.count}}" data-label="Actividades Confirmadas" style="width: 136px; height: 136px;"></li>
                                    <li data-provide="circular" data-fill-color="#FFD300" data-initial-value="{{actividades_no_confirmadas.count}}" data-max-value="{{total_actividades.count}}" data-label="Actividades no confirmadas" style="width: 136px; height: 136px;"></li>
                                    <li data-provide="circular" data-fill-color="#2E64FE" data-initial-value="{{asistentes_esperados}}" data-max-value="{{asistentes_esperados}}" data-label="Asistentes esperados" style="width: 136px; height: 136px;"></li>
                                    <li data-provide="circular" data-fill-color="#FF4000" data-initial-value="{{asistentes_confirmados}}" data-max-value="{{asistentes_confirmados}}" data-label="Asistentes confirmados" style="width: 136px; height: 136px;"></li>
                                    </ul>
                                </div>

                              </div>
                        </div>


{% endif %}


<div class="row-fluid">






                            <div class="span15">







                                <i style="background-color:#{{registro.color}}"
data-original-title="{{registro.nombre}}" rel="tooltip"
                                >&nbsp;&nbsp;&nbsp;&nbsp;</i>

<div class="dgtic-panel collapsible">




                                    <div class="dgtic-panel-header">
                                        <span class="dgtic-panel-title">
                                            <i class="icol-grid"></i>
                                            Actividades Registradas


                                            <span class="step-links">
                                                <select id="rpp" onchange = "window.location.href = '?bscr={{bscr}}&rpp=' + this.value">
                                                    <option value="10" {% if rpp == '10'%}selected{% endif %}>10</option>
                                                    <option value="20" {% if rpp == '20'%}selected{% endif %}>20</option>
                                                    <option value="50" {% if rpp == '50'%}selected{% endif %}>50</option>
                                                    <option value="100" {% if rpp == '100'%}selected{% endif %}>100</option>
                                                    <option value="250" {% if rpp == '250'%}selected{% endif %}>250</option>
                                                </select>

                                                {% if contacts.has_previous %}
                                                    <a href="?page={{ contacts.previous_page_number }}&rpp={{rpp}}& bscr={{bscr}}">Anterior</a>
                                                {% endif %}

                                                <span class="current">
                                                    página {{ contacts.number }} de {{ contacts.paginator.num_pages }}.
                                                </span>

                                                {% if contacts.has_next %}
                                                    <a href="?page={{ contacts.next_page_number }}&rpp={{rpp}}&bscr={{bscr}}">Siguiente</a>
                                                {% endif %}
                                                <input id="busq" type="text" class="search-query" placeholder="Buscar..." value="{{bscr}}"/>
                                    </span>


                                </span>
                                    <div class="dgtic-panel-toggler"><span></span></div></div>
                                    <div class="dgtic-panel-inner-wrap"><div class="dgtic-panel-content dgtic-table-container">

                                        <table class="dgtic-table checkable">
                                        {% if contacts %}
                                            <thead>
                                                <tr>
                                                    <!-- <th class="checkbox-column"><input type="checkbox"></th> -->

                                                    <th>Titulo</th>
                                                    <th>Tipo de Actividad</th>
                                                    <th>Lugar</th>
                                                    <th>Fecha</th>
                                                    <th>Hora</th>
                                                    <th>Expositores</th>
                                                    <th>Opciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for p in contacts %}
                                                <tr>
                                                    <td>{{p.titulo}}{% if p.bandera%} <i class="icol-medal-gold-1"></i>{%endif%}</td>
                                                    <td>{{p.tipo_actividad}}</td>
                                                    <td>
                                                        {{ p.lugar }}
                                                    </td>
                                                    <td>{{p.fecha}}</td>
                                                    <td>{{p.hora}}</td>
                                                    <td>
                                                    {% for exp in p.expositor.all %}

                                                    {{exp.nombre}}
                                                     <a onclick="eliminar_expositor({{p.id}} , {{exp.id}} )" class="pull-right" href="#"><i class="icol-cross" rel="tooltip" data-placement="top" data-original-title="Eliminar Expositor"></i></a><br>

                                                    {% endfor %}
                                                    </td>
                                                    {% if  p.generar_folio%}
                                                    <td>No se puede editar</td>
                                                    {% else %}
                                                    <td>
                                                    <li class="active"><a href="/edit_actividad/{{p.id}}" title="Editar"><i class="icol-pencil"></i></a>
                                                    <a onclick="confirmar({{p.id}})" href="#"><i class="icol-cross" title="Eliminar" ></i></a>
                                                    <a href="/add_expositor/{{p.id}}"><i class = "icol-user-business" title="Agregar Expositor"></i></a></li>
                                                    </td>

                                                    {%endif%}

                                                </tr>
                                                {%endfor%}
                                                </tbody>

                                                {% else %}                              <tbody>
                                                <tr>
                                                    <td><h3>Sin Actividad</h3></td>
                                                </tr>

                                                </tbody>

                                        {% endif %}
                                        </table>
                                    </div></div>
                                </div>

                        </div>



<div class="row-fluid">
    <div class="span12">

        <div class="dgtic-panel">
            <div class="dgtic-panel-header">
                <span class="dgtic-panel-title">
                    <i class="icon-magic"></i>
                    Registrar Actividad
                </span>
            </div>
            <div class="dgtic-panel-content dgtic-form-container">
                   <form method="POST" name="form" id="form" enctype='multipart/form-data' class="dgtic-form">
                    {% if messages %}
                        <ul class="messages">
                          {% for message in messages %}
                          <li{% if message.tags %} class="dgtic-message {{ message.tags }}"{% endif %}><h2>{{ message }}</h2></li>
                          {% endfor %}
                      </ul>
                      {% endif %}
                        {% csrf_token %}

                        <div class="dgtic-form-inline">
                        {% include "formsnippet.html" with form=formulario %}
                        {% include "formsnippet.html" with form=prueba_formulario %}

                        <div class="dgtic-form-row">
                            <div class="row">
                                <div class="span4">

                                    <div style="margin-left:40px;" class="control-group">
                                        <label class="control-label" for="sel">Roles</label>
                                        <div class="controls">
                                            <select id="sel">
                                                <option value="">Seleccione</option>
                                                <option value="exp">Expositor</option>
                                                <option value="par">Participante</option>
                                                <option value="org">Organizador</option>
                                                <option value="pat">Patrocinador</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div style="margin-left:40px;" class="control-group">
                                        <label class="control-label" for="nombre_type">Nombre</label>
                                        <div class="controls">
                                            <input id="nombre_type" type="text" id="nombre_type" placeholder="Nombre completo" title="Escriba el nombre completo">
                                            <br>
                                            <b><font color="red">Este nombre se utilizará para la generación de los reconocimientos, escríbalo correctamente.</font></b>
                                        </div>
                                    </div>
                                    <div style="margin-top:10px;margin-left:40px;" class="control-group">
                                        <button id="add_type" class="btn btn-success" title="Agregar">Agregar</button>
                                    </div>

                                </div>
                                <div class="span8">

                                    <div class="dgtic-panel collapsible">
                                        <div class="dgtic-panel-header">
                                            <span class="dgtic-panel-title">
                                                <i class="icol-grid"></i>
                                                Roles
                                            </span>
                                        </div>
                                        <div class="dgtic-panel-content dgtic-table-container">
                                            <table id="roles_table" class="dgtic-table checkable">
                                                <thead>
                                                    <tr>
                                                        <th>Nombre</th>
                                                        <th>Tipo</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody> </tbody>
                                            </table>
                                        </div>
                                    </div>


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

                        </div>
                        <div class="btn-row">
                            <input type="submit" class = "btn btn-success" value = "Guardar" name ="guardar" title="Guardar">
                        </div>
                    </form>

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



{% endblock%}

{% block extralibs %}




        <!-- JS Libs -->
    <script src="{% static "assets/js/libs/jquery-1.8.3.min.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.placeholder.min.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.mousewheel.min.js" %}"></script>

    <!-- JS Bootstrap -->
    <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>

    <!-- jQuery-UI JavaScript Files -->
    <script src="{% static "assets/jui/js/jquery-ui-1.9.2.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.timepicker.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.touch-punch.min.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "assets/jui/css/jquery.ui.all.css" %} " media="screen">
    <script src="{% static "assets/js/plugins/growl/js/jquery.growl.js" %}"></script>
    <!-- JS Plugins -->

    <!-- Validation Plugin -->
    <script src="{% static "plugins/validate/jquery.validate.min.js" %}"></script>

    <!-- Wizard Plugin -->
    <script src="{% static "assets/js/plugins/wizard/dandelion.wizard.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.form.min.js" %}"></script>
    <link rel="stylesheet" href="{% static "assets/js/plugins/wizard/dandelion.wizard.css" %}" media="screen">

    <!-- JS Demo -->
    <script src="{% static "assets/js/demo/demo.wizard.js" %}"></script>

    <!-- JS Template -->
    <script src="{% static "assets/js/core/dandelion.core.js"%}"></script>

    <!-- JS Customizer -->
    <script src="{% static "assets/js/core/dandelion.customizer.js"%}"></script>

     <script type="text/javascript">
    $(document).ready(function(){
        $('div.dgtic-form-item>ul>li').each(function(index){
            $(this).append('<br> <input name="' + $(this).text().substring(1).replace(/ /g, '_') + '" onkeyup=suma(this.form); onkeydown="return soloNumeros(event);" type=text /> <br>')
        });

        $('#busq').on('keypress', function (e){
          if(e.keyCode == 13){
            window.location.href = '?rpp={{rpp}}&bscr='+this.value;
          }
        });

        var id = 0;

        $('#add_type').on('click', function (event){
            event.preventDefault();

            if( $('#sel').val() == '' ){
                $.growl.warning({ title: "Aviso", message: "No ha seleccionado un rol." });
                return;
            }

            var sel_text = $('#sel option:selected').text();

            var expositor = $('#nombre_type').val() || '';

            if( expositor === '' ){
                $.growl.warning({ title: "Aviso", message: "Debe escribir un nombre." });
                return;
            }

            $('#nombre_type').val('');

            var tr_template = [
                '<tr>',
                    '<td><input type="hidden" name="'+sel_text.toLowerCase()+'['+(++id)+']" value="'+expositor+'" />'+expositor+'</td>',
                    '<td>'+sel_text+'</td>',
                    '<td class="dgtic-icon-column">',
                        '<a href="#" class="remove-type"><i class="icol-cross"></i></a>',
                    '</td>',
                '</tr>'
            ];
            var tr = tr_template.join('');
            $('#roles_table > tbody').prepend(tr);

        });

        $('#roles_table').on('click', '.remove-type', function (e){
            e.preventDefault();
            var a = $(this);

            var tr = a.parent().parent();

            tr.fadeOut(200, function (){
                tr.remove();
            });
        });

        var _pluck  = function (arr, field){
            var p = [];
            for(var i=0;i<arr.length; i++){
                p.push(arr[i][field]);
            }
            return p;
        }

        $('#id_tipo_actividad').on('change', function (e){
            var inv = $(this).val();

            $.post('/ajax__roles_involucrados',
                {inv: inv}
                ).done(function(respuesta){

                    var options = [];
                    var regs = _pluck(respuesta, 'fields');

                    for(var i = 0; i < regs.length; i++){
                        var descripcion = regs[i]['descripcion'];
                        var template = [
                            '<option value="'+ descripcion.substring(0,3).toLowerCase() +'">'+descripcion+'</option>'
                        ];
                        options.push(template);
                    }
                    options.unshift('<option value="">Seleccione</option>');
                    $('#sel').html(options.join(''));

                });
        });

        $('body').on('click', 'input[type=checkbox]', function (event){
          var $el = $(this).parent().next().next();
          if(this.checked) $el.val('1');
          else $el.val('');

          var $p = $(this).parents('ul');
          var sum = 0;
          $p.find(':checkbox').each(function(){
            var $el = $(this).parent().next().next();
            if($el.val() !== '' && !isNaN($el.val())) sum += parseInt($el.val());
          });
          $('input#id_cupo').val(sum);

        });

        $('div.dgtic-form-item').find(':checkbox').each(function(){
          if ( $(this).is(':checkbox') ) this.checked = false;
        });

    });
    </script>
    <script type="text/javascript">
    $.timepicker.regional['es'] = {
        closeText: 'Cerrar',
        currentText: 'Hoy',
        timeOnlyTitle: 'Elegir Tiempo',
        timeText: 'Tiempo',
        hourText: 'Hora',
        minuteText: 'Minuto',
        secondText: 'Second'
    };
    $.timepicker.setDefaults($.timepicker.regional['es']);

    $(function() {

        $( "#id_hora" ).timepicker({
            dateFormat: '',
            timeFormat: 'hh:mm tt',
            timeOnly: true
        });

    });

    </script>
    <script src="{% static "assets/js/libs/jquery.placeholder.min.js" %}"></script>
    <script src="{% static "plugins/validate/jquery.validate.min.js" %}"></script>


    <!-- Flot Plugin -->
    <!--[if lt IE 9]>
    <script src="assets/js/libs/excanvas.min.js"></script>
    <![endif]-->
    <script src="{% static "plugins/flot/jquery.flot.min.js" %}"></script>
    <script src="{% static "plugins/flot/plugins/jquery.flot.tooltip.min.js"%}"></script>
    <script src="{% static "plugins/flot/plugins/jquery.flot.stack.min.js"%}"></script>
    <script src="{% static "plugins/flot/plugins/jquery.flot.pie.min.js"%}"></script>
    <script src="{% static "plugins/flot/plugins/jquery.flot.resize.min.js"%}"></script>

    <!-- Circular Stat Plugin -->
    <script src="{% static "assets/js/plugins/circularstat/dandelion.circularstat.js"%}"></script>


    <!-- JS Login -->
    <script src="{% static "assets/js/core/dandelion.login.js" %}"></script>



{% endblock %}