{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .:: Subir Foto
{% endblock titulo %}
{% block content1 %}
	 <script src="{% static 'boostbox/css/js/modules/boostbox/libs/bootstrap-filestyle/bootstrap-filestyle.min.js' %}"></script> 
      <script type="text/javascript">
        $("#navUser").attr('class','dropdown active');
        $("#navSubirFoto").attr('class','active')
      </script>
          <div class="col-md-12 col-sm-12" >
              <div class="card">
              <div class="card-head card-head-xs style-default"> <strong>CAMBIAR FOTO DE PERFIL</strong></div>
                <div class="card-body">
                  <div class="row" id="Result">
                    {% ifnotequal resultado '' %}
                    {% ifequal resultado 'exito' %}
                    <div class="alert alert-success" role="alert" align="center">
                      <h4>OPERACION EXITOSA!!</h4>
                    </div>
                    {% else %}
                    <div class="alert alert-danger" role="alert" align="center">
                      <h4>FALLO OPERACION :( {{resultado}}</h4>
                    </div>
                    {% endifequal %}
                    {% endifnotequal %}
                  </div>
                  <div class="row" >
                    <div class="" role="alert" align="center" id="ExitoS">
                      <h4 id="resul_text"></h4>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="alert alert-warning" role="alert" align="center">
                        <h4>Actualizar Foto</h4>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <button type="button" class=" btn btn-block btn-primary" data-toggle="modal" data-target="#myModal1">Nuevo</button>
                    </div>
                    <div class="col-md-2">
                      <button type="button" class="btn btn-block btn-primary" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
                    </div>
                  </div>
                  <p></p>
                  <div class="row">
                      <div class="col-md-12">
                            <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">Subir Foto</h4>
                                    </div>
                                    <div class="modal-body">
                                      <div class="row">
                                        <br>
                                          <div class="col-md-8 col-md-offset-2 col-sm-12" >
                                              <div class="panel panel-danger">
                                                 <form action="/subir_archivo_user/" 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>Título: </h5>
                                                      </div>
                                                      <div class="col-md-7">
                                                      <div class="fg-line">
                                                        <input type="text" class="form-control" name ="titulo" required="required">
                                                        <div class="form-control-feedback" style="text-align:left;" ></div>
                                                      </div>
                                                        <p></p>
                                                      </div>
                                                    </div>
                                                    <p></p>
                                                    <div class="row">
                                                      <div class="col-md-3 col-md-offset-1" >
                                                        <h5>Descripción: </h5>
                                                      </div>
                                                      <div class="col-md-7">
                                                      <div class="fg-line">
                                                        <textarea class="form-control" rows="2"name ="des"></textarea>
                                                        <div class="form-control-feedback" style="text-align:left;" ></div>
                                                      </div>
                                                        <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">
                                                            <input type="file"  accept="image/x-png, image/jpeg" 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-block btn-primary" type="submit"><i class="glyphicon glyphicon-upload"></i> Subir</button>
                                                      </div>

                                                    </div>
                                                    <p></p>
                                                  </div>
                                                </form>
                                              </div>
                                          </div>
                                      </div>
                                    </div>
                                  </div><!-- /.modal-content -->
                              </div>
                              </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">Detalles</h4>
                                    </div>
                                    <br>
                                    <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-5" >
                                            <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>Id: </h5>
                                                    </div>
                                                    <div class="col-md-7">
                                                      <input type="text" class="form-control" id ="pk" readonly="readonly">
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-3 col-md-offset-1" >
                                                      <h5>Titulo: </h5>
                                                    </div>
                                                    <div class="col-md-7">
                                                      <input type="text" class="form-control" id ="titu">
                                                      <p></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">
                                                      <textarea class="form-control" rows="3" id ="descripcion"></textarea>
                                                      <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">
                                                        <a href="" id="enlace" class="externo">Ver en pantalla completa</a>
                                                      </div> 
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-8 col-md-offset-2">
                                                       <button type="button" class=" btn btn-block btn-danger" id="seleccionar"  data-dismiss="modal">Usar como foto del perfil</button>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                          <div class="panel panel-info">
                                                <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-12" id="contenido"style="height:500px;">

                                                    </div>
                                                  </div>
                                                  <p></p>>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                  </div><!-- /.modal-content -->
                                </div>
                              </div>
                          <div class="table-responsive">
                            <table class="table table-hover table-bordered">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Titulo</th>
                                    <th>Descripcion</th>
                                    <th>fecha</th>
                                    <th>Archivo</th>
                                  </tr>
                                </thead>
                                <tbody id="listaf">
                                   
                                </tbody>
                            </table>
                          </div>
                      </div>
                  </div>
                </div>
              </div>
          </div> 
      <script type="text/javascript">
        var Aux="";
        var filaI =0;
        $(document).ready(function () {
          ajax_upload();
          $(document).on("click",".filaf",function(){
            var num = $(this).attr('id');
            filaI = num;
            var fila= $(this).attr('class');
            $("."+fila).attr('class','filaf');
            $("#"+num).attr('class','filaf info');
            $("#pk").prop('value',Aux[filaI].pk);
            $("#titu").prop('value',Aux[filaI].tit);
            $("#descripcion").prop('value',Aux[filaI].des);
            $("#enlace").prop('href',"/media/"+Aux[filaI].fo);
            $("#contenido").html('<iframe src="/media/'+Aux[filaI].fo+'"style="display:block; width:100%; border:none;margin:0; padding:0; height:100%; "></iframe>')
          });

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

          $("a.externo").click(function() {
              url = $(this).attr("href");
              window.open(url, '_blank');
              return false;
           });
          $("#btnRefrescar").click(function(){
            ajax_upload();
          });
          function ajax_upload(){
            $.ajax({
              url:'/archivosUser_ajax/',
              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="#myModal" class="filaf" id="'+i+'"><th scope="row">'+(i+1)+'</th><td>'+data[i].tit+'</td><td>'+data[i].des+'</td><td>'+data[i].f+'</td><td>'+data[i].fo+'</td></tr>';
                }                        
                $('#listaf').html(html);
              }
            });
          }
          //
          function ajax_select(){
            $.ajax({
              data:{'pk':$("#pk").val()},
              url:'/seleccionarfoto_perfil_ajax/',
              type:'GET',
              dataType:'text',
              success: function(data){
                if(data=='exito'){
                  $("#ExitoS").prop('class','alert alert-success');
                  $("#resul_text").text("El perfil esta actualizado"); 
                 }
                 else{
                  $("#ExitoS").prop('class','alert alert-danger');
                  $("#resul_text").text("Error:(" + data);
                 }
              }
            });
          }
          $("#seleccionar").click(function(){
            ajax_select();
          })
        });
      </script>
{% endblock content1 %}