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

    <!-- 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">
    <!--  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">
    <link rel="stylesheet" href="{% static "assets/js/plugins/swipebox/css/swipebox.min.css" %}"  media="screen">
    <link rel="stylesheet" href="{% static "assets/js/plugins/growl/css/jquery.growl.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">
<!--  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">

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

 <script>
$(function() {
var availableTags = [
{% for i in lista_responsables %}
    
    ("{{i.nombre}}"),

{% endfor %}

];
$( "#id_nombre" ).autocomplete({
source: availableTags
});


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


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

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

    });
});


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

function eliminar_imagen(id) {

    if (confirm("¿Seguro que desea eliminar la imagen?")) {
        // Respuesta afirmativa...

        window.location.href = '/borrar_imagen/'+ 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="dashboard.html">Dashboard</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Change Password</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 ><a href="/registro_de_actividad/"><i class="icon-home"></i>Actividad</a></li>
<li class="active"><a href="/registro_de_actividad/"><i class="icon-home"></i>Editar Actividad </a></li>
{% endblock %} 
{% block maincontent %}

<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="row-fluid">
    <div class="span12">
        <div class="dgtic-panel">
            <div class="dgtic-panel-header">
                <span class="dgtic-panel-title">
                    <i class="icon-magic"></i>
                    Subir imagen de la actividad
                </span>
            </div>
            <div class="dgtic-panel-content dgtic-form-container">
                <div class="dgtic-panel-content with-padding">
                    {% if imgs %}
                        <table class="archivos">
                            {% for img in imgs %}
                                <tr>
                                    <td>
                                        <a class="swipebox" href="/media/{{ img.imagenes }}">
                                            <img src="{{ MEDIA_URL }}{{ img.imagenes }}" width="250" height="100"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a id="img{{img.id}}" class="borrar-imagen" data-id="{{img.id}}" href="#">
                                            <i class="icol-cross" rel="tooltip" data-placement="top" data-original-title="Eliminar Imagen">
                                            </i>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    {% else %}
                        <center><h2>No hay imagenes subidas</h2></center>
                    {% endif %}
                </div>
            <form name ="form" method="POST" enctype='multipart/form-data' class="dgtic-form">
                {% csrf_token %}
                <style>
                    .archivos{
                        list-style:none;
                    }
                    .archivos > li{
                        padding-top: 4px;
                    }
                </style>
                <div class="dgtic-form-inline">
                <center><h5>Ingrese la cantidad de publico que asistió a la actividad</h5></center>
                <p align="center">Es necesario subir al menos una imagen y la cantidad de al menos un tipo de publico.</p>
                    {% for field in form %}
                        <!-- pintamos seccion de error -->
                            {{ field.errors }}
                        <!-- iniciamos celda -->
                        <div id="{{ field.auto_id }}">
                            <!-- pintamos etiqueta -->
                            {{ field.label_tag }}
                            {% if field.field.required %}
                                <b style="color:red;">*</b>
                            {% endif %}
                            <!-- pintamos campo -->
                            {{ field }}
                            <!-- pintamos texto de ayuda -->
                            <span class="form-help">{{ field.help_text }}</span>
                            <!-- cerramos celda -->
                        </div>
                    {% endfor %}
                    <div class="dgtic-form_row">
                                <div id="dinamic_files" class="dgtic-form-cols">
                                    <p style="margin-left:20px;">Seleccione los archivos</p>
                                    <p style="margin-left:20px; color: red;">*NOTA: ADJUNTE AL MISMO TIEMPO TODAS LAS IMÁGENES DE ESTA ACTIVIDAD (MAXIMO 10, HASTA 40Mb EN TOTAL) </p>
                                    <input style="margin-left:20px;" type="file" name="imagenes" multiple="multiple" value="Seleccione los archivos">
                                    <input style="margin-left:20px;margin-top:4px;margin-right:20px;" type="submit" class="pull-right btn btn-primary" value = "Subir" name ="subir">
                                    {% if imgs %}
                                        <input style="margin-left:20px;margin-top:4px;margin-right:20px;" type="button" class="pull-right btn btn-warning" onclick="location.href='/confirmar_actividad';" value = "Confirmar actividad" />
                                    {% endif %}
                                </div>
                            </div>
                </div>
                <br>
                    </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>
    <script src="{% static "assets/js/plugins/swipebox/js/jquery.swipebox.min.js" %}"></script>
    <script src="{% static "assets/js/plugins/growl/js/jquery.growl.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">

    <!-- 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#id_tipo_publico>ul>li').each(function(index){
                $(this).append('<br><input id="' + $(this).text().substring(1).replace(/ /g, '_') + '" name="' + $(this).text().substring(1).replace(/ /g, '_') + '" onkeyup=suma(this.form); onkeydown="return soloNumeros(event);" type=text value="" />')
            });

            {% for cantidades in cantidad_publico %}
                //alert('{{cantidades}} \n {{cantidades.cantidad}} \n {{ cantidades.id_tag }}' );
                $("#{{ cantidades.id_tag }}").val({{cantidades.cantidad}});
            {% endfor %}

            $('table').on('click', '.borrar-imagen', function (event){
                event.preventDefault();

                var $this = $(this);

                $.get('/borrar_imagen/'+$this.data('id'))
                    .done(function (data){
                        if( data.status === 'success' ){
                            var $tr = $('#img'+data.id).parent().parent();
                            $tr.fadeOut(200, function (){
                                $tr.remove();
                            });
                        }
                    });
            });

            $( '.swipebox' ).swipebox();

            $('#id_tipo_publico').on('click', 'input[type=checkbox]', function (event){
                var $el = $(this).parent().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();
                    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>





{% endblock %}