@extends('layout.app')

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

@section('content')
<form class="form-horizontal" role="form" method="POST" id="filtrosForm" action="{{ route('homo.filtrado') }}">
{{ csrf_field() }}

<div class="row">
  <div class="col-md-12">
    <h3>
      Listado de Homogeneizaciones
      <div class="pull-right buttons-on-title fixed-buttons">
        <div class="row">
          <div class="col-md-12 col-sm-12">
            <div class="btn-group rounded pull-right" role="group" aria-label="...">
              @if(count($lotes_Recibidos)>0)
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalAceptarLote">
                  Aceptar Lotes
                </button>
              @endif

              <!-- Reportes -->
              <button data-toggle="tooltip" data-type="listado" data-model="homo" 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 && $jsonData != 'null')
                <button type="button" data-type="nuevo" data-model="homo" 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>
              @if(count($coleccion)>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><a href="{{route('homo.listado')}}">Homogeneizaciones</a></li>
        <li class="active">Listado</li>
    </ol>
  </div>
</div>

<div id="limpiarStorage" s="{{$limpiarStorage}}"></div>

<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-2 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-2 col-sm-12">
            <div class="form-group">
              {{ Form::label('fechaMin', 'Fecha desde') }}
              <input name="fechaMin" id="fechaMin" class="datepicker form-control" type="text" @if(isset($fechaMin) && count($fechaMin) > 0) value="{{$fechaMin}}" @endif placeholder="desde">
            </div>
          </div>
          <div class="col-md-2 col-sm-12">
            <div class="form-group">
              {{ Form::label('fechaMax', 'Fecha hasta') }}
              <input name="fechaMax" id="fechaMax" class="datepicker form-control" type="text" @if(isset($fechaMax) && count($fechaMax) > 0) value="{{$fechaMax}}" @endif placeholder="hasta">
            </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=''>Seleccionar Estado</option>
                @foreach ($estadosLote as $key => $option)
                    <option value={{$key}} @if("$key" === $estado) selected @endif>{{$option}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-3 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="{{ route('homo.listado') }}">Limpiar</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12 filtros_aplicados text-left">

    @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($fechaMin != null)
    <span class="badge">
      <label>Desde la Fecha</label><br>
      {{$fechaMin}}
      <a href="javascript:void(0);" onClick="removeFilter('fechaMin')"><i class="fa fa-times"></i></a>
    </span>
    @endif

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

    @if($estado != null)
    <span class="badge">
      @foreach ($estadosLote 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

  </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">
        <div class="zui-scroller @if(count($coleccion) == 0) zui-no-data @endif">
          <table class="table table-striped table-hover table-bordered zui-table">
            <thead>
            <tr>
              <th># LOTE</th>
              <th>Fecha</th>
              <th>Estado</th>
              @if(count($coleccion) > 0)
              <th class="text-center actions-col"><i class="glyphicon glyphicon-cog"></i></th>
              @endif
            </tr>
            </thead>
            <tbody>
              @if(count($coleccion) == 0)
                <tr>
                  <td colspan="4" class="text-center">
                    No hay información disponible.
                  </td>
                </tr>
              @endif
              @foreach($coleccion as $value)
              <tr>
                <td class="posRel">
                  {{$value->lote->etiqueta_lote}}
                  @if($value->lote->exportacion() != null)
                    @if($value->lote->exportacion()->sae != null)
                      @if($value->lote->exportacion()->sae->codigo_sae != null)
                        <small class="smallTambor">Código SAE: {{$value->lote->exportacion()->sae->codigo_sae}}<small>
                      @endif
                    @endif
                  @endif
                </td>

                <td>{{$value->created_at}}</td>
                <td>
                  {{$value->estadoNombre()}}
                </td>
                <td class="actions-col">

                  <div class="dropdown dd-on-table" data-toggle="tooltip" data-placement="left" title="Opciones">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                      <i class="fa fa-ellipsis-v"></i>
                    </button>

                    <ul class="dropdown-menu pull-right">
                      @if($value->estadoNombre() === trans('estados_lote.pendiente'))
                        <li><a href="{{route('lote.enviar', $value->loteFinal->id)}}" data-toggle="tooltip" data-placement="left" title="Enviar"><i class="fa fa-send"></i> Enviar</a></li>
                      @endif
                      @if($value->aptoParaContinuar())
                        <li><a href="{{route('lote.asignar',['id' => $value->loteFinal->id])}}"title="Continuar Homogeneización"><i class="fa fa-sitemap"></i>Homogeneizar</a></li>
                      @endif
                      @if($value->estadoNombre() === trans('estados_lote.a_fraccionar') && $value->exportacion->user_id == Auth::user()->id)
                        <li><a href="{{route('exportacion.fraccionar', $value->exportacion->id)}}" title="Enviar a Fraccionar"><i class="fa fa-send"></i>A Fraccionar</a></li>
                      @endif
                      @if($value->estadoNombre() === trans('estados_lote.pendiente_expo') && $value->exportacion->user_id == Auth::user()->id)
                        <li><a href="{{route('exportacion.exportar', $value->exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Exportar"><i class="fa fa-send"></i>Exportar</a></li>
                      @endif
                      <li><a href="{{route('homo.view', $value->id)}}" data-toggle="tooltip" data-placement="left" title="Visualizar Extracción"><i class="fa fa-eye"></i> Visualizar</a></li>
                    </ul>
                  </div>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
    @if(count($coleccion) != 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
    <input id="paginator" type="text" value={{$page}} class="hidden" name="page">
    <input type="text" id="foe" value="" class="hidden" name="excel">
  </form>
  </div>

@endsection

@section('modal')
  @include('lote.modal_recibido')
  @include("reportes.modalReportes")
@endsection

@section('scripts')
  $(document).ready( () => {
      $('#modal').on('shown.bs.modal', function (e) {
        var route = $(e.relatedTarget).data('route');
        var etiqueta = $(e.relatedTarget).data('etiqueta');
        $('#form_remito').attr('action', route);
        $('#etiqueta').text(etiqueta);
      });

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

      // 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');
        }
      });

      //Fix border radius if only one btn on title header.
      if($('.btn-group .btn').length == 1) {
        $('.btn-group .btn').eq(0).addClass('btn-group-onlyOne');
      }

      $('#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());
        console.log(page);
        $('#paginator').val(page +1);
        $('#filtrosForm').submit();
      });

      $('#filtrosForm').on('submit', e => {
        if($('#foe').val() == 1) {
          e.preventDefault();
          var data = $('#filtrosForm').serializeArray();

          $.ajax({
             type:'POST',
             url:'{{ route('homo.filtrado') }}',
             data: data,
             headers: {'X-CSRF-TOKEN': window.Laravel.csrfToken},
             success:function(resp) {
                window.location.href = resp;
                toggleStateLoading();
             }
          });
          $('#foe').val("");
        }
      });

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

    });

    var removeFilter = (filter, toRemove) => {
      // Etiqueta
      if(filter == 'etiqueta') {
        $('input#etiqueta').val('');
        $('#filtrosForm').submit();
      }
      // Fechas
      if(filter == 'fechaMin') {
        $('input#fechaMin').val('');
        $('#filtrosForm').submit();
      }

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

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