{% extends 'app/base_app.html' %}
{% load staticfiles %}
{% load humanize %}
{% block title %} Detalle del producto {% endblock %}

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-carrot"></i> Productos</li>
  <li class="breadcrumb-item">Lista de productos</li>
  <li class="breadcrumb-item active">Detalle del producto</li>
</ul>

<br>
<a class="btn btn-green btn-sm" href="javascript:history.back()"><i class="fas fa-arrow-left"></i></a>

<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-carrot"></i> Detalle del producto</h1>

<br>

<div class="table-responsive tableResStyle">
 <table class="table table-striped table-bordered table-striped">
    <thead class="theadStyle">
      <tr>
        <!-- <th>Código</th> -->
        <th>Imagen</th>
        <th>Nombre</th>
        <th>Stock</th>
        <th>Costo</th>
        <th>Venta</th>
        <th>Proveedor Inicial</th>
        <th>Estado</th>
        <th>Descripción</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody class="text-center">
    {% for row in detalle_producto_negocio %}
      <tr>
        {% if row.producto_id.imagen %}
        <td class="align-middle"> <img src="/media/{{ row.producto_id.imagen }}" class="img-fluid" style="max-width: 150px; max-height: 120px;">  </td>
        {% else %}
        <td class="align-middle"> <img src="{% static 'img/nofoto.png' %}" class="img-fluid" style="max-width: 50px;"> </td>
        {% endif %}
        <td id="nameProducto" class="align-middle">{{ row.producto_id.nombre }}</td>
        <td class="align-middle">{{ row.producto_id.stock }}</td>
        <td class="align-middle">${{ row.producto_id.valor_costo|intcomma }}</td>
        <td class="align-middle">${{ row.producto_id.valor_venta|intcomma }}</td>
        <td class="align-middle">{{ row.proveedor_id.razon_social }}</td>
        {% if row.producto_id.estado == '1'  %}
        <td class="align-middle"><span class="badge badge-success badge-font-90">Activo</span></td>
        {% elif row.producto_id.estado == '2' %}
        <td class="align-middle"><span class="badge badge-danger badge-font-90">Finalizado</span></td>
        {% endif %}
        {% if row.producto_id.descripcion == "" %}
        <td class="align-middle">-</td>
        {% else %}
        <td class="align-middle">{{ row.producto_id.descripcion }}</td>
        {% endif %}
        <td class="align-middle">
          <a class="btn btn-green btn-sm" data-toggle="modal" data-target="#editarmodal">Editar</a>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

 <br>
 <h5 class="mt-4 titleSubBox">Detalle de las compras realizadas al producto</h5>

 <div class="table-responsive tableResStyle">
  <table class="table table-striped table-bordered table-striped" id="ejemplo">
     <thead class="theadStyleColore theadStyle">
        <tr>
          <th>Fecha de la compra</th>
          <th>Proveedor</th>
          <th>Cantidad</th>
          <th>Valor unitario</th>
        </tr>
      </thead>
      <tbody class="text-center">
      {% for row in detalle_compra_producto %}
        <tr>
          <td>{{ row.compra_id.fecha|date:"Y-m-d" }}</td>
          <td>{{ row.proveedor_id.razon_social }}</td>
          <td>{{ row.cantidad }}</td>
          <td>${{ row.valor_unitario|intcomma }}</td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="4" class="text-center bg-warning">No hay compras realizadas del producto</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 Producto</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_registro_producto" enctype="multipart/form-data">
              {% csrf_token %}

              <div id="errortelefono">

              </div>

              {{ form.as_p }}
              {{ form2.as_p }}

              <button class="save btn btn-green btn-lg" type="submit" id="submit_button">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>

 {% endblock %}

 {% block javascript %}
 {% include "includes/script-datatables.html" %}
 <script src="{% static 'js/moment.js' %}"></script>
 <script src="{% static 'js/locate-es.js' %}"></script>
 <script src="{% static 'js/datetime-moment.js' %}"></script>
 <script src="{% static 'js/render-datetime-moment.js' %}"></script>
<script>

$(document).ready(function() {

var nombreDeNegocio = $('#nameNegocio').text();
var nombreDeProducto = $('#nameProducto').text();
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"]],
   "columnDefs":[{
                  "targets": [0],
                  "render": function(data) {
                            if(data=='No hay compras realizadas del producto'){
                              return 'No hay compras realizadas del producto';
                            }else {
                              return moment(data).format('YYYY / MM / DD');
                            }
                          },
              }],
   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:'Tabla de detalles de producto 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:'Detalles del producto '+nombreDeProducto+' del negocio '+ nombreDeNegocio,
                 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:'Detalles de compras del producto '+nombreDeProducto+' del negocio '+ nombreDeNegocio,
                 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:'Detalles de compras del producto '+nombreDeProducto+' del negocio '+ nombreDeNegocio,
                 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:'Detalles de compras del producto '+nombreDeProducto+' del negocio '+ nombreDeNegocio,
                 titleAttr: 'Imprimir',
                 className: 'btn btn-app export imprimir',
                 exportOptions: {
                     columns: [ 0, 1, 2, 3 ]
                 }
             },
             {
                 extend:    'pageLength',
                 titleAttr: 'Registros a mostrar',
                 className: 'selectTable'
             }
         ]
       }
   });

   var validacion_numeros = /^([0-9])+$/;

   $('.teli').keyup(function() {
     var costo = $("#costo_id").val();
     var venta = $("#venta_id").val();

     if (costo != "" && !validacion_numeros.test(costo)){
        $("#submit_button").attr( "disabled", "disabled" );
        $("#costo_id").focus();
        $('#errortelefono').html('<div class="alert alert-danger" role="alert"><ul class="messages"><li>Por favor utilice <b>números enteros</b> en el valor del costo, no agrege ningún punto (.)</li></ul></div>');
        return false;
     }
     else if (venta != "" && !validacion_numeros.test(venta)){
       $("#submit_button").attr( "disabled", "disabled" );
       $('#venta_id').focus();
       $('#errortelefono').html('<div class="alert alert-danger" role="alert"><ul class="messages"><li>Por favor utilice <b>números enteros</b> en el valor de la venta, no agrege ningún punto (.)</li></ul></div>');
     }
     else {
       $("#submit_button").removeAttr("disabled");
       $('#errortelefono').html('');
       return true;
     }

   });

 });

</script>
 {% endblock %}