@extends('template.template')
@section('scriptsHeader')
<link rel="stylesheet" href="{!! asset("libs/css/select2.css")!!}" media="screen">
<link rel="stylesheet" href="{!! asset("libs/css/tabsFinal.css")!!}" media="screen">
<link rel="stylesheet" href="{!! asset("libs/css/tabsvertical.css")!!}" >
<link rel="stylesheet" href="{!! asset("libs/css/timeline.css")!!}"> <!-- Resource style -->
<link rel="stylesheet" href="{!! asset("libs/css/styleTimeline.css")!!}">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
.espaceTitulo {
padding-top: 16px;
}
.espaceTitulo2 {
padding-top: 48px;
}
.expand{
width: 30%;
}
.expandConf {
width: 10%;
}
.espaceBotao{
padding-left: 60px;
}
.collapsing {
    -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.hidden {
    visibility:hidden;
}


div#scrollDiv{

    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 500px;
}

div#contentScroll{
  width:100%;

}


</style>
@stop
@section('conteudoPagina')
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  <div class="panel panel-default">
        <div class="panel-heading">Processo nº </div>
    <div class="panel-body">
      <div class="row">
        
        <div class="col-md-12"><!-- Inicio dos eventos-->
        <h4>Eventos do Processo</h4>
        <div class="divider"></div>
        
        
        <div class="panel with-nav-tabs panel-primary">
          <div class="panel-heading clearfix">
            <div>
              <ul class="nav nav-tabs">
                <li class="active expand"><a href="#timeline" data-toggle="tab">Timeline</a></li>
                <li class="expand"><a href="#ficheiros" data-toggle="tab">Ficheiros Trocados</a></li>
                <li class="expand"><a href="#gestaoProcesso" data-toggle="tab">Gestão de Processo</a></li>
                <li class="expandConf"><a href="#gestaoConfig" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
              </ul>
            </div>
          </div>
          <div class="panel-body">
            <div class="tab-content">
              <div class="tab-pane fade in active" id="timeline">
                <div class="btn-group add" role="group" >
                  <button type="button" class="btn btnAdd" title="Adicionar Evento"><i class="glyphicon glyphicon-plus"></i></button>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <h4 class="sub-header">Data Pesquisa na Timeline</h4>
                    <div class="form-group ">
                      <input class="form-control input-sm" id="dataInicioProcesso" name="dataInicioProcesso" name="date" placeholder="09/04/2026" value="09/04/2026" type="text"/>
                    </div>
                    <div class="divider"></div>
                  </div>
                  
                  <div class="col-md-6 "> <!-- Botões de acção da timeline-->
                  <h4 class="sub-header">Pesquisa na Timeline</h4>
                  <div class="input-group">
                    <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
                    <input required="" placeholder="Pesquisar" name="q" id="system-search" class="form-control">
                    <span class="input-group-btn">
                      <button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-search"></i> Pesquisar</button>
                    </span>
                  </div>
                  <div class="divider"></div>
                  </div> <!-- Fecho div botões de acção da timeline-->
                </div>
                <section id="cd-timeline" class="cd-container">
                  
                </div>
                <div class="cd-timeline-block">
                    <a id="botao"role="button" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse" onclick="changeIconCollapse();">
                      <div class="cd-timeline-img cd-cinza imgDiv">
                        <div class="cd-date dateDiv"><span id="glySpan" class="glyphicon glyphicon-plus"></span></div>
                      </div>
                    </a>
                  </div>
                
                </section>
            
              </div>
              

              
              <div class="tab-pane fade" id="ficheiros">

                <div class="panel-heading">
                  <div class="alert alert-info hidden" id="alertaExport">
                      Nenhum ficheiro foi encontrado com o seu critério de pesquisa.
                  </div>
                  <div class="alert alert-info hidden" id="alertaDesassociaUtilizador">
                      Nenhum ficheiro foi encontrado com o seu critério de pesquisa.
                  </div>
                  <div class="row">
                    <div class="col col-xs-6">
                                <h3 class="panel-title">Listagem de Ficheiros Trocados</h3>
                            </div>
                            <div class="col col-xs-6 text-right">
                                 <select id="faseDownload" name="faseDownload" data-placeholder="Seleccione uma fase para fazer Export" >
                                                                </select>

                                <button type="button" class="btn btn-sm btn-primary" onclick="downloadZipFicheiros(,0,0);">
                                  <span class="glyphicon glyphicon-export"></span>
                                </button>
                            </div>
                        </div>
                </div>

                <table id="tabelaFicheiros" class="table table-striped table-bordered dataTable">
                  <thead id="headerTable">
                    <tr>
                      <th>
                        <input type="hidden" id="idProcesso" value="22"/>
                        <input type="hidden" id="idFase" value="11"/>
                        <input type="hidden" id="idItem" value="33"/>
                        <input type="checkbox" name= "ficheirosbox" id="checkall" />
                      </th>
                      <th class="sorting_asc"><a onclick="ordenaTabelaFicheiros('tipoFicheiro',);">Tipo Ficheiro</a></th>
                      <th class="sorting_asc"><a onclick="ordenaTabelaFicheiros('nomeFicheiro',);" >Nome Ficheiro</a></th>
                      <th class="sorting_desc"><a onclick="ordenaTabelaFicheiros('descricaoFase',);" >Descrição Fase</a></th>
                      <th class="sorting"><a onclick="ordenaTabelaFicheiros('dataHoraUpload',);" >Data Lançamento</a></th>
                      <th class="sorting"><a onclick="ordenaTabelaFicheiros('utilizador',);" >Utilizador Responsável</a></th>
                      <th class="sorting"><a onclick="ordenaTabelaFicheiros('observacoes',);" >Observações</a></th>
                    </tr>
                  </thead>
                  <tbody>
                                      
                  </tbody>
                </table>
                
              </div>
              <div class="tab-pane fade" id="gestaoProcesso">
                <div class="row">
                  <div class="bhoechie-tab-container">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu">
                      <div class="list-group">
                        <a href="#" class="list-group-item active text-center">
                          <h4 class="glyphicon glyphicon-user"></h4><br/>Utilizadores Processo
                        </a>
                        <a href="#" class="list-group-item text-center">
                          <h4 class="glyphicon glyphicon-briefcase"></h4><br/>Entidade
                        </a>
                        <a href="#" class="list-group-item text-center">
                          <h4 class="glyphicon glyphicon-cog"></h4><br/>Definições Processo
                        </a>
                        
                      </div>
                    </div>
                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bhoechie-tab">
                      <!-- Utilizadores section -->
                      <div class="bhoechie-tab-content active">

                        <div class="row">
                        <!-- Alerta caso um novo utilizador seja marcado:--> 
                          <div class="alert alert-info hidden" id="alertaNovoUtilizador">
                             Erro ao afectar o utilizador ao processo.
                          </div>

                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <label class="control-label"> Afectar Novo Utilizador ao Processo:</label>
                            <select id="novoUtilizadorProcesso" name="novoUtilizadorProcesso" class="form-control utilizadores input-sm" data-placeholder="Seleccione Entidade">
                            </select>
                          </div>

                        <div class="col-sm-6">
                            <button onclick="guardaNovoUtilizador()">Guardar</button>
                        </div>

                    
                        </div>

                        <div class="row">
                          <div class="col-sm-3">
                              <a href="#" class="nav-tabs-dropdown btn btn-block btn-primary">Utilizadores Registados no Processo</a>
                              <ul id="nav-tabs-wrapper" class="nav nav-tabs nav-pills nav-stacked well tabUsers">
                                
                              </ul>
                          </div>
                          <div class="col-sm-9">
                              <div class="tab-content">
                               


                              </div>
                          </div>
                      </div>
                      </div>
                      <!-- Conteudo de entidade section -->
                      <div class="bhoechie-tab-content">
                      </div>
                      
                      <!-- hotel search -->
                      <div class="bhoechie-tab-content">
                        <center>
                        
                        <h2 style="margin-top: 0;color:#55518a">Exemplo de um Tab</h2>
                        <h3 style="margin-top: 0;color:#55518a">....</h3>
                        </center>
                      </div>
                      
                    </div>
                  </div>
                </div>
                
              </div>
              <div class="tab-pane fade" id="gestaoConfig"><!-- Tab-->
              <div class="col-md-12">
                <h4>Detalhes Gerais do Processo</h4>
                <div class="divider"></div>
              </div>
              <div class="col-md-6">
                <h4 class="sub-header espaceTitulo">Descrição do Processo</h4>
                <div class="form-group">
                  <input class="form-control input-sm" id="descricaoProcesso" name="descricaoProcesso" value="" type="text"/>
                </div>
                <div class="divider"></div>
                <h4 class="sub-header espaceTitulo">Número Processo Judicial</h4>
                <div class="form-group">
                  <input class="form-control input-sm" id="nrProcessoJudicial" name="nrProcessoJudicial" value="" type="text"/>
                </div>
                <div class="divider"></div>
                <h4 class="sub-header espaceTitulo">Valor de potêncial ganho</h4>
                <div class="form-group input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-eur"></i>
                  </span>
                  <input id="valorPotencialGanho" name="valorPotencialGanho" type="text" placeholder="Insira valor" value="" class="form-control input-sm input-sm valor">
                  
                </div>
                <div class="divider"></div>
                <h4 class="sub-header espaceTitulo">Valor de potêncial perda</h4>
                <div class="form-group input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-eur"></i>
                  </span>
                  <input id="valorPotenciaPerda" name="valorPotencialPerda" type="text" placeholder="Insira valor" value="" class="form-control input-sm input-sm valor">
                  
                </div>
                
              </div>
              <div class="col-md-6">
                <h4 class="sub-header espaceTitulo">Valor de provisões</h4>
                <div class="form-group input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-eur"></i>
                  </span>
                  <input id="valorProvisao" name="valorProvisao" type="text" placeholder="Insira valor" value="" class="form-control input-sm input-sm valor">
                  
                </div>
                <div class="divider"></div>
                <h4 class="sub-header espaceTitulo">Valor de garantias</h4>
                <div class="form-group input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-eur"></i>
                  </span>
                  <input id="valorGarantias" name="valorGarantias" type="text" placeholder="Insira valor" value="" class="form-control input-sm input-sm valor">
                  
                </div>
                <div class="divider"></div>
                <h4 class="sub-header espaceTitulo ">Data de fim garantia bancária</h4>
                <div class="form-group ">
                  <input class="form-control input-sm" id="dataFimGarantias" name="dataFimGarantias" placeholder="MM/DD/YYYY"  value="" type="text"/>
                  
                </div>
                
              </div>
            </div>
            
            
            
            
            </div><!-- Fim Tab-->
          </div>
          
          <div class="panel-footer right">
            <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-floppy-disk"></i>Guardar</button>
          </div>
          
        </div>
        
      </div>
      </div><!-- Fim dos eventos-->
    </div>
    
  </div>
  
