@extends('layout.base')

@section('content')
  <h1 class="header">
    Proyecto <span id="proyecto"></span>
  </h1>
  <table class="table">
    <thead>
      <tr>
        <th>Operador</th>
        <th>Representante</th>
      </tr>
    </thead>
    <tbody id="operadores"></tbody>
  </table>
@endsection

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