@extends('layouts.layout')
@section('title', 'Definições')

@section('content')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css"/>
<style>.no-wrap { width: 1%; white-space: nowrap; }</style>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3">
            <h1 class="title">Definições</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
            @can('Criar')
              <button type="button" class="btn btn-sm btn-client" id="newButton" onclick="processo(0)">Criar Novo Tipo de Processo</button>
              @endcan
            </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">
              <button type="button" class="btn btn-dropdown dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <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"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                 Acções
              </button>
              <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 -->
          <div class="alert alert-sitema-success alert-dismissible fade show" role="alert" id="alert" style="display: none;">
            <span class="badge badge-pill badge-secondary alert-icon mr-3">
              <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=""><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            </span>
            <strong>Gravado com Sucesso.</strong> Tipo de Processo 
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <!-- Lista de Processos -->
          <div class="card">
            <div class="card-header">

              <div class="mb-4">
                <div class="form-row">
                  	<div class="col-auto" id="pesquisa-processo-div" style="display:none;">
                    	<input type="text" class="form-control" placeholder="Procurar por Processo" id="pesquisaProcesso">
					          </div>
                  	<div class="col-6">
                    	<input type="text" class="form-control" placeholder="Procurar por nome ou NIFC" id="pesquisa">
					</div>
					<div class="col-auto" id="pesquisa-tipo-div" style="display:none;">
                    	<select class="selectpicker" id="pesquisa-tipo">
							<option value="0">Selecione</option>
							<option value="created">Criado</option>
							<option value="updated">Atualizado</option>
						</select>
                  	</div>
					<div class="col-auto">
                    	<button type="button" class="btn btn-client px-3" onclick="search()">ok</button>
                  	</div>
                </div>
              </div>

              <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                  <a class="nav-link tipo active" href="#" data-toggle="tab" data-id="1" data-reorder="true">Tipos de Processos</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="2" data-reorder="false">Processos Arquivados</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="3" data-reorder="false">Histórico</a>
                </li>
              
              </ul>
              <input type="hidden" id="tipo" value="">
            </div>
            <div class="card-body">
              <div class="table-responsive">
                  <table class="table tableDefinicoes" id="tableDefinicoes" style="width: 100%;">
                    <thead>
                      <tr>
                       
                      </tr>
                    </thead>
                    <tbody>
                  
                    </tbody>
                  </table>
              
              </div>
         
            </div>
          </div>
        
@include('layouts.scripts')
  
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>
          <script>
	$(document).keypress(function(e){
    if (e.which == 13){
        if($(':focus').attr("id") == 'pesquisa' || $(':focus').attr("id") == 'pesquisaProcesso'){
		  search();
		}
    }
});


var start = '';
var end = '';

var processos = $('#tableDefinicoes').DataTable({
  rowReorder:  true,
  paging: false,
  info: false,
	// "order": [[ 2, 'asc' ]],
  ordering: false,
	"processing": true,
	"searching": false,
            "serverSide": true,
  rowReorder: { update: false },
			ajax: {
            url: "getTiposProcessos",
            type: "GET",
            data: function ( d ) {
                d.pesquisa = $("#pesquisa").val()               
              },
			  },
		'select': {
         'style': 'single'
      },
	    "language": {
      "lengthMenu": "Mostrar _MENU_ registos por página",
      "zeroRecords": "Sem registos",
      "info": "Página _PAGE_ de _PAGES_",
      "infoEmpty": "Sem registos disponiveis",
      "infoFiltered": "(Filtrado _MAX_ do total de registos)",
			"search": "Procurar:",
			"processing": "A processar",
			"paginate": {
			"previous": "Anterior",
			"next": "Próximo"
			}
        },
		 columns: [
       {
         orderable: false,
         sortable: false,
         className: 'no-wrap',
         render: function (data) {
          return `<svg xmlns="http://www.w3.org/2000/svg" style="cursor:move;" 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-menu">menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>`;
         }
       },
					{
				sortable: false,
        title: "",
			    "render": function ( data, type, full, meta ) {
					return "<input type='checkbox' class='checkContatos' id='"+full.id+"'>";
					}
					},
          {
          title: 'Ordem',
          data: 'ordem'
          },
          {
            sortable: false,
            title: "Descrição",
			    "render": function ( data, type, full, meta ) {
					return "<a href='#' @can('Editar') onclick='processo("+full.id+", this)' @endcan>"+full.descricao+"</a>";
					}
					},
          {
               sortable: false,
               className: "text-right",     
               title: "Acções",
			    "render": function ( data, type, full, meta ) {
                var html = '@can("Eliminar")\
                <a href="#" title="arquivar" onclick="removeProcesso('+full.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>@endcan';
                  
                  return html;
                 }
				},
				
				],
		
	} );

  processos.on('row-reorder', function (e, data, edit) {
    jQuery.ajax({
      url: '{{ asset("reorder") }}',
      type: 'POST',
      data: {
        _token: '{{ csrf_token() }}',
        _method: 'POST',
        data: JSON.stringify(data)
      },
      success: function (result) {
        if (result == 1) {
          processos.ajax.reload();
        }
      },
      error: function (error) {
        console.log(error);
      }
    });
  });
		