</div>
</div>
@stop
@section('scriptsFooter')
<script src="{!! asset("libs/js/jquery-2.1.1.min.js") !!}"></script>
<script src="{!! asset("libs/js/bootstrap.min.js") !!}"></script>
<script src="{!! asset("libs/js/jquery-ui.js") !!}"></script>
<script src="{!! asset("libs/js/autoNumeric-2.0.js") !!}" type="text/javascript"></script>
<script src="{!! asset("libs/js/select2.full.js") !!}" type="text/javascript"></script>
<script src="{!! asset("libs/js/chosen.jquery.min.js") !!}"></script>
<script src="{!! asset("libs/js/modernizr.js") !!}"></script> <!-- Modernizr -->
<!-- <script src="{!! asset("libs/js/dw_scroll_c.js") !!}" type="text/javascript"></script> Script para timeline div scroll --> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$('.add').draggable({cancel:false});
</script>
<script>
$(document).ready(function(){

  var dataInicioProcesso = $('input[name="dataInicioProcesso"]');
  var dataGarantias = $('input[name="dataFimGarantias"]'); //our date input has the name "date"
  var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
  dataGarantias.datepicker({
    format: 'dd/mm/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
  });
  dataInicioProcesso.datepicker({
    format: 'dd/mm/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
  });


$(".utilizadores").select2({
  ajax: {
    url: 'utilizadoresNaoRegistados',
    headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
    type: 'POST',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        pesquisa: params.term,
        idProcesso: ,
      };
    },
    processResults: function (data, params) {
        //idPropertyName: 'idEntidade',
        //textPropertyName: 'nome',
        return {
                  results: data
              };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1,
  templateResult: formatRepo,
  templateSelection: formatRepoSelection
  
});






})
</script>




