@extends('layouts.layout')
@section('title', 'Acontecimentos')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3">
            <h1 class="title">Acontecimentos <small>Processo {{ $processo->codProcesso }}</small></h1>
            <div class="btn-toolbar mb-2 mb-md-0">
            @can('Criar')
              <button type="button" class="btn btn-sm btn-client" data-toggle="modal" data-target="#modalFormCriarAcontecimento" onclick="processo(0)">Novo Acontecimento</button>
            @endcan            
              <input type="hidden" id="processo" value="{{ $id }}">
            </div>
          </div>
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
            <!-- Example single danger button -->
            <div class="btn-group">
              <a href="{{ url()->previous() }}">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><polyline points="15 18 9 12 15 6"></polyline></svg>
                 Voltar
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Eliminar</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Exportar .PDF</a>
              </div>
            </div>
          </div>


          <!-- Alertas de Sistema -->
          <!-- Fim Alertas de Sistema -->


          <!-- Lista de Notificações -->
          <div class="card">
            <div class="card-body">
            <div class="row">

              <div class="col-md-7 pr-0">
                <!-- CHAT -->
                <div class="chat">
                
              
                  </div>
              </div>
              <div class="col-md-5">
                <div class="anexos">
                  <p class="font-weight-bold text-uppercase">Anexos</p>
                  <table class="table table-sm" id="anexos">
                    <tbody>
                
                    </tbody>
                  </table>
                </div>
              </div>

            </div>
            </div>
          </div>
          
@include('layouts.scripts')
          <script>
	$(document).keypress(function(e){
    if (e.which == 13){
        if($(':focus').attr("id") == 'pesquisa'){
		  search();
		}
    }
});





