@extends('layout.base')

@section('content')
  <h1 class="header">
    Operadores
  </h1>
  <table class="table">
    <thead>
      <tr>
        <th>
          Operador
        </th>
        <th>
          Proyectos
        </th>
        <th class="text-right">
          <button class="btn btn-success" data-toggle="modal" data-target="#modal_general">
            <span class="glyphicon glyphicon-plus"></span>
          </button>
        </th>
      </tr>
    </thead>
    <tbody id="operadores">
    </tbody>
  </table>

  <div class="modal fade" id="modal_general" tabindex="-1" role="dialog" aria-labelledby="Agregar Operador">
    <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 Operador</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="rut" class="control-label">Rut</label>
              <div class="input-group">
                <input type="text" name="rut" class="form-control" maxlength="8" />
                <div class="input-group-addon">
                  -
                </div>
                <input type="text" name="dv" class="form-control" maxlength="1" size="1" />
              </div>
            </div>
            <div class="form-group">
              <label for="descripcion" class="control-label">Descripci&oacute;n</label>
              <input type="text" name="descripcion" class="form-control" />
            </div>
            <div class="form-group">
              <label for="abreviacion" class="control-label">Abreviaci&oacute;n</label>
              <input type="text" name="abreviacion" class="form-control" />
            </div>
            <div class="form-group">
              <label for="representante" class="control-label">Representante</label>
              <input type="text" name="representante" class="form-control" />
            </div>
            <div class="form-group">
                <label for="telefono" class="control-label">Telefono</label>
                <input type="text" name="telefono" class="form-control" />
            </div>
            <div class="form-group">
              <label for="correo" class="control-label">Correo</label>
              <input type="text" name="correo" class="form-control" />
            </div>
            <button class="btn btn-default" data-dismiss="modal" id="cerrar_general">Agregar</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="modal_proyecto" tabindex="-1" role="dialog" aria-labelledby="Asignar Proyecto">
    <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">Asignar Proyecto</h4>
        </div>
        <div class="modal-body">
          <form>
            <input type="hidden" name="operador" />
            <div class="form-group">
              <label for="proyecto" class="control-label">Proyecto</label>
              <select class="form-control" name="proyecto"></select>
            </div>
            <div class="form-group">
              <label for="fecha" class="control-label">Desde</label>
              <div class="ui calendar" id="proyecto_fecha">
                <div class="ui input left icon">
                  <i class="calendar icon"></i>
                  <input type="text" name="fecha" />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="comision" class="control-label">Comisi&oacute;n</label>
              <div class="input-group">
                <input type="text" name="comision" class="form-control" />
                <div class="input-group-addon">
                  %
                </div>
              </div>
            </div>
            <button class="btn btn-default" data-dismiss="modal" id="cerrar_proyecto">Asignar</button>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    const modal = {
      general: {
        id: '#modal_general',
        button: '#cerrar_general',
        setup: function() {
          $(this.id).find(this.button).click((e) => {
            $(this.id).find('form').trigger('submit')
          })
          $(this.id).find('form').submit((e) => {
            e.preventDefault()
            operadores.add().operador().then(() => {
              $(e.target).trigger('reset')
              $(this.id).modal('toggle')
              $(this.id).modal('hide')
            })
            return false
          })
        }
      },
      proyecto: {
        id: '#modal_proyecto',
        button: '#cerrar_proyecto',
        setup: function() {
          $(this.id).on('show.bs.modal', function(e) {
            const btn = $(e.relatedTarget)
            const operador = btn.data('operador')
            const modal = $(this)
            modal.find("[name='operador']").val(operador)
          })
          $(this.id).find(this.button).click((e) => {
            $(this.id).find('form').trigger('submit')
          })
          $(this.id).find('form').submit((e) => {
            e.preventDefault()
            operadores.add().proyecto().then(() => {
              $(e.target).trigger('reset')
              $(this.id).modal('toggle')
              $(this.id).modal('toggle')
            })
            return false
          })

          const today = new Date()
          $('#proyecto_fecha').calendar({
            type: 'date',
            minDate: new Date(today.getFullYear()-5, today.getMonth(), today.getDate()),
            maxDate: new Date(today.getFullYear()+1, today.getMonth(), today.getDate())
          })
        }
      }
    }
    const operadores = {
      id: '#operadores',
      data: [],
      get: function() {
        return {
          operadores: () => {
            return $.ajax({
              url: '{{$urls->api}}/operadores',
              method: 'get',
              dataType: 'json'
            }).then((data) => {
              if (data.operadores === null || data.operadores.length == 0) {
                return
              }
              this.data = data.operadores
            }).then(() => {
              this.draw()
            })
          },
          proyectos: () => {
            return $.ajax({
              url: '{{$urls->api}}/proyectos',
              method: 'get',
              dataType: 'json'
            }).then((data) => {
              if (data.proyectos === null || data.proyectos.length == 0) {
                return
              }
              const select = $("select[name='proyecto']")
              $.each(data.proyectos, (i, el) => {
                select.append(
                  $('<option></option>').attr('value', el.id).html(el.descripcion + ' - ' + el.inmobiliaria.abreviacion)
                )
              })
            })
          }
        }
      },
      draw: function() {
        const parent = $(this.id)
        parent.html('')
        $.each(this.data, (i, el) => {
          const row = $('<tr></tr>').append(
            $('<td></td>').html(el.descripcion)
          )
          const proyectos = $('<tbody></tbody>')
          row.append(
            $('<td></td>').append(
              $('<table></table>').attr('class', 'table').append(
                $('<thead></thead>').append(
                  $('<tr></tr>').append(
                    $('<th></th>').html('Proyecto')
                  ).append(
                    $('<th></th>').html('Comisión')
                  ).append(
                    $('<th></th>').attr('class', 'text-right').append(
                      $('<button></button>').attr('class', 'btn btn-success').attr('data-toggle', 'modal').attr('data-target', '#modal_proyecto').attr('data-operador', el.id).append(
                        $('<span></span>').attr('class', 'glyphicon glyphicon-plus')
                      )
                    )
                  )
                )
              ).append(proyectos)
            )
          ).append(
            $('<td></td>').attr('class', 'text-right').append(
              $('<button></button>').attr('class', 'btn btn-info').attr('data-toggle', 'modal').attr('data-target', '#modal_edit').attr('data-operador', el.id).append(
                $('<span></span>').attr('class', 'glyphicon glyphicon-pencil')
              )
            ).append(
              $('<button></button>').attr('class', 'btn btn-info').attr('data-toggle', 'modal').attr('data-target', '#modal_remove').attr('data-operador', el.id).append(
                $('<span></span>').attr('class', 'glyphicon glyphicon-remove')
              )
            )
          )
          if (el.comisiones.length > 0) {
            $.each(el.comisiones, (k, pe) => {
              proyectos.append(
                $('<tr></tr>').append(
                  $('<td></td>').html(pe.proyecto.descripcion)
                ).append(
                  $('<td></td>').html(pe.comision + '%')
                )
              )
            })
          }
          parent.append(row)
        })
      },
      add: function() {
        return {
          operador: () => {
            const parent = $('#modal_general').find('form')
            const data = {
              rut: parent.find("[name='rut']").val(),
              descripcion: parent.find("[name='descripcion']").val(),
              abreviacion: parent.find("[name='abreviacion']").val(),
              representante: parent.find("[name='representante']").val(),
              telefono: parent.find("[name='telefono']").val(),
              correo: parent.find("[name='correo']").val()
            }
            return $.ajax({
              url: '{{$urls->api}}/operadores/add',
              method: 'post',
              data: data,
              dataType: 'json'
            }).then(() => {
              this.get().operadores()
            })
          },
          proyecto: () => {
            const parent = $('#modal_proyecto').find('form')
            const operador = parent.find("[name='operador']").val()
            const fecha = parent.find("#proyecto_fecha").calendar('get date')
            const data = {
              comision: parent.find("[name='comision']").val(),
              fecha: fecha.getFullYear() + '-' + ('00' +(fecha.getMonth() + 1)).slice(-2) + '-' + ('00' + fecha.getDate()).slice(-2),
              proyecto: parent.find("[name='proyecto']").val()
            }
            return $.ajax({
              url: '{{$urls->api}}/operador/' + operador + '/proyectos/add',
              method: 'post',
              data: data,
              dataType: 'json'
            }).then(() => {
              this.get().operadores()
            })
          }
        }
      },
      edit: function() {

      },
      remove: function() {

      },
      setup: function() {
        this.get().operadores()
        this.get().proyectos()

        modal.general.setup()
        modal.proyecto.setup()
      }
    }
    $(document).ready(() => {
      operadores.setup()
    })
  </script>
@endpush
