@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')}}">

<style>
	.white-space {
		white-space: pre-wrap !important;
	}
</style>

<div id="preloaders" class="preloader"></div>
@section('title', 'Produtos')
@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-md-7">
							<h3 class="mb-0">{{ __('Lista de Produtos') }}</h3>
						</div>
						@can('adicionar-produtos')
						<div class="col-md-5 text-right">
							<a href="{{route('produtos.cadastrar')}}" class="btn btn-sm btn-primary">
								{{ __('Adicionar Produto')}}
							</a>
							<a href="{{route('produtos.desativado')}}" class="btn btn-sm btn-danger">
								{{ __('Produtos Desativados')}}
							</a>
						</div>
						@endcan
					</div>
				</div>
				<div class="card-body">
					<div class="table-responsive">
						<table class="table table-flush table-bordered table-dark table-sm w-100" id="table">
							<thead class="thead-dark">
								<tr class="text-center">
									<th></th>
									<th>Codigo</th>
									<th>Nome do produto</th>
									<th>UND</th>
									<th>Marca</th>
									<th>Referência</th>
									<th>Familia</th>
									<th>Atacado</th>
									<th>Varejo</th>
									<th>Oferta</th>
									<th>NCM</th>
									<th>Ações</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<!-- Comentando o navbar horizontal -->
<div class="modal fade" id="modal_excluir" aria-hidden="true" role="dialog" tabindex="-1" aria-labelledby="modal_excluir">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h3 class="text-danger mx-auto font-weight-bold">Tem certeza que deseja excluir este produto?</h3>
			</div>
			<div class="modal-body">
			</div>
			<div class="modal-footer">
				<a href="#" id="route-deletar" class="btn btn-danger text-white font-weight-bold">Sim</a>
				<button type="button" class="btn btn-default text-white font-weight-bold" data-dismiss="modal">Não</button>
			</div>
		</div>
	</div>
</div>
@endsection

@push('js')
{{-- <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> --}}
<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>
	$('#modal_excluir').on('show.bs.modal', function(event) {
		var button = $(event.relatedTarget)
		var action = button.data('action')
		var modal = $(this)
		modal.find('#route-deletar').attr("href", action);
	})
</script>
<script>
	$(document).ready(function() {
		var table = $('#table').DataTable({
			"processing": true,
			"serverSide": true,
			"ajax": "{{ route('produtos.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',
				},
				{
					data: 'nome_produto',
					name: 'nome_produto',
					className: 'align-middle text-center white-space',
				},
				{
					data: 'unidade_produto',
					name: 'unidade_produto',
					className: 'align-middle text-center',
				},
				{
					data: 'nome_marca_produto',
					name: 'nome_marca_produto',
					className: 'align-middle text-center',
				},
				{
					data: 'referencia_produto',
					name: 'referencia_produto',
					className: 'align-middle text-center',
				},
				{
					data: 'nome_familia_produto',
					name: 'nome_familia_produto',
					className: 'align-middle text-center',
				},
				{
					data: 'preco_produto_atacado',
					name: 'preco_produto_atacado',
					className: 'align-middle text-center',
				},
				{
					data: 'preco_produto_varejo',
					name: 'preco_produto_varejo',
					className: 'align-middle text-center',
				},
				{
					data: 'preco_produto_oferta',
					name: 'preco_produto_oferta',
					className: 'align-middle text-center',
					"render": function(data, type, row) {
						if (data > 0.00) {
							return '<strong class="text-yellow">' + data + '</strong>';
						} else
							return data;
					}
				},
				{
					data: 'ncm',
					name: 'ncm',
					className: 'align-middle text-center',
				},
				{
					"class": "align-middle text-center",
					"defaultContent": '',
					"data": 'id',
					"render": function(data, type, row) {
					    	$url = "{{route('catalogo.qrcode','_CODIGO_')}}".replace("_CODIGO_", row.id);
						return "@can('editar-produtos-reman') <a href = '../produtos/editar/" + data + "' class = 'btn btn-info' > Atualizar </a> @endcan<a href='" + $url + "' class='btn btn-info'>QRCode</a> @can('deletar-produtos') <button class ='btn btn-danger' data-toggle='modal' data-action='../produtos/deletar/" + data + "' data-target ='#modal_excluir'> Deletar </button> @endcan";
					}
				}
			],
			"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, 5, 6, 7]
				// 	}
				// },
				// {
				// 	extend: 'excelHtml5',
				// 	className: 'btn bg-success text-white rounded',
				// 	exportOptions: {
				// 		columns: [1, 2, 3, 4, 5, 6, 7]
				// 	}
				// },
				{
					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 row = table.row(tr);
			format(row.data());


		});

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

	function format(d) {
		return swal({
		imageUrl: '../' + d.imagem_produto
		});
	}
</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  -->
<script type="text/javascript" src="{{ asset('js/alerta.js') }}"></script>
@endpush