@extends('admin.layout.base')

@section('page_content')
  <div class="ui grid">
    <div class="nine wide column">
      <div class="ui header">
        PRODUCTOS
      </div>
      <table class="ui table">
        <thead>
          <tr>
            <th class="right aligned" colspan="3">
              <a href="{{$urls->admin}}/productos/add">
                <button class="ui button">NUEVO</button>
              </a>
            </th>
          </tr>
          <tr>
            <th>Producto</th>
            <th class="center aligned">Editar</th>
            <th class="center aligned">Borrar</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($productos as $producto)
            <tr>
              <td>
                <a href="{{$urls->admin}}/producto/{{$producto->id}}">
                  {{$producto->nombre}}
                </a>
              </td>
              <td class="center aligned">
                <a href="{{$urls->admin}}/producto/{{$producto->id}}">
                  <i class="edit icon"></i>
                </a>
              </td>
              <td class="center aligned"><i class="trash alternate outline icon" data-id="{{$producto->id}}"></i></td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    $(document).ready(() => {
      $('.trash.icon').css('cursor', 'pointer').click(function() {
        var id = $(this).attr('data-id')
        var url = '{{$urls->admin}}/productos/delete'
        $.post(url, {id: id}, (data) => {
          if (data.estado) {
            window.location.reload()
          }
        })
      })
    })
  </script>
@endpush
