@extends('admin.layout.base')

@section('page_content')
  <div class="ui grid">
    <div class="nine wide column">
      <div class="ui header">
        FAQ's
      </div>
      <table class="ui table">
        <thead>
          <tr>
            <th>Pregunta</th>
            <th class="center aligned">Borrar</th>
          </tr>
        </thead>
        <tbody>
          @foreach($faqs as $i => $faq)
            <tr>
              <td class="titulo" data-id="{{$i}}">{{$faq->titulo}}</td>
              <td class="center aligned"><i class="trash alternate outline icon" data-id="{{$i}}"></i>
            </tr>
          @endforeach
        </tbody>
      </table>
      <form class="ui form">
        <input type="hidden" name="id" />
        <div class="field">
          <label>Pregunta</label>
          <input type="text" name="titulo" />
        </div>
        <div class="field">
          <label>Respuesta</label>
          <textarea rows="1" name="contenido"></textarea>
        </div>
        <button class="ui button enviar">AGREGAR</button>
        <button class="ui button resetear" type="reset">BORRAR</button>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    var faq = {
      edit: false,
      faqs: [
        @foreach ($faqs as $faq)
          {
            titulo: '{{$faq->titulo}}',
            contenido: "{{implode("\\n", explode(PHP_EOL, $faq->contenido))}}"
          },
        @endforeach
      ],
      setup: () => {
        $('.titulo').css('cursor', 'pointer').click(function() {
          var id = $(this).attr('data-id')

          $("input[name='id']").val(id)
          $("input[name='titulo']").val(faq.faqs[id].titulo)
          $("textarea[name='contenido']").val(faq.faqs[id].contenido)
          $('.button.enviar').html('EDITAR')
          faq.edit = true
        })
        $('.trash.icon').css('cursor', 'pointer').click(function() {
          var id = $(this).attr('data-id')
          var url = '{{$urls->admin}}/faqs/delete'
          $.post(url, {id: id}, (data) => {
            if (data.estado) {
              window.location.reload()
            }
          })
        })
        $('.button.resetear').click(() => {
          $("input[name='id']").val('')
          $('.button.enviar').html('AGREGAR')
          faq.edit = false
        })
        $('.form').trigger('reset')
        $('.form').submit((e) => {
          e.preventDefault()
          var input = {
            titulo: $("input[name='titulo']").val(),
            contenido: $("textarea[name='contenido']").val()
          }
          if (faq.edit) {
            input['id'] = $("input[name='id']").val()
          }
          var url = '{{$urls->admin}}/faqs/add'
          $.post(url, input, (data) => {
            if (data.estado) {
              window.location.reload()
            }
          })
          return false
        })
      }
    }
    $(document).ready(() => {
      faq.setup()
    })
  </script>
@endpush