@extends('layout.base')

@section('content')
  <h1 class="header">
    Proyectos
  </h1>
  <table class="table">
    <thead>
      <tr>
        <th>
          Proyecto
        </th>
        <th>
          Inmobiliaria
        </th>
      </tr>
    </thead>
    <tbody id="proyectos"></tbody>
  </table>
@endsection

@push('scripts')
  <script type="text/javascript">
    const proyectos = {
      id: '#proyectos',
      data: [],
      get: function() {
        return $.ajax({
          url: '{{$urls->api}}/proyectos',
          method: 'get',
          dataType: 'json'
        }).then((data) => {
          if (data.proyectos === null || data.proyectos.length == 0) {
            return
          }
          this.data = data.proyectos
        }).then(() => {
          this.draw()
        })
      },
      draw: function() {
        const parent = $(this.id)
        $.each(this.data, (i, el) => {
          const url = '{{$urls->base}}/facturas/' + el.id
          parent.append(
            $('<tr></tr>').append(
              $('<td></td>').append(
                $('<a></a>').attr('href', url).html(el.descripcion)
              )
            ).append(
              $('<td></td>').append(
                $('<a></a>').attr('href', url).html(el.inmobiliaria.abreviacion)
              )
            )
          )
        })
      },
      setup: function() {
        this.get()
      }
    }
    $(document).ready(() => {
      proyectos.setup()
    })
  </script>
@endpush
