@extends('layouts.app')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('css/preloader.css')}}">

<div id="preloaders" class="preloader"></div>
@section('title', 'Estoque')
@section('content')
@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-12 order-xl-1">
			<div class="card bg-secondary shadow">
				<div class="card-header bg-white border-0">
					<div class="row align-items-center">
						<div class="col-8">
							<h3 class="mb-0">{{ __('Listagem do estoque') }}</h3>
						</div>
						 @can('visualizar-administrativo')
						<div class="col-4 text-right">
							<button class="btn btn-sm btn-inventario btn-primary" data-toggle="modal" data-target="#InventarioModal">Inventário</button>
						</div>
						@endcan
						@can('Adicionar-produtos-reman')
						<div class="col-4 text-right">
							<a href="{{route('estoque.baixo')}}" class="btn btn-sm btn-danger">{{ __('Estoque Baixo') }}</a>
							<a href="{{route('produtos.cadastrar')}}" class="btn btn-sm btn-primary">{{ __('Adicionar Produto') }}</a>
						</div>
						@endcan
					</div>
				</div>
				<div class="card-body">
					<div class="table-responsive ">
						<table class="table table-flush table-bordered table-dark w-100" id="table">
							<thead class="thead-dark">
								<tr class="text-center font-weight-bold">
									<th>#</th>
									<th>Codigo</th>
									<th>Imagem</th>
									<th>Nome</th>
									<th>Marca</th>
									<th>Quantidade</th>
									<th>Valor</th>
									<th>Posição</th>
									<th>Ações</th>
								</tr>
							</thead>
							<tfoot>
								<tr class="text-center">
									<td colspan="7"></td>
									<td colspan="1">
										<h2 class="text-white">Total em estoque: </h2>
									</td>
									<td colspan="1">
										<h2 class="text-success">R$ {{number_format($total, 2 ,',','.')}}</h2>
									</td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="EstoqueModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel"><strong>Estoque</strong></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" style="background-color:#f7fafc">
				<form class="atualizar_estoque" method="post" enctype="multipart/form-data" action="#">
					<!-- Passando o Token -->
					{{csrf_field()}}
					<div class="row">
						<div class="col-md-12 col-lg-12 col-sm-12">
							<div class="form-group">
								<label class="form-control-label">Codigo Barra</label>
								<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 name="sku_estoque" id="sku" type="text" class="form-control" placeholder="mtr-desl-gatter" aria-label="" aria-describedby="basic-addon1" value="">
									<div class="input-group-append">
										<button class="btn btn-info" id="btn-copiar" type="button"><i class="fas fa-clipboard"></i> copiar</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-4 col-sm-12">
							<div class="form-group">
								<label class="form-control-label">Máxima</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text" id="basic-addon1"><i class="fas fa-arrow-up text-success "></i></span>
									</div>
									<input name="quantidade_maxima_produtos" id="maxima" type="number" class="form-control" placeholder="" value="" aria-label="" aria-describedby="basic-addon1">
								</div>
							</div>
						</div>
						<div class="col-md-4 col-sm-12">
							<div class="form-group">
								<label class="form-control-label">Atual</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text" id="basic-addon1"><i class="fas fa-arrow-right text-info "></i></span>
									</div>
									<input name="quantidade_produtos" id="atual" type="number" class="form-control" placeholder="" value="" aria-label="" aria-describedby="basic-addon1">
								</div>
							</div>
						</div>
						<div class="col-md-4 col-sm-12">
							<div class="form-group">
								<label class="form-control-label">Mínima</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text" id="basic-addon1"><i class="fas fa-arrow-down text-danger "></i></span>
									</div>
									<input name="quantidade_minima_produtos" id="minima" type="number" class="form-control" placeholder="" value="" aria-label="" aria-describedby="basic-addon1">
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-lg-6 col-sm-12">
							<div class="form-group">
								<label class="form-control-label">Estante</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text" id="basic-addon1"><i class="fas fa-sort-alpha-up fa-2x text-primary"></i></span>
									</div>
									<input name="estante_estoque" id="estante" type="text" maxlength="1" class="form-control" placeholder="" value="" aria-label="" aria-describedby="basic-addon1">
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-6 col-sm-12">
							<div class="form-group">
								<label class="form-control-label">Prateleira</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text" id="basic-addon1"><i class="fas fa-sort-numeric-down fa-2x text-primary"></i></span>
									</div>
									<input name="prateleira_estoque" id="prateleira" type="number" class="form-control" placeholder="" value="" aria-label="" aria-describedby="basic-addon1">
								</div>
							</div>
						</div>
					</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
				<button type="submit" class="btn btn-success">Salvar</button>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="InventarioModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg" style="max-width: 80% !important;" role="document">
		<div class="modal-content">
			<style>
				.white-space {
					white-space: pre-wrap !important;
				}
			</style>
			<div class="modal-header">
				<h5 class="modal-title font-weight-bold" id="cod_pedido"></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body p-1" style="background-color:#f7fafc">
				<div class="table-responsive">
					<table class="table table-sm align-items-center table-bordered w-100 m-0" id="inventario_table">
						<thead class="thead-lighter">
							<tr class="text-center">
								<th>Inventário</th>
								<th>Id</th>
								<th>Imagem</th>
								<th>Produto</th>
								<th>Estoque</th>
								<th>Auditado</th>
								<th>Status</th>
								<th>Usuario</th>
							</tr>
						</thead>
						<tbody id="inventario_produtos">
						</tbody>

					</table>
				</div>

			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="HistoricoEstoqueModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel"><strong>Estoque</strong></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body p-0" style="background-color:#f7fafc">
				<div class="card mb-0">
					<div class="card-header bg-transparent">
						<div class="row">
							<div class="col-12">
								<h3 class="mb-0 text-dark nome-produto"></h3>
							</div>
						</div>
					</div>
					<div class="card-body" style="overflow-y:auto; height:400px">
						<div class="timeline" id="historico_estoque" data-timeline-content="axis" data-timeline-axis-style="dashed">
						</div>
					</div>
					<div class="card-footer bg-transparent p-2">
						<div class="row">
							<div class="col-md-6 text-success text-center">
								<span class="text-dark">Histórico</span><br><span id="estoque_historico"></span>
							</div>
							<div class="col-md-6 text-danger text-center">
								<span class="text-dark">Estoque</span><br> <span id="estoque_atual"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer p-0" style="background-color:#f7fafc">
			</div>
		</div>
	</div>
