@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: 33%;
}
.espaceBotao{
    padding-left: 60px;
}

</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">
              <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 class="divider"></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 class="panel-footer right">  
              <div class="btn-group " role="group" >
                  <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-floppy-disk"></i>Guardar</button>
              </div>

            </div>

          
            <div class="divider"></div>

           <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>
                                  </ul>
                              </div>
                          </div>
                          <div class="panel-body">
                              <div class="tab-content">
                                  <div class="tab-pane fade in active" id="timeline">
                                      
                                      <div class="row">
                                        <div class="col-md-6">
                                          <h4 class="sub-header espaceTitulo">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>
                                          <h4 class="sub-header"></h4>
                                          <div class="btn-group espaceBotao" role="group" >
                                              <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i>Nova Fase</button>
                                          </div>
                                        </div>
                                       

                                        <div class="col-md-6 "> <!-- Botões de acção da timeline-->
                                           <div class="input-group espaceTitulo2">
                                              <!-- 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 class="cd-timeline-block">
                                  <div class="cd-timeline-img cd-verde is-hidden"></div> 
                                  <div class="cd-timeline-content">
                                    <h2>Titulo 1</h2>
                                    <p>Descrição de teste</p>
                                    <a href="#" class="cd-read-more">Ir para Fase</a>
                                    <span class="cd-date">Jan 14</span>
                                  </div> 
                                </div>

                                <div class="cd-timeline-block">
                                  <div class="cd-timeline-img cd-vermelho is-hidden"></div> 
                                  <div class="cd-timeline-content">
                                    <h2>Titulo 2</h2>
                                    <p>Descrição ABCDEFGHIJ de Teste</p>
                                    <a href="#" class="cd-read-more">Ir para Fase</a>
                                    <span class="cd-date">Jan 18</span>
                                  </div> 
                                </div> 

                                <div class="cd-timeline-block">
                                  <div class="cd-timeline-img cd-amarelo is-hidden"></div> 
                                  <div class="cd-timeline-content">
                                    <h2>Título 3</h2>
                                    <p>mque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
                                    <a href="#0" class="cd-read-more">Read more</a>
                                    <span class="cd-date">Jan 24</span>
                                  </div> 
                                </div>

                                <div class="cd-timeline-block">
                                  <div class="cd-timeline-img cd-amarelo is-hidden"></div> 
                                  <div class="cd-timeline-content">
                                    <h2>Título 3</h2>
                                    <p>mque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
                                    <a href="#0" class="cd-read-more">Read more</a>
                                    <span class="cd-date">Jan 24</span>
                                  </div> 
                                </div> 


                                <div class="cd-timeline-block">
                                  <div class="cd-timeline-img cd-roxo is-hidden"></div> 
                                  <div class="cd-timeline-content">
                                    <h2>Título 3</h2>
                                    <p>mque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
                                    <a href="#0" class="cd-read-more">Read more</a>
                                    <span class="cd-date">Jan 24</span>
                                  </div> 
                                </div> 


                                <div class="cd-timeline-block">
                                  <div class="cd-timeline-img cd-amarelo"></div> 
                                  <div class="cd-timeline-content">
                                    <h2>Título 3</h2>
                                    <p>mque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
                                    <a href="#0" class="cd-read-more">Read more</a>
                                    <span class="cd-date">Jan 24</span>
                                  </div> 
                                </div> 


                                <div class="cd-timeline-block">
                                  <div class="cd-timeline-img cd-amarelo"></div> 
                                  <div class="cd-timeline-content">
                                    <h2>Título 3</h2>
                                    <p>mque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
                                    <a href="#0" class="cd-read-more">Read more</a>
                                    <span class="cd-date">Jan 24</span>
                                  </div> 
                                </div> 


                                <div class="cd-timeline-block">
                                  <div class="cd-timeline-img cd-amarelo"></div> 
                                  <div class="cd-timeline-content">
                                    <h2>Título 3</h2>
                                    <p>mque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
                                    <a href="#0" class="cd-read-more">Read more</a>
                                    <span class="cd-date">Jan 24</span>
                                  </div> 
                                </div> 

                              </section> 

                      </div>
           
         
                                  <div class="tab-pane fade" id="ficheiros">
                                      <table id="mytable" class="table table-striped table-bordered dataTable">
                                          <thead id="headerTable">
                                              <tr>
                                                <th><input type="checkbox" name= "ficheirosbox" id="checkall" /></th>
                                                  <th class="sorting_asc"><a href="">Nome Ficheiro</a></th>
                                                  <th class="sorting_desc"><a href="">Descrição Fase</a></th>
                                                  <th class="sorting"><a href="">Data Lançamento</a></th>
                                                  <th class="sorting"><a href="">Utilizador Responsável</a></th>
                                                  <th class="sorting"><a href="">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">
                                                      <!-- flight section -->
                                                      <div class="bhoechie-tab-content active">
                                                          <center>
                                                            
                                                            <h2 style="margin-top: 0;color:#55518a">Exemplo de um Tab</h2>
                                                            <h3 style="margin-top: 0;color:#55518a">....</h3>
                                                          </center>
                                                      </div>
                                                      <!-- train section -->
                                                      <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>
                                          
                                                      <!-- 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>
                         
                  
                  </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 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>
  $(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,
    })
  })
</script>


<script>
$(window).on('scroll', function(){
  $('.cd-timeline-block').each(function(){
    if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
      console.log("Entrei");
      $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
    }

  });

});


</script>





<script>
$(document).ready(function(){

  
 $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
        e.preventDefault();
        $(this).siblings('a.active').removeClass("active");
        $(this).addClass("active");
        var index = $(this).index();
        $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
        $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
    });
   $('.valor').autoNumeric("init", {
        unSetOnSubmit: true,
        aSep: '.',
        aDec: ',', 
    });

$(".chose-users ").select2();

//alert("Selected value is: "+$(".leaderMultiSelctdropdown").select2("val"));

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


});




var Items = $("#SortMe li");
var ordem = $('#SortMe').children();

$('#SortMe').sortable({
     disabled: false,
     axis: 'y',
     forceHelperSize: true,
     start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('start_pos', start_pos);
        },
    update: function(event, ui) {
        var start_pos = ui.item.data('start_pos');
        var end_pos = ui.item.index();
        //alert(start_pos + ' - ' + end_pos);
        
        //console.log(Items);
        ordem = $(this).sortable('toArray').toString();
        //console.log(ordem);
        
/*
        if(start_pos>end_pos){

            var temp = Items[end_pos];
            Items[end_pos] = Items[start_pos];
            
            for (index = end_pos+1; index <= start_pos; ++index) {
                Items[index]=temp;
                temp = Items[index+1];
            }

           // Items[start_pos]=temp;

        }

        for (index = 0; index < Items.length; index++) {
            console.log(Items[index]);
        }
        */
    }
 }).disableSelection();



function getOrdem(){
    alert(ordem);
}

function getValor(){
  var valor = $('.entidades').select2("data")[0].text;
  var idEntidade = $('.entidades').select2("data")[0].id;
  
  alert("A entidade " + idEntidade + " foi seleccionada e tem nome " + valor);
}


  //alert("Selected value is: "+$(".chose-users").select2("val"));

function formatRepo (repo) {
    if (repo.loading) return repo.nome;

    var markup = '<div class="clearfix">' +
                    '<div class="col-sm-6">' + repo.text + '</div>' +
                    '<div class="col-sm-6">' + repo.descricaoConcelho + '</div>' +
                  '</div>';

    
    markup += '</div></div>';

    return markup;
  }

  function formatRepoSelection (repo) {
    return repo.text;
  }

</script>
@stop