@extends('layouts.app')
@section('title', 'Entrada Estoque')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<!-- Estilizando um componente do select2 que estava desajustando o layout -->
<style type="text/css">
	.select2-container .select2-selection--single {
		height: unset !important;
	}
</style>
@include('layouts.headers.cards_prod')
@include('layouts.footers.auth')
<!-- A consulta desta tabela deve envolver INNER JOIN por causa dos nomes da família, nome do grupo e subgrupo, todos vindos das respectivas chaves estrangeiras -->
<div class="container-fluid mt--7">
	<div class="row">
		<div class="col-xl-8 order-xl-2 order-sm-1">
			<div class="card bg-secondary shadow">
				<div class="card-header bg-white border-0">
					<div class="row align-items-center">
						<div class="col-md-8">
							<h3 class="mb-0">{{ __('Entrada de Produtos') }}</h3>
						</div>
						<div class="col-md-4">
							<h3 class="mb-0 text-center">Total da Entrada: <span id="total_entrada"></span></h3>
						</div>
					</div>
				</div>
				<div class="card-body p-1 m-1 " id="canvas_div_pdf">
					<div class="container border border-default rounded p-0 overflow-hidden">
						<table class="table table-sm table-bordered border-dark">
							<tr class="text-center align-items-center">
								<td class="p-3" rowspan="3">
									<img class="img-fluid my-auto" width="200" src="{{ asset('argon') }}/img/brand/{{auth()->user()->logo}}" alt="logo">
								</td>
								<td>
									<span>{{Str::words($representantes->nome_fantasia_usuario, 1, '')}} - {{$representantes->nome_municipio_usuario}}</span>
								</td>
								<td><span id='razao'> </span id="razao"> - <span id="cidade"></span></td>
							</tr>
							<tr class="text-center align-items-center">
								<td class="p-0 m-0">
									<h4 class="mx-auto">Telefone: {{$representantes->fone_usuario}}</h4>
									<h4 class="mx-auto">Email: {{auth()->user()->email}}</h4>
								</td>
								<td class="p-0 m-0">
									<h4 class="mx-auto">Telefone: <span id="telefone"></span></h4>
									<h4 class="mx-auto">Email: <span id="email"></span></h4>
								</td>
							</tr>
							<tr class="text-center align-items-center">
								<td class="p-0 m-0">
									<h4 class="mx-auto"> Usuário: {{auth()->user()->name}}</h4>
								</td>
								<td class="p-0 m-0">
									<h4 class="mx-auto"> CNPJ: <span id="cnpj"></span></h4>
								</td>
							</tr>
						</table>
						<div class="container p-0 overflow-hidden">
							<div class="table-responsive table-sm">
								<table class="table align-items-center table-bordered table-sm m-0" id="test">
									<thead class="thead-light">
										<tr class="text-center">
											<th style="width:100px" scope="col-1">Código</th>
											<th scope="col-1">Imagem</th>
											<th scope="col-1">Produto</th>
											<th data-html2canvas-ignore="true" scope="col-1">Preço</th>
											<th data-html2canvas-ignore="true" scope="col-1">total</th>
											<th style="width:100px" scope="col-1">Unidade</th>
											<th style="width:100px" scope="col-1">Entrada</th>
											<th scope="col-1">Inventário</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
									<tfoot class="">
										<tr>
											<td colspan="5" rowspan="2">Observação:</td>
											<td colspan="3">Autorizado:</td>
										<tr>
											<td colspan="3">Visto:</td>
										</tr>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 order-xl-2 order-sm-1">
			<div class="card bg-secondary shadow">
				<div class="card-header bg-white border-0">
					<div class="row align-items-center">
						<div class="col-md-12">
							<h3 class="mb-0">{{ __('Adicionar Produto') }}</h3>
						</div>
					</div>
				</div>
				<div class="card-body p-1 m-1">
					<form onsubmit="needToConfirm = false;" id="formulario" method="POST" action="{{route('entrada_reman.store')}}">
						{{ csrf_field() }}
						<div class="row">
							<div class="col-md-12 col-lg-12 col-sm-12">
								<div class="form-group">
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text" id="basic-addon1"><i class="fas fa-barcode"></i></span>
										</div>
										<input type="text" id="chave_nfe" name="chave_nfe" class="form-control" placeholder="Chave da Nota" value="">
									</div>
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-prepend">
												<span class="input-group-text" id="basic-addon1"><i class="fas fa-file-alt" style="width:14px"></i></span>
											</div>
											<input type="text" id="numero_nfe" name="numero_nfe" class="form-control" placeholder="Nº da Nota" value="">
										</div>
									</div>
								</div>
								<div class="form-group">
									<select class="w-100 select_clientes" name="fornecedor_entrada" id='select_fornecedores'>
										@foreach($fornecedores as $fornecedor)
										<option></option>
										<option cod2='{{$fornecedor->id}}' razao='{{Str::words($fornecedor->razao_cliente,2,"")}}' cnpj="{{$fornecedor->cnpj_cpf_cliente}}" email="{{$fornecedor->email_cliente}}" cidade="{{$fornecedor->cidade_cliente}}" telefone="{{$fornecedor->telefone_cliente}}" value="{{$fornecedor->cnpj_cpf_cliente}}"> {{$fornecedor->razao_cliente}}
										</option>
										@endforeach
									</select>
									<select class="w-100 select_clientes" id='select_produtos'>
										@foreach($produtos as $produto)
										<option></option>
										<option cod='{{$produto->id}}' produto='{{$produto->nome_produto}}' imagem="{{$produto->imagem_produto}}" @if($produto->preco_produto_oferta == 0)
											preco="{{$produto->preco_produto_atacado}}"
											@else
											preco="{{$produto->preco_produto_oferta}}"
											@endif
											unidade="{{$produto->unidade_produto}}"
											value="{{$produto->id}}"> ({{$produto->id}}) {{$produto->nome_produto}}
										</option>
										@endforeach
									</select>
								</div>
							</div>
						</div>

						<div class="form-group">
							<input type="hidden" id="imagem" class="form-control" placeholder="Imagem" disabled>
							<input type="hidden" id="desconto" class="form-control" value="1" min="1" max="30" disabled>
							<input type="hidden" id="unidade" class="form-control" disabled>

							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1"><i class="fas fa-key"></i></span>
								</div>
								<input type="text" id="codigo" class="form-control" placeholder="Codigo interno" value="" disabled>
							</div>

							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1"><i class="ni ni-box-2"></i></span>
								</div>
								<input type="text" id="produto" class="form-control" placeholder="Nome do Produto" value="" disabled>
							</div>

							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1"><i class="ni ni-money-coins"></i></span>
								</div>
								<input type="number" id="preco" class="form-control" placeholder="Preço do Produto" value="">
							</div>

							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text" id="basic-addon1"><i class="ni ni-fat-add"></i></span>
								</div>
								<input type="number" id="quantidade" value="1" min="1" class="form-control" placeholder="Quantidade">
							</div>
						</div>

						@include('php.modal-contas-pagar')
						<div class="mx-auto text-center">

							<div class="row">
								<div class="col-md-4 col-sm-4">
									<button type="button" class="btn btn-block btn-lg btn-success" onclick="grid()"> Adicionar</button>
								</div>
								<div class="col-md-4 col-sm-4">
									<button type="button" class="btn btn-block btn-lg btn-danger remove" data-html2canvas-ignore="true"> Excluir</button>
								</div>
								<div class="col-md-4 col-sm-4">
									<button type="button" class="btn btn-block btn-lg btn-warning" onclick="getPDF()" id="gerar_pdf"> Imprimir</button>
								</div>
							</div>

							<div class="row mt-2">
								<div class="col-md-12 col-sm-12">
									<button type="button" class="btn btn-block btn-lg btn-info" data-toggle="modal" data-target="#ModalContasPagar"> Adicionar forma de pagamento</button>
								</div>
							</div>

							<input type="hidden" id="rows" name="rows" class="form-control">
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@push('js')
<script src="../js/print/es6-promise.auto.min.js"></script>
<script src="../js/print/jspdf.min.js"></script>
<script src="../js/print/html2canvas.min.js"></script>
<script src="../js/print/html2pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="{{ asset('js/clientes_cadastrar.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/contas_pagar.js') }}"></script>
<script>
	$(document).ready(function() {
		function setImage(image) {
			if (!image.id) {
				return image.text;
			}
			var baseUrl = "../img/produtos_cadastrados";
			var $image = $(
				'<span><img width="50" src="' + baseUrl + '/img_' + image.element.value + '.jpg" /> ' + image.text + '</span>'
			);
			return $image;
		};

		$('#select_produtos').select2({
			templateResult: setImage,
			templateSelection: setImage,
			placeholder: 'Selecione um produto',
			allowClear: true,
			minimumInputLength: 2,
			language: {
				inputTooShort: function() {
					return "Coloque pelo menos 2 letras...";
				}
			}
		});

		$('#select_fornecedores').select2({
			placeholder: 'Selecione um fornecedor',
			allowClear: true
		});
	})
