@extends('layout.app')

@section('title', config('app.name'))

@section('content')

<div class="row">
  <div class="col-md-12">
    <form class="form-horizontal" role="formSelect" method="POST" id="filtrosFormSelect" action="{{ route('tambores.filtrado.select') }}">
       {{ csrf_field() }}
       {!! Form::hidden('rowSelect', '', array('id' => 'rowSelect')) !!}
     </form>
    <form class="form-horizontal" role="form" method="POST" id="filtrosForm" action="{{ route('tambores.filtrado') }}">
       {{ csrf_field() }}
      <h3>Listado de Tambores

        <div class="pull-right buttons-on-title fixed-buttons">
          <div class="row">
            <div class="col-md-12 col-sm-12">
              <button type="button" class="btn btn-default btnFilSel hide" data-toggle="tooltip" data-placement="bottom" title="Filtrar Filas Seleccionadas">
                <i class="fa fa-filter fa-2x"></i>
              </button>

              <button type="button" class="btn btn-default btnUpload" data-toggle="tooltip" data-placement="bottom" title="Cargar Excel para selección masiva de Tambores">
                <i class="fa fa-upload fa-2x"></i>
              </button>

              <div class="btn-group rounded pull-right" role="group" aria-label="...">
                <div class="btn-group" role="group" v-if="(dataSelected.length > 0)">
                <div class="dropdown" data-toggle="tooltip" data-placement="right" title="Acciones para elementos seleccionados">
                  <button type="button" class="btn btn-info dropdown-toggle btn-2x-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Seleccionados: @{{dataSelected.length}}</button>
                  <ul class="dropdown-menu pull-right custom-dd">
                    @permission(('enviar_tambores'))
                    <li>
                      <button @click="vaciarRefresh" type="button" class="btn btn-primary btn-icon-text col-only-button" data-toggle="modal" data-target="#modalEnviarTambores">
                         Enviar
                      </button>
                    </li>
                    @endpermission
                    @permission(('liberar'))
                    {{-- <li>
                      <button v-if=' validarLleno()' type="button" class="btn btn-warning btn-icon-text col-only-button" data-toggle="modal" data-target="#modalLiberarTambores">
                        Liberar
                      </button>
                    </li> --}}
                    @endpermission
                    @permission(('baja_tambores'))
                    <li>
                      <button type="button" class="btn btn-danger btn-icon-text col-only-button" data-toggle="modal" data-target="#modalEliminarTambores">
                        Dar de Baja
                      </button>
                    </li>
                    @endpermission
                    <li>
                      <button @click="limpiarSeleccion" type="button" class="btn btn-primary btn-icon-text col-only-button">
                         Deseleccionar
                      </button>
                    </li>
                    {{-- <li>
                      <button v-if='validarLleno()' type="button" class="btn btn-link btn-icon-text col-only-button" data-toggle="modal" data-target="#modalHomoTambores">
                         Homogeneizar
                      </button>
                    </li> --}}
                  </ul>
                </div>
              </div>

              @if(count($lotes_Recibidos) > 0)
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalAceptarLote">
                  Aceptar Lotes
                </button>
              @endif
              @if(count($tambores_Recibidos) > 0)
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalAceptarTambores">
                  Aceptar Tambores
                </button>
              @endif

              <!-- Reportes -->
              <button data-toggle="tooltip" data-type="listado" data-model="tambores" data-placement="bottom" title="Reportes" type="button" class="btn btn-info btn-2x-icon openModalReportes">
                <i class="rp rp-list rp-2x" ></i>
              </button>
              @if($jsonData != null)
                <button type="button" data-type="nuevo" data-model="tambores" class="btn btn-info btn-2x-icon openModalReportes" data-toggle="tooltip" data-placement="bottom" title="Guardar Búsqueda como Reporte"><i class="rp rp-plus rp-2x"></i></button>
              @endif
              <!-- End reportes  -->


              <button type="button" class="btn btn-info btn-2x-icon btn-filter-toggle" data-toggle="tooltip" data-placement="bottom" title="Búsqueda"><i class="fa fa-search fa-2x"></i></button>
              <a href="{{route('tambores.listado')}}" class="btn btn-info btn-2x-icon hide" data-toggle="tooltip" data-placement="bottom" title="Quitar Filtros"><i class="fa fa-refresh fa-2x"></i></a>
              @if(count($tambores) > 0)
                <button type="submit" data-toggle="tooltip" data-placement="bottom" title="Exportar Listado" class="btn btn-info btn-2x-icon" id="exportar"><i class="fa fa-file-excel-o fa-2x"></i></button>
              @endif
            </div>
          </div>
        </div>
      </div>
      </h3>
      <ol class="breadcrumb">
          <li><a href="{{url('/')}}">Inicio</a></li>
          <li class="active">Listado</li>
      </ol>

      <div class="row">
        <div class="col-md-12 col-sm-12">
          <div class="filters-wrapper">
            <div class="row filters-container">
              <div class="col-md-12 col-sm-12">
                <div class="col-md-3 col-sm-12">
                  <div class="form-group">
                    {{ Form::label('etiqueta', 'Filtro por etiqueta') }}
                    {!! Form::text('etiqueta', $etiqueta, array('class' => 'form-control', 'placeholder' => 'Introduzca una etiqueta')) !!}
                  </div>
                </div>

                <div class="col-md-3 col-sm-12">
                  <div class="form-group">
                    {{ Form::label('ean', 'Filtro por ean') }}
                    {!! Form::text('ean', $ean, array('class' => 'form-control', 'placeholder' => 'Introduzca un ean')) !!}
                  </div>
                </div>

                <div class="col-md-3 col-sm-12">
                  <div class="form-group">
                    {{ Form::label('lotes', 'Filtro por lotes') }}
                    <select name='lotes[]' id="lotes" multiple data-placeholder='Seleccione lotes' class='form-control chosen-select'>
                      @foreach ($lotes as $value => $e)
                        <option value={{$value}} @if(isset($lotesOld[$value])) selected @endif>{{$e}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>

                <div class="col-md-3 col-sm-12">
                  <div class="form-group">
                    {{ Form::label('estado', 'Filtro por estado') }}
                    <select name='estado' id="estado" class='form-control chosen-select'>
                      <option value=''>Seleccione estado</option>
                      @foreach ($estadosTambor as $key => $value)
                        <option value={{$key}} @if($key == $estado) selected @endif>{{$value}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>

                <div class="col-md-3 col-sm-12">
                  <div class="form-group salas-replace">
                    {{ Form::label('salas', 'Filtro por Salas de Extracción') }}
                    <select name='salas[]' id="salas" multiple data-placeholder='Cargando' class='form-control chosen-select'>
                    </select>
                  </div>
                </div>

                <div class="col-md-3 col-sm-12">
                  <div class="form-group renapas-replace">
                    {{ Form::label('renapas', 'Filtro por Renapas') }}
                    <select name='renapas[]' id="renapas" multiple data-placeholder='Cargando' class='form-control chosen-select'>
                      @foreach ($renapas as $vr => $r)
                        <option value={{$vr}} @if(isset($renapasOld[$vr])) selected @endif>{{$r}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>

                <div class="col-md-4 col-sm-12">
                  <div class="row">
                    <div class="col-md-6 col-sm-12 col-xs-6">
                      <button type="submit" class="btn btn-primary btn-block col-only-button" id="filtrar">Buscar</button>
                    </div>

                    <div class="col-md-6 col-sm-12 col-xs-6">
                      <a class="btn btn-primary btn-block col-only-button" href="{{url('/tambores')}}">Limpiar</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <input id="paginator" type="text" value={{$page}} class="hidden" name="page">

          <input type="text" id="foe" value="" class="hidden" name="excel">
        </div>
      </div>
    {{-- El app.js toma $limpiarStorage para decidir --}}
    <input type="text" id="estadosTambor" value='{{json_encode($estadosTambor)}}' class="hidden">

      <div id="limpiarStorage" s="{{$limpiarStorage}}"></div>
      <div class="row">
        <div class="col-md-12 filtros_aplicados text-left">
          @if($lotesOld != null || $etiqueta != null || $estado != null || $salasOld != null || $renapasOld != null || $ean != null)
            <!-- <span class="label">Filtros aplicados</span> -->
            @if($lotesOld != null)
              @foreach ($lotes as $value => $lo)
                @if(array_key_exists($value, $lotesOld))
                <span class="badge">
                  <label>Lote</label><br>
                  {{$lo}}
                  <a href="javascript:void(0);" onClick="removeFilter('lotes', '{{$value}}')"><i class="fa fa-times"></i></a>
                </span>
                @endif
              @endforeach
            @endif

            @if($salasOld != null)
              @foreach ($salas as $value => $so)
                @if(array_key_exists($value, $salasOld))
                <span class="badge">
                  <label>Sala de extracción</label><br>
                  {{$so}}
                  <a href="javascript:void(0);" onClick="removeFilter('salas', '{{$value}}')"><i class="fa fa-times"></i></a>
                </span>
                @endif
              @endforeach
            @endif

            @if($renapasOld != null)
              @foreach ($renapas as $value => $ro)
                @if(array_key_exists($value, $renapasOld))
                <span class="badge">
                  <label>Renapa</label><br>
                  {{$ro}}
                  <a href="javascript:void(0);" onClick="removeFilter('renapas', '{{$value}}')"><i class="fa fa-times"></i></a>
                </span>
                @endif
              @endforeach
            @endif

            @if($estado != null)
            <span class="badge">
              @foreach ($estadosTambor as $key => $value)
                @if($key == $estado)
                <label>Estado</label><br>
                {{$value}}
                <a href="javascript:void(0);" onClick="removeFilter('estado', '{{$key}}')"><i class="fa fa-times"></i></a>
                @endif
              @endforeach
            </span>
            @endif

            @if($etiqueta != null)
            <span class="badge">
              <label>Etiqueta</label><br>
              {{$etiqueta}}
              <a href="javascript:void(0);" onClick="removeFilter('etiqueta')"><i class="fa fa-times"></i></a>
            </span>
            @endif

            @if($ean != null)
            <span class="badge">
              <label>EAN</label><br>
              {{$ean}}
              <a href="javascript:void(0);" onClick="removeFilter('ean')"><i class="fa fa-times"></i></a>
            </span>
            @endif
          @endif
        </div>
      </div>

      <div class="col-md-12 toggleErrors hide">
          <div class="alert alert-danger">
          </div>
      </div>

      <div class="col-md-12 col-sm-12 padding-right-none">
        @if(count($total))
          <div class="row">
            <h6>Total de Registros <span class="badge">{{$total}}</span></h6>
          </div>
        @endif
        <div class="row list-table">
          <div class="zui-wrapper zui-action-32px-fixed no-action-col">
            <div class="zui-scroller @if(count($tambores) == 0) zui-no-data @endif">
              <table class="table table-striped table-hover table-bordered zui-table rowSelectable" data-list="tambores">
                <thead>
                <tr>
                  <th><input @click="selectizeAll()" id="check_all" type='checkbox'></input></th>
                  <th># Etiqueta Tambor</th>
                  <th>RENAPA</th>
                  <th>Lote</th>
                  <th>Estado</th>
                </tr>
                </thead>
                <tbody>

                  @if(count($tambores) == 0)
                    <tr>
                      <td colspan="5" class="text-center">
                        No hay información disponible.
                      </td>
                    </tr>
                  @endif

                  @foreach($tambores as $tambor)
                  <tr data-id="{{$tambor->id}}">
                    <td class="tdCheckboxBtn">
                      @permission(('trasvasar_tambores'))
                      @if($tambor->trasvasable())
                        <a href="javascript:void(0);" class="pull-right btn-trasvasar" @click="vaciarRefresh" data-id="{{$tambor->id}}" data-etiqueta="{{$tambor->etiquetaNombre()}}" data-toggle="modal" data-target="#modalTrasvasarTambor">
                          <i class="fa fa-bandcamp" data-toggle="tooltip" data-placement="right" title="Trasvasar Tambor"></i>
                        </a>
                      @endif
                      @endpermission
                      @if($tambor->seleccionable())
                        <input id="{{$tambor->id}}" object='{{json_encode($tambor)}}' @click="selectizeAndSessionStore('{{json_encode($tambor)}}')" class="check_me" :tamborId="'{{$tambor->id}}'" type='checkbox'></input>
                      @endif
                    </td>
                    <td class="posRel">
                      {{$tambor->etiquetaNombre()}}
                      @if($tambor->excel_franja)
                        <small class="smallTambor">{{$tambor->excel_franja}}<small>
                      @endif
                    </td>
                    <td>{{$tambor->renapaPrincipal()}}</td>
                    <td>@if($tambor->lote !=null) {{$tambor->lote->etiqueta_lote}} @endif</td>
                    <td>
                      <a @click="get('tambor.validar', '{{$tambor->etiquetaNombre()}}')" href="javascript:void(0);" class="pull-right" data-toggle="modal" data-target="#modalHistorico">
                        <i class="fa fa-clock-o" data-toggle="tooltip" data-placement="left" title="Ver Historial"></i>
                      </a>
                      {{$tambor->estadoNombre()}}
                      @if($tambor['userReceptor'])
                        <span class="badge">
                          <i class="fa fa-arrow-right icon-margin"></i>
                          {{$tambor['userReceptor']}}
                        </span>
                      @endif
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        @if(count($tambores) != 0)
        <div class="col-md-12 text-center">
          <!-- {{$page}} -->
          <ul class="pagination">
            <li>
              <button @if($page <= 1) disabled @endif id="atras" class="btn btn-link" rel="Anterior">Anterior</button>
            </li>
            <li>
              <button @if($lastPage) disabled @endif id="adelante" class="btn btn-link" rel="Siguiente">Siguiente</button>
            </li>
          </ul>
        </div>
        @endif
      </form>

      </div>
  </div>
</div>
@endsection


@section('modal')
  @include("tambor.modales")
  @include("reportes.modalReportes")
  @include("tambor.modal_select_excel")
@endsection

@section('scripts')
  $(document).ready(() => {
    if($('.check_me:visible').length == $('.check_me:visible:checked').length
       && $('.check_me:visible').length > 0) {
      $('#check_all').prop('checked', true);
    }

    $('.btnFilSel').on('click', function() {
      $('#filtrosFormSelect').submit();
    });

    $('.btnUpload').on('click', function() {
      $('#modalSelectExcel').modal();
    });

    $('#motivo_baja').on('change', function() {
      if($(this).find(":selected").text() === 'Otros') {
        $('#observacion_baja').prop('required',true);
        $('#label_baja').text('Observación *');
      } else {
        $('#observacion_baja').prop('required',false);
        $('#label_baja').text('Observación');
      }
    });

    $('#motivo_tras').on('change', function() {
      if($(this).find(":selected").text() === 'Otros') {
        $('#observacion_tras').prop('required',true);
        $('#label_tras').text('Observación *');
      } else {
        $('#observacion_tras').prop('required',false);
        $('#label_tras').text('Observación');
      }
    });

    // #foe = boton filtrar o exportar
    exportar = $('#exportar');
    exportar.on('click', function() {
      $('#foe').val("1");
    });

    filtrar = $('#filtrar');
    filtrar.on('click', function() {
      $('#foe').val("");
      $('#paginator').val(1);
    });
    // END #bog

    // Show/Hide filters
    $('.btn-filter-toggle').on('click', () => {
      $('.filters-wrapper').toggleClass('open');
      if($('.filters-wrapper').hasClass('open')) {
        setTimeout(() => {
          $('.filters-wrapper.open').css('overflow', 'visible');
        },350);
      } else {
        $('.filters-wrapper').css('overflow', 'hidden');
      }
    });

    $('#filtrosForm').on('submit', e => {
      if($('#foe').val() == 1) {		
        e.preventDefault();          
        var data = $('#filtrosForm').serializeArray();	
        $.ajax({
           type:'POST',
           url:'{{ route('tambores.filtrado') }}',
           data: data,
           headers: {'X-CSRF-TOKEN': window.Laravel.csrfToken},
           success:function(resp) {					  
			  // window.location.href = resp; 
			  var resultado = JSON.parse(resp);
			  console.log("Respuesta : "+resp);
			  if(resultado.exito == true){				 
				window.location.href = resultado.ruta;
			  }else{
				alert("("+resultado.codigo+")"+resultado.msj);
				console.log(resultado.msj);  
			  }
              toggleStateLoading();
           }
        });
        $('#foe').val("");
      }
    });

    /*$('.modal-backdrop').on('click',function() {
      $('#modalEnviarTambores .modal-header button.close').trigger('click');
    });*/

    $('#btnAction').on('click', function() {
      var url = $('#formAjax').data('url');
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: new FormData($('#formAjax')[0]),
        processData: false,
        contentType: false,
        success: function(resp) {
          if(resp.status == true) {
            // selectRowMasive(resp.existen);
            sessionStorage.setItem('select_init',JSON.stringify(resp.obj));

            var select_init = JSON.parse(sessionStorage.getItem('select_init'));
            app.dataSelected = select_init;
      			if(select_init)
      				for(var i = 0; i < select_init.length; i++)
      					$('#'+select_init[i].id).attr('checked', 'checked');

            // showhide errors
            $('.errorMessage').html('');

            $('.toggleErrors').addClass('hide');
            if(resp.no_existen.length > 0) {
              var html='Los siguientes tambores no se encontraron: <br><ul>';
              $.each(resp.no_existen, function() {
                  html += '<li>' + this + '</li>';
              });
              html += '</ul>';
              $('.toggleErrors .alert').html(html);
              $('.toggleErrors').removeClass('hide');
            }

            // Cerrar Modal
            $('#modalSelectExcel').modal('hide');

          }
          else {
            if(resp.status == 'no_file') {
              $('.errorMessage').html(resp.msg);
            }
          }
        }
      });
    });

    getSalasRenapas();
  });

  $('.btn-trasvasar').on('click', function (e) {
      var id = $(this).data('id');
      var etiqueta = 'Trasvasar Tambor: ' + $(this).data('etiqueta');
      $('#tambor-id').val(id);
      $('#etiqueta_tras').text(etiqueta);
  });

  $('#modalDetalleEnvio').on('show.bs.modal', function(e) {
    var ruta = $(e.relatedTarget).data('url');
    $('#modalDetalleEnvio .modal-body .modalContentScrollable').load(ruta, function() {

    $('#check_all_modal').on('click', function(e) {
      console.log('a');
      var checked = $(this).prop('checked');
      $('.check_me_modal:visible').each(function() {
        $(this).prop('checked', checked);
        $('#submit_aceptacion').prop('disabled', !checked);
      });
    });

    $('.check_me_modal').on('click', function(e) {
      var all_checked = $('.check_me_modal').length == $('.check_me_modal:checked').length;
      $('#check_all_modal').prop('checked', all_checked);
      $('#submit_aceptacion').prop('disabled', $('.check_me_modal:checked').length == 0);
    });
    });
  });

  $('#atras').on('click', function(e) {
      var page = Number ($('#paginator').val());
      $('#paginator').val(page -1);
      $('#filtrosForm').submit();
  });

  $('#adelante').on('click', function(e) {
      var page = Number ($('#paginator').val());
      $('#paginator').val(page +1);
      $('#filtrosForm').submit();
  });

  var removeFilter = (filter, toRemove) => {
    if(filter == 'lotes') {
      $('#lotes option').each(function(e, i) {
        if($(i).val() == toRemove) {
          $(i).prop("selected", false);
          $("#lotes").trigger("chosen:updated");
        }
      });
      $('#filtrosForm').submit();
    }

    if(filter == 'salas') {
      $('#salas option').each(function(e, i) {
        if($(i).val() == toRemove) {
          $(i).prop("selected", false);
          $("#salas").trigger("chosen:updated");
        }
      });
      $('#filtrosForm').submit();
    }

    if(filter == 'renapas') {
      $('#renapas option').each(function(e, i) {
        if($(i).val() == toRemove) {
          $(i).prop("selected", false);
          $("#renapas").trigger("chosen:updated");
        }
      });
      $('#filtrosForm').submit();
    }

    if(filter == 'etiqueta') {
      $('input#etiqueta').val('');
      $('#filtrosForm').submit();
    }

    if(filter == 'ean') {
      $('input#ean').val('');
      $('#filtrosForm').submit();
    }

    if(filter == 'estado') {
      $('#estado option').each(function(e, i) {
        if($(i).val() == toRemove) {
          $(i).prop("selected", false);
          $("#lotes").trigger("chosen:updated");
        }
      });
      $('#filtrosForm').submit();
    }
  }

  $('#confirmarFrac').on('click', function (e) {
      $('.fraccionado').prop('readonly', true);
      $('.confirmarFraccionar').toggleClass('hidden');
  });

  $('#cancelarFrac').on('click', function (e) {
      $('.fraccionado').prop('readonly', false);
      $('.confirmarFraccionar').toggleClass('hidden');
  });

  $('.aceptar_tambores').on('click', function (e) {
      var ruta = $(this).data('url');
      $('#mensaje_confirmar').text("¿Está seguro que desea aceptar estos tambores?");
      $('#boton_confirmar').removeClass('btn-danger');
      $('#boton_confirmar').addClass('btn-success');
      $('#boton_confirmar').attr('href', ruta);
  });

  $('.rechazar_tambores').on('click', function (e) {
    var ruta = $(this).data('url');
    $('#mensaje_confirmar').text("¿Está seguro que desea rechazar estos tambores?");
    $('#boton_confirmar').removeClass('btn-success');
    $('#boton_confirmar').addClass('btn-danger');
    $('#boton_confirmar').attr('href', ruta);
  });

  var getSalasRenapas = () => {
    $.ajax({
       type:'POST',
       url:'{{ route('tambores.getSalasRenapas') }}',
       headers: {'X-CSRF-TOKEN': window.Laravel.csrfToken},
       success:function(resp) {
          var select_salas = "<label for='salas'>Filtro por Salas de Extracción</label>";
          select_salas += "<select name='salas[]' id='salas' multiple data-placeholder='Seleccione Sala de Extracción' class='form-control chosen-select'>";
          $.each(resp.salas, function(key, value) {
            if(resp.salasOld != null && resp.salasOld[key] != undefined) {
              select_salas += "<option value='" + key + "' selected>" + value + " </option>";
            } else {
              select_salas += "<option value='" + key + "'>" + value + " </option>";
            }
          });
          select_salas += "</select>";
          $('.salas-replace').html(select_salas);
          $('#salas').chosen({
            search_contains: true,
            no_results_text: "No se encontraron resultados para:"
          });

          var select_renapas = "<label for='renapas'>Filtro por Renapas</label>";
          select_renapas += "<select name='renapas[]' id='renapas' multiple data-placeholder='Seleccione Renapa' class='form-control chosen-select'>";
          $.each(resp.renapas, function(key, value) {
            if(resp.renapasOld != null && resp.renapasOld[key] != undefined) {
              select_renapas += "<option value='" + key + "' selected>" + value + " </option>";
            } else {
              select_renapas += "<option value='" + key + "'>" + value + " </option>";
            }
          });
          select_renapas += "</select>";
          $('.renapas-replace').html(select_renapas);
          $('#renapas').chosen({
            search_contains: true,
            no_results_text: "No se encontraron resultados para:"
          });
       }
    });
  };
@endsection