@extends('admin.layout.base')

@section('page_content')
  <div class="ui grid">
    <div class="row">
      <div class="nine wide column">
        <div class="ui header">
          AVISOS
        </div>
        <table class="ui table">
          <thead>
            <tr>
              <th colspan="2">Pregunta</th>
              <th class="center aligned">Borrar</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($avisos->avisos as $i => $aviso)
              <tr>
                <td class="link titulo" data-id="{{$i}}">{{$aviso->titulo}}</td>
                <td class="link contenido" data-id="{{$i}}">{{$aviso->contenido}}</td>
                <td class="center aligned"><i class="trash alternate outline icon" data-id="{{$i}}"></i></td>
              </tr>
            @endforeach
          </tbody>
          <tfooter>
            <tr>
              <td colspan="3">
                <form class="ui form" id="avisos">
                  <input type="hidden" name="id" />
                  <div class="inline fields">
                    <div class="field">
                      <input type="text" name="titulo" placeholder="Título" />
                    </div>
                    <div class="field">
                      <input type="text" name="contenido" placeholder="Bajada" />
                    </div>
                    <button class="ui button accion">CREAR</button>
                    <button class="ui button" type="reset">BORRAR</button>
                  </div>
                </form>
              </td>
            </tr>
          </tfooter>
        </table>
        <div class="ui slider checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="{{$avisos->activo}}">
          <label>Activo</label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="nine wide column">
        <div class="ui header">
          INDICADORES
        </div>
        <form class="ui form" id="resumen">
          <table class="ui table">
            <thead>
              <tr>
                <th>Enunciado</th>
                <th>Cantidad</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              @foreach ($resumen as $i => $indicador)
                <tr>
                  <td><input type="text" name="titulo{{$i}}" value="{{$indicador->titulo}}" /></td>
                  <td><input type="text" name="cantidad{{$i}}" value="{{$indicador->cantidad}}" /></td>
                  <td><button class="ui button guardar" data-id="{{$i}}">GUARDAR</button></td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    var home = {
      edit: false,
      editAviso: (id) => {
        var titulo = $(".link.titulo[data-id='" + id + "']").html()
        var contenido = $(".link.contenido[data-id='" + id + "']").html()

        $("input[name='id']").val(id)
        $("input[name='titulo']").val(titulo)
        $("input[name='contenido']").val(contenido)
        home.edit = true
        $('.accion').html('EDITAR')
      },
      submitAviso: (e) => {
        e.preventDefault()
        input = {
          titulo: $("input[name='titulo']").val(),
          contenido: $("input[name='contenido']").val()
        }
        if (home.edit) {
          input['id'] = $("input[name='id']").val()
        }
        if (input['titulo'] == '') {
          return false
        }
        var url = '{{$urls->admin}}/home/avisos/add'
        $.post(url, input, (data) => {
          if (data.estado) {
            window.location.reload()
          }
        }, 'json')
        return false
      },
      deleteAviso: (id) => {
        var url = '{{$urls->admin}}/home/avisos/delete'
        $.post(url, {id: id}, (data) => {
          if (data.estado) {
            window.location.reload()
          }
        }, 'json')
      },
      setup: () => {
        $('.link').css('cursor', 'pointer').click(function() {
          var id = $(this).attr('data-id')
          home.editAviso(id)
        })
        $('#avisos').trigger('reset')
        $('#avisos').submit((e) => {
          home.submitAviso(e)
        })
        $(".button[type='reset']").click((e) => {
          $("input[name='id']").val('')
          $('.accion').html('CREAR')
          home.edit = false
        })
        $('.trash.icon').css('cursor', 'pointer').click(function() {
          var id = $(this).attr('data-id')
          home.deleteAviso(id)
        })
        $('.checkbox').checkbox({
          onChange: function() {
            var state = $(this).is(':checked')
            var url = '{{$urls->admin}}/home/avisos/add'
            $.post(url, {estado: state}, (data) => {
              console.debug(data)
            })
          }
        })
        @if ($avisos->activo)
          $('.checkbox').checkbox('set checked')
        @endif
        $('#resumen').submit((e) => {
          e.preventDefault()
          return false
        })
        $('.guardar').click(function() {
          var id = $(this).attr('data-id')
          var url = '{{$urls->admin}}/home/resumen/edit'
          input = {
            id: id,
            titulo: $("input[name='titulo" + id + "']").val(),
            cantidad: $("input[name='cantidad" + id + "']").val()
          }
          $.post(url, input, (data) => {
            if (data.estado) {
              window.location.reload()
            }
          })
        })
      }
    }
    $(document).ready(() => {
      home.setup()
    })
  </script>
@endpush
