@extends('layout.base')

@section('content')
  <h1 class="header">
    Ventas - <span id="proyecto"></span>
  </h1>
  <table class="table">
    <thead>
      <tr>
        <th>
          Departamento
        </th>
        <th>
          Propietario
        </th>
        <th class="text-right">
          Valor
        </th>
        <th>
          Operador
        </th>
        <th class="text-right">
          Comisi&oacute;n
        </th>
        <th>
          Facturas
        </th>
      </tr>
    </thead>
    <tbody id="ventas">
    </tbody>
  </table>
@endsection

@push('scripts')
  <script type="text/javascript">
    const proyecto = {
      id: '#proyecto',
      data: {},
      get: function() {
        return $.ajax({
          url: '{{$urls->api}}/proyecto/{{$proyecto_id}}',
          method: 'get',
          dataType: 'json'
        }).then((data) => {
          this.data = data.proyecto
          $(this.id).html(data.proyecto.descripcion + ' - ' + data.proyecto.inmobiliaria.abreviacion)
        })
      },
      setup: function() {
        this.get().then(() => {
          ventas.get().ventas(this.data.id)
        })
      }
    }
    class Facturas {
      constructor(venta_id) {
        this.venta_id = venta_id
        this.facturas = []
      }
      get() {
        return $.ajax({
          url: '{{$urls->api}}/venta/' + this.venta_id + '/facturas',
          method: 'get',
          dataType: 'json'
        }).then((data) => {
          if (data.facturas === null || data.facturas.length == 0) {
            return
          }
          this.facturas = data.facturas
          this.draw()
        })
      }
      draw() {
        const parent = $('#' + this.venta_id)
        let tbody = parent.find('tbody')
        if (tbody.length == 0) {
          tbody = $('<tbody></tbody>')
          const table = $('<table></table>').attr('class', 'table').append(
            $('<thead></thead>').append(
              $('<tr></tr>').append(
                $('<th></th>').html('Factura')
              ).append(
                $('<th></th>').html('Emisor')
              ).append(
                $('<th></th>').html('Fecha')
              ).append(
                $('<th></th>').html('Valor')
              )
            )
          ).append(tbody)
          parent.append(table)
        }
        tbody.html('')
        $.each(this.facturas, (i, el) => {
          tbody.append(
            $('<tr></tr>').append(
              $('<td></td>').html(el.factura.factura)
            ).append(
              $('<td></td>').html(el.factura.operador.descripcion)
            ).append(
              $('<td></td>').html(el.factura.fecha.formateada)
            ).append(
              $('<td></td>').html(el.valor.formateado)
            )
          )
        })
      }
    }
    const ventas = {
      id: '#ventas',
      data: [],
      get: function() {
        return {
          ventas: (proyecto) => {
            return $.ajax({
              url: '{{$urls->api}}/proyecto/' + proyecto + '/ventas',
              method: 'get',
              dataType: 'json'
            }).then((data) => {
              this.data = data.ventas
            }).then(() => {
              this.draw()
            })
          },
          facturas: (venta) => {
            return $.ajax({
              url: '{{$urls->api}}/venta/' + venta + '/facturas',
              method: 'get',
              dataType: 'json'
            })
          }
        }
      },
      draw: function() {
        const parent = $(this.id)
        $.each(this.data, (i, el) => {
          const row = $('<tr></tr>').append(
            $('<td></td>').html(el.propiedad.unidades[0].descripcion)
          ).append(
            $('<td></td>').html(el.propietario.nombre_completo)
          ).append(
            $('<td></td>').attr('class', 'text-right').html(el.valor.formateado)
          )
          if (el.operador) {
            row.append(
              $('<td></td>').html(el.operador.descripcion)
            ).append(
              $('<td></td>').attr('class', 'text-right').html(el.comision.formateada)
            )
          } else {
            row.append(
              $('<td></td>')
            ).append(
              $('<td></td>')
            )
          }
          row.append(
            $('<td></td>').attr('id', el.id)
          )
          this.data[i].facturas = new Facturas(el.id)
          this.data[i].facturas.get()
          parent.append(row)
        })
      }
    }
    $(document).ready(() => {
      proyecto.setup()
    })
  </script>
@endpush