{% extends 'pagina/base_corporativo.html' %}
{% load staticfiles %}
{% load user_tags %}
{% block title %} Lista de pabellones {% endblock %}

{%  block content %}

{% if request.user|has_group:"administrativo" %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-building"></i> Pabellón </li>
  <li class="breadcrumb-item breadcrumb-itemAdmin active"> Lista de Pabellones</li>
</ul>

<h1 class="mt-4 text-center titleIniBoxAdmin"><i class="fas fa-list-ul"></i> Lista de Pabellones</h1>

<br>

<div class="table-responsive tableResStyle">
  <table class="table table-striped table-bordered table-striped" id="ejemplo">
     <thead class="theadStyle theadStyleOrange">
       <tr>
         <th>Nombre</th>
         <th>Descripción</th>
         <th>Acciones</th>
       </tr>
     </thead>
     <tbody class="text-center">
     {% for row in pabellon %}
       <tr>
         <td>{{ row.nombre }}</td>
         <td>{{ row.descripcion }}</td>
         <td>
           <a id="{{row.id}}" class="btn btn-orange btn-sm" data-toggle="modal" data-target="#editarmodal" onclick="datos(this.id)" > Editar </a>
         </td>
       </tr>
       {% empty %}
       <tr>
         <td colspan="6" class="text-center bg-warning">No hay pabellones registrados</td>
       </tr>
     {% endfor %}
     </tbody>
   </table>
 </div>

 <!-- Modal Editar -->
 <div class="modal fade" id="editarmodal">
   <div class="modal-dialog modal-lg">
     <div class="modal-content modalContentStyle">

       <!-- Modal Header -->
       <div class="modal-header modalHeaderStyle">
         <h4 class="modal-title">Editar Ítem</h4>
         <button type="button" class="close" data-dismiss="modal">&times;</button>
       </div>

       <!-- Modal body -->
       <div class="modal-body">
         <div class="container">
           <form class="form" method="POST" id="formulario_editar_compra">
             {% csrf_token %}

             <div class="form-group">
               <input id="id_p" hidden="false">
               <label>Nombre:</label>
               <input type="text" class="form-control" id="nombre_p">
             </div>

             <div class="form-group">
               <br>
               <label>Descripción:</label>
               <input type="text" class="form-control" id="descripcion_p">
             </div>

             <button class="save btn btn-orange btn-lg" type="submit" onclick="Actualizar()">Guardar</button>
             <br><br>
           </form>
         </div>
       </div>

       <!-- Modal footer -->
       <div class="modal-footer">
         <button type="button" class="btn btn-red" data-dismiss="modal">Cerrar</button>
       </div>

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


 {% endif %}

 {% if request.user|has_group:"propietario_negocio" %}
 	<p>Lo siento, no tiene permisos para este contenido :(</p>
 {% endif %}
 {% if request.user|has_group:"empleado_negocio" %}
 	<p>Lo siento, no tiene permisos para este contenido :(</p>
 {% endif %}

 {% endblock %}

 {% block javascript %}

{% include "includes/script-datatables.html" %}
<script>
  var table = $('#ejemplo').DataTable( {
     "paging": true,
     "lengthChange": true,
     "searching": true,
     "ordering": true,
     "info": true,
     "autoWidth": true,
     "language": idioma,
     "lengthMenu": [[15, 25, 50, -1],[15,25,50,"Mostrar Todo"]],
     dom: 'Bfrt<"col-md-6 inline"i> <"col-md-6 inline"p>',
     buttons: {
           dom: {
             container:{
               tag:'div',
               className:'flexcontent'
             },
             buttonLiner: {
               tag: null
             }
           },

           buttons: [
               {
                   extend:    'copyHtml5',
                   text:      '<i class="fa fa-clipboard"></i> Copiar',
                   title:'Lista de pabellones copiada',
                   titleAttr: 'Copiar',
                   className: 'btn btn-app export copia',
                   exportOptions: {
                       columns: [ 0, 1 ]
                   }
               },
               {
                   extend:    'pdfHtml5',
                   text:      '<i class="fas fa-file-pdf"></i>PDF',
                   title:'Lista de Pabellones ',
                   titleAttr: 'PDF',
                   className: 'btn btn-app export pdf',
                   exportOptions: {
                       columns: [ 0, 1 ]
                   },
                   customize:function(doc) {

                       doc.styles.title = {
                           color: '#4c8aa0',
                           fontSize: '30',
                           alignment: 'center'
                       }
                       doc.styles['td:nth-child(2)'] = {
                           width: '100px',
                           'max-width': '100px'
                       },
                       doc.styles.tableHeader = {
                           fillColor:'#4c8aa0',
                           color:'white',
                           alignment:'center'
                       },
                       doc.content[1].margin = [ 100, 0, 100, 0 ]

                   }
               },

               {
                   extend:    'excelHtml5',
                   text:      '<i class="fas fa-file-excel"></i>Excel',
                   title:'Lista de Pabellones',
                   titleAttr: 'Excel',
                   className: 'btn btn-app export excel',
                   exportOptions: {
                       columns: [ 0, 1 ]
                   },
               },
               {
                   extend:    'csvHtml5',
                   text:      '<i class="fas fa-file-csv"></i>CSV',
                   title:'Lista de Pabellones',
                   titleAttr: 'CSV',
                   className: 'btn btn-app export csv',
                   exportOptions: {
                       columns: [ 0, 1 ]
                   }
               },
               {
                   extend:    'print',
                   text:      '<i class="fas fa-print"></i>Imprimir',
                   title:'Lista de Pabellones',
                   titleAttr: 'Imprimir',
                   className: 'btn btn-app export imprimir',
                   exportOptions: {
                       columns: [ 0, 1 ]
                   }
               },
               {
                   extend:    'pageLength',
                   titleAttr: 'Registros a mostrar',
                   className: 'selectTable'
               }
           ]
         }
     });

   function datos(id) {

      console.log(id);
      var csrftoken = '{{ csrf_token }}';
      $.ajax({
        headers: {'X-CSRF-TOKEN': csrftoken},
        method: "GET",
        url: '/pabellones/lista/editar/'+id+'/',
        dataType: 'json',
        data: { "csrfmiddlewaretoken": csrftoken,
            "id": id }
      })

      .done(function(response){
        console.log(response);
        var res = response;

        $('#id_p').val(res.idd);
        $('#nombre_p').val(res.nombre);
        $('#descripcion_p').val(res.descripcion);

      })
    }

    function Actualizar() {

        var id = $("#id_p").val();
        var nombre = $("#nombre_p").val();
        var descripcion = $("#descripcion_p").val();
        var csrftoken = '{{ csrf_token }}';

    	$.ajax({
    		headers: {'X-CSRF-TOKEN': csrftoken},
    		method: 'POST',
    		url: '/pabellones/lista/editar/'+id+'/',
    		dataType: 'text',
    		data: { 'csrfmiddlewaretoken': csrftoken ,
    		  'nombre_p': nombre,
    		  'descripcion_p': descripcion,
    		},
    		success:function(data){
    			location.reload();

    		},
    		error: function(xhr, e, x, status) {
    			console.log(xhr.status + " -- " + status + " -- " + e + " -- " + x);
    			alert('Ha ocurrido un error, porfavor vuelva a intentar');
    		}
    	})
    }


</script>
 {% endblock %}