@extends('layout.base')

@section('content')
  <h1 class="header">
    Proyecto <span id="proyecto"></span>
    <br />
    Operador <span id="operador"></span>
  </h1>
  <table class="table">
    <thead>
      <tr>
        <th>Factura</th>
        <th>Fecha</th>
        <th>Ventas</th>
        <th>Valor Neto</th>
        <th>IVA</th>
        <th>Valor Bruto</th>
        <th class="text-right">
          <button class="btn btn-success" data-toggle="modal" data-target="#modal_agregar">
            <span class="glyphicon glyphicon-plus"></span>
          </button>
        </th>
      </tr>
    </thead>
    <tbody id="facturas"></tbody>
  </table>
  <div class="modal" id="modal_agregar" tabindex="-1" role="dialog" aria-labelledby="Agregar Factura">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Agregar Factura</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="rut" class="control-label">N&uacute;mero</label>
              <input type="text" name="factura" class="form-control" />
            </div>
            <div class="form-group">
              <label for="fecha" class="control-label">Fecha</label>
              <div class="ui calendar" id="factura_fecha">
                <div class="ui input left icon">
                  <i class="calendar icon"></i>
                  <input type="text" name="fecha" />
                </div>
              </div>
            <div class="form-group">
              <label for="valor_neto" class="control-label">Valor Neto</label>
              <input type="text" name="valor_neto" class="form-control" />
            </div>
            <div class="form-group">
              <label for="iva" class="control-label">IVA</label>
              <input type="text" name="iva" class="form-control" />
            </div>
            <button class="btn btn-default" data-dismiss="modal" id="cerrar_agregar">Agregar</button>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    const proyecto = {
      id: '#proyecto',
      get: function() {
        return $.getJSON('{{$urls->api}}/proyecto/{{$id_proyecto}}').then((data) => {
          $('span#proyecto').html(data.proyecto.descripcion + ' - ' + data.proyecto.inmobiliaria.abreviacion)
          return data.proyecto.id
        })
      },
      setup: function() {
        this.get().then((proyecto) => {
          modal().agregar.setup()
          modal().add_ventas.setup()
          operador.setup(proyecto)
        })
      }
    }
    const operador = {
      id: '#operador',
      get: function(proyecto) {
        return $.getJSON('{{$urls->api}}/operador/{{$id_operador}}').then((data) => {
          $('span#operador').html(data.operador.descripcion)
          return data.operador.id
        })
      },
      setup: function(proyecto) {
        this.get(proyecto).then((operador) => {
          facturas.get(proyecto, operador)
        })
      }
    }
    class Ventas {
      constructor(id) {
        this.id = id
        this.data = []
      }
      get() {
        return $.getJSON('{{$urls->api}}/factura/' + this.id + '/ventas').then((data) => {
          if (data.ventas === null || data.ventas.length == 0) {
            return
          }
          this.data = data.ventas
        }).then(() => {
          this.draw()
        })
      }
      getParent() {
        let tbody = $("tbody.ventas[data-id='" + this.id + "']")
        if (tbody.length == 0) {
          const td = $("td.ventas[data-id='" + this.id + "']")
          tbody = $('<tbody></tbody>').attr('class', 'ventas').attr('data-id', this.id)
          td.append(
            $('<table></table>').attr('class', 'table').append(
              $('<thead></thead>').append(
                $('<tr></tr>').append(
                  $('<th></th>').html('Unidad')
                ).append(
                  $('<th></th>').html('Valor')
                ).append(
                  $('<th></th>').attr('class', 'text-right').append(
                    $('<button></button>').attr('class', 'btn btn-success')
                      .attr('data-toggle', 'modal')
                      .attr('data-target', '#modal_add_ventas')
                      .attr('data-factura', this.id)
                      .append(
                        $('<span></span>').attr('class', 'glyphicon glyphicon-plus')
                      )
                  )
                )
              )
            ).append(
              tbody
            )
          )
        }
        return tbody
      }
      draw() {
        const parent = this.getParent()
        parent.html('')
        $.each(this.data, (i, el) => {
          parent.append(
            $('<tr></tr>').append(
              $('<td></td>').html(el.venta.propiedad.unidades[0].descripcion)
            ).append(
              $('<td></td>').html(el.valor.formateado)
            )
          )
        })
      }
    }
    const facturas = {
      id: '#facturas',
      data: [],
      get: function(proyecto, operador) {
        return $.post('{{$urls->api}}/facturas', {proyecto_id: proyecto, operador_id: operador}).then((data) => {
          if (data.facturas === null || data.facturas.length == 0) {
            return
          }
          this.data = data.facturas
        }).then(() => {
          this.draw()
        })
      },
      draw: function() {
        const parent = $(this.id)
        parent.html('')
        $.each(this.data, (i, el) => {
          this.data[i].ventas = new Ventas(el.id)
          this.data[i].ventas.get()
          parent.append(
            $('<tr></tr>').append(
              $('<td></td>').html(el.factura)
            ).append(
              $('<td></td>').html(el.fecha.formateada)
            ).append(
              $('<td></td>').attr('class', 'ventas').attr('data-id', el.id)
            ).append(
              $('<td></td>').html(el.valor_neto.formateado)
            ).append(
              $('<td></td>').html(el.iva.formateado)
            ).append(
              $('<td></td>').html(el.valor_total.formateado)
            ).append(
              $('<td></td>')
            )
          )
        })
      },
      add: function() {
        const fecha = $("#factura_fecha").calendar('get date')
        const data = {
          proyecto_id: {{$id_proyecto}},
          operador_id: {{$id_operador}},
          factura: $("[name='factura']").val(),
          fecha: fecha.getFullYear() + '-' + ('00' +(fecha.getMonth() + 1)).slice(-2) + '-' + ('00' + fecha.getDate()).slice(-2),
          valor_neto: $("[name='valor_neto']").val(),
          iva: $("[name='iva']").val()
        }
        return $.post('{{$urls->api}}/facturas/add', data).then((data) => {
          this.get(data.input.proyecto_id, data.input.operador_id).then((data) => {
            this.draw()
          })
        })
      },
      asignar: function(form) {
        const data = {
          factura_id: form.find("[name='factura']").val(),
          venta_id: form.find("[name='venta']").val(),
          valor: form.find("[name='valor']").val()
        }
        return $.post('{{$urls->api}}/factura/' + data.factura_id + '/ventas/add', data).then((result) => {
          $.each(this.data, (i, el) => {
            if (el.id == data.factura_id) {
              el.ventas.get()
            }
          })
        })
      },
      setup: function() {
        this.get()
      }
    }
    const modal = function() {
      const base = function(before, id, label) {
        const div = $('<div></div>').attr('class', 'modal').attr('id', id.substring(1)).attr('tabindex', -1).attr('role', 'dialog').attr('aria-labelledby', label).append(
          $('<div></div>').attr('class', 'modal-dialog').append(
              $('<div></div>').attr('class', 'modal-content').append(
                  $('<div></div>').attr('class', 'modal-header').append(
                      $('<button></button>').attr('type', 'button').attr('class', 'close').attr('data-dismis', 'modal').attr('aria-label', 'Close').append(
                          $('<span></span>').attr('aria-hidden', 'true').html('&times;')
                        )
                    ).append(
                      $('<h4></h4>').attr('class', 'modal-title').html(label)
                    )
                ).append(
                  $('<div></div>').attr('class', 'modal-body').append(
                    $('<form></form>')
                  )
                )
            )
        )
        before.after(div)
        return div
      }
      return {
        agregar: {
          id: '#modal_agregar',
          button: '#cerrar_agregar',
          setup: function() {
            $(this.id).find(this.button).click((e) => {
              $(this.id).find('form').trigger('submit')
            })
            $(this.id).find('form').submit((e) => {
              e.preventDefault()
              facturas.add().then(() => {
                $(e.target).trigger('reset')
                $(this.id).modal('toggle')
              })
              return false
            })

            const today = new Date()
            $('#factura_fecha').calendar({
              type: 'date',
              minDate: new Date(today.getFullYear()-15, today.getMonth(), today.getDate()),
              maxDate: new Date(today.getFullYear()+1, today.getMonth(), today.getDate())
            })
          }
        },
        add_ventas: {
          id: '#modal_add_ventas',
          button: '#cerrar_add_ventas',
          build: function() {
            const modal = base($('#modal_agregar'), this.id, 'Asignar Venta')
            const form = modal.find('form')
            form.append(
              $('<input/>').attr('type', 'hidden').attr('name', 'factura')
            ).append(
              $('<div></div>').attr('class', 'form-group').append(
                $('<label></label>').attr('for', 'venta').html('Venta')
              ).append(
                $('<select></select>').attr('name', 'venta').attr('class', 'form-control')
              )
            ).append(
              $('<div></div>').attr('class', 'form-group').append(
                $('<label></label>').attr('for', 'valor').html('Valor')
              ).append(
                $('<input/>').attr('type', 'text').attr('name', 'valor').attr('class', 'form-control')
              )
            ).append(
              $('<button></button>').attr('class', 'btn btn-default').attr('data-dismiss', 'modal').attr('id', 'cerrar_add_ventas').html('Asignar')
            )

            this.get().ventas().then((data) => {
              const parent = $(this.id).find("select[name='venta']")
              $.each(data.ventas, (i, el) => {
                parent.append(
                  $('<option></option>').attr('value', el.id).html(el.propiedad.unidades[0].descripcion)
                )
              })
            })
          },
          get: function() {
            return {
              ventas: function() {
                return $.getJSON('{{$urls->api}}/proyecto/{{$id_proyecto}}/ventas')
              }
            }
          },
          setup: function() {
            this.build()
            $(this.id).find(this.button).click((e) => {
              $(this.id).find('form').trigger('submit')
            })
            $(this.id).on('show.bs.modal', (e) => {
              var btn = $(e.relatedTarget)
              var id = btn.data('factura')

              $(this.id).find('form').find("[name='factura']").attr('value', id)
            })
            $(this.id).find('form').submit((e) => {
              e.preventDefault()
              facturas.asignar($(e.target)).then(() => {
                $(e.target).trigger('reset')
                $(this.id).modal('toggle')
              })
              return false
            })
          }
        }
      }
    }
    $(document).ready(() => {
      proyecto.setup()
    })
  </script>
@endpush
