@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 edit = false
    function 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)
      edit = true
      $('.accion').html('EDITAR')
    }
    function submitAviso(e) {
      e.preventDefault()
      input = {
        titulo: $("input[name='titulo']").val(),
        contenido: $("input[name='contenido']").val()
      }
      if (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
    }
    function deleteAviso(id) {
      var url = '{{$urls->admin}}/home/avisos/delete'
      $.post(url, {id: id}, (data) => {
        if (data.estado) {
          window.location.reload()
        }
      }, 'json')
    }
    $(document).ready(() => {
      $('.link').css('cursor', 'pointer').click(function() {
        var id = $(this).attr('data-id')
        editAviso(id)
      })
      $('#avisos').trigger('reset')
      $('#avisos').submit((e) => {
        submitAviso(e)
      })
      $(".button[type='reset']").click((e) => {
        $("input[name='id']").val('')
        $('.accion').html('CREAR')
        edit = false
      })
      $('.trash.icon').css('cursor', 'pointer').click(function() {
        var id = $(this).attr('data-id')
        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()
          }
        })
      })
    })
  </script>
@endpush