</div>

@endsection

@push('js')

<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.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>

<!-- Datatable Estoque-->
<script>
	$(document).ready(function() {
		var table = $('#table').DataTable({
			"processing": true,
			"serverSide": true,
			"ajax": "{{ route('estoque.data')}}",
			"deferRender": true,

			columns: [{
					"class": "align-middle text-center details-control",
					"orderable": false,
					"data": null,
					"defaultContent": '',
					"searchable": false,
					"render": function() {
						return '<i class="far fa-eye" aria-hidden="true"></i>';
					},
					width: "15px"
				},
				{
					data: 'id',
					name: 'id',
					className: 'align-middle text-center',
				},
				{
					"className": 'align-middle text-center',
					"orderable": false,
					"data": 'imagem_produto',
					"defaultContent": '',
					"searchable": false,
					"render": function(data, type, row) {
						return "<img class='avatar avatar-md rounded' src='../" + data + "'>";
					}
				},
				{
					data: 'nome_produto',
					name: 'nome_produto',
					className: 'align-middle text-center',
				},
				{
					data: 'nome_marca_produto',
					name: 'nome_marca_produto',
					className: 'align-middle text-center',
				},
				{
					data: 'quantidade_produtos',
					name: 'quantidade_produtos',
					className: 'align-middle text-center',
				},
				{
					"data": 'teste',
					"name": 'teste',
					"className": 'align-middle text-center',
					"render": function(data, type, row) {
						data2 = parseFloat(data);
						return data2.toLocaleString('pt-BR', {
							style: 'currency',
							currency: 'BRL'
						});
					}

				},
				{
					data: 'estante_estoque',
					name: 'estante_estoque',
					className: 'align-middle text-center',
					"render": function(data, type, row) {
						return "<i class='fas fa-boxes fa-2x text-primary mr-3'></i><strong>" + data + "-" + row.prateleira_estoque + "</strong>";
					}
				},
				{
					"class": "align-middle text-center",
					"defaultContent": '',
					"data": 'id',
					"render": function(data, type, row) {
						$url = "{{route('estoque.qrcode2','_CODIGO_')}}".replace("_CODIGO_", row.id);
				 		$atualizar = '@if(auth()->user()->id == 24 || auth()->user()->id == 33 || auth()->user()->id == 1 || auth()->user()->id == 2)<button type="button" id="button" class="btn btn-success" data-toggle="modal" data-target="#EstoqueModal" data-nome="' + row.nome_produto + '" data-action="../estoque/atualizar/' + row.id + '" data-id="' + row.id + '" data-sku="' + row.codigo_barra_produto + '" data-maxima="' + row.quantidade_maxima_produtos + '" data-atual="' + row.quantidade_produtos + '" data-minima="' + row.quantidade_minima_produtos + '" data-estante="' + row.estante_estoque + '" data-prateleira="' + row.prateleira_estoque + '"> Atualizar </button>@endif';
				 		
						return $atualizar +'<button type="button" class="btn btn-purple btn-historico" data-toggle="modal" data-target="#HistoricoEstoqueModal" value="' + data + '"> Histórico </button>'+
				 			'<a href="' + $url + '" class="btn btn-info">QRCode</a>';
					}
				},
				{
					"data": 'prateleira_estoque',
					"orderable": false,
					"defaultContent": '',
					"searchable": false,
					"visible": false
				},
			],
			"language": {
				"info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
				"search": "Procurar:",
				"paginate": {
					"first": "Primeiro",
					"previous": "<",
					"next": ">",
					"last": "Último"
				}
			},

			dom: 'Bfrtip',
			lengthMenu: [
				[10, 25, 50, -1],
				['10 linhas', '25 linhas', '50 linhas', 'Todas as linhas']
			],
			buttons: [{
					extend: 'pageLength',
					className: 'btn bg-light rounded'
				},
				{
					extend: 'pdfHtml5',
					className: 'btn bg-danger text-white rounded',
					exportOptions: {
						columns: [1, 2, 3, 4]
					}
				},
				// {
				// 	extend: 'excelHtml5',
				// 	className: 'btn bg-success text-white rounded',
				// 	exportOptions: {
				// 		columns: [1, 2, 3, 4]
				// 	}
				// },
				{
					extend: 'colvis',
					text: 'Colunas',
					className: 'btn bg-default text-white rounded'
				}
			],
			stateSave: true
		});
		$('#table tbody').on('click', 'td.details-control', function() {
			var tr = $(this).closest('tr');
			var tdi = tr.find("i.far");
			var row = table.row(tr);

			if (row.child.isShown()) {
				// This row is already open - close it
				row.child.hide();
				tr.removeClass('shown');
				tdi.first().removeClass('fa-eye-slash');
				tdi.first().addClass('fa-eye');
			} else {
				// Open this row
				row.child(format(row.data())).show();
				tr.addClass('shown');
				tdi.first().removeClass('fa-eye');
				tdi.first().addClass('fa-eye-slash');
			}
		});

		table.on("user-select", function(e, dt, type, cell, originalEvent) {
			if ($(cell.node()).hasClass("details-control")) {
				e.preventDefault();
			}
		});
	});

	function format(d) {
		// `d` is the original data object for the row
		return '<table class="table-sm" cellpadding="5" cellspacing="0" border="0">' +
			'<tbody class="thead-dark">' +
			'<tr>' +
			'<th class="align-middle text-center">Quantidade Máxima:</th>' +
			'<td class="align-middle text-center text-white" colspan="2">' + d.quantidade_maxima_produtos + '</td>' +
			'</tr>' +
			'<tr>' +
			'<th class="align-middle text-center">Quantidade Minima:</th>' +
			'<td class="align-middle text-center text-white" colspan="2">' + d.quantidade_minima_produtos + '</td>' +
			'</tr>' +
			'<tr>' +
			'<th class="align-middle text-center" >Valor Unitario:</th>' +
			'<td class="align-middle text-center text-white" colspan="2">' + parseFloat(d.preco_produto_varejo).toLocaleString('pt-BR', {
				style: 'currency',
				currency: 'BRL'
			}); + '</td>' +
		'</tr>' +
		'</tbody>' +
		'</table>';
	}
