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

	.slidecontainer {
		width: 100%;
	}

	.slider {
		-webkit-appearance: none;
		width: 100%;
		height: 15px;
		border-radius: 5px;
		background: #d3d3d3;
		outline: none;
		opacity: 0.7;
		-webkit-transition: .2s;
		transition: opacity .2s;
	}

	.slider:hover {
		opacity: 1;
	}

	.slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background: #4CAF50;
		cursor: pointer;
	}

	.slider::-moz-range-thumb {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background: #4CAF50;
		cursor: pointer;
	}
</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-12">
							<h3 class="mb-0">{{ __('Transferência de Produtos') }}</h3>
						</div>
					</div>
				</div>
				<div class="card-body p-1 m-1">
					<div class="container rounded p-0">
						<div class="container p-0">
							<div class="card bg-default mb-2 p-1 col-md-12">
								<div class="card-body p-2">

									<div id="row_os" class="row d-none">
										<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"><i class="fas fa-clipboard-list text-primary"></i></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">Ordem de Serviço:</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_os" form="formulario" id='select_os'>
												<option></option>
												@foreach($os->sortByDesc('id') as $os)
												<option class="text-dark" value='{{$os->id}}'>(OS: {{$os->id}}) - {{$os->nome_produto}}</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">Repasse de compra já realizada</span>
											</span>
										</div> -->
									</div>

									<div id="row_compra" 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"><i class="fas fa-clipboard-list text-primary"></i></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}}' loja='{{$compra->loja}}'>
														(Compra: {{$compra->id}}) {{$compra->fantasia_cliente}} >>> {{$compra->loja}} / {{$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">Repasse de compra já realizada</span>
											</span>
										</div>
									</div>
								</div>
							</div>
							<div class="table-responsive table-sm" id="canvas_div_pdf">
								<table class="table align-items-center table-lighter 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 class="d-none" style="width:100px" scope="col-1">Unidade</th>
											<th style="width:100px" scope="col-1">Transferir</th>
											<th>Ação</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 order-xl-4 order-sm-1">
			<form onsubmit="needToConfirm = false;" id="formulario" method="POST" action="{{route('transferencia_reman.store')}}">
				{{ csrf_field() }}
				<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">Transferência - Origem/Destino</h3>
							</div>
						</div>
					</div>
					<div class="card-body p-1 m-1">
						<div class="row">
							<div class="col-md-12 col-lg-12 col-sm-12">
								<div class="form-group">
									<label class="form-control-label"></label>
									<div class="input-group">
										<div class="btn-group btn-group-toggle text-center mx-auto" data-toggle="buttons">
											<label class="btn active">
												<input type="radio" id="repasse_radio" name="tipo_transferencia" autocomplete="off" value="Repasse" checked>
												<i class="fas fa-people-carry fa-3x"></i><br>Repasse
											</label>
											<!-- <label class="btn">
												<input type="radio" name="tipo_transferencia" autocomplete="off" value="Loja" disabled>
												<i class="fas fa-store-alt fa-2x"></i><br>Filial
											</label>
											<label class="btn">
												<input type="radio" name="tipo_transferencia" autocomplete="off" value="Deposito" disabled>
												<i class="fas fa-warehouse fa-2x"></i><br>Depositos
											</label> -->
											<label class="btn ">
												<input type="radio" id="garantia_radio" name="tipo_transferencia" autocomplete="off" value="Garantia">
												<i class="fas fa-toolbox fa-3x"></i><br>Garantia
											</label>
										</div>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-md-12 d-none">
										<label>Selecione uma origem</label>
										<div class="input-group">
											<select type="text" id="empresa_origem" name="empresa_origem" class="form-control" placeholder="Empresa Origem">
												<option disabled> Selecione uma empresa de origem</option>
												<!-- @foreach($lojas as $loja)
												<option value="{{$loja->id}}">{{$loja->nome_empresa}}</option>
												@endforeach -->
												<option value="{{auth()->user()->id_endereco_fk}}">Loja Atual</option>
											</select>
										</div>
									</div>
									<br>
									<div class="col-md-12">
										<label>Selecione um destino</label>
										<div class="input-group">
											<select type="text" id="empresa_destino" name="empresa_destino" class="form-control" placeholder="Empresa Destino">
												<option disabled> Selecione uma empresa de destino</option>
												<!-- @foreach($lojas as $loja)
												<option value="{{$loja->id}}">{{$loja->nome_empresa}}</option>
												@endforeach -->
												<option value="3">Reman - São José dos Campos</option>
												<option value="5">Prontax</option>
												<option value="2">Reman - Taubaté</option>
											</select>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<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">
						<div class="form-group">
							<label>Selecione um Produto</label>
							<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_varejo}}"
									@else
									preco="{{$produto->preco_produto_oferta}}"
									@endif
									unidade="{{$produto->unidade_produto}}"
									quantidade="{{$produto->quantidade_produtos}}"
									value="{{$produto->id}}"> ({{$produto->id}}) {{$produto->nome_produto}}
								</option>
								@endforeach
							</select>
						</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 d-none">
								<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 d-none">
								<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>

							<label>Quantidade</label>
							<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>

						<div class="mx-auto text-center">
							<div class="row mt-2">
								<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="submit" class="btn btn-block btn-lg btn-dark"> Transferir</button>
								</div>
								<div class="col-md-4 col-sm-4">
									<button type="button" onclick="getPDF()" class="btn btn-block btn-lg btn-danger"> PDF</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</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>

