@extends('masterpage.masterpage')

@section('content')

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Ocorrências</h1>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <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">Nova ocorrência</h3>
          </div>
          <form method="post" action="{{ url('occurrences/store') }}" id="saveForm" data-parsley-validate
            class="form-horizontal form-label-left" enctype="multipart/form-data">
            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
            <div class="card-body">
              @if(Session::has('flash_message'))
              <div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h5><i class="icon fas fa-check"></i>{{ Session::get('flash_message') }}</h5>
              </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>
                <h5><i class="icon fas fa-ban"></i>{{ Session::get('error') }}</h5>
              </div>
              @endif
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="name">Ocorrência <span class="required">*</span></label>
                    <div class="input-group-prepend">
                      <select class="form-control" name="occurrence" id="occurrence" required>
                          @if ($occurrencesType)
                          @foreach ($occurrencesType as $item)
                          <option value="{{ $item->occurrence_type }}">
                              {{ strtoupper($item->occurrence_type) }}</option>
                          @endforeach
                          @endif
                      </select>
                      @if(Auth::user()->perfil == 1)
                        <button type="button" data-toggle="modal" data-target="#occurrenceModal" class="btn btn-success" title="Novo"><i class="fas fa-plus"></i></button>
                        <button type="button" data-toggle="modal" data-target="#editOccurrenceModal" class="btn btn-default" title="Editar" onclick="populateModal()"><i class="fas fa-edit"></i></button>
                      @endif
                    </div>
                  </div>
                </div>
                <div class="col-sm-12" style="display: none">
                  <div class="form-group">
                    <label for="name">Autuação <span class="required">*</span></label>
                    <div class="input-group-prepend">
                      <input type="text" class="form-control" id="assessment" name="assessment">
                    </div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label>CEP</label>
                    <div class="input-group-prepend">
                      <input type="text" class="form-control" id="cep" name="cep" data-mask="00000-000">
                      <button type="button" class="btn btn-primary" onclick="getCep()">Buscar</button>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label>Endereço</label>
                    <input type="text" class="form-control" id="endereco" name="endereco">
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label>Número</label>
                    <input type="text" class="form-control" id="numero" name="numero">
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label>Referência</label>
                    <input type="text" class="form-control" id="complemento" name="complemento">
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label>Bairro/Local</label>
                    <input type="text" class="form-control" id="bairro" name="bairro">
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label>Cidade</label>
                    <input type="text" class="form-control" id="cidade" name="cidade">
                  </div>
                </div>
                <div class="col-sm-12" style="display: none">
                  <div class="form-group">
                    <label for="name">Envolvidos <span class="required">*</span></label>
                    <textarea class="form-control" name="involveds" id="involveds"
                        rows="5"></textarea>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="name">Relato <span class="required">*</span></label>
                    <textarea class="form-control" name="report" id="report"
                        rows="5"></textarea>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="name">Anexar fotos</label>
                    <input type="file" id="file-input" name="imagem[]" multiple
                        class="form-control">
                    <div id="preview">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <button type="submit" class="btn btn-primary">Salvar</button>
              <a href="{{ route('ocorrencias') }}" class="btn btn-default">Voltar</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<div id="localOccurrenceModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Cadastro de bairro</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div id="divOccurrenceLocal" style="display: none" class="alert alert-success">
            <label>Cadastro realizado com sucesso.</label>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>Bairro</label>
              <input type="text" class="form-control col-md-7 col-xs-12 active" name="localModal"
                id="localModal">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" onclick="storeOccurrenceLocal()" class="btn btn-success">Salvar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Sair</button>
      </div>
    </div>
  </div>
</div>

<div id="occurrenceModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Cadastro de tipo de ocorrência</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <div id="divOccurrenceType" style="display: none" class="alert alert-success">
              <label>Cadastro realizado com sucesso.</label>
            </div>
            <div class="form-group">
              <label>Descrição</label>
              <input type="text" class="form-control" name="occurrence_type"
                  id="occurrence_type">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" onclick="storeOccurrenceType()" class="btn btn-success">Salvar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Sair</button>
      </div>
    </div>
  </div>
</div>

<div id="editOccurrenceModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Editar tipo de ocorrência</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <div id="divUpdateOccurrenceType" style="display: none" class="alert alert-success">
              <label>Tipo de ocorrência atualizada com sucesso.</label>
            </div>
            <div class="form-group">
              <label>Descrição</label>
              <input type="text" class="form-control" name="occurrence_type_edit"
                  id="occurrence_type_edit">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" onclick="updateOccurrenceType()" class="btn btn-success">Salvar</button>
        <button id="btEditOccurrenceModal" type="button" class="btn btn-default" data-dismiss="modal">Sair</button>
      </div>
    </div>
  </div>
</div>

