@extends('template.template')

@section('scriptsHeader')

<link rel="stylesheet" href="{!! asset("libs/css/select2.css")!!}" media="screen">
<meta name="csrf-token" content="{{ csrf_token() }}" />


<style>
.required {
    background-color: green;
}
}


</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 id="alertaGravacao">
      </div>     
      <div class="panel-heading">Novo Tipo de Processo</div>
      <div class="panel-body">
        <form class="editForm">
          <div class="row">
            <div class="col-md-12">
              <h4 class="sub-header">Dados gerais</h4>
                    <div class="form-group">
                              <label>Nome</label>
                              <input id="descricaoTipoProcesso" name="descricaoTipoProcesso" class="form-control input-sm">
                              <!--<p class="help-block">Example block-level help text here.</p>-->
                          </div>
              <div class="form-group">
                              <label>Descrição</label>
                              <textarea rows="3" id="observacoes" name="observacoes" class="form-control input-sm"></textarea>
                          </div>
                          <div class="divider"></div>
                  <h4 class="sub-header">Fases do processo <a class="btn btn-success pull-right" onclick="novaTarefa();"> <span class="glyphicon glyphicon-plus"></span></a></h4>
              <table class="table table-responsive" id="diagnosis_list">
                  <thead>
                      <tr>
                        <th>&nbsp;</th>
                        <th>#</th>
                        <th>Fase</th>
                        <th>Observações</th>
                        <th>Nº de Dias Após Fase Anterior</th>
                        <th>&nbsp;</th>
                      </tr>
                  </thead>
                  <tbody id="tabelaOrdem">
                      <tr>
                        <td><a class='danger'><span class="glyphicon glyphicon-move"></span></a></td>
                        <td class='priority'>1</td>
                        <td><input id="fase" name="fase" class="form-control input-sm fase"></td>
                        <td><input name="observacoes" class="form-control input-sm observacoes"></td>
                        <td><input name= "ndias" class="form-control input-sm ndias" disabled="disabled"></td>
                        <td><a class='btn-delete'><span class="glyphicon glyphicon-trash"></span></a></td>
                      </tr>
                      <tr>
                        <td><a class='danger'><span class="glyphicon glyphicon-move"></span></a></td>
                        <td class='priority'>2</td>
                        <td><input name="fase" class="form-control input-sm fase"></td>
                        <td><input name="observacoes"class="form-control input-sm observacoes"></td>
                        <td><input name= "ndias" class="form-control input-sm ndias"></td>
                        <td><a class='btn-delete'><span class="glyphicon glyphicon-trash"></span></a></td>
                      </tr>
                      <tr>
                        <td><a class='danger'><span class="glyphicon glyphicon-move"></span></a></td>
                        <td class='priority'>3</td>
                        <td><input name="fase" class="form-control input-sm fase"></td>
                        <td><input name="observacoes "class="form-control input-sm observacoes"></td>
                        <td><input name= "ndias" class="form-control input-sm ndias"></td>
                        <td><a class='btn-delete'><span class="glyphicon glyphicon-trash"></span></a></td>
                      </tr>
                      <tr>
                        <td><a class='danger'><span class="glyphicon glyphicon-move"></span></a></td>
                        <td class='priority'>4</td>
                        <td><input name="fase" class="form-control input-sm fase"></td>
                        <td><input name="observacoes" class="form-control input-sm observacoes"></td>
                        <td><input name= "ndias" class="form-control input-sm ndias ndias"></td>
                        <td><a class='btn-delete'><span class="glyphicon glyphicon-trash"></span></a></td>
                      </tr>
                      <tr>
                        <td><a class='danger'><span class="glyphicon glyphicon-move"></span></a></td>
                        <td class='priority'>5</td>
                        <td><input id="fase" name="fase" class="form-control input-sm fase"></td>
                        <td><input name="observacoes" class="form-control input-sm observacoes"></td>
                        <td><input name= "ndias" class="form-control input-sm ndias"></td>
                        <td><a class='btn-delete'><span class="glyphicon glyphicon-trash"></span></a></td>
                      </tr>
                  </tbody>
              </table>
            </div>
            </div>
          </form>
      </div>
      <div class="panel-footer right">
        <!-- <a class="btn btn-default" onclick="getOrdem();"> Testa Ordem</a> -->
        <a class="btn btn-success btn-sm" onclick="guardaTipoProcesso();"> Guardar</a>  <!-- Cancelar button-->
      </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>


<!-- Drag & Drop Table -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>