<!-- Change Compras -->
<script>
	$('#select_os').change(function() {

		var valor = this.value;
		$('#empresa_destino option[value="5"]').attr("selected", "selected");

		$x = $('#rows').val();
		$url = "{{route('entrada.data_os','__codigo__')}}".replace("__codigo__", valor)

		$.ajax({
			url: $url,
			method: 'get',
			dataType: 'json',
			data: {
				id: valor
			},
			timeout: 5000,
			success: function(retorno) {
				for (let x = 0; x < retorno.success.length; x++) {

					dados = '<tr class="text-center align-middle font-weight-bold campo-' + x + '">' +
						'<td scope="row">' +
						'<input type="number" name="codigo_transferencia[]" form="formulario" value="' + retorno.success[x].id + '" class="form-control text-center bg-white form-control-flush campo-' + x + '" readonly>' +
						'</td>' +
						'<td scope="row">' +
						'<img class="avatar" width="100" height="100" src="../' + retorno.success[x].imagem + '">' +
						'</td>' +
						'<td style=" white-space: pre-wrap;">' +
						'<span class="mb-0 text-sm">' + retorno.success[x].nome + '</span>' +
						'</td>' +
						'<td class="d-none">' +
						retorno.success[x].total +
						'</td>' +
						'<td>' +
						'<input type="number" name="quantidade_transferencia[]" form="formulario"  value="' + retorno.success[x].quantidade + '" class="form-control text-center bg-white form-control-flush campo-' + x + '" readonly>' +
						'</td>' +
						'<td>' +
						'<button type="button" class="btn btn-danger" data-html2canvas-ignore="true" onclick="deleteRow(' + x + ')"><i class="fas fa-times"></i></button>' +
						'</td>'
					'</tr>'

					$('#test').find('tbody').append(dados);
				}

			},
			error: function() {
				alert('Algo deu errado');
			}
		});
	});
</script>