<script>

function downloadZipFicheiros(idProcesso, idFase, idItem){



var idProcesso = idProcesso;
var idFase = $('select[name="faseDownload"]').val();
var idItem = idItem;

var todosFicheiros = [];
    var i = 0;
    $('input[name="ficheirosbox"]:checked').each(function() {
       todosFicheiros[i]=this.value;
       i++;
    });



 $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    } 
 });

 var url = 'downloadZipFile'; 


 var data = {
      filesDownload: todosFicheiros,  
      nrProcesso : idProcesso,
      nrFase: idFase,
      nrItem: idItem,
 };

  $.ajax({
    url: url,
    type: 'POST',
    data: data,
    dataType: 'JSON',
    success: function (response) {
       if(response.fazDownload == 1) {
          if(response.zip) {
            location.href = response.zip;
            $('#alertaExport').addClass('hidden');
          }
       }
        else 
          $('#alertaExport').removeClass('hidden');
        console.log("OK...");
    },
    error:function(data){
        console.log("Not Ok...");
    }
  });


}

//getZipProjecto
</script>


<script>
var ordem = 0;
var numAdicionado = 1;
$('.btnAdd').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('.btnAdd').click(function(event) {
    if($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
      var novaFase =  '<div> <div class="cd-timeline-block mexe faseAdicionada add'+numAdicionado+'">';
          novaFase += '<div class="cd-timeline-img cd-cinza is-hidden">';
          novaFase += '<div class="cd-date"><span class="month"></span></div>';
          novaFase += '</div>';
          novaFase += '<div class="cd-timeline-content">';
          novaFase += '<div><button class="btn-delete" id="eliminaNovo'+numAdicionado+'" onclick="eliminaAdicionado('+numAdicionado+');"><span class="glyphicon glyphicon-trash"></span></button></div>';
          novaFase += '<h4>Preencha os campos abaixo indicados:</h4>';
          novaFase += '<input class="form-control input-sm" type="text" placeholder="Descrição da Fase"></input>';
          novaFase += '<textarea id="observacoesFase" name="observacoesFase" placeholder="Observacões da Fase"></textarea>';
          novaFase += '<input class="form-control input-sm" id="nrDiasAposFaseAnterior" name="nrDiasAposFaseAnterior" name="date" placeholder="Número de dias Após Fase Anterior" type="text"/>';
          novaFase += '<div class="cd-timeline-footer">';
          novaFase += '<div class="col-md-6">';
          novaFase += '<select id="utilizadoresProcesso" name="utilizadoresProcesso[]" class="chose-users form-control input-sm" data-placeholder="Seleccione os utilizadores" multiple="multiple">';
                                  novaFase += '</select>';
          novaFase += '</div>';
          novaFase += '<div class="col-md-6 right">';
          novaFase += '<button class="btn btn-success" onclick="guardarNovaFase();">Guardar</button>';
          novaFase += '</div>';
          novaFase += '</div>';
          novaFase += '</div>';
          novaFase += '</div></div>';
          
          numAdicionado++;

        $('#collapse0').prepend(novaFase);
        $('.btnAdd').attr('disabled',true);
    }
 
});