</script>
<script>
	$('#select_produtos').change(function() {
		var valor = this.value;
		var cod = $(this).find(':selected').attr('cod');
		var produto = $(this).find(':selected').attr('produto');
		var imagem = $(this).find(':selected').attr('imagem');
		var preco = $(this).find(':selected').attr('preco');
		var unidade = $(this).find(':selected').attr('unidade');

		document.getElementById('codigo').setAttribute("value", cod);
		document.getElementById('produto').setAttribute("value", produto);
		document.getElementById('preco').setAttribute("value", preco);
		document.getElementById('imagem').setAttribute("value", imagem);
		document.getElementById('unidade').setAttribute("value", unidade);
	});

	$('#select_fornecedores').change(function() {
		var valor = this.value;
		var razao = $(this).find(':selected').attr('razao');
		var email = $(this).find(':selected').attr('email');
		var cidade = $(this).find(':selected').attr('cidade');
		var telefone = $(this).find(':selected').attr('telefone');
		var cnpj = $(this).find(':selected').attr('cnpj');

		document.getElementById('razao').innerHTML = razao;
		document.getElementById('email').innerHTML = email;
		document.getElementById('cidade').innerHTML = cidade;
		document.getElementById('telefone').innerHTML = telefone;
		document.getElementById('cnpj').innerHTML = cnpj;
	});