<!-- Change Compras -->
<script>
	$('#select_compras').change(function() {

		var valor = this.value;
		var loja = $(this).find(':selected').attr('loja');

		if (loja == 'SJC') {
			$('#empresa_destino option[value="3"]').attr("selected", "selected");
		} else if (loja == 'Prontax') {
			$('#empresa_destino option[value="5"]').attr("selected", "selected");
		} else if (loja == 'Reman') {
			$('#empresa_destino option[value="2"]').attr("selected", "selected");
		}

		$x = $('#rows').val();
		$url = "{{route('entrada.data_compra','__codigo__')}}".replace("__codigo__", valor)

		// let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

		$.ajax({
			url: $url,
			method: 'get',
			dataType: 'json',
			data: {
				id: valor,
				loja: loja
			},
			timeout: 5000,
			success: function(retorno) {
				for (let x = 0; x < retorno.success.length; x++) {

					dados = '<tr class="text-center align-middle font-weight-bold campo-' + x + '">' +
						'<td scope="row">' +
						'<input type="number" name="codigo_transferencia[]" form="formulario" value="' + retorno.success[x].id + '" class="form-control text-center bg-white form-control-flush campo-' + x + '" readonly>' +
						'</td>' +
						'<td scope="row">' +
						'<img class="avatar" width="100" height="100" src="../' + retorno.success[x].imagem + '">' +
						'</td>' +
						'<td style=" white-space: pre-wrap;">' +
						'<span class="mb-0 text-sm">' + retorno.success[x].nome + '</span>' +
						'</td>' +
						'<td class="d-none">' +
						retorno.success[x].total +
						'</td>' +
						'<td>' +
						'<input type="number" name="quantidade_transferencia[]" form="formulario"  value="' + retorno.success[x].quantidade + '" class="form-control text-center bg-white form-control-flush campo-' + x + '" readonly>' +
						'</td>' +
						'<td>' +
						'<button type="button" class="btn btn-danger" data-html2canvas-ignore="true" onclick="deleteRow(' + x + ')"><i class="fas fa-times"></i></button>' +
						'</td>'
					'</tr>'

					$('#test').find('tbody').append(dados);
				}

			},
			error: function() {
				alert('Algo deu errado');
			}
		});
	});
</script>

<!-- Select2 -->
<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>

<!-- Select change produtos -->
<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 unidade = $(this).find(':selected').attr('unidade');
		var quantidade = $(this).find(':selected').attr('quantidade');

		document.getElementById('codigo').setAttribute("value", cod);
		document.getElementById('produto').setAttribute("value", produto);
		document.getElementById('imagem').setAttribute("value", imagem);
		document.getElementById('unidade').setAttribute("value", unidade);
		// document.getElementById('quantidade').setAttribute("max", quantidade);

	});
</script>

<!-- Adicionar produto a grid -->
<script>
	function grid() {
		codigo = document.getElementById("codigo").value;
		imagem = document.getElementById("imagem").value;
		produto = document.getElementById("produto").value;
		unidade = document.getElementById("unidade").value;
		quantidade = document.getElementById("quantidade").value;

		$v = parseInt($("#rows").val());
		$v++

		dados = '<tr class="text-center align-middle font-weight-bold campo-' + $v + '">' +
			'<td scope="row">' +
			'<input type="number" name="codigo_transferencia[]" form="formulario" value="' + codigo + '" class="form-control text-center bg-default form-control-flush campo-' + $v + '" readonly>' +
			'</td>' +
			'<td scope="row">' +
			'<img class="avatar" width="100" height="100" src="../' + imagem + '">' +
			'</td>' +
			'<td style=" white-space: pre-wrap;">' +
			'<span class="mb-0 text-sm">' + produto + '</span>' +
			'</td>' +
			'<td class="d-none">' +
			unidade +
			'</td>' +
			'<td>' +
			'<input type="number" name="quantidade_transferencia[]" form="formulario"  value="' + quantidade + '" class="form-control text-center bg-default form-control-flush campo-' + $v + '" readonly>' +
			'</td>' +
			'<td>' +
			'<button type="button" class="btn btn-danger" onclick="deleteRow(' + $v + ')"><i class="fas fa-times"></i></button>' +
			'</td>'
		'</tr>'

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

		$('#test').find('tbody').append(dados);

		$('#formulario').find('.input-produtos').append(campos);

		$("#rows").val($v);

	}

	function deleteRow(v) {
		$('.campo-' + v).remove();
	}
</script>

<!-- Gerar PDF -->
<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: 'portrait'
			}
		};

		// New Promise-based usage:
		html2pdf().set(opt).from(element).save();
	};
</script>

<!-- Precisa confirmar para sair -->
<script>
	var needToConfirm = true;
	window.onbeforeunload = function() {
		if (needToConfirm) {
			return "Minha mensagem de confirmação.";
		}
	}
</script>

<!--Select Garantia -->

<script>
	$(document).on('change', ':radio[id=garantia_radio]', function() {
		$("#row_os").removeClass("d-none");
		$("#row_compra").addClass("d-none");
	});

	$(document).on('change', ':radio[id=repasse_radio]', function() {
		$("#row_compra").removeClass("d-none");
		$("#row_os").addClass("d-none");
	});
</script>

@endpush