function eliminaAdicionado(numeroId){
  r = confirm('Pretende eliminar a nova fase adicionada?');
  if(r) {
    $('.add'+numeroId).remove();
     $('.btnAdd').attr('disabled',false);
  }
}


$('#cd-timeline').sortable({
    containment: "document",
    items: ".mexe",
    disabled: false,
    fixed: ".fixoTimeLine",
    axis: 'y',
    forceHelperSize: true,
    start: function(event, ui) {
     
    },
    update: function(event, ui) {
    var quantosPorFazer = ;
    var quantasFases = ;
    
    var modulos = Math.floor(quantosPorFazer/3);
    
    var restantes = quantosPorFazer-(modulos*3);

    var globalPos = ui.item.parent().attr("id");
    
    var moduloOndeEstas = globalPos.slice(-1);

    var posicaoFinal;

    if(moduloOndeEstas==0)
      posicaoFinal = quantosPorFazer - ui.item.index();
    else 
      posicaoFinal = quantosPorFazer - ( restantes+ 3*(moduloOndeEstas-1) + ui.item.index() );
    
   
    alert(' - POSICAO : ' + posicaoFinal );
    },
    beforeStop: function(ev, ui) {
      if($(ui.item).hasClass('fixoTimeLine'))
        $(this).sortable('cancel');
    }    
}).disableSelection();

