@extends('layout.app')

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

@section('content')

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

<div class="row">
  <div class="col-md-12">
    <h3>
      Listado de Exportaciones
      <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="export" 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="export" 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('exportacion.listado')}}">Exportaciones</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-4 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-4 col-sm-12">
            <div class="form-group">
              {{ Form::label('tipo', 'Filtro por tipo') }}
              <select name='tipo' id="tipo" class='form-control chosen-select'>
                <option value=''>Seleccionar Tipo</option>
                @foreach ($tipos_de_exportacion as $key => $option)
                    <option value={{$key}} @if("$key" === $tipo) selected @endif>{{$option}}</option>
                @endforeach
              </select>
            </div>
          </div>

          <div class="col-md-4 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-4 col-sm-6">
            <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-4 col-sm-6">
            <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-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="{{ route('exportacion.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($tipo != null)
    <span class="badge">
      @foreach ($tipos_de_exportacion as $key => $value)
        @if($key == $tipo)
        <label>Tipo</label><br>
        {{$value}}
        <a href="javascript:void(0);" onClick="removeFilter('tipo', '{{$key}}')"><i class="fa fa-times"></i></a>
        @endif
      @endforeach
    </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># EXPORTACIÓN</th>
              <th>Tipo de Entrega</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="5" class="text-center">
                    No hay información disponible.
                  </td>
                </tr>
              @endif

              @foreach($coleccion as $exportacion)
             <tr>
                <td class="posRel">
                  {{$exportacion->lote->etiquetaLote()}}
                  <small class="smallTambor">{{$exportacion->user->nombre}}<small>
                </td>
                <td>{{$exportacion->tipoEntrega()}}</td>
                <td>{{$exportacion->fecha()}}</td>
                <td>
                  {{$exportacion->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($exportacion->estadoNombre() === 'Borrador')
                          <li><a href="{{route('exportacion.edit', $exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Editar Exportación"><i class="fa fa-pencil"></i> Editar</a></li>
                          <li><a href="{{route('exportacion.delete', $exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Eliminar Exportación"><i class="fa fa-trash"></i> Eliminar</a></li>
                        @endif
                        @if($exportacion->estadoNombre() === trans('estados_lote.a_homogeneizar'))
                          <li><a href="{{route('exportacion.homogeneizar', $exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Enviar a Homogeneizar"><i class="fa fa-sitemap"></i> Homogeneizar</a></li>
                        @endif
                        @if($exportacion->estadoNombre() === trans('estados_lote.pendiente_expo'))
                          <li><a href="{{route('exportacion.exportar', $exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Exportar"><i class="fa fa-send"></i> Exportar</a></li>
                        @endif
                        @if($exportacion->estadoNombre() === trans('estados_lote.a_fraccionar'))
                          <li><a href="{{route('exportacion.fraccionar', $exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Enviar a Fraccionar"><i class="fa fa-send"></i> A Fraccionar</a></li>
                        @endif
                        @permission(('homogeneizar'))
                        @if($exportacion->homogeneizacion() && $exportacion->homogeneizacion()->aptoParaContinuar())
                          <li><a href="{{route('lote.asignar',['id' => $exportacion->loteFinal->id])}}"title="Continuar Homogeneización"><i class="fa fa-sitemap"></i> Homogeneizar</a></li>
                        @endif
                        @endpermission
                        @permission(('fraccionador'))
                        @if($exportacion->estadoNombre() === trans('estados_lote.pendiente_fraccionado') && Auth::user()->id == $exportacion->user_fracc_id)
                            <li><a href="{{route('fraccionado.fraccionar', $exportacion->fraccionado_id)}}" data-toggle="tooltip" data-placement="left" title="Fraccionar"><i class="fa fa-send"></i> Fraccionar</a></li>
                        @endif
                        @endpermission
                        <li><a href="{{route('exportacion.view', $exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Visualizar Extracción"><i class="fa fa-eye"></i> Visualizar</a></li>
                        @if(false && $exportacion->permitirEditar())
                        <li><a href="{{route('exportacion.editarlote', $exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Editar Lote"><i class="fa fa-edit"></i> Editar Lote</a></li>
                        @endif
                        @if($exportacion->permitirCancelar())
                          <li><a href="{{route('exportacion.cancelar', $exportacion->id)}}" data-toggle="tooltip" data-placement="left" title="Exportar"><i class="fa fa-trash"></i> Cancelar</a></li>
                        @endif
                    </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( () => {
	  $("#filtrosForm").keypress(function(e) {			
			var code = (e.keyCode ? e.keyCode : e.which);
			if(code==13){				
				$("#filtrosForm").submit();
				return false;
			}
		});
		
      $('#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');
        }
      });

      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('exportacion.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();
      }

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