@extends('layouts.admin')

@section('content')

<div class="container-fluid">
  <div class="row">
    <div class="col">

      <div class="d-flex justify-content-around">
        <div>SALIDA DE MATERIAL</div>
        <div>
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modelId">
            ASIGNAR SALIDAS
          </button>

          <!-- Modal -->
          <div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">SALIDAS</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">

                  <form action="{{route('materials.create_salida')}}" method="post">
                    @csrf
                    <select name="articulo_id" id="articulo_id" class="mb-3">
                      @foreach ($articulo as $a)
                      <option value="{{$a->id}}">{{$a->nombre}} </option>
                      @endforeach
                    </select>
                    <select name="material_id" id="material_id" class="mb-3">
                      @foreach ($material as $m)
                      <option value="{{$m->id}}">{{$m->nombre}}, {{$m->color}}, {{$m->codigo}}</option>
                      @endforeach
                    </select>

                    <div class="form-group">
                      <label for="">CANTIDAD</label>
                      <input type="number" step="any" class="form-control" name="cantidad" id="">
                    </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">CERRAR</button>
                  <button type="submit" class="btn btn-primary"><i class="fas fa-save    "></i> GUARDAR</button>
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="">BUSCADOR</label>
        <input type="text" class="form-control" name="buscador" id="buscador" placeholder="Buscar ....">
      </div>

      <div class="row mt-5" id="lista">

        @foreach ($data as $d)
        <div class="col-md-3 ">
          <div class="card">
            <div class="card-body">
              MATERIAL: {{$d->material->nombre}} - {{$d->material->color}} - {{$d->material->codigo}} <br>
              ARTICULO: {{$d->articulo->nombre}} -               CANITDAD: {{$d->cantidad}}

            </div>
            <div class="card-footer text-muted">
              <form action="{{route('materials.deleteSalida', $d->id)}}" method="post">
                @csrf
                @method('delete')
                <button type='submit' class='btn btn-danger' onclick="return confirm('Esta Seguro de Eliminar?')" ><i class='fa fa-trash' aria-hidden='true'></i></button>
              </form>
            </div>
          </div>
        </div>
        @endforeach


      </div>

    </div>
  </div>
</div>

@endsection

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css')}}">
<style>
  .filtro {
    display: none;
  }
</style>
@endsection

@section('scripts')
<script src="{{asset('plugins/slim-select/slimselect.min.js')}}"></script>
<script>
  new SlimSelect({
    select: '#material_id'
  });
  new SlimSelect({
    select: '#articulo_id'
  });


  document.addEventListener('keyup', e => {
    if (e.target.matches('#buscador')) {
      document.querySelectorAll('.col-md-3').forEach(data => {
        data.textContent.toLocaleLowerCase().includes(e.target.value.toLocaleLowerCase()) ?
          data.classList.remove('filtro') :
          data.classList.add('filtro')

      })
    }

  })
</script>
@endsection