var ordem = $('#diagnosis_list tbody').children();


  $(document).ready(function() {
    //Helper function to keep table row from collapsing when being sorted
    var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index)
        {
          $(this).width($originals.eq(index).width())
        });
        return $helper;
    };

    //Make diagnosis table sortable
    $("#diagnosis_list tbody").sortable({
        helper: fixHelperModified,
        stop: function(event,ui) {
                var start_pos = ui.item.data('start_pos');
                var end_pos = ui.item.data('end_pos');
                //alert("Start:"+start_pos+"  END: " + end_pos);
                renumber_table('#diagnosis_list');
                ///$("#diagnosis_list tbody tr:first td:eq(4) input").val("Estou aquiii"); ->TA TOP;
                if(end_pos==0 && start_pos!=0){
                    $("#diagnosis_list tbody tr:first td:eq(4) input").val("");
                    $("#diagnosis_list tbody tr:first td:eq(4) input").prop('disabled', true);
                    $("#diagnosis_list tbody tr:eq(1) td:eq(4) input").prop('disabled', false);  
                }
                if(start_pos==0 && end_pos!=0){
                   $("#diagnosis_list tbody tr:first td:eq(4) input").val("");
                   $("#diagnosis_list tbody tr:first td:eq(4) input").prop('disabled', true);
                   $("#diagnosis_list tbody tr:eq("+end_pos+") td:eq(4) input").prop('disabled', false);
                }
                
                //find('.ndias').prop("disabled",true);
                //$(".tabelaOrdem").children("tr:eq(1)").children("td:eq(2)").find('.ndias').prop("disabled",true);
              },
        start: function(event, ui) {
              var start_pos = ui.item.index();
              ui.item.data('start_pos', start_pos);
        },
        update: function(event, ui) {
        var end_pos = ui.item.index();
        ui.item.data('end_pos', end_pos);
        ordem = $(this).sortable('toArray').toString();
        
        
          //ui.attr("disabled");
          //$(".123")..find('.chkDelete').prop("disabled",true);
          
          //$("tr:eq(0) > td:eq(0)").find("input").val("Essss");
          //$("tr:first > td[name^=ndias]").attr('disabled', true);
          //$("tr:eq(1) td:eq(2)").attr('disabled', false);
        
        
        }


    }).disableSelection();

    //Delete button in table rows
    $('table').on('click','.btn-delete',function() {
        tableID = '#' + $(this).closest('table').attr('id');
        r = confirm('Delete this item?');
        if(r) {
            $(this).closest('tr').remove();
            renumber_table(tableID);
            $("#diagnosis_list tbody tr:first td:eq(4) input").val("");
            $("#diagnosis_list tbody tr:first td:eq(4) input").prop('disabled', true);

            }
    });
    //Coloca os inputs seleccionaveis
    $("#diagnosis_list input").click(function() { $(this).focus(); });

    $('[name="ndias"]').keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) ||
             // Allow: Ctrl+C
            (e.keyCode == 67 && e.ctrlKey === true) ||
             // Allow: Ctrl+X
            (e.keyCode == 88 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });



});

//Renumber table rows
function renumber_table(tableID) {
    $(tableID + " tr").each(function() {
        count = $(this).parent().children().index($(this)) + 1;
        $(this).find('.priority').html(count);
    });
}

function novaTarefa(){

  var numLinhas = $('#tabelaOrdem tr').length;
  
    $('#diagnosis_list > tbody:last-child').append('<tr><td><a class="danger"><span class="glyphicon glyphicon-move"></span></a></td><td class="priority">'+(numLinhas+1)+'</td><td><input id="fase" name="fase" class="form-control input-sm fase"></td><td><input name="observacoes" class="form-control input-sm observacoes"></td><td><input name= "ndias" class="form-control input-sm ndias"></td><td><a class="btn-delete"><span class="glyphicon glyphicon-trash"></span></a></td></tr>');
    if(numLinhas==0){
      $("#diagnosis_list tbody tr:first td:eq(4) input").val("");
      $("#diagnosis_list tbody tr:first td:eq(4) input").prop('disabled', true);
  }
 
}



</script>






<script>
$(document).ready(function(){
  //$("#alertaGravacao").hide();

   $('.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 guardaTipoProcesso(){

    //Campos iniciais:
    var descricaoTipoProcesso = $('[name="descricaoTipoProcesso"]').val();

    console.log(descricaoTipoProcesso);

    var observacoesProcesso = $('[name="observacoes"]').val();
    
    console.log(observacoesProcesso);

    //Construir um array com informação das fases ordenadas:


    //Construir array de fases, em que fase terá :
        //- descricaoFase 
        //- observacoes
        //- posicao 
        //- numDiasAposFaseAnterior
    
    //Percorrer a lista de itens:
    var resultado = "";
    var ordemVal = 0;
    var infoFases = [];

    $("#diagnosis_list tbody tr").each(function(){
        var descricaoFase = $(this).find('td .fase').val();
        var observacoes = $(this).find('td .observacoes').val();
        var posiciao = $(this).find('td .priority').text();
        var numDiasAposFaseAnterior = $(this).find('td .ndias').val();
        //resultado += "Posição: " + ordemVal++ + " - Descricão Fase: " + descricaoFase + " - Observações: " + observacoes + " - Dias Após: "  + numDiasAposFaseAnterior + "  ;\n";   
        infoFases[ordemVal++] = {  'descricaoFase': descricaoFase,
                                     'observacoesFase': observacoes,
                                     'numDiasAposFaseAnterior': numDiasAposFaseAnterior
                                   };
    });

    if(validateInfoTipoProcesso(descricaoTipoProcesso,observacoesProcesso,infoFases) == true){
      //Passou validação, guardar informação:
      //alert("Está tudo OK....");
      $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });

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


        var data = {
            descricaoTipoProcesso: descricaoTipoProcesso,
            observacoesProcesso: observacoesProcesso,
            infoFases: infoFases,
        };


        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            dataType: 'JSON',
            success: function (data) {
                console.log('OK...');
                $('#alertaGravacao').append('<div id="alertdiv" class="alert alert-success"><a class="close" data-dismiss="alert">×</a><span>Tipo Processo gravado com sucesso</span></div>');
                //$("#btnActivarClie"+idUtilizador).hide();
            },
            error:function(data){
                console.log('Not OK...');
                $('#alertaGravacao').append('<div id="alertdiv" class="alert alert-danger"><a class="close" data-dismiss="alert">×</a><span>Tipo Processo não foi gravado com sucesso</span></div>');
            }
        });



    }
    else {
      //Fazer display de mensagem erro se for necessário:
      alert("Ups, falta qualquer coisa...");
    }

  }