$(".tipo").click(function(e){
$("#tipo").val($(this).attr("data-id"));
search();
});


function search(){
  processos.ajax.reload();
		
}



</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 removeProcesso(id){

bootbox.confirm({
  message: "Deseja remove o tipo de Processo?",
  buttons: {
      confirm: {
          label: 'Sim',
          className: 'btn-success'
      },
      cancel: {
          label: 'Não',
          className: 'btn-danger'
      }
  },
  callback: function (result) {
      if(result == true){
        jQuery.ajax({
url: '{{ asset("tabelas") }}/'+id,
data: {'_token': "{{ csrf_token() }}", _method: 'DELETE', "id": id},
type: "POST",
success: function(data){
if(data != 1){
  search();
}
},
error:function(data){

console.log(data);

} 

});
      }

  }
});






}

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

if(id != 0){
  url = 'tabelas/'+id+'/edit';
}

jQuery.ajax({

url: url,

type: "GET",

data: dat,

success: function(data){

  var dialog = bootbox.dialog({
  title: 'Tipo de Processo',
  message: data,
  size: 'large',
  buttons: {
      cancel: {
          label: "Cancelar",
          className: 'btn btn-sm btn-default',
          callback: function(){
           
          }
      },
      noclose: {
          label: "Gravar",
          className: 'btn btn-sm btn-client',
          callback: function(){


var dat = {"_token": "{{ csrf_token() }}", "descricao": $("#descricao").val()}	

var  url = 'tabelas';
var type = "POST";


if(id != 0){
  url = 'tabelas/'+id;
  type= "PATCH";
}



jQuery.ajax({

url: url,

type: type,

data: dat,

success: function(data){
if(data.error.length === 0){
bootbox.hideAll();
$("#alert").show();
search();
}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;

          }
      },
     
  }
});





},

error:function(data){

console.log(data);

} 

});	 

}

var pesquisaTipo = null;

$('#pesquisa-tipo').on('change', function () {
	pesquisaTipo = this.value;

	processos.ajax.reload();
});


$(".tipo").click(function(e){
  var reorder = false,
      paging = true,
      ordering = true;

if($(this).attr("data-id") == 1){
  $("#newButton").show();
  $('#pesquisa-tipo-div').hide();
  $('#pesquisa-processo-div').hide();
  url = 'getTiposProcessos';

  reorder = true;
  paging = false;
  ordering = false;
  var order = [[ 1, 'asc' ]];

  var colunas = colunas = [
    {
         orderable: false,
         sortable: false,
         className: 'no-wrap',
         render: function (data) {
          return `<svg xmlns="http://www.w3.org/2000/svg" style="cursor:move;" 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-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>`;
         }
       },
					{
				sortable: false,
        title: "",
			    "render": function ( data, type, full, meta ) {
					return "<input type='checkbox' class='checkContatos' id='"+full.id+"'>";
					}
					},
          {
          title: 'Ordem',
          data: 'ordem'
          },
          {
            title: "Descrição",
			    "render": function ( data, type, full, meta ) {
					return "<a href='#' @can('Editar') onclick='processo("+full.id+", this)' @endcan>"+full.descricao+"</a>";
					}
					},
          {
               sortable: false,
               className: "text-right",     
               title: "Acções",
			    "render": function ( data, type, full, meta ) {
                var html = '@can("Eliminar")\
                <a href="#" title="arquivar" onclick="removeProcesso('+full.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>@endcan';
                  
                  return html;
                 }
				},
				
				];
      }
      if($(this).attr("data-id") == 2){
		$("#newButton").hide();
		$('#pesquisa-tipo-div').hide();
		$('#pesquisa-processo-div').hide();
        url = 'getRecycle';
        var colunas = colunas = [
					{
				sortable: false,
			    "render": function ( data, type, full, meta ) {
					return "<input type='checkbox' class='checkContatos' id='"+full.id+"'>";
					}
					},
					{
            "title": "Processo",
				    "render": function ( data, type, full, meta ) {
					return full.codProcesso;
					}
					},
          {data: 'dataCriacao', name: 'dataCriacao',  title: "Data"},	
          {data: 'nomeCliente', name: 'nomeCliente',  title: "Cliente"},	
					{data: 'valorTotal', name: 'valorTotal',  title: "Valor"},
          {
            "title": "Tipo",
				    "render": function ( data, type, full, meta ) {
          	return full.tp;
					}
          },
					{
              title: "Acções",
               sortable: false,
               className: "text-right",     
			    "render": function ( data, type, full, meta ) {
                var html = '<a href="#" title="restaurar" title="Remover Processo" onclick="restoreProcess('+full.id+')">\
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>\
                          </a>\
                          ';
                  return html;
                 }
				},
				
				];
        
      }
	if($(this).attr('data-id') == 3) {
		$('#newButton').hide();
		$('#pesquisa-tipo-div').show();
		$('#pesquisa-processo-div').show();

		url = 'getLogs';
		order = [[ 1, 'desc' ]];

		var colunas = [
			{
				data: 'codProcesso',
            	title: 'Processo',
			},
          	{	
				data: 'created_at', 
				title: 'Data'
			},	
          	{ 
				title: 'Tipo',
				render: function (data, type, full, meta) {
					if (full.description == 'created') {
						return 'Criado';
					} else if (full.description == 'updated') {
						return 'Atualizado';
					} else if (full.description == 'deleted') {
						return 'Apagado';
					}
				}
			},	
          	{	
				data: 'u_name', 
				title: 'Utilizador'
			},	
			{
              	title: 'Acções',
               	sortable: false,
               	className: 'text-right',     
			    render: function ( data, type, full, meta ) {
                	var html = '<a href="#" onclick="history(`{{ URL::asset("getLogs/") }}/' + full.id + '`)" title="Ver detalhes">\
									<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-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>\
								</a>';
                  	return html;
				}
			},
		];
	}

	tabela(colunas, reorder, paging, ordering, url, order);
});



function tabela(colunas, reorder, paging, ordering, url, order){
  
  $('#tableDefinicoes').DataTable().destroy();
  $('#tableDefinicoes').html("");

processos = $('#tableDefinicoes').DataTable({
  rowReorder: reorder,
  paging: paging,
  ordering: ordering,
  destroy: true,
  "order": order,
  "processing": true,
	"searching": false,
            "serverSide": true,
			ajax: {
            url: url,
            type: "GET",
            data: function ( d ) {
				  d.pesquisaProcesso = $("#pesquisaProcesso").val(),
				  d.pesquisa = $("#pesquisa").val(),
				  d.pesquisaTipo = pesquisaTipo
            },
			  },
		'select': {
         'style': 'single'
      },
	    "language": {
      "lengthMenu": "Mostrar _MENU_ registos por página",
      "zeroRecords": "Sem registos",
      "info": "Página _PAGE_ de _PAGES_",
      "infoEmpty": "Sem registos disponiveis",
      "infoFiltered": "(Filtrado _MAX_ do total de registos)",
			"search": "Procurar:",
			"processing": "A processar",
			"paginate": {
			"previous": "Anterior",
			"next": "Próximo"
			}
        },
		 columns: colunas,
     
	} );

  if (reorder) {
    processos.on('row-reorder', function (e, data, edit) {
    jQuery.ajax({
      url: '{{ asset("reorder") }}',
      type: 'POST',
      data: {
        _token: '{{ csrf_token() }}',
        _method: 'POST',
        data: JSON.stringify(data)
      },
      success: function (result) {
        if (result == 1) {
          processos.ajax.reload();
        }
      },
      error: function (error) {
        console.log(error);
      }
    });
  });
  }
    
}

function restoreProcess(id){


  bootbox.confirm({
  message: "Deseja restaurar o Processo?",
  buttons: {
      confirm: {
          label: 'Sim',
          className: 'btn-success'
      },
      cancel: {
          label: 'Não',
          className: 'btn-danger'
      }
  },
  callback: function (result) {
      if(result == true){
        jQuery.ajax({
url: '{{ asset("restore") }}',
data: {'_token': "{{ csrf_token() }}", "id": id},
type: "POST",
success: function(data){
if(data == 1){
  search();
}
},
error:function(data){

console.log(data);

} 

});
      }

  }
});



}


function history(_url) {
	$.ajax({
		url: _url,
		type: 'GET',
		success: function (result) {
			if (result.code == 200) {
				var dialog = bootbox.dialog({
					title: 'Detalhes',
					message: result.data,
					size: 'large',
					buttons: {
						cancel: {
							label: 'Fechar',
							className: 'btn btn-sm btn-default',
						}
					}
				});
			}
		},
		error: function (error) {
			console.log(error);
		}
	});
}



  </script>

  <script>

  </script>
@endsection