@extends('layout.base')

@section('content')
  <div class="page-heading">
    <h3>Evaluar Cierre</h3>
  </div>
  <br />
  <form class="form-horizontal" method="post" action="#">
    <div class="form-group">
      <div class="col-md-2">Proyecto</div>
      <div class="col-md-3"><select name="proyecto" id="proyecto" class="form-control">
        <option value="">---</option>
        @foreach ($proyectos as $proyecto)
          <option value="{{$proyecto->id}}">{{$proyecto->descripcion}}</option>
        @endforeach
      </select></div>
    </div>
    <div class="form-group">
      <div class="col-md-2">Fecha</div>
      @include('form.fecha')
    </div>
    <div class="form-group">
      <div class="col-md-2">Departamento</div>
      <div class="col-md-3"><select name="departamento" id="departamento" class="form-control">
      </select></div>
    </div>
    <div class="form-group">
      <div class="col-md-2">Precio</div>
      <div class="col-md-3"><input type="text" name="precio" class="form-control" /></div>
    </div>
    <div class="form-group">
      <div class="col-md-2">Estacionamientos</div>
      <div class="col-md-1"><button class="btn" type="button" onClick="javascript: agregarUnidad(2)"><span class="glyphicon glyphicon-plus"></span></button></div>
      <div class="col-md-2">Bodegas</div>
      <div class="col-md-1"><button class="btn" type="button" onClick="javascript: agregarUnidad(3)"><span class="glyphicon glyphicon-plus"></span></button></div>
    </div>
    <span id="unidades">
      <input type="hidden" name="unidades" value="0" />
    </span>
    <div class="form-group">
      <div class="col-md-2">Pie</div>
      <div class="col-md-2"><input type="text" name="pie" class="form-control" /></div>
    </div>
    <div class="form-group">
      <div class="col-md-2">Bono Pie</div>
      <div class="col-md-2"><input type="text" name="bono" class="form-control" /></div>
      <div class="col-md-2">Promocion</div>
      <div class="col-md-2"><input type="text" name="promocion" class="form-control" /></div>
      <div class="col-md-2">Relacionado<br />Subrelacionado</div>
      <div class="col-md-1">
        <input type="radio" name="relacionado" value="1" class="form-checkbox" />
        <br />
        <input type="radio" name="relacionado" value="2" class="form-checkbox" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-2">Operador</div>
      <div class="col-md-2"><input type="text" name="operador" class="form-control" /></div>
      <div class="col-md-1 text-left">%</div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-2 col-md-2"><button class="form-control" type="button" id="evaluar">Evaluar</button></div>
    </div>
  </form>
  <div id="results" class="panel panel-default">
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    function findUnidades(proyecto) {
      $.getJSON('{!!$locations['api']!!}/unidades/no_reservadas/' + proyecto + '/1', function(data) {
        var unidades = $('#departamento')
        unidades.html('')
        $.each(data, function(i, el) {
          if (el.tipo != 1) {
            return
          }
          unidades.append($('<option></option>').attr('value', el.id).html(el.descripcion));
        })
      })
    }
    var unis = []
    function agregarUnidad(tipo) {
      var proyecto = $('#proyecto').val()
      $.getJSON('{!!$locations['api']!!}/unidades/no_reservadas/' + proyecto + '/' + tipo, function(data) {
        var unidades = $('#unidades')
        var n = unis[unis.length - 1] + 1;
        if (unis.length == 0) {
    			n = 1
    		}
        unis[unis.length] = n;

        var select = $('<select></select>').attr('name', 'unidad' + n).attr('class', 'form-control');

        $.each(data, function(i, el) {
          if (el.tipo != tipo) {
            return
          }
          select.append($('<option></option>').attr('value', el.id).html(el.descripcion + ' - ' + el.abreviacion));
        })

        var name = ''
        if (tipo == 2) {
          name = 'Estacionamiento'
        } else if (tipo == 3) {
          name = 'Bodega'
        }

        unidades.append(
    				$('<div></div>').attr('class', 'form-group').append(
    						$('<div></div>').attr('class', 'col-md-2 col-md-offset-1').html(name)
    				).append(
    						$('<div></div>').attr('class', 'col-md-3').append(
    								select
    						)
    				).append(
    						$('<div></div>').attr('class', 'col-md-1').append(
    								$('<span></span>').attr('class', 'glyphicon glyphicon-minus remover').attr('data-id', n).attr('id', 'remover_unidad' + n)
    						)
    				)
    		)

        $("input[name='unidades']").val(JSON.stringify(unis));
        $('#remover_unidad' + n).click(function(e) {
    			i = $(this).attr('data-id');
    			removeUnidad(i);
    		});
      })
    }
    function removeUnidad(n) {
      var unidades = $('#unidades');
    	unidades.find("select[name='unidad" + n + "']").parent().parent().remove();
    	i = unis.binaryIndexOf(n);
    	unis.splice(i, 1);
    	$("input[name='unidades']").val(JSON.stringify(unis));
    }
    String.prototype.formatCL = function() {
      var newStr = parseFloat(this).toFixed(2).split('.')
      newStr[0] = newStr[0].split('').reverse().join('').match(/.{1,3}/g).join('.').split('').reverse().join('')
      return newStr.join(',')
    }
    var desface = 4
    function oferta(data) {
      var output = $('<div></div>').attr('class', 'panel-body')
      var col = 3
      output.append(
        $('<div></div>').attr('class', 'row').append(
          $('<div></div>').attr('class', 'col-md-' + col).html('Departamento')
        ).append(
          $('<div></div>').attr('class', 'col-md-' + (12 - col)).html($("select[name='departamento']").find(':selected').html())
        )
      )
      if (unis.length > 0) {
        var estacionamientos = []
        var bodegas = []
        $.each(unis, function(i, k) {
          var select = $("select[name='unidad" + k + "']")
          var tipo = select.parent().prev().text().toLowerCase()
          var descripcion = select.find(':selected').html()
          switch (tipo) {
            case 'estacionamiento':
              estacionamientos.push(descripcion)
              break;
            case 'bodega':
              bodegas.push(descripcion)
              break;
          }
        })
        if (estacionamientos.length > 0) {
          desface ++
          output.append(
            $('<div></div>').attr('class', 'row').append(
              $('<div></div>').attr('class', 'col-md-' + col).html('Estacionamiento' + ((estacionamientos.length > 1) ? 's' : ''))
            ).append(
              $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(estacionamientos.join(', '))
            )
          )
        }
        if (bodegas.length > 0) {
          desface ++
          output.append(
            $('<div></div>').attr('class', 'row').append(
              $('<div></div>').attr('class', 'col-md-' + col).html('Bodega' + ((estacionamientos.length > 1) ? 's' : ''))
            ).append(
              $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(bodegas.join(', '))
            )
          )
        }
      }
      if ($("input[name='relacionado']").is(':checked')) {
        desface ++
        output.append(
          $('<div></div>').attr('class', 'row').append(
            $('<div></div>').attr('class', 'col-md-12').html('Relacionado')
          )
        )
      }
      var valor = $("input[name='precio']").val()
      resultado = valor.formatCL() + ' UF'
      //sum = $("input[name='precio']").val()
      if ($("input[name='bono']").val() != '') {
        resultado += ' - ' + $("input[name='bono']").val().formatCL() + ' UF'
        //sum -= $("input[name='bono']").val()
      }
      if ($("input[name='promocion']").val() != '') {
        resultado += ' - ' + $("input[name='promocion']").val().formatCL() + ' UF'
        //sum -= $("input[name='promocion']").val()
      }
      if ($("input[name='operador']").val() != '') {
        v = "" + (parseFloat($("input[name='operador']").val()) * parseFloat(valor) / 100)
        resultado += ' - ' + v.formatCL() + ' UF'
      }
      //resultado = resultado.replace(new RegExp('.', 'g'), ',')
      /*if (sum != $("input[name='precio']").val()) {
      resultado += ' = ' + sum + ' UF'
      }*/
      output.append(
        $('<div></div>').attr('class', 'row').append(
          $('<div></div>').attr('class', 'col-md-' + col).html('Valor')
        ).append(
          $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(resultado)
        )
      )
      output.append($('<hr />'))
      output.append(
        $('<div></div>').attr('class', 'row').append(
          $('<div></div>').attr('class', 'col-md-' + col).html('Neto')
        ).append(
          $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(data.oferta.neto)
        )
      ).append(
        $('<div></div>').attr('class', 'row').append(
          $('<div></div>').attr('class', 'col-md-' + col).html('UF/m&#0178;')
        ).append(
          $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(data.oferta.uf_m2)
        )
      ).append(
        $('<div></div>').attr('class', 'row').append(
          $('<div></div>').attr('class', 'col-md-' + col).html('% Pie')
        ).append(
          $('<div></div>').attr('class', 'col-md-' + (12 - col)).html((data.pie / valor * 100).toFixed(2).split('.').join(',') + ' %')
        )
      )
      return $('<div></div>').attr('class', 'panel panel-default').append(
        $('<div></div>').attr('class', 'panel-heading').html('Oferta')
      ).append(output)
    }
    function evaluar() {
      var unidades = [];
      $.each(unis, function(i, k) {
        unidades.push($("select[name='unidad" + k + "']").val())
      })
      $('#results').html('')
      $.post('{!!nUrl('cierres', 'evaluar', ['ajax' => true])!!}', {
          proyecto: $("select[name='proyecto']").val(),
          year: $("select[name='year']").val(),
          month: $("select[name='month']").val(),
          day: $("select[name='day']").val(),
          departamento: $("select[name='departamento']").val(),
          unidades: JSON.stringify(unidades),
          precio: $("input[name='precio']").val(),
          bono: $("input[name='bono']").val(),
          promocion: $("input[name='promocion']").val(),
          relacionado: (($("input[name='relacionado']:checked").val() == 1) ? true : false),
          subrelacionado: (($("input[name='relacionado']:checked").val() == 2) ? true : false),
          operador: $("input[name='operador']").val()
        }, function(data) {
        data.pie = $("input[name='pie']").val()
        var results = $('#results')
        results.html('')
        var descripcion = $('<div></div>').attr('class', 'panel-body').append(
          $('<div></div>').attr('class', 'col-md-offset-2 col-md-4').html(data.unidad.tipo.tipologia)
        ).append(
          $('<div></div>').attr('class', 'col-md-4').html(data.unidad.superficie)
        )
        results.append(
          $('<div></div>').attr('class', 'panel-heading').html('Evaluaci&oacute;n')
        ).append(
          $('<div></div>').attr('class', 'panel-body').append(
            $('<div></div>').attr('class', 'panel panel-default').append(
              $('<div></div>').attr('class', 'panel-heading').html('Tipo - ' + data.unidad.tipo.nombre)
            ).append(descripcion)
          )
        )
        var resultado = oferta(data)
        var col = 3
        var lbody = $('<div></div>')
        for (i = 0; i < desface; i ++) {
          lbody.append(
            $('<div></div>').attr('class', 'row').append(
              $('<div></div>').attr('class', 'col-md-12').html('&nbsp;')
            )
          )
        }
        var lista = $('<div></div>').attr('class', 'panel panel-default').append(
          $('<div></div>').attr('class', 'panel-heading').html('Lista (' + data.oferta.fecha + ')')
        ).append(
          $('<div></div>').attr('class', 'panel-body').append(
            $('<div></div>').attr('class', 'row').append(
              $('<div></div>').attr('class', 'col-md-' + col).html('Precio')
            ).append(
              $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(data.lista.precio)
            )
          ).append(
            $('<div></div>').attr('class', 'row').append(
              $('<div></div>').attr('class', 'col-md-' + col).html('UF/m&#0178;')
            ).append(
              $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(data.lista.uf_m2)
            )
          )
        )
        if (data.relacionado) {
          lista.append(
            $('<div></div>').attr('class', 'panel-heading').html('Relacionado')
          ).append(
            $('<div></div>').attr('class', 'panel-body').append(
              $('<div></div>').attr('class', 'row').append(
                $('<div></div>').attr('class', 'col-md-' + col).html('Precio')
              ).append(
                $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(data.relacionado.precio)
              )
            ).append(
              $('<div></div>').attr('class', 'row').append(
                $('<div></div>').attr('class', 'col-md-' + col).html('UF/m&#0178;')
              ).append(
                $('<div></div>').attr('class', 'col-md-' + (12 - col)).html(data.relacionado.uf_m2)
              )
            )
          )
        }

        results.append(
          $('<div></div>').attr('class', 'panel-body').append(
            $('<div></div>').attr('class', 'col-md-5').append(resultado)
          ).append(
            $('<div></div>').attr('class', 'col-md-offset-2 col-md-5').append(lbody).append(lista)
          )
        )
        var conclusion = $('<div></div>').attr('class', 'panel-body').append(
          $('<div></div>').attr('class', 'alert alert-' + ((data.evaluacion) ? 'success' : 'danger')).html(
            ((data.evaluacion) ? 'Precio del cierre es <strong>aceptable</strong>.' : 'Precio del cierre <strong>no cumple</strong> con los requisitos.')
          )
        )
        results.append(conclusion)

        if (data.estado.descripcion != 'aprobado' && data.estado.descripcion != 'rechazado') {
          var opciones = $('<div></div>').attr('class', 'panel-body').attr('id', 'message').append(
            $('<div></div>').attr('class', 'col-md-6 text-center').append(
              $('<button></button>').attr('class', 'btn btn-success').html('Aprobar').click(aprobar)
            )
          ).append(
            $('<div></div>').attr('class', 'col-md-6 text-center').append(
              $('<button></button>').attr('class', 'btn btn-danger').html('Rechazar').click(rechazar)
            )
          )
          results.append(opciones)
        } else {
          results.append($('<div></div>').attr('class', 'panel-body').attr('id', 'message').append(
            $('<div></div>').attr('class', 'alert alert-' + ((data.estado.descripcion == 'aprobado') ? 'success' : 'danger')).append(
              $('<a></a>').attr('href', '{!!nUrl('cierres', 'show', ['cierre' => ''])!!}' + data.estado.cierre).html(
                ((data.estado.descripcion == 'aprobado') ? 'Aprobado.' : 'Rechazado.') + ' (' + data.estado.fecha + ')'
              )
            )
          ))
        }
      }, 'json')
    }
    function aprobar() {
      var unidades = [];
      $.each(unis, function(i, k) {
        unidades.push($("select[name='unidad" + k + "']").val())
      })
      $.post('{!!nUrl('cierres', 'guardar', ['ajax' => true])!!}', {
          proyecto: $("select[name='proyecto']").val(),
          year: $("select[name='year']").val(),
          month: $("select[name='month']").val(),
          day: $("select[name='day']").val(),
          departamento: $("select[name='departamento']").val(),
          unidades: JSON.stringify(unidades),
          precio: $("input[name='precio']").val(),
          pie: $("input[name='pie']").val(),
          bono: $("input[name='bono']").val(),
          promocion: $("input[name='promocion']").val(),
          operador: $("input[name='operador']").val(),
          relacionado: (($("input[name='relacionado']:checked").val() == 1) ? true : false),
          subrelacionado: (($("input[name='relacionado']:checked").val() == 2) ? true : false)
        }, function(data) {
        if (data.status == 'ok') {
          $.post('{!!nUrl('cierres', 'aprobar', ['ajax' => true])!!}', {'cierre': data.cierre.id}, function(data2) {
            if (data2.estado == 'aprobado') {
              $('#message').html('')
              $('#message').append(
                $('<div></div>').attr('class', 'alert alert-success').html('Aprobado.')
              )
            }
          }, 'json')
        }
      }, 'json')
    }
    function rechazar() {
      var unidades = [];
      $.each(unis, function(i, k) {
        unidades.push($("select[name='unidad" + k + "']").val())
      })

      $.post('{!!nUrl('cierres', 'guardar', ['ajax' => true])!!}', {
          proyecto: $("select[name='proyecto']").val(),
          year: $("select[name='year']").val(),
          month: $("select[name='month']").val(),
          day: $("select[name='day']").val(),
          departamento: $("select[name='departamento']").val(),
          unidades: JSON.stringify(unidades),
          precio: $("input[name='precio']").val(),
          pie: $("input[name='pie']").val(),
          bono: $("input[name='bono']").val(),
          promocion: $("input[name='promocion']").val(),
          operador: $("input[name='operador']").val(),
          relacionado: (($("input[name='relacionado']").is(':checked')) ? true : false)
        }, function(data) {
        if (data.status == 'ok') {
          $.post('{!!nUrl('cierres', 'rechazar', ['ajax' => true])!!}', {'cierre': data.cierre.id}, function(data2) {
            if (data2.estado == 'rechazado') {
              $('#message').html('')
              $('#message').append(
                $('<div></div>').attr('class', 'alert alert-danger').html('Rechazado.')
              )
            }
          }, 'json')
        }
      }, 'json')
    }
    $(document).ready(function() {
      findUnidades($('#proyecto').val())
      $('#proyecto').change(function(e) {
        var self = $(this)
        $.each(unis, function(i, el) {
          removeUnidad(el)
        })
        findUnidades(self.val())
      })
      $('#evaluar').click(function() {
        evaluar()
      })
    })
  </script>
@endpush