{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .::Notificaciones Creadas
{% endblock titulo %}
{% block content1 %} 
       <script src="{% static 'boostbox/css/js/modules/boostbox/libs/bootstrap-filestyle/bootstrap-filestyle1.min.js' %}"></script> 

      <script type="text/javascript">
        $("#navnoti").attr('class','dropdown active');
        $("#navNCreadas").attr('class','active')
      </script>
        <!--<div class="row"><br><br><br><br></div>-->
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="card">
                <div class="card-head card-head-xs style-default"> <strong>NOTIFICACIONES CREADAS</strong></div>
                <div class="card-body">
                  <div class="row" id="Result">
                    {% ifnotequal resultado '' %}
                    {% ifequal resultado 'exito' %}
                    <h4 class="bg-success" align="center">
                      Registro Exitoso!!
                    </h4>
                    {% else %}
                    <h4 class="bg-danger" align="center">
                      :( Fallo registro {{resultado}}
                    </h4>
                    {% endifequal %}
                    {% endifnotequal %}
                  </div>
                  <p></p>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <a class="btn btn-primary btn-block" href="#" data-toggle="modal" data-target="#myModal" role="button">Nuevo</a>
                    </div>
                    <div class="col-md-2">
                      <button type="button" class="btn btn-primary btn-block" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
                    </div>
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                      <div class="col-md-12" style="text-align: left;">
                          <script type="text/javascript">
                            var Aux="";
                            var filaI =0;
                            $(document).ready(function () {
                              ajax_notificaciones();
                              $(document).on("click",".filaN",function(){
                                var num = $(this).attr('id');
                                filaI = num;
                                var fila= $(this).attr('class');
                                $("."+fila).attr('class','filaN');
                                $("#"+num).attr('class','filaN info');
                                $("#desc").attr('value',Aux[filaI].des)
                                $("#perm").prop('value',Aux[filaI].prm);
                                $("#enlace").prop('href',"/media/"+Aux[filaI].arc);
                                $("#contenido").html('<iframe src="/media/'+Aux[filaI].arc+'"style="display:block; width:100%; border:none;margin:0; padding:0; height:100%; "></iframe>')
                              });
                              $("a.externo").click(function() {
                                  url = $(this).attr("href");
                                  window.open(url, '_blank');
                                  return false;
                               });
                              $("#btnRefrescar").click(function(){
                                ajax_notificaciones();
                              });

                              $('#icondemo').filestyle({
                                iconName : 'glyphicon glyphicon-file',
                                buttonText : 'Seleccione un archivo',
                                buttonName : 'btn-support3'
                              });  

                              function ajax_notificaciones(){
                                $.ajax({
                                  url:'/NotiCreadas/',
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                    Aux = data;
                                    var html ="";
                                    for(var i=0;i<data.length;i++){
                                        html += '<tr data-toggle="modal" data-target="#myModal1" class="filaN" id="'+i+'"><th scope="row">'+(i+1)+'</th><td>'+data[i].des+'</td><td>'+data[i].f+'</td><td>'+data[i].arc+'</td></tr>';
                                    }                        
                                    $('#listaN').html(html);
                                  }
                                });
                              }
                            });
                          </script>
                          <div>
                            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                      <h4 class="modal-title" id="myModalLabel">Nuevo</h4>
                                    </div>
                                    <div class="modal-body">
                                      <p>
                                        <div class="col-md-12 col-sm-12" >
                                            <div class="panel panel-info">
                                              <div class="panel-heading" align="center"> <h4>Nueva Notificación</h4></div>
                                               <form action="/Notificaciones/" enctype="multipart/form-data" method="POST" data-toggle="validator"  role="form"> {% csrf_token %}
                                                <div class="panel-body">
                                                  <div class="row">
                                                    <div class="col-md-12">
                                                      <p class="bg-success" align="center">
                                                        &nbsp;
                                                      </p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-3 col-md-offset-1" >
                                                      <h5>Descripcion: </h5>
                                                    </div>
                                                    <div class="col-md-7">
                                                      <input type="text" class="form-control" name ="des" required="required">
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-3 col-md-offset-1"> 
                                                        <h5 >Compartir con:</h5> 
                                                      </div>
                                                      <div class="col-md-4">
                                                        <select class="form-control"name="permiso">
                                                          <option value="gerente">Gerente</option>
                                                          <option value="operador">Operadores</option>
                                                          <option value="todos">Todos</option>
                                                          <option value="yo">Solo yo</option>
                                                        </select>
                                                        <p></p>
                                                      </div>
                                                  </div>
                                                  <p></p>
                                                   <div class="row">
                                                       <div class="col-md-3 col-md-offset-1" >
                                                            <h5>Archivo: </h5> 
                                                        </div>
                                                        <div class="col-md-6">
                                                            <input type="file" id="icondemo" name="file" required> 
                                                        </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-2">
                                                      <button class="btn btn-primary btn-block" type="submit"><i class="glyphicon glyphicon-upload"></i> Subir</button>
                                                    </div>

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

                                    <div class="modal-footer">
                                      <hr>
                                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>

                                    </div>
                                  </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                              </div>
                            <div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                      <h4 class="modal-title" id="myModalLabel">Detalles</h4>
                                    </div>
                                    <div class="modal-body">
                                      <p>
                                        <div class="col-md-12 col-sm-12" >
                                            <div class="panel panel-info">
                                              <div class="panel-heading" align="center"> <h5>Detalle de  Notificacion</h5></div>
                                                <div class="panel-body">
                                                  <div class="row">
                                                    <div class="col-md-12">
                                                      <p class="bg-success" align="center">
                                                        &nbsp;
                                                      </p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-3 col-md-offset-1" >
                                                      <h5>Descripcion: </h5>
                                                    </div>
                                                    <div class="col-md-7">
                                                      <input type="text" class="form-control" id ="desc">
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-3 col-md-offset-1"> 
                                                        <h5 >Compartir con:</h5> 
                                                      </div>
                                                      <div class="col-md-4">
                                                        <select class="form-control"name="permiso"id="perm">
                                                          <option value="gerente">Gerentes</option>
                                                          <option value="operador">Operadores</option>
                                                          <option value="todos">Todos</option>
                                                          <option value="yo">Solo yo</option>
                                                        </select>
                                                        <p></p>
                                                      </div>
                                                  </div>
                                                  <p></p>
                                                   <div class="row">
                                                      <div class="col-md-3 col-md-offset-1" > 
                                                        <h5>Archivo</h5> 
                                                      </div>
                                                      <div class="col-md-7">
                                                          <a href="" id="enlace" class="btn btn-primary externo"><i class="fa fa-eye"></i> Ver Fichero</a> 
                                                      </div> 
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-12" id="contenido"style="height:500px;">

                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-2">
                                                      <input class="btn btn-primary btn-block" type="button" value="Actualizar">
                                                    </div>

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

                                    <div class="modal-footer">
                                      <hr>
                                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>

                                    </div>
                                  </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                              </div>
                          </div>
                          <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Descripcion</th>
                                    <th>fecha</th>
                                    <th>Archivo</th>
                                  </tr>
                                </thead>
                                <tbody id="listaN">
                                    
                                </tbody>
                            </table>
                          </div>
                      </div>
                    </p>
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1" align="center">
                      <nav>
                        <ul class="pagination">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li class="active"><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div> 
{% endblock content1 %}