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

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3">
            <h1 class="title">Utilizadores</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
            @can("Criar")
              <button type="button" class="btn btn-sm btn-client" id="newButton" onclick="utilizador(0)">Criar Novo Utilizador</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-sistema-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> 
            <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-7">
                    <input type="text" class="form-control" placeholder="Procurar por nome ou email" id="pesquisa">
                  </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" >Utilizadores</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="2" >Tipo de utilizadores</a>
                </li>
                </ul>
              <input type="hidden" id="tipo" value="">
            </div>
            <div class="card-body">
              <div class="table-responsive">
                  <table class="table tableUsers" id="tableUsers" style="width: 100%;">
                    <thead>
                    </thead>
                    <tbody>
                  
                    </tbody>
                  </table>
              
              </div>
         
            </div>
          </div>
          
@include('layouts.scripts')
          <script>
	$(document).keypress(function(e){
    if (e.which == 13){
        if($(':focus').attr("id") == 'pesquisa'){
		  search();
		}
    }
});


var start = '';
var end = '';
var url = 'getUsers';
var colunas = colunas = [
					{
        sortable: false,
        title : '',
			    "render": function ( data, type, full, meta ) {
					return "<input type='checkbox' class='checkContatos' id='"+full.id+"'>";
					}
					},
					{
            title : 'Nome',
				    "render": function ( data, type, full, meta ) {
					return "<a href='#' @can('Editar') onclick='utilizador("+full.id+", this)' @endcan >"+full.name+"</a>";
					}
					},
          {data: 'email', name: 'email',  title: "Email"},	          
					{
               sortable: false,
               title : 'Acções',
               className: "text-right",     
			    "render": function ( data, type, full, meta ) {
                var html = '@can("Eliminar")<a href="#" title="arquivar" onclick="removeUser('+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;
                 }
				},
				
				];

$(".tipo").click(function(e){
  console.log($(this).attr("data-id"));
if($(this).attr("data-id") == 1){
  $("#newButton").text("Criar Novo Utilizador");
  $("#newButton").attr("onclick", "utilizador(0)");
  url = 'getUsers';
  var colunas = colunas = [
					{
        sortable: false,
          title : '',
			    "render": function ( data, type, full, meta ) {
					return "<input type='checkbox' class='checkContatos' id='"+full.id+"'>";
					}
					},
					{
          title : 'Nome',
				  "render": function ( data, type, full, meta ) {
					return "<a href='#' @can('Editar') onclick='utilizador("+full.id+", this)' @endcan>"+full.name+"</a>";
					}
					},
          {data: 'email', name: 'email',  title: "Email"},	          
					{
               sortable: false,
               title : 'Acções',
               className: "text-right",     
			    "render": function ( data, type, full, meta ) {
                var html = '@can("Eliminar")<a href="#" title="arquivar" onclick="removeUser('+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").text("Criar Novo Tipo de Utilizador");
        $("#newButton").attr("onclick", "userType(0)");
        url = 'getRoles';
        var colunas = colunas = [
					{
        sortable: false,
        title : '',
			    "render": function ( data, type, full, meta ) {
					return "<input type='checkbox' class='checkContatos' id='"+full.id+"'>";
					}
          },
          {
            title : 'Nome',
				    "render": function ( data, type, full, meta ) {
					return "<a href='#' @can('Editar') onclick='userType("+full.id+", this)' @endcan>"+full.name+"</a>";
					}
					},
         	{
               sortable: false,
               title : 'Acções',
               className: "text-right",     
			    "render": function ( data, type, full, meta ) {
                var html = '@can("Eliminar")<a href="#" title="arquivar" onclick="removeUser('+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;
                 }
				},
				
        ];     
        
      }
      tabela(colunas, url);
});




var processos = $('#tableUsers').DataTable({
  destroy: true,
  "order": [[ 1, 'asc' ]],
  "processing": true,
	"searching": false,
            "serverSide": true,
			ajax: {
            url: url,
            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: colunas,
		
	} );




function tabela(colunas, url){
  
  $('#tableUsers').DataTable().destroy();
  $('#tableUsers').html("");

processos = $('#tableUsers').DataTable({
  destroy: true,
  "order": [[ 1, 'asc' ]],
  "processing": true,
	"searching": false,
            "serverSide": true,
			ajax: {
            url: url,
            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: colunas,
		
	} );
    
}

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 utilizador(id, a){
  
    var dat ={"id": id};	
  var url = '{{ asset("utilizadores/create") }}'

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

url: url,

type: "GET",

data: dat,

success: function(data){

    var dialog = bootbox.dialog({
    title: 'Criar Utilizador',
    message: data,
    size: 'large',
    buttons: {
        cancel: {
            label: "Cancelar",
            className: 'btn btn-sm btn-default',
            callback: function(){
            

            }
        },
        noclose: {
            label: "Criar Utilizador",
            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() }}", "name": $("#name").val(), "email":  $("#email").val(), "password": $("#password").val(), "password_confirmation": $("#password-confirm").val(), "roles": $("#roles").val()}	

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


if(id != 0){
    url = 'utilizadores/'+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>';
$("#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('uploadfiles') }}",
		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) {
         
     $("#docs").append('<tr><td style="width:30%;">\
            <a href="'+data.response.path+'" 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()

    });


$('#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);

} 

});	 

  }




function removeUser(id){

  bootbox.confirm({
    message: "Deseja remove o utilizador?",
    buttons: {
        confirm: {
            label: 'Sim',
            className: 'btn-success'
        },
        cancel: {
            label: 'Não',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
        if(result == true){
          jQuery.ajax({
url: '{{ asset("utilizadores") }}/'+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 userType(id){


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

  if(id != 0){
    url = 'roles/'+id+'/edit';
  }
  
jQuery.ajax({
url: url,
type: "GET",
data: dat,
success: function(data){

    var dialog = bootbox.dialog({
    title: 'Criar Tipo de Utilizador',
    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 permission = new Array();

$(".permission").each(function(e){
if($(this).is(":checked")){
permission.push($(this).val());
}
});


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

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

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



jQuery.ajax({

url: url,

type: type,

data: dat,

success: function(data){
  search();

},
  error:function(data){

console.log(data);

} 

});

            }
        },
       
    }
});

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

   

},

error:function(data){

console.log(data);

} 

});	 


}




  </script>

  <script>

  </script>
@endsection