</script>
<script>
	$v = 0;

	function grid() {
		codigo = document.getElementById("codigo").value;
		imagem = document.getElementById("imagem").value;
		produto = document.getElementById("produto").value;
		preco = document.getElementById("preco").value;
		unidade = document.getElementById("unidade").value;
		quantidade = document.getElementById("quantidade").value;
		total = preco * quantidade;

		$v = ++$v;

		dados = '<tr class="text-center align-middle font-weight-bold tr">' +
			'<td scope="row">' +
			'<input type="text" value="' + codigo + '" class="form-control text-center" readonly>' +
			'</td>' +
			'<td scope="row">' +
			'<img class="avatar" width="100" height="100" src="../' + imagem + '">' +
			'</td>' +
			'<td>' +
			'<span class="mb-0 text-sm">' + produto + '</span>' +
			'</td>' +
			'<td data-html2canvas-ignore="true">' +
			'<span  class="mb-0 text-sm"> R$' + preco + '</span>' +
			'</td>' +
			'<td data-html2canvas-ignore="true">' +
			'R$ <span  class="mb-0 text-sm total">' + total + '</span>' +
			'</td>' +
			'<td>' +
			unidade +
			'</td>' +
			'<td>' +
			'<input type="text"  value="' + quantidade + '" class="form-control text-center" readonly>' +
			'</td>' +
			'<td> <br>' +
			'___________' +
			'</td>' +
			'</tr>'

		campos = '<input type="hidden" name="codigo_entrada_' + $v + '" value="' + codigo + '" class="form-control text-center campo" readonly>' +
			'<input type="hidden" name="quantidade_entrada_' + $v + '" value="' + quantidade + '" class="form-control text-center campo" readonly>' +
			'<input type="hidden" name="preco_entrada_' + $v + '" value="' + preco + '" class="form-control text-center campo" readonly>';


		$('#test').find('tbody').append(dados);
		$('#formulario').find('.input-group').append(campos);

		document.getElementById("rows").setAttribute('value', $v);

		function getTotal(column = 1) {
			let result = 0;
			let columns = $(".total");

			columns.each(i => {
				result += parseFloat($(columns[i]).html());
			});

			return result;
		}
		document.getElementById('total_entrada').innerHTML = getTotal().toLocaleString('pt-BR', {
			style: 'currency',
			currency: 'BRL'
		});
		$('#valor_pagar').val(parseFloat(getTotal()).toFixed(2));

		$('.remove').on('click', function() {
			$('#test').find('.tr:last').remove();
			$('#formulario').find('.campo').remove();
			$v = "";
			document.getElementById("rows").setAttribute('value', $v);
			document.getElementById('total_entrada').innerHTML = 0.00;
			$('#valor_pagar').val(0.00);
		});


	}
</script>
<script>
	function getPDF() {
		var element = document.getElementById('canvas_div_pdf');
		var data = new Date();

		var dia = data.getDate(); // 1-31
		var mes = data.getMonth(); // 0-11 (zero=janeiro)

		var opt = {
			margin: 1,
			filename: 'Entrada_' + dia + '_' + (mes + 1) + '.pdf',
			image: {
				type: 'jpeg',
				quality: 0.98
			},
			html2canvas: {
				scale: 2,
				y: window.scrollY,
				logging: true
			},
			jsPDF: {
				unit: 'mm',
				format: 'a4',
				orientation: 'landscape'
			}
		};

		// New Promise-based usage:
		html2pdf().set(opt).from(element).save();
	};
</script>
<script>
	var needToConfirm = true;
	window.onbeforeunload = function() {
		if (needToConfirm) {
			return "Minha mensagem de confirmação.";
		}
	}
</script>
<script>
	$('#ModalContasPagar').on('show.bs.modal', function(event) {
		var button = $(event.relatedTarget)
		fornecedor_id = $('#select_fornecedores').find(':selected').val();
		fornecedor_nome = $('#select_fornecedores').find(':selected').text();

		var modal = $(this)
		modal.find('.modal-body #option_fornecedor').val(fornecedor_id);
		modal.find('.modal-body #option_fornecedor').text(fornecedor_nome);

	});
</script>

@endpush