@extends('layout.base')

@section('content')
  <div class="page-heading">
    <h2>Pagos del Mes</h2>
  </div>

  <table class="table table-striped">
    <thead>
      <tr>
        <th colspan="2">Proyectos</th>
      </tr>
      <tr>
        <th>Nombre</th>
        <th>Inmobiliaria</th>
      </tr>
    </thead>
    <tbody id="proyectos">
    </tbody>
  </table>
@endsection


@push('scripts')
  <script type="text/javascript">
  let proyectos = {
    id: "#proyectos",
    proyectos: [],
    get: function() {
      let url = '{{nUrl('contabilidad')}}&a=get_proyectos&ajax=1'
      return $.getJSON(url, (data) => {
        this.proyectos = data.proyectos
      })
    },
    build: function() {
      let tbod = $(this.id)
      $.each(this.proyectos, (i, el) => {
        let inm = $('<td></td>').html(el.inmobiliaria.abreviacion)
        let line2 = $('<tr></tr>')
        let line = $('<tr></tr>').attr('data-proyecto', el.id).append(
          $('<td></td>').html(el.descripcion)
        ).append(
          inm
        ).click(function(e) {
          line2.html('')
          let url = '{{nUrl('contabilidad')}}&a=get_fechas&proyecto=' + el.id
          $.getJSON(url, (data) => {
            let tb = $('<table></table>')
            $.each(data.fechas, (k, fe) => {
              let url = '{{nUrl('contabilidad')}}&a=show_pagos&proyecto=' + el.id + '&fecha=' + fe.short
              let tr = $('<tr></tr>').append(
                $('<td></td>').append(
                  $('<a></a>').attr('href', url).html(fe.long)
                )
              )
              tb.append(tr)
            })
            line2.append($('<td></td>')).append(tb)
          })
        })
        tbod.append(line).append(line2)
      })
    },
    setup: function() {
      this.get().then(() => {
        this.build()
      })
    }
  }
  $(document).ready(() => {
    proyectos.setup()
  })
  </script>
@endpush