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

{%  block content %}

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

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-users"></i> Comerciantes </li>
  <li class="breadcrumb-item breadcrumb-itemAdmin active"> Lista de Comerciantes</li>
</ul>

<h1 class="mt-4 text-center titleIniBoxAdmin"><i class="fas fa-users"></i> Lista de Comerciantes</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 del Propietario</th>
       <th>CC</th>
       <th>Correo Electrónico</th>
       <th>Nombre de Usuario</th>
     </tr>
   </thead>
   <tbody class="text-center">
   {% for row in propietario_negocios %}
     <tr>
       <td>{{ row.id.first_name }} {{ row.id.last_name }}</td>
       <td>{{ row.documento }}</td>
       <td>{{ row.id.email }}</td>
       <td>{{ row.id.username }}</td>
     </tr>
     {% empty %}
     <tr>
       <td colspan="6" class="text-center bg-warning">No hay usuarios</td>
     </tr>
   {% endfor %}
   </tbody>
 </table>
</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 comerciantes copiada',
                   titleAttr: 'Copiar',
                   className: 'btn btn-app export copia',
                   exportOptions: {
                       columns: [ 0, 1, 2, 3 ]
                   }
               },
               {
                   extend:    'pdfHtml5',
                   text:      '<i class="fas fa-file-pdf"></i>PDF',
                   title:'Lista de Comerciantes ',
                   titleAttr: 'PDF',
                   className: 'btn btn-app export pdf',
                   exportOptions: {
                       columns: [ 0, 1, 2, 3 ]
                   },
                   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 Comerciantes',
                   titleAttr: 'Excel',
                   className: 'btn btn-app export excel',
                   exportOptions: {
                       columns: [ 0, 1, 2, 3 ]
                   },
               },
               {
                   extend:    'csvHtml5',
                   text:      '<i class="fas fa-file-csv"></i>CSV',
                   title:'Lista de Comerciantes',
                   titleAttr: 'CSV',
                   className: 'btn btn-app export csv',
                   exportOptions: {
                       columns: [ 0, 1, 2, 3 ]
                   }
               },
               {
                   extend:    'print',
                   text:      '<i class="fas fa-print"></i>Imprimir',
                   title:'Lista de Comerciantes',
                   titleAttr: 'Imprimir',
                   className: 'btn btn-app export imprimir',
                   exportOptions: {
                       columns: [ 0, 1, 2, 3 ]
                   }
               },
               {
                   extend:    'pageLength',
                   titleAttr: 'Registros a mostrar',
                   className: 'selectTable'
               }
           ]
         }
     });
</script>
{% endblock %}