</script>
  <script>
    // Listen for click on toggle checkbox
    $('#select-all').click(function(event) {
        if(this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
                this.checked = true;
            });
        } else {
            $(':checkbox').each(function() {
                this.checked = false;
            });
        }
    });
  </script>


  <script type="text/javascript">

      $('input[name="datefilter"]').daterangepicker({
          autoUpdateInput: false,
          "locale": {
    "format": "DD/MM/YYYY",
    "separator": " - ",
    "applyLabel": "Aplicar",
    "cancelLabel": "Cancelar",
    "fromLabel": "De",
    "toLabel": "Até",
    "customRangeLabel": "Custom",
    "daysOfWeek": [
        "Dom",
        "Seg",
        "Ter",
        "Qua",
        "Qui",
        "Sex",
        "Sáb"
    ],
    "monthNames": [
        "Janeiro",
        "Fevereiro",
        "Março",
        "Abril",
        "Maio",
        "Junho",
        "Julho",
        "Agosto",
        "Setembro",
        "Outubro",
        "Novembro",
        "Dezembro"
    ],
    "firstDay": 0
},
          });

          $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
          start = picker.startDate.format('YYYY-MM-DD');
          end = picker.endDate.format('YYYY-MM-DD');

      });

      $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val('');
          start = '';
          end = '';
      });

      
  function processo(id, a){

    var dat ={"id": id};	
  var url = '{{ asset("acontecimentos/create") }}'

  if(id != 0){
    url = id+'/edit';
  }
  @can('Editar') 
jQuery.ajax({

url: url,

type: "GET",

data: dat,

success: function(data){

    var dialog = bootbox.dialog({
    title: 'Criar Acontecimento',
    message: data,
    size: 'large',
    buttons: {
        cancel: {
            label: "Cancelar",
            className: 'btn btn-sm btn-default',
            callback: function(){
              if(id == 0){
              removeAnex(1, 0);  
              }

            }
        },
        noclose: {
            label: "Gravar",
            className: 'btn btn-sm btn-client',
            callback: function(){
var ids = new Array();


$(".fileInput").each(function(e){
ids.push($(this).val());

});


var dat = {"_token": "{{ csrf_token() }}", "assunto": $("#assunto").val(), "processo":  $("#processo").val(),  "user": $("#user").val(), 
"dataValidade": $("#dataNotificacao").val(), "descricao": $("#descricaoAcontecimento").val(), "estado": 1, "ids": ids}	

var urls = '{{ asset("acontecimentos")}}';
var type = "POST";

if(id != 0){
  urls = id;
  type = "PATCH";
}



jQuery.ajax({

url: urls,

type: type,

data: dat,

success: function(data){
if(data.error.length === 0){
bootbox.hideAll();
getRespostas();
}else{
var html = '<ul>';
  $.each( data.error, function( key, value ) {
html += '<li>'+value+'</li>';
});  
html += '</ul>\
<button type="button" class="close" data-dismiss="alert" aria-label="Close">\
              <span aria-hidden="true">&times;</span>\
            </button>';
$("#alertMessage").empty();
$("#alertMessage").append(html);
$("#alertModal").show();
}

},
  error:function(data){

console.log(data);

} 

});

return false;
            }
        },
       
    }
});

$(".selectpicker").selectpicker({ liveSearch: true, width: '100%' });

$('#inputSelectFile').fileinput({
   	language: 'pt',
		fileType: "any",
		uploadAsync: true,
		uploadUrl: "{{ asset('uploadfilesA') }}",
		overwriteInitial: false,
    showUpload: true,
    autoReplace: true,
    maxFileCount: 1,
		dropZoneEnabled: true,
		showPreview: false,
		uploadExtraData:function(previewId, index) {
        var data = {
           '_token': "{{ csrf_token() }}",
           'tituloAnexo': $("#tituloAnexo").val(),
           'dataValidadeAnexo': $("#dataValidadeAnexo").val(),
           'descricaoAnexo': $("#descricaoAnexo").val(),
         };
        return data;        
    },
		});

    $('#inputSelectFile').on('fileuploaded', function(event, data, previewId, index) {
         
      if(data.response.id){  
     $("#docs").append('<tr><td style="width:30%;">\
            <a href="'+data.response.path+'" '+(data.response.extension == "jpeg" || data.response.extension == "jpg" || data.response.extension == "png" || data.response.extension == "pdf"  ? "data-fancybox='gallery"+data.response.id+"'" : "")+'>\
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>\
             '+data.response.fileName+'\
             <input type="hidden" class="fileInput" value="'+data.response.id+'">\
            </a>\
          </td>\
          <td style="width:60%;">'+$("#tituloAnexo").val()+'</td>\
          <td style="width:10%;" class="text-right">\
            <a href="#" onclick="removeAnex(this, '+data.response.id+')"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>\
          </td></tr>');
    
          $("#tituloAnexo").empty();
          $("#dataValidadeAnexo").empty();
          $("#descricaoAnexo").empty();
          $("#alertMessage").empty();
          $("#alertModal").hide();
     }else{
          $("#alertMessage").empty();
          $("#alertMessage").append('<p>Titulo em falta para carregamento do ficheiro! </p>');
          $("#alertModal").show();
     }


    });


$('#dataNotificacao').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
   "locale": {
    "format": "YYYY-MM-DD",
    "separator": " - ",
    "applyLabel": "Aplicar",
    "cancelLabel": "Cancelar",
    "fromLabel": "De",
    "toLabel": "Até",
    "customRangeLabel": "Custom",
    "daysOfWeek": [
        "Dom",
        "Seg",
        "Ter",
        "Qua",
        "Qui",
        "Sex",
        "Sáb"
    ],
    "monthNames": [
        "Janeiro",
        "Fevereiro",
        "Março",
        "Abril",
        "Maio",
        "Junho",
        "Julho",
        "Agosto",
        "Setembro",
        "Outubro",
        "Novembro",
        "Dezembro"
    ],
    "firstDay": 0
},
  });

  $('#dataValidadeAnexo').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
   "locale": {
    "format": "YYYY-MM-DD",
    "separator": " - ",
    "applyLabel": "Aplicar",
    "cancelLabel": "Cancelar",
    "fromLabel": "De",
    "toLabel": "Até",
    "customRangeLabel": "Custom",
    "daysOfWeek": [
        "Dom",
        "Seg",
        "Ter",
        "Qua",
        "Qui",
        "Sex",
        "Sáb"
    ],
    "monthNames": [
        "Janeiro",
        "Fevereiro",
        "Março",
        "Abril",
        "Maio",
        "Junho",
        "Julho",
        "Agosto",
        "Setembro",
        "Outubro",
        "Novembro",
        "Dezembro"
    ],
    "firstDay": 0
},
  });





},

error:function(data){

console.log(data);

} 

});	 
@endcan

  }

  $(".selectpicker").selectpicker({ liveSearch: true, width: '100%' });



  function getRespostas(){

jQuery.ajax({
url: '{{ asset("getRespostas") }}',
data: { "id":  $("#processo").val()},
type: "GET",
success: function(data){
  $(".chat").empty();
$(".chat").append(data.html);

getAnexos(data.id);
},
error:function(data){

console.log(data);

} 

});


}

function getAnexos(id){



jQuery.ajax({
url: '{{ asset("getAnexosA") }}',
data: { "id":  id},
type: "GET",
success: function(data){
$("#anexos").empty();
$("#anexos").append(data);
$(".userMsg").addClass("ownerMsg");
$(".userMsg").removeClass("userMsg");
$("#active"+id).addClass("userMsg");
$("#active"+id).removeClass("ownerMsg");


},
error:function(data){

console.log(data);

} 

});

}




function removeAnex(a, id){

$(a).closest("tr").remove();
var array = new Array();

if(a != 1){
array.push(id);
}else{
$(".fileInput").each(function(e){
array.push($(this).val());
});


}

jQuery.ajax({
url: '{{ asset("removeAnex") }}',
data: {'_token': "{{ csrf_token() }}", "id": array},
type: "POST",
success: function(data){
  if(a != 1){
$(a).closest("tr").remove();
  }
},
error:function(data){

console.log(data);

} 

});


}

getRespostas();



  </script>

  <script>

  </script>
@endsection