{% extends 'base.html.twig' %}
{% block body %}
  <h2 class="titulos-body">
    <i class="fa fa-id-card-o fa-lg mr-3"></i>Clientes
  </h2>
  <form class="form-horizontal my-3" id="form-tabla-clientes">
    <div class="form-row">
      <div class="input-group col-sm-9 col-lg-5">
        <input type="text" class="form-control" id="nombre" autofocus placeholder="Empresa / Contacto / CIF / C.Barras">
        <div class="input-group-append">
          <button type="button" class="btn btn-outline-secondary border-left-0 border" id="btn-clear">
            <span class="fa fa-lg fa-times-circle"></span>
          </button>
        </div>
      </div>
      <div class="col-auto mt-2 ml-4">
        Activos
      </div>
      <div class="col-auto">
        <select class="form-control" id="activos">
          <option value="T">Todos</option>
          <option value="S">SI</option>
          <option value="N">NO</option>
        </select>
      </div>
      <div class="col-auto mt-2 ml-4">
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="no-v3">
          <label class="custom-control-label" for="no-v3">No existen en V3</label>
        </div>
      </div>
    </div>
    <div class="form-row mt-3">
      <div class="col-sm-4 col-sm-offset-2 col-lg-2 col-lg-offset-0 mt-2 mt-lg-0">
        <button type="button" id="btn-search" class="btn btn-dark btn-block">
          <span class="fa fa-search mr-3"></span>Buscar</button>
      </div>
      <div class="col-sm-6 col-lg-2 mt-2 mt-lg-0">
        <a href="{{url('cliente_edit')}}" class="btn btn-success btn-block">
          <span class="fa fa-plus mr-3"></span>Añadir
        </a>
      </div>
      <div class="col"></div>
      <div class="col-sm-4 col-lg-2 mt-2 mt-lg-0">
        <button type="button" id="btn-existe-v3" class="btn btn-dark btn-block">
          <span class="fa fa-refresh mr-3"></span>Actualizar NIF</button>
      </div>
    </div>
  </form>
  <table id="tabla-clientes" class="display w-100">
    <thead>
      <tr>
        <th></th>
        <th>Fecha</th>
        <th>CIF</th>
        <th>Empresa</th>
        <th>Contacto</th>
        <th>Provincia</th>
        <th>Activo</th>
        <th>V3</th>
      </tr>
    </thead>
  </table>
{% endblock %}
{% block javascript %}
  <script>
    /* global $, U */
    $(function () {
      'use strict';
      function filtroData(d) {
        d.nombre = $('#nombre').val();
        d.noexistev3 = $('#no-v3').prop('checked') ? '1' : '';
        d.activos = $('#activos').val();
      }
      let opciones = {
        columnDefs: [
          {
            targets: 0,
            visible: false
          }, {
            targets: 1,
            render: U.dateFormatFromSql
          }, {
            targets: [
              6, 7
            ],
            sortable: false,
            width: '3rem',
            className: 'dt-center',
            'render': function (valor) {
              return '<input type="checkbox"' + (
              valor ? ' checked' : ''
            ) + '>';
            }
          },
        ],
        order: [
          [1, 'desc']
        ],
        columns: [
          {
            data: 'id'
          },
          {
            data: 'fecha'
          },
          {
            data: 'cif'
          },
          {
            data: 'empresa'
          }, {
            data: 'contacto'
          }, {
            data: 'provincia'
          }, {
            data: 'activo'
          }, {
            data: 'existe_v3'
          }
        ],
        lengthChange: true,
        lengthMenu: [15, 25, 50]
      };
      let tabla = U.dataTable('#tabla-clientes', U.path('admin/clientes_tabla'), filtroData, opciones);

      $('input[type=text]').on('keydown', function (e) {
        if (e.keyCode === 13) {
          U.preventDefault(e);
          tabla.ajax.reload();
        }
      });
      $('#btn-clear').on('click', function () {
        $('#nombre').val('').focus();
        tabla.ajax.reload();
      });
      $('#btn-search').on('click', function () {
        tabla.ajax.reload();
      });
      $('#btn-existe-v3').on('click', function () {
        U.loading()
        $.get(U.path('admin/clientes_updatev3'), function () {
          U.loadingHide();
          tabla.ajax.reload();
        })
      });
      $('#no-v3, #activos').on('change', function () {
        tabla.ajax.reload();
      });
      $('#tabla-clientes tbody').on('click', 'tr', function (e) {
        U.preventDefault(e);
        var data = tabla.row($(this)).data();
        window.location = U.path('admin/cliente_edit', data.id);
      });

    });
  </script>
{% endblock %}