@extends('layout')

@section('content')
<style media="screen">
#texto-filtro{
  text-transform: uppercase;
}
.resultado-item{
  padding: 5px 10px;
  cursor: pointer;
  border-top: solid 1px #d6d6d6;
}
.resultado-item:hover{
  background-color: #eee;
}

.contenedor-botones-buscar{
  padding-top: 8px;
}

#cantidad-resultados{
  font-weight: bold;
  text-align: end;
  display: none;
}
.clave{ /* width: 100px; */ }
.valor{
  /* width: 100px;  */
  font-weight: bold;
  text-align: right;
}
</style>
<script type="text/javascript">
  const id = {{ $id_abastecimiento }};
  // permite agregar productos antes de solicitar a bodega
  const permite_agregar = {{ $permite_editar_solicitud }};
  const token = '{{ csrf_token() }}';
</script>

<!-- <h1> {{ url('abastecimientos/datatables') }} </h1> -->
<nav class="breadcrumb">
  <a class="breadcrumb-item" href="/">Home</a>
  <a class="breadcrumb-item" href="/abastecimiento">Abastecimiento</a>
  <span class="breadcrumb-item active">Solicitud N° {{ $id_abastecimiento }}</span>
</nav>

<!-- <div class="container-xl">
  <div class="card">
    <div class="row">
      <div class="col-md-3">3</div>
      <div class="col-md-3">3</div>
      <div class="col-md-3">3</div>
      <div class="col-md-3">3</div>
    </div>

  </div>
</div> -->

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Solicitud de Abastecimiento desde Bodega Central
      <span class="badge badge-secondary">BETA</span>

      @if( $permite_editar_solicitud == true )
      <button id="btn-confirmar-solicitud" class="btn btn-primary waves-effect">
        <span class="zmdi zmdi-assignment-check"></span>
        Confirmar solicitud
      </button>
      @endif
    </h4>

    @if( $permite_editar_solicitud == false )
    <div class="alert alert-info">
      Esta hoja está enviada a bodega y no puede modificarse.
    </div>
    @endif



    <div class="row">
      <!-- agregar -->
      <div class="col-md-3">
        @if( $permite_editar_solicitud == true )
        <div class="">

          <h4 class="card-title">Buscar</h4>

          <div class="form-group">
            <!-- <label for="inputEmail3" class="col-sm-2 control-label">
              Buscar
            </label> -->
            <div class="col-sm-12">
              <div class="fg-line">
                <input id="texto-filtro" type="text" class="form-control form-control-lg 2input-sm" id=""
                  placeholder="SKU o nombre de producto" autofocus="true" autocomplete="off">
              </div>
            </div>
            <div class="row contenedor-botones-buscar">
              <div class="col-sm-6">
                <button id="btn-limpiar" class="btn btn-warning btn-block"
                  title="Tambien puede pulsar Escape">
                  <span class="zmdi zmdi-block"></span>
                  Limpiar</button>
              </div>
              <div class="col-sm-6">
                <button id="btn-buscar" class="btn btn-success btn-block"
                  title="Tambien puede pulsar Enter">
                  <span class="zmdi zmdi-search"></span>
                  Buscar</button>
              </div>
            </div>

          </div>

          <div>
            <div id="busqueda-vacia" class="alert alert-info">
              Ingrese codigo de barra o nombre de producto para buscar
            </div>
            <div id="busqueda-sin-resultados" class="alert alert-danger">
              Sin resultados
            </div>

            <div id="cantidad-resultados">Sin resultados</div>

            <div id="busqueda-listado-resultados"></div>

          </div>

          <hr>
        </div>
        @endif
        <div class="">
          <h4 class="card-title">Resumen</h4>

          <table class="table table-hover2">
            <tr>
              <td class="clave">N° Solicitud</td>
              <td class="valor">{{ $id_abastecimiento }}</td>
            </tr>
            <tr>
              <td class="clave">Estado</td>
              <td class="valor">{{ $estado }}</td>
            </tr>
            <tr>
              <td class="clave">Tipo producto</td>
              <td class="valor">{{ $tipo }}</td>
            </tr>
            <tr>
              <td class="clave">Creada el </td>
              <td class="valor">{{ $fecha_registro }}</td>
            </tr>
            <tr>
              <td class="clave">Peso Total</td>
              <td id="resumen-peso" class="valor">{{ $peso }} Grs.</td>
            </tr>
            <tr>
              <td class="clave">Precio </td>
              <td id="resumen-precio" class="valor">$ {{ $precio }}</td>
            </tr>
          </table>
        </div>
      </div>
      <!-- div agregar -->

      <!-- div listado -->
      <div class="col-md-9">
        <h4 class="card-title">Listado de productos</h4>
        <table class="table table-hover" id="datatables">
          <thead class="thead-default">
            <tr>
              <th>Producto</th>
              <th>Medida</th>
              <th>Peso Unitario</th>
              <th>Precio Unitario</th>
              <th>Cantidad</th>
              <th>Peso Subtotal</th>
              <th>Precio Subtotal</th>
              <th width="10">Acciones</th>
            </tr>
            <tr class="filter d-none">
              <td>
                <div class="form-group mb-1">
                  <input type="text" class="form-control form-filter" placeholder="" data-column="0">
                  <i class="form-group__bar"></i>
                </div>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <!-- div listado -->

      <!-- div resumen -->
      <div class="col-md-2">


      </div>
      <!-- div resumen -->
    </div>

    <!-- contenedor principal -->

    <!-- <h6 class="card-subtitle">Recibidos o en camino a tienda.</h6> -->



    <hr> <br> <br>

  <div class="row">
    <div class="col-md-8">



      <!-- Buscar -->
      <!-- <input type="text" name="" value=""> -->

    </div>
  </div>

  <!-- tabla -->
</div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="/vendors/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/vendors/datatables/input.js"></script>
<script type="text/javascript" src="/js/app/abastecimiento/detalle.js"> </script>
@endpush