@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/animate.css/animate.min.css">

@section('title', 'Estoque')
@section('content')
@include('layouts.headers.cards_prod')
<!-- 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--5">
	<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">{{('Reposição')}}</h3>
						</div>
						<div class="col-4 text-right d-none">
							<button id="btn_cam" class="btn btn-outline-primary text-dark" type="button"><i class="fas fa-camera"></i></button>
							<input id="btn_cam_hide" class="d-none" type="file" capture="camera">
						</div>
					</div>
				</div>
				<div class="card-body">
					<form class="atualizar_estoque" method="post" enctype="multipart/form-data" action="{{route('estoque.inventario_produto',$produtos->id)}}">
						<!-- Passando o Token -->
						{{csrf_field()}}
						<div class="row">
							<div class="col-md-4 col-lg-4 col-sm-12 text-center">
								<img class="img-fluid" width="300px" height="300px" src="{{asset($produtos->imagem_produto)}}" id="imagem_atual">
							</div>
							<div class="col-md-8 col-lg-8 col-sm-12 row">
								<div class="col-md-6">
									<div class="form-group">
										<label class="form-control-label">Produto</label>
										<div class="input-group">
											<div class="input-group-prepend">
												<span class="input-group-text" id="basic-addon1"><i class="fas fa-box text-primary "></i></span>
											</div>
											<input type="text" class="form-control" value="{{$produtos->nome_produto}}" readonly>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="form-control-label">Codigo</label>
										<div class="input-group">
											<div class="input-group-prepend">
												<span class="input-group-text" id="basic-addon1"><i class="fas fa-key text-primary "></i></span>
											</div>
											<input name="codigo_inventario" type="text" class="form-control" value="{{$produtos->id}}" readonly>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<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" value="{{$produtos->estante_estoque}}" aria-describedby="basic-addon1">
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<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="text" class="form-control" value="{{$produtos->prateleira_estoque}}" aria-describedby="basic-addon1">
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="form-control-label">Estoque 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 type="number" name="quantidade_inventario" class="form-control" value="{{$produtos->quantidade_produtos}}" readonly>
										</div>
									</div>
								</div>
								<div id="form-group-inventario" class="col-md-6">
									<div class="form-group">
										<label class="form-control-label">Inventário</label>
										<button type="button" class="btn btn-success btn-sm float-right add-inventario"><i class="fas fa-plus"></i></button>
										<div class="input-group">
											<div class="input-group-prepend">
												<span class="input-group-text" id="basic-addon1"><i class="fas fa-check text-success"></i></span>
											</div>
											<input type="number" step="1" min="0" class="form-control inventario-estoque" value="0" required>
											<input name="auditado_inventario" id="inventario" type="hidden" step="1" min="0" class="form-control" value="" required>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="text-center mt-4">
							<button type="reset" class="btn btn-danger">Limpar</button>
							<button type="submit" class="btn btn-success">Salvar</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.min.js"></script>
<script src="{{ asset('argon') }}/vendor/bootstrap-notify/bootstrap-notify.min.js"></script>

<script>
	$(document).on('click', '.add-inventario', function(n) {
		$('#form-group-inventario').append(
			'<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-check text-success"></i></span>' +
			'</div>' +
			'<input type="number" step="1" min="0" class="form-control inventario-estoque" value="0" required>' +
			'</div>' +
			'</div>'
		);
	});
</script>

<script>
	$(document).on('change', '.inventario-estoque', function() {

		//declaro uma var para somar o total
		var total = 0;
		//faço um foreach percorrendo todos os inputs com a class soma e faço a soma na var criada acima
		$(".inventario-estoque").each(function() {
			total = total + Number($(this).val());
		});
		//mostro o total no input Sub Total
		$("#inventario").val(total);

		console.log($("#inventario").val());
	});
</script>
@endpush