@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/datatable/css/dataTables.bootstrap4.min.css')}}">
@endsection

@section('content')

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card mb-4">
        <div class="card-body">

          <div class="d-flex justify-content-sm-between">
            <h3 class="card-title">Listado de Articulos Proximos A Entrar</h3>

            <div class="">
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modelId">
                NUEVO ARTICULO PROXIMO A ENTRAR
              </button>
            </div>
          </div>

          <div class="table-responsive  table-responsive mb-5">
            <table class="table table-data table-hover" id="table_id" data-page-length="40">
              <thead style=" cursor: pointer;">
                <tr>
                  <th>Nombre </th>
                  <th>Cantidad </th>
                  <th>Fecha de Llegada</th>
                  <th>Fecha de Actualizacion</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @foreach($data as $art)
                <tr class="">

                  <td>{{$art->articulo}}</td>
                  <td>{{$art->cantidad}}</td>
                  <td>{{$art->fecha_entrega}}</td>
                  <td>{{$art->updated_at}}</td>

                  <td>
                    <a class="btn btn-primary" href="{{route('curso.show', $art->id)}}"><i class="fas fa-edit    "></i></a>
                    <form action="{{route('curso.delete', $art->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>

                  </td>

                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




@endsection

@section('modal')
<!-- 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">NUEVO ARTICULO PROXIMO A INGRESAR</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{route('curso.store')}}" method="post">
        @csrf
        <div class="modal-body">
          <div class="form-group">
            <label for="">ARTICULO</label>
            <input type="text" class="form-control" name="articulo" placeholder="">
          </div>

          <div class="form-group">
            <label for="">CANTIDAD </label>
            <input type="text" class="form-control" name="cantidad" placeholder="">
          </div>


          <div class="form-group">
            <label for="">FECHA ESTIMADA DE LLEGADA</label>
            <input type="date" class="form-control" name="fecha_entrega" placeholder="">
          </div>

          <div class="form-group d-none">
            <label for="">AXILIAR</label>
            <input type="date" class="form-control" name="aux1" value="." disabled>
          </div>

          <div class="form-group d-none">
            <label for="">AUXILIAR</label>
            <input type="date" class="form-control" name="aux2" value="." disabled>
          </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>

@endsection

@section('scripts')
<script src="{{asset('plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatable/js/dataTables.bootstrap4.min.js')}}"></script>

<script>
  $(document).ready(function() {
    var table = $('#table_id').DataTable({
      scrollY: '60vh',
      scrollCollapse: true,
      "language": {
        'info': '_TOTAL_ REGISTROS',
        'search': 'BUSCAR',
        'paginate': {
          'next': 'SIGUIENTE',
          'previous': 'ATRAS'
        },
        'loadingRecords': 'CARGANDO',
        'emptyTable': 'NO EXISTEN DATOS',
        'zeroRecords': 'NO EXISTEN DATOS IGUALES'
      },
      lengthMenu: [
        [10, 25, 15, 50, -1],
        [10, 25, 15, 50, 'All'],
      ],
    });


  });
</script>
@endsection