@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;
	}

	.white-space {
		white-space: pre-wrap !important;
	}
</style>
@include('layouts.headers.cards_prod')
@include('layouts.footers.auth')

<div class="container-fluid mt--7">
	@if (Session::has('mensagem-falha'))
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
		<span class="alert-icon"><i class="ni ni-notification-70"></i></span>
		<span class="alert-text"><strong>{{ Session::get('mensagem-falha') }}</strong>
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
	</div>
	@endif
	<div class="row">

		<div class="col-xl-9 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 form-inline">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text form-control-flush" id="basic-addon1">Total:</span>
									</div>
									<input class="form-control form-control-flush bg-white font-weight-bold text-center" form="formulario" name="valor_pagar" id="total_entrada" readonly>
								</div>
							</div>
						</div>
					</div>
					<div class="card bg-default mb-2 p-1 col-md-12">
						<div class="card-body p-2">
							<div class="row">
								<div class="col-auto mx-auto">
									<div class="icon icon-shape bg-white text-dark rounded-circle shadow">
										<span class="text-warning font-weight-bold">0</span>
									</div>
								</div>
								<div class="col-auto d-flex justify-content-center align-items-center">
									<h5 class="card-title text-uppercase text-muted mb-0 text-white">Compras:</h5>
								</div>
								<div class="col d-flex justify-content-center align-items-center">
									<select class="w-100 select_clientes form-control text-lg font-weight-bold" name="select_compras" form="formulario" id='select_compras'>
										<option></option>
										@foreach($compras->sortByDesc('id') as $compra)
										<option @if($compra->situacao_compra == "ENTRADA") class="bg-success text-dark" @else @endif value='{{$compra->id}}'>({{$compra->id}}) - {{$compra->fantasia_cliente}} / {{$compra->created_at}}</option>
										@endforeach
									</select>
								</div>
								<div class="col-auto text-center">
									<h4 class="title text-white">Legenda</h4>
									<span class="badge badge-dot mr-4">
										<i class="bg-success"></i>
										<span class="status text-white">Entrada de compra já realizada</span>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="card-body p-1 m-1 ">
					<div class="container border rounded p-0 ">
						<div class="container p-0">
							<div class="table-responsive table-sm">
								<table class="table align-items-center table-dark table-bordered table-sm m-0" id="tabela_entrada">
									<thead class="thead-dark">
										<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 style="width:100px" scope="col-1">Entrada</th>
											<th data-html2canvas-ignore="true" scope="col-1">Total</th>
											<th scope="col-1">Ação</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="col-xl-3 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" form="table_form" method="POST" action="{{route('entrada.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="" required>
										</div>
									</div>
								</div>
								<div class="form-group">
									<select class="w-100" id='select_produtos'>
										@foreach($produtos as $produto)
										<option></option>
										<option cod='{{$produto->id}}' produto='{{$produto->nome_produto}}' imagem="{{$produto->imagem_produto}}" preco="{{$produto->preco_produto_custo}}" 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-fat-add"></i></span>
								</div>
								<input type="number" id="quantidade" value="1" min="1" class="form-control" placeholder="Quantidade">
							</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>

						<div class="mx-auto text-center">
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<button type="button" class="btn btn-block btn-lg btn-success" onclick="grid()"> Adicionar</button>
								</div>
							</div>
							<div class="row mt-2">
							</div>
							<div id='dados_tabela'></div>
							<input type="hidden" id="rows" name="rows" class="form-control" value="0">
							<button type="submit" class="btn btn-block btn-lg btn-info"> Concluir</button>
						</div>
					</form>
				</div>
			</div>
		</div>

	</div>
</div>
<!-- Comentando o navbar horizontal data-html2canvas-ignore="true" -->

