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

{% block title %}
Update Images
{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset ('css/massiveImages.css')}}">
<link rel="stylesheet" href="{{ asset ('atmos/vendor/dropzone/dropzone.css')}}">
<style>
  #sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
  }

  #sortable li {
    margin: 3px 3px 3px 0;
    padding: 1px;
    float: left;
    width: 100px;
    height: 90px;
    font-size: 4em;
    text-align: center;
  }
</style>
{% 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 Imagenes </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">
            <div class="col-md-2"></div>
            <div class="col-md-2">
              <label for="">Nombre</label>
              <input id="nombre" class="form-control" type="text" placeholder="Nombre de articulo">
            </div>
            {#<div class="col-md-2">
              <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-2">
              <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-2">
              <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>
          <div class="row">
            <div class="col-md-2"></div>
            {#<div class="col-md-2">
              <label for="">Disciplina</label>
              <select class="form-control js-select2" name="disciplina" id="disciplina">
                <option value="">Seleccione una Disciplina</option>
                {% for disciplina in disciplinas %}
                <option value="{{disciplina.id}}">{{disciplina.nombre}}</option>
                {% endfor %}
              </select>
            </div>#}
            <div class="col-md-2">
              <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-2">
              <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-2">
              <button id="buscar" class="btn btn-success btn-block mt-4">Buscar</button>
            </div>
          </div><br>
          <h2 class="text-success text-center">Total registros encontrados <span id="filtered">0</span></h2>
          <h4 class="mt-4 text-center">Subir Imagenes</h4>
          <div class="row pl-4 ">
            <div id="divDropzone" class="dropzone">
            
            </div>
            <button class="btn btn-primary" id="btnUpdate">Actualizar articulos</button>
          </div>
          <div class="table-responsive p-t-10">
            <table class="table default-table2 nowrap" style="width:100%">
              <thead>
                <tr>
                  <th><input id="checkAll" type="checkbox"></th>
                  <th>id</th>
                  <th>descripcion</th>
                  <th>codigo</th>
                  <th>Cant Imagenes</th>
                  <th>Imagenes</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- Modal -->
<div class="modal fade" id="modalImages" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Galería de Imágenes</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {# <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" id="sliderImagenes">
          </div>
          <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div> #}
        <br>
        <div class="row">
          <div class="col-md-12">
           <ul id="sortable">
            
          </ul>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}

<script src="{{ asset ('atmos/vendor/dropzone/dropzone.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 ('updateArticulosImagenes')}}",
    getArticulosImage: "{{ path ('getArticulosImage')}}",
    getImages: "{{ path ('getImages')}}",
    updatePosition: "{{ path ('updatePosition')}}",
  };
  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);
  }

  function getImages(codArticulo) {
    console.log(codArticulo)
    $.ajax({
      url: urlContainer.getImages,
      type: "GET",
      data: {
        codigo: codArticulo
      },
      success: function (imagenes) {
        let newContent = '';
        /*
        $.each(imagenes, function (key, imagen) {
          newContent +=
            `<div class="carousel-item ${key == 0? 'active':''} ">
          <img src="/images_prods/${imagen}" class="d-block w-100" alt="...">
        </div>`;
          console.log(key);
        });
        */
        const deleteUrl = '{{ path("image_articulo_delete", { id: '_id_' }) }}'

        $.each(imagenes, function (key, item) {
          newContent +=
            `<li id="${item.id}" style="background-image: url('/public/images_prods/${item.imagen}')"
             class="ui-state-default imageDrag position-relative">
            <button class="btn btn-danger btn-sm px-1 py-0 delete-image"
                    data-url="${deleteUrl.replace('_id_', item.id)}"
                    style="position: absolute;bottom: 0;right: 0;"><i class="mdi mdi-delete"></i></button></li>`;
        });

        $('#sortable .delete-image').off('click');
        if (!imagenes?.length) {

          newContent = '<li style="width: 100%;font-size: 1.2rem;" class="text-muted">No se encontraron imágenes para este artículo.</li>';
          $('#sortable').html(newContent);
        } else {

          $('#sortable').html(newContent);

          $('#sortable .delete-image').on( 'click', function (event) {

            const $el = $(event.currentTarget);
            const url = $el.data('url');
            $('#modalImages').modal('hide');

            Swal.fire({
              title: '¿Estás Seguro?',
              text: 'Eliminarás la imagen del artículo. No podrás revertirlo.',
              type: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Si, borrarlo!',
              customClass: 'alert-to-block',
              allowOutsideClick: false,
              allowEscapeKey: false,
            }).then(function (result) {

              $.ajax({
                url: url,
                type: "DELETE",
                complete: function () {
                  console.log('Image deleted!');
                }
              });
            })
          });
        }


        $('#modalImages').modal('show');
      },
      error: function (err) {
        alert("An error ocurred while loading data ...");
      }
    });
  }
</script>
{{ encore_entry_script_tags('massiveUpdateImages') }}
{% endblock %}