@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 Baixo')
@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 -->
@can('visualizar-estoque-reman')
	<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">{{ __('Lista de Produtos no Estoque Reman') }}</h3>
							</div>
							@can('adicionar-estoque-reman')
								<div class="col-4 text-right">
									<a href="{{route('estoque_reman.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 py-4">
							<table class="table table-flush table-bordered table-dark">
								<thead class="thead-dark">
									<tr class="text-center font-weight-bold">
										<th>Codigo</th>
										{{-- <th>Imagem</th> --}}
										<th>Nome</th>
										<th>SKU</th>
										<th>Quantidade</th>
										<th>Posição</th>
										@can('editar-estoque-reman')
											<th>Ações</th>
										@endcan
									</tr>
								</thead>
								<tbody>
									@foreach($produtos as $produto)
									<tr class="text-center">
									<td class="align-middle">{{$produto->id}}</td>
										{{-- <td class="align-middle"><img width="100px" height="100px" src="{{asset( $produto->imagem_produto)}}"></td> --}}
										<td class="align-middle"><strong>{{$produto->nome_produto}}</strong></td>
										<td class="align-middle"><strong>{{$produto->sku_estoque}} </strong></td>
										<td class="text-justify align-middle">
											<span class="badge badge-dot mr-4">
												<i class="fas fa-arrow-up text-success mr-3 mt--2 "></i>
												<span class="text-white"><strong>Máxima: </strong> {{$produto->quantidade_maxima_produtos}}</span>
											</span><br><br>
											<i class="fas fa-arrow-right text-info mr-3 mt--2 "></i>
											<i class="bg-info"></i>
											<span class="text-white"><strong>Atual: </strong> {{$produto->quantidade_produtos}}
											</span><br><br>
											<span class="badge badge-dot mr-4">
												<i class="fas fa-arrow-down text-danger mr-3 mt--2 mt-"></i>
												<span class="text-white"><strong>Mínima: </strong> {{$produto->quantidade_minima_produtos}}</span>
											</span>
										</td>
										<td class="align-middle text-justify">
											<i class="fas fa-sort-alpha-up fa-2x text-primary mr-3"></i>
											<strong>Estante: </strong> {{$produto->estante_estoque}}<br><br>
											<i class="fas fa-sort-numeric-down fa-2x text-primary mr-3"></i>
											<strong>Prateleira: </strong> {{$produto->prateleira_estoque}}
										</td>
										@can('editar-estoque-reman')
											<td class="align-middle">
												<button type="button" class="btn btn-info" data-toggle="modal" data-target="#EstoqueModal{{$produto->id}}"> Atualizar </button>
											</td>
										@endcan
									</tr>
									<!-- Modal -->
									@can('editar-estoque-reman')
										<div class="modal fade" id="EstoqueModal{{$produto->id}}" 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: {{$produto->nome_produto}}</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="{{route('estoque_reman.atualizar',$produto->id)}}">
															<!-- 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 SKU</label>
																		<div class="input-group">
																			<div class="input-group-prepend">
																				<span class="input-group-text" id="basic-addon1"><i class="fas fa-terminal"></i></span>
																			</div>
																			<input name="sku_estoque" type="text" class="form-control" placeholder="mtr-desl-gatter" aria-label="" aria-describedby="basic-addon1" value="{{$produto->sku_estoque}}">
																		</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" type="number" class="form-control" placeholder="" value="{{$produto->quantidade_maxima_produtos}}" 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" type="number" class="form-control" placeholder="" value="{{$produto->quantidade_produtos}}" 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" type="number" class="form-control" placeholder="" value="{{$produto->quantidade_minima_produtos}}" 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" type="text" maxlength="1" class="form-control" placeholder="" value="{{$produto->estante_estoque}}" 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" type="number" class="form-control" placeholder="" value="{{$produto->prateleira_estoque}}" 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>
														@can('editar-estoque-reman')
															<button type="submit" class="btn btn-success">Salvar</button>
														@endcan
														</form>
													</div>
												</div>
											</div>
										</div>
									@endcan
									@endforeach
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@else
 	<p class="text-center display-3 mt-3">- <u>Atenção, você não tem acesso a esse conteúdo</u> -</p><br>
@endcan


<!-- Comentando o navbar horizontal -->

@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.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>
	$(document).ready(function() {
		$('.table').DataTable({
			"language": {
				"info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
				"search": "Procurar:",
				"paginate": {
					"first": "Primeiro",
					"previous": "<",
					"next": ">",
					"last": "Último"
				}
			},
			dom: 'Bfrtip',
			buttons: [{
					extend: 'pdfHtml5',
					className: 'btn bg-danger text-white rounded',
					exportOptions: {
						columns: [0, 2, 3, 4]
					}
				},
				{
					extend: 'excelHtml5',
					className: 'btn bg-success text-white rounded',
					exportOptions: {
						columns: [0, 2, 3, 4]
					}
				},
				{
					extend: 'colvis',
					text: 'Colunas',
					className: 'btn bg-default text-white rounded'
				}
			],


			stateSave: true

		});
	});
</script>
<script>
	//código usando jQuery
	$(document).ready(function() {
		$('.preloader').hide();
	});
</script>
<!--Arquivo de JS criado por nós para editar as partes lógicas do sistema  -->

@endpush