@extends ('layout.app')

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

@section('content')
<div class="row">
  <div class="col-md-12">
    <h3>Consultar Estado de Tambor</h3>
    <ol class="breadcrumb">
        <li><a href="{{url('/')}}">Inicio</a></li>
        <li><a href="{{url('/tambor')}}">Tambor</a></li>
        <li class="active">Consultar estado</li>
    </ol>
    <div class="panel panel-default">
      <div class="panel-body">
          <!-- Buscar etiqueta -->
          <div class="col-md-12 col-sm-12">
            <div class="page-header">
              <h3>Consultar etiqueta</h3>
            </div>
          </div>
          <div class="col-md-12">
            <div class="col-md-3">
              <div class="form-group">
                <div class="radio">
                  <label>
                    <input type="radio" name="toggleSearch" class="toggleRadioEtiqueta" @if(isset($response) && !$response['status']) checked="false" @else checked @endif>
                    Por etiqueta
                  </label>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <div class="radio">
                  <label>
                    <input type="radio" name="toggleSearch" class="toggleRadioEtiqueta" @if(isset($response) && !$response['status']) checked @endif>
                    Archivo de etiquetas
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-sm-12 toggleSearchAs @if(isset($response) && !$response['status']) hidden @endif">
            <div class="input-group">
              <input v-model="etiqueta_tambor" v-on:keyup.13="get('tambor.validar', etiqueta_tambor)" placeholder="Ingrese etiqueta" type='text' name="etiqueta_tambor" id="etiqueta_tambor" class="form-control">
              <span class="input-group-btn">
                <button @click="get('tambor.validar', etiqueta_tambor)" type="button" class="btn btn-primary noMarginBottom"><i class="glyphicon glyphicon-chevron-right"></i></button>
              </span>
            </div>
          </div>


          <div class="col-md-6 col-sm-12 toggleSearchAs @if(isset($response) && !$response['status']) @else hidden @endif">
            <form method="POST" action="{{route('tambor.validarMultiple')}}" enctype="multipart/form-data">
              {{ csrf_field() }}
              <div class="col-md-10 col-sm-10">
                <div class="form-group noMarginBottom">
                  <div class="input-group">
                    <label class="input-group-btn">
                        <span class="btn btn-primary btn-file">
                            Examinar
                            <input type="file" name='etiquetas_file' id='etiquetas_file'>
                        </span>
                    </label>
                    <input class="form-control" readonly="" type="text">
                  </div>
                </div>
              </div>
              <div class="col-md-2 col-sm-2">
                <button type="submit" name="uploadfile" class="btn btn-primary buttonCustomToLeft" id="uploadfile"><i class="glyphicon glyphicon-chevron-right"></i></button>
              </div>
              @if(isset($response) && !$response['status'])
              <div class="col-md-12">
                <strong class="text-danger">
                  {{$response['message']}}
                </strong>
              </div>
              @endif
            </form>
          </div>
          <div class="col-md-6 col-sm-12 toggleSearchAs @if(isset($response) && !$response['status']) @else hidden @endif">
            <br>
            Antes de ingresar al sistema los tambores de cosechas anteriores por favor verifique
            que el formato del archivo solicitado cumpla con la estructura de alguno de los
            ejemplos que se presentan a continuación:
            <br>
            <br>
            <div class="exampleFiles">
              <label>Archivos de Ejemplo:</label>
              <a href="{{asset('archivosEjemplo/tambor/plantillaExcel.xls')}}" title="Archivo .xls" data-toggle="tooltip"><i class="fa fa-file-excel-o fa-2x"></i> .XLS</a>
              <a href="{{asset('archivosEjemplo/tambor/PlantillaExcel2007.xlsx')}}" title="Archivo .xlsx" data-toggle="tooltip"><i class="fa fa-file-excel-o fa-2x"></i> .XLSX</a>
              <a href="{{asset('archivosEjemplo/tambor/plantillaCsv.csv')}}" title="Archivo .csv" data-toggle="tooltip"><i class="fa fa-file-text-o fa-2x"></i> .CSV</a>
              <a href="{{asset('archivosEjemplo/tambor/plantillaTxt.txt')}}" title="Archivo .txt" download data-toggle="tooltip"><i class="fa fa-file-text-o fa-2x"></i> .TXT</a>
            </div>
          </div>

          <div class="col-md-6 col-sm-12">
            <div v-if='apiError != ""'>
              <span class="icon-chk-input-error text-danger">
                <i class="fa fa-times-circle fa-2x"></i>
                <label>@{{apiError}}</label>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div v-if='dataRefresh.tambor'>
        <div class="panel panel-default">
          <div class="panel-body">
            <!-- Resultado de busqueda -->
            <div class="col-md-12 col-sm-12">
              <div class="page-header">
                <h1>
                  <strong>Tambor</strong>: @{{dataRefresh.tambor.etiqueta}}
                  <label class="label label-success label-sm">
                    @{{dataRefresh.tambor.estadoNombre}}
                  </label>
                  <div class="btn-group pull-right" role="group">
                    <button v-if="dataRefresh.tambor" type="button" class="btn btn-primary btn-icon-text btn-sm" data-toggle="modal" data-target="#modalExtracciones">
                      Ver Extracciones
                    </button>
                    <button @click="get('tambor.validar', dataRefresh.tambor.etiqueta)" type="button" class="btn btn-default btn-sm refresh-btn"><i class="glyphicon glyphicon-refresh"></i></button>
                  </div>
                </h1>
              </div>
            </div>
            <div class="col-md-12 col-sm-12" v-if="dataRefresh.tambor.historico != ''">
              <div class="timeline">

                <h2>
                  <span>Histórico Tambor</span>
                </h2>

                <div v-for="historico in dataRefresh.historico" class="step">
                  @include("tambor.historico")
                </div>
                <b class="step-end"></b>
              </div>
            </div>
          </div>
        </div>
    </div>

    @if(isset($tambores))

    <div class="col-md-12">
      <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">
              <thead>
              <tr>
                <th># Etiqueta Tambor</th>
                <th>Estado</th>
              </tr>
              </thead>
              <tbody>

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

                @foreach($tambores as $keyTambor => $tambor)
                <tr>
                  <td>{{$tambor['etiqueta']}}</td>
                  <td>
                    <label class="label label-{{$tambor['label']}} label-sm">
                      {{$tambor['estado']}}
                    </label>
                    @if(isset($tambor['userReceptor']) && $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>
    </div>
    @endif

  </div>
</div>
@endsection

@section('scripts')
$(document).ready(()=>{
  $('#etiqueta_tambor').focus();

  $('.toggleRadioEtiqueta').on('change',function() {
    $('.toggleSearchAs').toggleClass('hidden');
  });

});
@endsection

@section('modal')
  @include("tambor.modal_extracciones")
@endsection