@extends('layout.base')

@section('content')
  <div class="page-heading">
    <h3>
      <div class="row">
        <div class="col-md-6">
          Precios - <span id="proyecto"></span>
        </div>
        <div class="col-md-6 text-right">
          <a href="{{$urls->base}}/proyecto/{{$proyecto_id}}/precios/add">
            <span class="glyphicon glyphicon-plus"></span>
          </a>
        </div>
      </div>
    </h3>
  </div>
  <br />
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Tipo</th>
        <th>Nombre</th>
        <th>Tipolog&iacute;a</th>
        <th>L&iacute;neas</th>
        <th>m&#0178; Vendibles</th>
        <th>#</th>
        <th>Precio Promedio</th>
        <th>UF/m&#0178;</th>
      </tr>
    </thead>
    <tbody id="tipos"></tbody>
  </table>
@endsection

@push('scripts')
  <script type="text/javascript">
    class Proyecto {
      constructor({id, inmobiliaria, descripcion, direccion, valor_terreno, superficie, corredor, pisos, subterraneos, tipos}) {
        this.id = id
        this.inmobiliaria = inmobiliaria
        this.descripcion = descripcion
        this.tipos = tipos.map(t => {
          return new Tipo(t)
        })
        this.formatters = {pesos: null, uf: null}
      }
      draw() {
        $('#proyecto').html(this.descripcion)
        const p = $('#tipos')
        this.tipos.forEach(t => {
          t.draw(p)
        })
      }
      set() {
        return {
          formatters: formatters => {
            this.formatters = formatters
            this.tipos.forEach(t => {
              t.set().formatters(formatters)
            })
          }
        }
      }
      setup(formatters) {
        this.set().formatters(formatters)
        this.draw()
        $('.unidades').hide()
        $('.show-unidades').css('cursor', 'pointer').click(function(e) {
          var id = $(this).attr('data-id')
          var status = $(this).attr('data-status')
          if (status == 'open') {
            $(".unidades[data-tipo='" + id + "']").hide()
            $(this).attr('data-status', 'closed')
          } else {
            $(".unidades[data-tipo='" + id + "']").show()
            if ($(".unidades[data-tipo='" + id + "']").find('.subtipo').length > 0) {
              $(".unidades[data-tipo='" + id + "']").find('tbody tr').hide()
              $(".unidades[data-tipo='" + id + "']").find('.subtipo').show()
            }
            $(this).attr('data-status', 'open')
          }
        })
        $('.subtipo').css('cursor', 'pointer').click(function(e) {
          var id = $(this).attr('data-id')
          var status = $(this).attr('data-status')
          if (status == 'open') {
            $(this).nextUntil('.subtipo').hide()
            $(this).attr('data-status', 'closed')
          } else {
            $(this).nextUntil('.subtipo').show()
            $(this).attr('data-status', 'open')
          }
        })
      }
    }
    class Tipo {
      constructor({id, tipo, nombre, abreviacion, tipologia, superficie, unidades, precio}) {
        this.id = id
        this.tipo = tipo
        this.nombre = nombre
        this.abreviacion = abreviacion
        this.tipologia = tipologia
        this.superficie = superficie
        this.unidades = unidades.map(u => {
          return new Unidad(u)
        })
        this.precio = precio
        this.formatters = {pesos: null, uf: null}
        this.subtipos = []
      }
      draw(parent) {
        let tr = $('<tr></tr>').attr('class', 'show-unidades').attr('data-status', 'closed')
          .attr('data-id', this.id).append(
            $('<td></td>').html(this.tipo.descripcion.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase(); }))
          ).append(
            $('<td></td>').html(this.nombre)
          ).append(
            $('<td></td>').html(this.abreviacion)
          ).append(
            $('<td></td>').attr('class', 'lineas')
          ).append(
            $('<td></td>').html(this.superficie.vendible > 0 ? this.formatters.uf.format(this.superficie.vendible) + ' m&#178;' : '-')
          ).append(
            $('<td></td>').html(this.unidades.length)
          ).append(
            $('<td></td>').html(this.get().precio().formateado + ' UF')
          )
        if ((this.get().precio().total / this.superficie.vendible) < Infinity) {
          tr.append(
            $('<th></th>').html(this.formatters.uf.format(this.get().precio().total / this.superficie.vendible) + ' UF/m&#178;')
          )
        } else {
          tr.append(
            $('<th></th>')
          )
        }
        parent.append(tr)
        const table = $('<table></table>').attr('class', 'table table-striped').append(
          $('<thead></thead>').append(
            $('<tr></tr>').append(
              $('<th></th>').html('Unidad')
            ).append(
              $('<th></th>').html('Desde')
            ).append(
              $('<th></th>').html('Precio')
            ).append(
              $('<th></th>').html('UF/m&#0178;')
            )
          )
        ).append(
          $('<tbody></tbody>')
        )
        tr = $('<tr></tr>').attr('class', 'unidades').attr('data-tipo', this.id).append(
          $('<td></td>')
        ).append(
          $('<td></td>').attr('colspan', 7).append(table)
        )
        parent.append(tr)
        let subtipo = null
        this.unidades.forEach(el => {
          subtipo = el.draw(table.find('tbody'), subtipo)
          this.add().subtipo(subtipo)
        })
        subtipo.draw().precio(parent)
        parent.find("[data-id='" + this.id + "']").find('.lineas').html(this.get().lineas())
      }
      get() {
        return {
          precio: () => {
            let precio = 0
            this.unidades.forEach(u => {
              precio += u.precio.valor
            })
            const total = precio
            precio /= this.unidades.length
            return {
              valor: precio,
              total,
              formateado: this.formatters.uf.format(precio)
            }
          },
          lineas: () => {
            let lineas = []
            this.subtipos.forEach(s => {
              lineas.push(s.nombre)
            })
            return lineas.join(' - ')
          }
        }
      }
      set() {
        return {
          formatters: formatters => {
            this.formatters = formatters
            this.unidades.forEach(u => {
              u.set().formatters(formatters)
            })
          }
        }
      }
      add() {
        return {
          subtipo: subtipo => {
            if (this.subtipos.indexOf(subtipo) === -1) {
              this.subtipos.push(subtipo)
            }
          }
        }
      }
    }
    class Subtipo {
      constructor({nombre}) {
        this.nombre = nombre
        this.unidades = []
        this.formatters = {pesos: null, uf: null}
      }
      add() {
        return {
          unidad: unidad => {
            this.unidades.push(unidad)
          }
        }
      }
      get() {
        return {
          precio: () => {
            let precio = 0
            this.unidades.forEach(un => {
              precio += un.precio.valor
            })
            const total = precio
            precio /= this.unidades.length
            return {
              precio,
              total
            }
          },
          superficie: () => {
            let superficie = 0
            this.unidades.forEach(un => {
              superficie += un.superficie.vendible
            })
            return superficie
          }
        }
      }
      set() {
        return {
          formatters: formatters => {
            this.formatters = formatters
          }
        }
      }
      draw() {
        return {
          precio: parent => {
            const tr = parent.find("[data-id='" + this.nombre + "']")
            tr.find('.precio').html(this.formatters.uf.format(this.get().precio().precio) + ' UF')
            if (this.get().precio().total / this.get().superficie() < Infinity) {
              tr.find('.uf_m2').html(this.formatters.uf.format(this.get().precio().total / this.get().superficie()) + ' UF/m&#178;')
            }
          }
        }
      }
    }
    class Unidad {
      constructor({id, subtipo, descripcion, precio, fecha, superficie}) {
        this.id = id
        this.subtipo = subtipo
        this.descripcion = descripcion
        this.precio = precio
        this.fecha = fecha
        this.superficie = superficie
        this.formatters = {pesos: null, uf: null}
      }
      build() {
        return {
          subtipo: (parent, nombre) => {
            const subtipo = new Subtipo({nombre})
            subtipo.set().formatters(this.formatters)
            parent.append(
              $('<tr></tr>').attr('data-id', subtipo.nombre).attr('data-status', 'closed').attr('class', 'subtipo').append(
                $('<th></th>').html('Línea ' + subtipo.nombre)
              ).append(
                $('<th></th>')
              ).append(
                $('<th></th>').attr('class', 'precio')
              ).append(
                $('<th></th>').attr('class', 'uf_m2')
              )
            )
            return subtipo
          }
        }
      }
      draw(parent, subtipo) {
        if (typeof subtipo === 'undefined' || subtipo === null) {
          subtipo = this.build().subtipo(parent, this.subtipo)
        } else if (subtipo.nombre !== this.subtipo) {
          subtipo.draw().precio(parent)
          subtipo = this.build().subtipo(parent, this.subtipo)
        }
        subtipo.add().unidad(this)
        const tr = $('<tr></tr>').append(
          $('<td></td>').html(this.descripcion)
        )
        if (this.precio.valor) {
          tr.append(
            $('<td></td>').html(new Date(this.precio.estado.fecha.date).toLocaleDateString('es-CL'))
          ).append(
            $('<td></td>').html(this.formatters.uf.format(this.precio.valor) + ' UF')
          ).append(
            $('<td></td>').html((this.superficie.vendible > 0) ? this.formatters.uf.format(this.get().ufM2()) + ' UF/m&#178;' : '-')
          )
        } else {
          tr.append(
            $('<td></td>').attr('colspan', 3).html('--')
          )
        }
        parent.append(tr)
        return subtipo
      }
      get() {
        return {
          ufM2: () => {
            return this.precio.valor / this.superficie.vendible;
          }
        }
      }
      set() {
        return {
          formatters: formatters => {
            this.formatters = formatters
          }
        }
      }
    }
    $(document).ready(function() {
      sendGet('/proyecto/' + {{$proyecto_id}} + '/precios').then(response => {
        const formatters = {
          pesos: Intl.NumberFormat('es-CL', {style: 'decimal', useGrouping: true}),
          uf: Intl.NumberFormat('es-CL', {style: 'decimal', useGrouping: true, minimumFractionDigits: 2, maximumFractionDigits: 2})
        }
        const proyecto = new Proyecto(response.proyecto)
        proyecto.setup(formatters)
      })

    })
  </script>
@endpush