{% extends 'layouts/panel_layout.html.twig' %}

{% block title %}
Update masivo
{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset ('css/massiveUpdate.css')}}">
{% endblock %}

{% block content %}
<div class="bg-dark m-b-30">
  <div class="container">
    <div class="row p-b-60 p-t-60">

      <div class="col-md-10 mx-auto text-center text-white p-b-30">
        <div class="m-b-20">
          <div class="avatar avatar-xl my-auto">
            <i class="icon-placeholder mdi mdi-tag-multiple" style="font-size: 5rem"></i>
          </div>
        </div>
        <h1>Actualizacion Masiva de Precios
        </h1>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid pull-up pb-5 mb-5">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <div class="row px-5 py-5">
            <div class="col-md-3 py-3">
              <label for="">Codigo</label>
              <input id="codigo" class="form-control" type="text" placeholder="Codigo de Articulo">
            </div>
            <div class="col-md-3 py-3">
              <label for="">Nombre</label>
              <input id="nombre" class="form-control" type="text" placeholder="Nombre de articulo">
            </div>
            <div class="col-md-3 py-3">
              <label for="">Rubros</label>
              <select class="form-control js-select2" name="rubro" id="rubro">
                <option value="">Seleccione un Rubro</option>
                {% for rubro in rubros %}
                <option value="{{rubro.id}}">{{rubro.descripcion}}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3 py-3">
              <label for="">Grupos</label>
              <select class="form-control js-select2" name="grupo" id="grupo">
                <option value="">Primero indique rubro</option>
                {# {% for grupo in grupos %}
                <option value="{{grupo.id}}">{{grupo.descripcion}}</option>
              {% endfor %} #}
              </select>
            </div>
            <div class="col-md-3 py-3">
              <label for="">Categorias</label>
              <select class="form-control js-select2" name="categoria" id="categoria">
                <option value="">Primero indique el grupo</option>
                {# {% for categoria in categorias %}
                <option value="{{categoria.id}}">{{categoria.nombre}}</option>
              {% endfor %} #}
              </select>
            </div>
            <div class="col-md-3 py-3">
              <label for="">Marca</label>

              <select class="form-control js-select2" name="marca" id="marca">
                <option value="">Seleccione una Marca</option>
                {% for marca in marcas %}
                <option value="{{marca.id}}">{{marca.nombre}}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3 py-3">
              <label for="">Proveedor</label>
              <select class="form-control js-select2" name="proveedor" id="proveedor">
                <option value="">Seleccione un Proveedor</option>
                {% for proveedor in proveedores %}
                <option value="{{proveedor.id}}">{{proveedor.razonSocial}}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3 py-3 mt-auto">
              <button id="buscar" class="btn btn-success btn-block mt-4">Buscar</button>
            </div>
          </div>
          <h2 class="text-success text-center">Total registros encontrados <span id="filtered">0</span></h2>
          <h4 class="my-4 text-center">Actualizar precios</h4>
          <div class="row pb-5">
            <div class="col-md-2 ml-auto">
              <div class="d-flex justify-content-center pb-2">
                <input id="precio_nuevo" value="nuevo" checked class="radioPrecio" type="radio" name="precio">
                <label for="precio_nuevo" class="pl-2 m-0">Nuevo Precio Lista</label>
              </div>
              <input class="form-control" id="nuevo" type="text">
            </div>
            <div class="col-md-2">
              <div class="d-flex justify-content-center pb-2">
                <input id="precio_porcentaje" value="porcentaje" class="radioPrecio" type="radio" name="precio">
                <label for="precio_porcentaje" class="pl-2 m-0">Porcentaje (%)</label>
              </div>
              <input class="form-control" id="porcentaje" type="text">
            </div>
            <div class="col-md-2">
              <div class="d-flex justify-content-center pb-2">
                <input id="precio_fijo" value="fijo" class="radioPrecio" type="radio" name="precio">
                <label  for="precio_fijo" class="pl-2 m-0">Cantidad fija</label>
              </div>
              <input class="form-control" id="cantidad" type="text">
            </div>
            <div class="col-md-2 mr-auto mt-auto">
              <button id="update" class="btn btn-primary mt-4 btn-block">Actualizar</button>
            </div>
          </div>
          <div class="table-responsive p-t-10">
            <table class="table default-table nowrap" style="width:100%">
              <thead>
                <tr>
                  <th><input id="checkAll" type="checkbox"></th>
                  <th>id</th>
                  <th>descripcion</th>
                  <th>codigo</th>
                  <th>precio Lista</th>
                  <th>Stock </th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
<script src="https://unpkg.com/imask@6.0.5/dist/imask.js"></script>
<script src="{{ asset ('plugins/blockUI/jquery.blockUI.js')}}"></script>
<script>
  // CONTAINER DE URLS A USAR EN JAVASCRIPT DESDE PATH IN SYMFONY
  const urlContainer = {
    buscarCategoria: '{{ path("list_categorias") }}',
    buscarGrupo: '{{path("list_grup")}}',
    updateArticulos: "{{ path ('updateArticulos')}}",
    getArticulos: "{{ path ('getArticulos')}}"
  };
  articulos = [];
  function switchArticulo(id) {
    exist = articulos.findIndex(articulo => articulo == id);
    if (exist == -1) {
      console.log('blue');
      articulos.push(id);
    } else {
      articulos.splice(exist, 1);
    }
    console.log(articulos);
  }
</script>
{{ encore_entry_script_tags('massiveUpdate') }}
{% endblock %}