</script>

<!--Preloader-->
<script>
	//código usando jQuery
	$(document).ready(function() {
		$('.preloader').hide();
	});
</script>

<!--Modal Estoque-->
<script>
	$('#EstoqueModal').on('show.bs.modal', function(event) {
		var button = $(event.relatedTarget)
		var nome = button.data('nome')
		var id = button.data('id')
		var sku = button.data('sku')
		var maxima = button.data('maxima')
		var atual = button.data('atual')
		var minima = button.data('minima')
		var estante = button.data('estante')
		var prateleira = button.data('prateleira')
		var action = button.data('action')

		var modal = $(this)
		modal.find('.modal-title').text('Estoque: ' + nome)
		modal.find('.modal-body form').attr("action", action);
		modal.find('.modal-body #sku').val(sku)
		modal.find('.modal-body #maxima').val(maxima)
		modal.find('.modal-body #atual').val(atual)
		modal.find('.modal-body #minima').val(minima)
		modal.find('.modal-body #estante').val(estante)
		modal.find('.modal-body #prateleira').val(prateleira)
	})
</script>

<!--Função de copiar area de transferencia-->
<script>
	$(document).ready(function() {
		$('#btn-copiar').on('click', function() {
			$('#sku').select();
			document.execCommand('copy');
		});
	})
</script>