@stop

  @section('scripts')

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/cep-promise/dist/cep-promise.min.js"></script>

    <script type="text/javascript">
      var occurrencePhotos = []
      var index = 0

      function previewImages() {
        var preview = document.querySelector('#preview');
        if (this.files) {
          [].forEach.call(this.files, readAndPreview);
        }

        function readAndPreview(file) {
          if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
            return alert(file.name + " não é um arquivo de imagem.");
          }

          var reader = new FileReader();
          reader.addEventListener("load", function () {
            var image = new Image();
            image.id = 'img' + index
            image.name = 'img' + index
            image.height = 100;
            image.title = file.name;
            image.src = this.result;
            image.style.padding = "10px 10px 10px 10px";
            preview.appendChild(image);
            index++;
          });

          reader.readAsDataURL(file);
        }
      }

      document.querySelector('#file-input').addEventListener("change", previewImages);

      function storeOccurrenceType() {
        if (document.getElementById("occurrence_type").value != '') {
          const URL_TO_POST = "{{ url('occurrences/storeOccurrenceType') }}";
          var Token = document.getElementById("_token").value;
          var data = new FormData();
          data.append('occurrence_type', document.getElementById("occurrence_type").value);
          fetch(URL_TO_POST, {
            method: 'post',
            body: data,
            credentials: "same-origin",
            headers: {
              "X-CSRF-Token": Token
            },
          }).then(function (response) {
            if (response.status == 200) {
              return response.json();
            } else {
              alert("Atenção! Falha na solicitaçao. Tente novamente. Caso o erro continue, entre em contato com o suporte.")
            }
          }).then(async function () {
            $('#occurrence').append($('<option>', {
              value: document.getElementById("occurrence_type").value,
              text: document.getElementById("occurrence_type").value.toUpperCase()
            }));
            $("#occurrence").val(document.getElementById("occurrence_type").value).change();
            document.getElementById("occurrence_type").value = '';
            document.getElementById("divOccurrenceType").style.display = "block";
            await new Promise(r => setTimeout(r, 2000));
            document.getElementById("divOccurrenceType").style.display = "none";
            document.getElementById("occurrence_type").focus();
          });
        } else {
          alert('O campo descrição é obrigatório.')
        }
      }

    function storeOccurrenceLocal() {
    if (document.getElementById("localModal").value != '') {
      const URL_TO_POST = "{{ url('occurrences/storeOccurrenceLocal') }}";
      var Token = document.getElementById("_token").value;
      var data = new FormData();
      data.append('local', document.getElementById("localModal").value);
      fetch(URL_TO_POST, {
        method: 'post',
        body: data,
        credentials: "same-origin",
        headers: {
          "X-CSRF-Token": Token
        },
      }).then(function (response) {
        if (response.status == 200) {
          return response.json();
        } else {
          alert("Atenção! Falha na solicitaçao. Tente novamente. Caso o erro continue, entre em contato com o suporte.")
        }
      }).then(async function () {
        $('#local').append($('<option>', {
          value: document.getElementById("localModal").value,
          text: document.getElementById("localModal").value.toUpperCase()
        }));
        $("#local").val(document.getElementById("localModal").value).change();
        document.getElementById("localModal").value = '';
        document.getElementById("divOccurrenceLocal").style.display = "block";
        await new Promise(r => setTimeout(r, 1000));
        document.getElementById("divOccurrenceLocal").style.display = "none";
        document.getElementById("localModal").focus();
      });
      } else {
        alert('O campo descrição é obrigatório.')
      }
    }

    async function getCep() {
      let cep = document.getElementById('cep').value.replace('-', '')
      this.cep(cep)
        .then(function (result) {
          document.getElementById('endereco').value = result.street
          document.getElementById('cidade').value = result.city
          document.getElementById('bairro').value = result.neighborhood
          document.getElementById('numero').focus()
        })
    }

    function populateModal() {
      document.getElementById("occurrence_type_edit").value = document.getElementById("occurrence").value.toUpperCase()
    }

    function updateOccurrenceType() {
      if (document.getElementById("occurrence_type_edit").value != '') {
        const URL_TO_POST = "{{ url('occurrences/updateOccurrenceType') }}";
        var Token = document.getElementById("_token").value;
        var data = new FormData();
        data.append('occurrence_type', document.getElementById("occurrence").value);
        data.append('occurrence_type_new', document.getElementById("occurrence_type_edit").value);
        fetch(URL_TO_POST, {
          method: 'post',
          body: data,
          credentials: "same-origin",
          headers: {
            "X-CSRF-Token": Token
          },
        }).then(function (response) {
          if (response.status == 200) {
            return response.json();
          } else {
            Swal.fire(
              'Atenção!',
              'Falha na solicitaçao. Tente novamente. Caso o erro continue, entre em contato com o suporte',
              'error'
            )
          }
        }).then(async function () {
          var optionOccurrenceType = document.getElementById("occurrence");  
          optionOccurrenceType.remove(optionOccurrenceType.selectedIndex); 
          $('#occurrence').append($('<option>', {
            value: document.getElementById("occurrence_type_edit").value,
            text: document.getElementById("occurrence_type_edit").value.toUpperCase()
          }));
          $("#occurrence").val(document.getElementById("occurrence_type_edit").value).change();
          document.getElementById("occurrence_type_edit").value = '';
          document.getElementById("divUpdateOccurrenceType").style.display = "block";
          await new Promise(r => setTimeout(r, 1000));
          document.getElementById("divUpdateOccurrenceType").style.display = "none";
          document.getElementById("btEditOccurrenceModal").click();
        });
      } else {
        Swal.fire(
          'Atenção!',
          'O campo descrição não pode ser vazia',
          'info'
        )
      }
    }

  </script>

@stop