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

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3">
            <h1 class="title">Anexos</h1>
            
          </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> Processo - <a href="#">#57120</a>
            <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 NIFC" 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="" >Todos os Anexos</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="1" >Injunção</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="2" >Insolvencia</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="3" >Carta Admonitória</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="4" >PER1</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="5" >PER2</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="6" >Decorrer</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="7" >Pendente</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link tipo" href="#" data-toggle="tab" data-id="8" >Terminado</a>
                </li>
              </ul>
              <input type="hidden" id="tipo" value="">
            </div>
            <div class="card-body">
              <div class="table-responsive">
                  <table class="table tableAnexos" id="tableAnexos" style="width: 100%;">
                    <thead>
                      <tr>
                        <th scope="col"><input type="checkbox" name="select-all" id="select-all" ></th>
                        <th scope="col">Nome do Ficheiro</th>
                        <th scope="col">Titulo</th>
                        <th scope="col" class="text-right"  style="width:10%;">Acções</th>
                      </tr>
                    </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 processos = $('#tableAnexos').DataTable({
	"order": [[ 1, 'asc' ]],
	"processing": true,
	"searching": false,
            "serverSide": true,
			ajax: {
            url: "getAnexos",
            type: "GET",
            data: function ( d ) {
                d.pesquisa = $("#pesquisa").val(),
                d.tipo = $("#tipo").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: [
					{
				sortable: false,
			    "render": function ( data, type, full, meta ) {
					return "<input type='checkbox' class='checkContatos' id='"+full.id+"'>";
					}
					},
					{
				  "render": function ( data, type, full, meta ) {
          var extension = full.caminho.split('.').pop();

  				return "<a href={{ asset('storage') }}/"+full.caminho+"  "+(extension == 'jpeg' || extension == 'jpg' || extension == 'png' || extension == 'pdf'  ? 'data-fancybox="gallery'+full.id+'"' : "")+" >"+full.nome+"</a>";
					}
					},
          {data: 'titulo', name: 'titulo',  title: "Titulo"},	
          {
               sortable: false,
               className: "text-right",     
			    "render": function ( data, type, full, meta ) {
                var html = '@can("Eliminar")\
                <a href="#" title="arquivar" onclick="removeAnex('+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){
$("#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 removeAnex(id){

  bootbox.confirm({
    message: "Deseja remover o anexo?",
    buttons: {
        confirm: {
            label: 'Sim',
            className: 'btn-success'
        },
        cancel: {
            label: 'Não',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
      if(result == true){
var array = new Array();


array.push(id);

jQuery.ajax({
url: '{{ asset("removeAnex") }}',
data: {'_token': "{{ csrf_token() }}", "id": array},
type: "POST",
success: function(data){
  search();
},
error:function(data){

console.log(data);

} 

});
      }
}
});

}





  </script>

  <script>

  </script>
@endsection