<!--Modal Historico-->
<script>
	$(document).on('click', '.btn-historico', function() {
		let valor = $(this).val();
		let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		$('#historico_estoque').children().remove()
		$.ajax({
			url: "{{route('estoque.historico')}}",
			method: 'get',
			dataType: 'json',
			data: {
				// _token:CSRF_TOKEN,
				valor: valor
			},
			success: function(retorno) {
				$('.nome-produto').text(retorno.produto)
				if (retorno.historico.length != 0) {
					$.each(retorno.historico, function(index) {
						$('#historico_estoque').append(
							'<div class="timeline-block">' +
							'<span class="timeline-step badge-' + retorno.historico[index].cor + '">' +
							'<i class="' + retorno.historico[index].icone + '"></i>' +
							'</span>' +
							'<div class="timeline-content float-left ml-0">' +
							'<h3 class="text-dark mb-0 font-weight-bold">' + retorno.historico[index].tipo + '</h3>' +
							'<small class="text-grey font-weight-bold">' + retorno.historico[index].data + '</small>' +
							'<h5 class="text-dark mb-0 font-weight-bold">' + retorno.historico[index].operacao + ': ' + retorno.historico[index].codigo + '</h5>' +
							'</div>' +
							'<div class="timeline-content float-right ml-0">' +
							'<h3 class="text-dark mb-0 font-weight-bold">Observação</h3>' +
							'<small class="text-grey font-weight-bold">' + retorno.historico[index].observacao + '</small>' +
							'<p class="text-dark text-sm mt-1 mb-0 font-weight-bold"><span class="text-' + retorno.historico[index].cor + ' font-weight-bold">Quantidade: ' + retorno.historico[index].quantidade + '</span></p>' +
							'</div>'
						);
					});
				} else {
					$('#historico_estoque').append('<h3 class="text-center">Sem histórico desse produto</h3><img class="img-fluid" height="200px" src="https://www.noorbysakshi.com/assets/designer/themes/default/images/noresult.gif">')
				}
				console.log(retorno.historico.length);
				$('#estoque_historico').text(retorno.total.entrada - retorno.total.venda + retorno.total.devolucao)
				$('#estoque_atual').text(retorno.total.estoque)
			},
			error: function(retorno) {
				alert(JSON.stringify(retorno));
			}
		})
	});
</script>

<!--Ajax Produtos -->
<script>
    $(document).ready(function() {
		var table = $('#inventario_table').DataTable({
			"processing": true,
			"serverSide": true,
			"ajax": "{{ route('estoque.inventario')}}",
			"deferRender": true,
			"order": [ 0, 'desc' ],
			columns: [
				{
					data: 'id',
					name: 'id',
					className: 'align-middle text-center',
				},
				{
					data: 'id_produto',
					name: 'id_produto',
					className: 'align-middle text-center',
				},
				{
					"className": 'align-middle text-center',
					"orderable": false,
					"data": 'imagem',
					"defaultContent": '',
					"searchable": false,
					"render": function(data, type, row) {
						return "<img class='avatar avatar-md rounded' src='../" + data + "'>";
					}
				},
				{
					data: 'produto',
					name: 'produto',
					className: 'align-middle text-center',
				},
				{
					data: 'quantidade_inventario',
					name: 'quantidade_inventario',
					className: 'align-middle text-center',
				},
				{
					data: 'auditado_inventario',
					name: 'auditado_inventario',
					className: 'align-middle text-center',
				},
				{
					data: 'status_inventario',
					name: 'status_inventario',
					className: 'align-middle text-center',
				},
				{
					data: 'name',
					name: 'name',
					className: 'align-middle text-center',
				},
				
			],
			"language": {
				"info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
				"search": "Procurar:",
				"paginate": {
					"first": "Primeiro",
					"previous": "<",
					"next": ">",
					"last": "Último"
				}
			},

			dom: 'Bfrtip',
			lengthMenu: [
				[10, 25, 50, -1],
				['10 linhas', '25 linhas', '50 linhas', 'Todas as linhas']
			],
			buttons: [{
					extend: 'pageLength',
					className: 'btn bg-light rounded'
				},
				// {
				// 	extend: 'pdfHtml5',
				// 	className: 'btn bg-danger text-white rounded',
				// 	exportOptions: {
				// 		columns: [1, 2, 3, 4]
				// 	}
				// },
				// {
				// 	extend: 'excelHtml5',
				// 	className: 'btn bg-success text-white rounded',
				// 	exportOptions: {
				// 		columns: [1, 2, 3, 4]
				// 	}
				// },
				{
					extend: 'colvis',
					text: 'Colunas',
					className: 'btn bg-default text-white rounded'
				}
			]

		});
	});
</script>

@endpush