function validateInfoTipoProcesso(descricaoTipoProcesso, observacoesProcesso, infoFases){
  var erros = 0;

  if(descricaoTipoProcesso.length == 0){
      $('[name="descricaoTipoProcesso"]').addClass(" required ");
      erros++;
  } else {
      $('[name="descricaoTipoProcesso"]').removeClass(" required ");
  }

  if(observacoesProcesso.length==0) {
      $('[name="observacoes"]').addClass(" required ");
      erros++;
  }
  else {
      $('[name="observacoes"]').removeClass(" required ");
  }
  var contadorFase = 1;

  infoFases.forEach( function (faseIndividual) {
    var descricaoFase = faseIndividual.descricaoFase;
    var observacoes = faseIndividual.observacoesFase;
    var numDiasAposFaseAnterior = faseIndividual.numDiasAposFaseAnterior;
    if(contadorFase==1){
      if(descricaoFase.length==0){
        $("#diagnosis_list tbody tr:first td:eq(2) input").addClass(" required ");
        erros++;
      }
      else {
        $("#diagnosis_list tbody tr:first td:eq(2) input").removeClass(" required ");
      }
      if(observacoes.length==0){
        $("#diagnosis_list tbody tr:first td:eq(3) input").addClass(" required ");
        erros++;
      }
      else {
        $("#diagnosis_list tbody tr:first td:eq(3) input").removeClass(" required ");
      }
      contadorFase++;
    }
    else {
      if(descricaoFase.length==0){
        $("#diagnosis_list tbody tr:eq("+(contadorFase-1)+") td:eq(2) input").addClass(" required ");
        erros++;
      }
      else {
        $("#diagnosis_list tbody tr:eq("+(contadorFase-1)+") td:eq(2) input").removeClass(" required ");
      }
      if(observacoes.length==0){
        $("#diagnosis_list tbody tr:eq("+(contadorFase-1)+") td:eq(3) input").addClass(" required ");
        erros++;
      }
      else {
        $("#diagnosis_list tbody tr:eq("+(contadorFase-1)+") td:eq(3) input").removeClass(" required ");
      }
      if(numDiasAposFaseAnterior.length==0 ){
        $("#diagnosis_list tbody tr:eq("+(contadorFase-1)+") td:eq(4) input").addClass(" required ");
        erros++;
      }
      else {
        $("#diagnosis_list tbody tr:eq("+(contadorFase-1)+") td:eq(4) input").removeClass(" required ");
      }
      contadorFase++;
    }

    //End Foreach
  });


  //Verificação dos erros:
  if(erros!=0){
    //alert("Erros != 0");
      return false;
  } else {
    //alert("Erros == 0 OK ;)");
      return true;
  }


}


function isNumber (o) {
  return ! isNaN (o-0) && o !== null && o !== "" && o !== false;
}

function getOrdem(){
  var resultado = "";
  var ordemVal = 0;
  var infoFases = [];

    //Construir array de fases, em que fase terá :
        //- descricaoFase 
        //- observacoes
        //- posicao 
        //- numDiasAposFaseAnterior
    //Iterar sobre as tr;
    $("#diagnosis_list tbody tr").each(function(){
        var descricaoFase = $(this).find('td .fase').val();
        var observacoes = $(this).find('td .observacoes').val();
        var posiciao = $(this).find('td .priority').text();
        var numDiasAposFaseAnterior = $(this).find('td .ndias').val();
        //resultado += "Posição: " + ordemVal++ + " - Descricão Fase: " + descricaoFase + " - Observações: " + observacoes + " - Dias Após: "  + numDiasAposFaseAnterior + "  ;\n";   
        infoFases[ordemVal++] = {  'descricaoFase': descricaoFase,
                                     'observacoesFase': observacoes,
                                     'numDiasAposFaseAnterior': numDiasAposFaseAnterior
                                   };
    });
    console.log(infoFases);
    //alert(infoTarefas.toString());
}

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