@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>
	$(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>
	function getTotal(column = 1) {
		let result = 0;
		let columns = $(".total");

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

		return result;
	}

	$('#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');

		$('#preco').val(0);
		$('#codigo').val(cod);
		$('#produto').val(produto);
		$('#preco').val(preco);
		$('#imagem').val(imagem);
		$('#unidade').val(unidade);
	});

	$('#select_compras').change(function() {
		var valor = this.value;
		$x = $('#rows').val();
		// let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		$.ajax({
			url: "data_compra/" + valor,
			method: 'get',
			dataType: 'json',
			data: {
				id: valor
			},
			timeout: 5000,
			success: function(retorno) {
				for (let x = 0; x < retorno.success.length; x++) {
					$('#tabela_entrada').find('tbody').append(
						'<tr class="text-center align-middle font-weight-bold campo-' + x + '">' +
						'<td scope="row">' +
						'<input type="text" name="codigo_entrada[]" form="formulario" value="' + retorno.success[x].id + '" class="form-control text-center bg-default form-control-flush campo-' + x + '" readonly>' +
						'</td>' +
						'<td scope="row">' +
						'<img class="avatar" width="100" height="100" src="../' + retorno.success[x].imagem + '">' +
						'</td>' +
						'<td class="white-space">' +
						'<span class="mb-0 text-sm">' + retorno.success[x].nome + '</span>' +
						'</td>' +
						'<td data-html2canvas-ignore="true">' +
						'<input type="text" name="preco_entrada[]" form="formulario"  value="' + retorno.success[x].preco + '" class="form-control text-center bg-default  campo-' + x + '" readonly>' +
						'</td>' +
						'<td>' +
						'<input type="text" name="quantidade_entrada[]" form="formulario"  value="' + retorno.success[x].quantidade + '" class="form-control text-center bg-default  campo-' + x + '" readonly>' +
						'</td>' +
						'<td data-html2canvas-ignore="true">' +
						'R$ <span  class="mb-0 text-sm total">' + retorno.success[x].total + '</span>' +
						'</td>' +
						'<td> ' +
						'<button type="button" class="btn btn-danger" onclick="deleteRow(' + x + ')"><i class="fas fa-times"></i></button>' +
						'</td>' +
						'</tr>'
					);
					$('#rows').val(++$x);
				}

				$('#total_entrada').val(getTotal().toFixed(2))
				// $('#valor_pagar').val(parseFloat(getTotal()).toFixed(2));

			},
			error: function() {
				alert('Algo deu errado');
			}
		});
	});

	function grid() {
		$x = $('#rows').val();
		codigo = $("#codigo").val();
		imagem = $("#imagem").val();
		nome = $("#produto").val();
		preco = $("#preco").val();
		unidade = $("#unidade").val();
		quantidade = $("#quantidade").val();
		total = preco * quantidade;

		$('#tabela_entrada').find('tbody').append(
			'<tr class="text-center align-middle font-weight-bold campo-' + $x + '">' +
			'<td scope="row">' +
			'<input type="text" name="codigo_entrada[]" form="formulario" value="' + codigo + '" class="form-control text-center bg-default form-control-flush campo-' + $x + '" readonly>' +
			'</td>' +
			'<td scope="row">' +
			'<img class="avatar" width="100" height="100" src="../' + imagem + '">' +
			'</td>' +
			'<td class="white-space">' +
			'<span class="mb-0 text-sm">' + nome + '</span>' +
			'</td>' +
			'<td data-html2canvas-ignore="true">' +
			'<input type="text" name="preco_entrada[]" form="formulario"  value="' + preco + '" class="form-control text-center bg-default  campo-' + $x + '" readonly>' +
			'</td>' +
			'<td>' +
			'<input type="text" name="quantidade_entrada[]" form="formulario"  value="' + quantidade + '" class="form-control text-center bg-default  campo-' + $x + '" readonly>' +
			'</td>' +
			'<td data-html2canvas-ignore="true">' +
			'R$ <span  class="mb-0 text-sm total">' + total + '</span>' +
			'</td>' +
			'<td> ' +
			'<button type="button" class="btn btn-danger" onclick="deleteRow(' + $x + ')"><i class="fas fa-times"></i></button>' +
			'</td>' +
			'</tr>'
		);

		$('#total_entrada').val(getTotal().toFixed(2))

		$('#rows').val(++$x);
	}

	function deleteRow(v) {
		$x = $('#rows').val();
		$('.campo-' + v).remove();
		getTotal();

		$('#total_entrada').val(parseFloat(getTotal()).toFixed(2));
		$x = $('#rows').val();
		$('#rows').val(--$x);
	}
</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)
		var fornecedor_id = $('#select_fornecedores').find(':selected').val();
		var fornecedor_nome = $('#select_fornecedores').find(':selected').text();

		console.log(fornecedor_id, fornecedor_nome);

		var modal = $(this)
		modal.find('.modal-body #option_fornecedor').val(fornecedor_id);
		modal.find('.modal-body #option_fornecedor').text(fornecedor_nome);
	});
</script>

@endpush