@php 	
$sessao = json_decode($fluxo[0]['fluxo'], true);
@endphp

<div class="modal fade" id="variaveisGlobais" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" style="padding:20px !important;">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:6 !important;"></button>
				<h4 class="modal-title">Variáveis Globais</h4>
			</div>
				<div class="modal-body">
					Variáveis globais para serem utilizadas no fluxo, crie quantas quiser.
					<br><br>
					
					<input type="hidden" name="idFlux" value="{{ $idFlux }}" />

					<div class="row" id="variaveis_globaisContent">

						<input type="hidden" name="id" value="" />

						<div class="col-12 mb-2 text-center">
							<a  class="apiOption" onclick="add()" id="add_variaveis">Adicionar +</a>
						</div>

						<div id="contentGlobais">
							@if(!empty($variaveis_globais))
								@php $indice = 0; @endphp
								@foreach($variaveis_globais as $val)
									<div class="col-md-12 variavel_{{ $indice }} grupo-variavel">

										<div class="col-xs-12 col-md-6 mt-20">
											<label for="varivel">Variável:</label>
											<input type="text" @if(!empty($val['block'])) disabled="disabled" @endif onkeyup="transform(this)" value="{{ $val['variavel'] }}" name="variavel_{{ $indice }}" id="variavel_{{ $indice }}" placeholder="Nome da variável" class="form-control">
										</div>
										<div class="col-xs-12 col-md-5 mt-20">
											<label for="valor">Valor:</label>
											<input type="text" @if(!empty($val['block'])) disabled="disabled" @endif  name="valor_{{ $indice }}" value="{{ $val['valor'] }}" id="valor_{{ $indice }}" placeholder="Valor da variável" class="form-control">
										</div>

										@if(empty($val['block']))
										<div class="col-md-1 text-center  btn btn-sm btn-danger" onclick="remove('variavel_{{ $indice }}')" style="margin-top:49px; " >
											<i class="fas fa-trash"></i>
										</div>
										@endif
									</div>

									@php $indice++; @endphp
								@endforeach
							@else
								<div class="col-md-12 variavel_0 grupo-variavel">
									<div class="col-xs-12 col-md-6 mt-20">
										<label for="varivel">Variável:</label>
										<input type="text" onkeyup="transform(this)" name="variavel_0" id="variavel_0" placeholder="Nome da variável" class="form-control">
									</div>
									<div class="col-xs-12 col-md-5 mt-20">
										<label for="valor">Valor:</label>
										<input type="text"  name="valor_0" id="valor_0" placeholder="Valor da variável" class="form-control">
									</div>

									<div class="col-md-1 text-center  btn btn-sm btn-danger" onclick="remove('variavel_0')" style="margin-top:49px; " >
										<i class="fas fa-trash"></i>
									</div>
								</div>
							@endif

						</div>

						@if(!empty($variaveis_globais_obrigatorias))
								<div class="col-md-12">
									<hr></hr>
									<p><b>Variáveis de Whatsapp</b></p>
								</div>
								@foreach($variaveis_globais_obrigatorias as $obr)
									<div class="col-md-12" style="margin-bottom:10px;">
										<div class="col-xs-12 col-md-6 mt-5">
											<label for="varivel">Variável:</label>
											<input type="text" disabled="disabled" value="{{ $obr['variavel'] }}" placeholder="Nome da variável" class="form-control">
										</div>
										<div class="col-xs-12 col-md-6 mt-5">
											<label for="valor">Valor:</label>
											<input type="text"  disabled="disabled"  value="{{ $obr['valor'] }}" placeholder="Valor da variável" class="form-control">
										</div>
									</div>
								@endforeach
							@endif

					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
					<button type="button" onclick="submitVariaveis()" class="btn blue"  ><i class="fa fa-check"></i> Salvar</button>
				</div>
		</div>
	</div>
</div>

<script>
	function add(){
		let counter = $(".grupo-variavel").length;
		$("#variaveis_globaisContent #contentGlobais").append(`
			<div class="col-md-12 variavel_${counter} grupo-variavel">
				
				<div class="col-xs-12 col-md-6 mt-20">
					<label for="varivel">Variável:</label>
					<input type="text" name="variavel_${counter}" onkeyup="transform(this)" id="variavel_${counter}" placeholder="Nome da variável" class="form-control">
				</div>
				<div class="col-xs-12 col-md-5 mt-20">
					<label for="valor">Valor:</label>
					<input type="text"  name="valor_${counter}" id="valor_${counter}" placeholder="Valor da variável" class="form-control">
				</div>

		
				<div class="col-md-1 text-center btn btn-sm btn-danger" onclick="remove('variavel_${counter}')"  style="margin-top:49px; " >
					<i class="fas fa-trash"></i>
				</div>
			</div>
		`);
	}

	function submitVariaveis(){

		let counter = $(".grupo-variavel").length;
		let dados = [];	
		let id = "{{ Request::segment(2) }}";
		for(let i = 0; i <= counter; i++){

			if( $("#variavel_"+i).val() == '' && $("#valor_"+i).val() == ''){
				alert('Você precisa preencher todos as variaveis e valores corretamente, sem nenhum campo vazio.');
				break;
				return;
			}

			dados.push({
				variavel: $("#variavel_"+i).val(),
				valor:  $("#valor_"+i).val()
			});
		}

		$.ajax({
			type:'POST',
			url:'/fluxo_de_bot/savevariaveis',
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			data:{
				dados: dados,
				id: id
			},
			success:function(data){
				$("#variaveisGlobais").modal('hide');
			},
			error: function(data){
				alert('Estamos com instabilidades agora, tente novamente mais tarde.');
				console.log(data.error);
			}
		});
	}
	
	function remove(indice){
		$("."+indice).remove();
	}

	function transform(elemento)
	{	
		let v  = $(elemento).val().replace(" ", '').toLowerCase();
		$(elemento).val(v);
	}
</script>