@extends('masterpage.masterpage')

@section('content')
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Comunicação</h1>
          </div>
        </div>
      </div>
    </section>

    <section class="content">
      <div class="container-fluid">
        @if(Session::has('flash_message'))
          <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            {{ Session::get('flash_message')}}
          </div>
        @endif
        @if(Session::has('error'))
          <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            {{ Session::get('error')}}
          </div>
        @endif
        <div class="row">
          <div class="col-md-12" style="float:none;margin:auto;">
            <div class="card card-default">
              <div class="card-header">
                <h3 class="card-title"><b><i>Cadastro</b></i></h3>
              </div>
              <form id="comunicacaoForm" action="{{ URL('comunicacoes/store') }}" method="post" role="form" enctype="multipart/form-data">
                <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
                <div class="card-body">
                  <div class="row">
                    <div class="col-12">
                      <div class="form-group">
                        <label>Para quem enviar</label>
                        <select id="pessoa_enviar" name="pessoa_enviar" class="form-control">
                          <option value="Liderancas">Lideranças</option>
                          <option value="Eleitores">Eleitores</option>
                          <option value="Todos">Todos</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label>Tipo</label>
                        <select id="tipo_mensagem" name="tipo_mensagem" class="form-control" onchange="setTipo(this)">
                          <option value="Mensagem">Mensagem</option>
                          <option value="Enquete">Enquete</option>
                        </select>
                      </div>
                      <div id="divMensagem">
                        <div class="form-group">
                          <label for="comunicacaoInputFile">Imagem</label>
                          <div class="input-group">
                            <div class="custom-file">
                              <input type="file" class="custom-file-input" id="comunicacaoInputFile" name="comunicacaoInputFile" onchange="loadFile(event)"
                                accept="image/png, image/jpg, image/jpeg, image/webp">
                              <label class="custom-file-label" for="comunicacaoInputFile">Selecionar arquivo</label>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <label>Preview</label>
                          <div class="input-group">
                            <img id="comunicacaoImagem" name="comunicacaoImagem" src="../bower_components/admin-lte/dist/img/lider-sem-foto.jpg" width="150" height="150" />
                          </div>
                        </div>
                        <div class="form-group">
                          <label>Mensagem</label>
                          <textarea rows="5" class="form-control" name="mensagem" id="mensagem" maxlength="200"></textarea>
                        </div>
                      </div>
                      <div id="divEnquete" style="display: none">
                        <div class="form-group">
                          <label>Enquete</label>
                          <input type="text" class="form-control" name="enquete" id="enquete" maxlength="200">
                        </div>
                        <div class="form-group">
                          <label>Respostas</label>
                          <div class="input-group-prepend">
                            <input type="text" class="form-control" name="pergunta" id="pergunta">
                            <button type="button" class="btn btn-success" id="addResposta" onclick="setResposta(this)">Adicionar</button>
                          </div>
                        </div>
                        <div class="form-group">
                          <table id="tblEnquete" class="table table-striped">
                            <thead>
                              <tr>
                                <th>Resposta</th>
                                <th style="text-align: right">Ações</th>
                              </tr>
                            </thead>
                            <tbody>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-footer">
                  <button type="button" onclick="comunicacaoSubmit()" class="btn btn-primary">Salvar</button>
                  <a href="{{ url('comunicacoes') }}" class="btn btn-default">Voltar</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
@stop