function desassocUtilizadorProcesso(idUtilizador, idTab){
  //Método que desassocia do processo um dado utilizador, sendo que este não terá mais acesso ao mesmo, nem participar no mesmo.
  $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });

          var url = 'desassociaUtilizadorProcesso'; 
          
          //var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
  //        console.log(CSRF_TOKEN);


          var data = {
              idUtilizador: idUtilizador,
              idProcesso: ,
          };


          $.ajax({
              url: url,
              type: 'POST',
              data: data,
              dataType: 'JSON',
              success: function (data) {
                $('#alertaDesassociaUtilizador').addClass('hidden');
                $('#vtab'+idTab).remove();
                $('#elementoLista'+idTab).remove();
              },
              error:function(data){
                $('#alertaDesassociaUtilizador').removeClass('hidden');
                console.log('Not OK...');
   
              }
          });

}

function enviaLembreteUser(idUtilizador){
  //Método que envia uma mensagem de lembrete de acção no processo (só disponivel esta funcionalidade para admin);
}


function guardarNovaFase(){
  //Este método irá guardar uma nova fase adicionada; é preciso ver a posição que irá estar guardada numa variável global a nivel do códdigo javascript de acordo com a propriedade sortable da lista;

}

var contadorTabs = 0;

function guardaNovoUtilizador(){
  var idUtilizador = $('#novoUtilizadorProcesso').val();
  if(idUtilizador>0){

    $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });

          var url = 'guardaNovoUtilizadorAoProcesso'; 
          
          //var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
  //        console.log(CSRF_TOKEN);


          var data = {
              idUtilizador: idUtilizador,
              idProcesso: ,
          };


          $.ajax({
              url: url,
              type: 'POST',
              data: data,
              dataType: 'JSON',
              success: function (data) {
                var novaEntradaTabela = '<li><a href="#vtab'+contadorTabs+'" data-toggle="tab">'+data.name+'</a></li>';
                var conteudoTabela = '<div role="tabpanel" class="tab-pane fade" id="vtab'+contadorTabs+'">';
                    conteudoTabela += '<div class="container-fluid well span6">';
                    conteudoTabela += '<div class="row-fluid">';
                    conteudoTabela += '<div class="col-sm-2">';
                    conteudoTabela += '<img src="