@section('scripts')

  <script>

    var loadFile = function(event) {
      var output = document.getElementById('comunicacaoImagem');
      output.src = URL.createObjectURL(event.target.files[0]);
      output.onload = function() {
        URL.revokeObjectURL(output.src) // free memory
      }
    };

    function setTipo(params) {
      if (params.value == 'Enquete') {
        document.getElementById("divEnquete").style.display = "block";
        document.getElementById("divMensagem").style.display = "none";
      } else {
        document.getElementById("divEnquete").style.display = "none";
        document.getElementById("divMensagem").style.display = "block";
      }
    }

    var arrayEnquete = []
    var objEnquete = {}

    function comunicacaoSubmit() {
      if (document.getElementById('tipo_mensagem').value == 'Mensagem' && document.getElementById('mensagem').value == '') {
        Swal.fire(
          'Atenção!',
          'O campo mensagem não pode ser vazio.',
          'info'
        )
      } else if (document.getElementById('tipo_mensagem').value == 'Enquete' && arrayEnquete.length == 0 ||
        document.getElementById('tipo_mensagem').value == 'Enquete' && document.getElementById('enquete').value == '') {
        Swal.fire(
          'Atenção!',
          'O campo enquete não pode ser vazio e devem ser cadastradas respostas.',
          'info'
        )
      }
      else {
        Swal.fire({
          title: "",
          text: "Carregando mensagens...",
          imageUrl: "../bower_components/admin-lte/dist/img/spinner-200px.gif",
          showConfirmButton: false
        });
        var csrfToken = $('#csrf-token').val()
        var data = new FormData()
        data.append('pessoa_enviar', document.getElementById("pessoa_enviar").value)
        data.append('tipo_mensagem', document.getElementById("tipo_mensagem").value)
        data.append('comunicacaoInputFile', document.getElementById("comunicacaoInputFile").files[0])
        data.append('mensagem', document.getElementById("mensagem").value)
        data.append('enquete', document.getElementById("enquete").value)
        data.append("perguntas", JSON.stringify(arrayEnquete))
        fetch('{{URL('comunicacoes/store')}}', {
          method: 'post',
          body: data,
          headers: {
            "X-CSRF-Token": csrfToken
          },
        }).then(function(response) {
          if(response.status == 200) {
            return response.json()
          }
        }).then(function(response) {
            if (response.status == 200) {
              Swal.fire({
                icon: 'success',
                title: 'Sucesso!',
                text: 'Mensagem salva com Sucesso.',
                showConfirmButton: false,
                timer: 1500
              })
              window.location.reload();
            } else {
              Swal.fire({
                title: 'Atenção!',
                text: 'Falha ao enviar mensagens.',
                icon: 'error',
                confirmButtonText: 'Sair'
              })
            }
          })

      }
    }

    function setResposta(params) {
      if (document.getElementById("pergunta").value == '') {
        Swal.fire(
          'Atenção!',
          'Os campo resposta não pode ser vazio.',
          'info'
        )
      } else {
        objEnquete = {}
        objEnquete.pergunta = document.getElementById("pergunta").value
        arrayEnquete.push(objEnquete)

        var table = $('#tblEnquete').DataTable();
        var arrayControle = []
        arrayControle = [
          document.getElementById("pergunta").value,
          `<button type="button" class="btn btn-danger rounded-circle remove"
            title="Excluir" style="float: right"><i class="fa fa-trash"></i>
          </button>`]
        table.row.add( arrayControle ).draw();

        document.getElementById('pergunta').value = ''
        document.getElementById('pergunta').focus()
      }
    }

    $(function () {
      $("#tblEnquete").DataTable({
        "responsive": true,
        "autoWidth": false,
        "oLanguage":{
          "sEmptyTable": "Nenhum registro encontrado",
          "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
          "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
          "sInfoFiltered": "(Filtrados de _MAX_ registros)",
          "sInfoPostFix": "",
          "sInfoThousands": ".",
          "sLengthMenu": "_MENU_ Resultados por página",
          "sLoadingRecords": "Carregando...",
          "sProcessing": "Processando...",
          "sZeroRecords": "Nenhum registro encontrado",
          "sSearch": "Pesquisar ",
          "oPaginate": {
            "sNext": "Próximo",
            "sPrevious": "Anterior",
            "sFirst": "Primeiro",
            "sLast": "Último"
          }
        }
      }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

      var input = document.getElementById("pergunta")
      input.addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
          event.preventDefault()
          document.getElementById("addResposta").click()
        }
      })

      $('#tblEnquete').on('click', '.remove', function () {
        Swal.fire({
          title: 'Atenção',
          text: "Tem certeza que deseja excluir?",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Confirmar',
          cancelButtonText: 'Cancelar',
        }).then((result) => {
          if (result.isConfirmed) {
            let table = $('#tblEnquete').DataTable();
            let row = $(this).parents('tr');
            let delPhone = table.row($(row)).data()[2]
            if ($(row).hasClass('child')) {
              table.row($(row).prev('tr')).remove().draw();
            } else {
              table
                .row($(this).parents('tr'))
                .remove()
                .draw();
            }
            arrayEnquete = arrayEnquete.filter(function(value, index, arr){
              return value.whatsapp != delPhone;
            });
          }
        })
      });

    })

  </script>

@stop