@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('argon') }}/vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="{{ asset('css/preloader.css')}}">


@section('title', 'Reposição')
@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">{{ __('Lista de Reposição') }}</h3>
						</div>
						<div class="col-4 text-right">
							<button class="btn btn-sm btn-success" data-toggle="modal" data-target="#ModalReposicaoProdutos">Documento</button>
						</div>
					</div>
				</div>
				<div class="card-body">
					@if (Session::has('mensagem-sucesso'))
					<div class="alert alert-success alert-dismissible fade show" role="alert">
						<span class="alert-icon"><i class="ni ni-notification-70"></i></span>
						<span class="alert-text"><strong>{{ Session::get('mensagem-sucesso') }}</strong>
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
					</div>
					@endif
					<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 font-weight-bold">
									<th>Venda</th>
									<th>Imagem</th>
									<th>Produto</th>
									<th>Quantidade</th>
									<th>Valor</th>
									<th>Empresa</th>
									<th>Status</th>
									<th>Data</th>
									<th>Ações</th>
								</tr>
							</thead>

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

@include('php.modal-reposicao-produtos')
<!-- Comentando o navbar horizontal -->

@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/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 src="{{ asset('argon') }}/vendor/bootstrap-notify/bootstrap-notify.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() {
		var table = $('#table').DataTable({
			"processing": true,
			"serverSide": true,
			"ajax": "{{ route('estoque.reposicao_data')}}",
			"deferRender": true,

			columns: [{
					data: 'id',
					name: 'id',
					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_produto',
					name: 'quantidade_produto',
					className: 'align-middle text-center',
				},
				{
					"data": 'valor_pedido_produto',
					"name": 'valor_pedido_produto',
					"className": 'align-middle text-center',
					// "render": function(data, type, row) {
					// 	data2 = parseFloat(data);
					// 	return data2.toLocaleString('pt-BR', {
					// 		style: 'currency',
					// 		currency: 'BRL'
					// 	});
					// }

				},
				{
					data: 'empresa',
					name: 'empresa',
					className: 'align-middle text-center',
				},
				{
					data: 'reposicao',
					name: 'reposicao',
					className: 'align-middle text-center',
					"render": function(data, type, row) {
						if (data == 'AGUARDANDO')
							data = '<i class="fas fa-clock text-warning"></i>' + '<i class="fas fa-minus text-white"></i>' + '<i class="fas fa-truck text-white"></i>' + '<i class="fas fa-minus text-white"></i>' + '<i class="fas fa-check-circle text-white"></i>';
						if (data == 'TRANSPORTE')
							data = '<i class="fas fa-clock text-info"></i>' + '<i class="fas fa-minus text-info"></i>' + '<i class="fas fa-truck text-info"></i>' + '<i class="fas fa-minus text-white"></i>' + '<i class="fas fa-check-circle text-white"></i>';
						if (data == 'FINALIZADO')
							data = '<i class="fas fa-clock text-success"></i>' + '<i class="fas fa-minus text-success"></i>' + '<i class="fas fa-truck text-success"></i>' + '<i class="fas fa-minus text-success"></i>' + '<i class="fas fa-check-circle text-success"></i>';
						if (data === null)
							data = '<i class="fas fa-clock text-white"></i>' + '<i class="fas fa-minus text-white"></i>' + '<i class="fas fa-truck text-white"></i>' + '<i class="fas fa-minus text-white"></i>' + '<i class="fas fa-check-circle text-white"></i>';
						return data;
					}
				},
				{
					data: 'data_pedido',
					name: 'data_pedido',
					className: 'align-middle text-center'
				},
				{
					"class": "align-middle text-center",
					"defaultContent": '',
					"data": 'id',
					"render": function(data, type, row) {
						var codigo = row.codigo;
						var url_update = "{{ route('estoque.reposicao_update','_codigo_') }}".replace('_codigo_', codigo);
						var url_finalizar = "{{ route('estoque.reposicao_finalizar','_codigo_') }}".replace('_codigo_', codigo);

						// return "<a href='" + url_update + "' class='btn btn-info'> Reposição </a>" +
						// 	"@if(auth()->user()->empresa == " + row.empresa + ")<a href='" + url_finalizar + "' class='btn btn-success'> Confirmar </a>@endif";
						return "<button value='" + codigo + "' class='btn-reposicao btn btn-info'> Reposição </button>" +
							"<button value='" + codigo + "' class='btn-finalizar btn btn-success'> Confirmar </button>";
					}
				},

			],
			"language": {
				"info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
				"search": "Procurar:",
				"paginate": {
					"first": "Primeiro",
					"previous": "<",
					"next": ">",
					"last": "Último"
				}
			},

			dom: 'frtip',
			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
		});

		$(document).on('click', '.btn-reposicao', function() {
			let valor = $(this).val();
			var url_update = "{{ route('estoque.reposicao_update','_codigo_') }}".replace('_codigo_', valor);
			$.ajax({
				url: url_update,
				method: "GET",
				dataType: 'json',
				success: function(data) {
					$.notify({
						icon: 'fas fa-truck fa-2x',
						title: ' Situação Alterada',
						message: ' Em transporte',
					}, {
						element: 'body',
						type: 'info',
						z_index: 1080,
						delay: 1000,
						timer: 1000,
						animate: {
							enter: 'animated fadeInDown',
							exit: 'animated fadeOutUp'
						},
						template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert-notify" role="alert">' +
							'<span data-notify="icon"></span> ' +
							'<div class="alert-text"</div> ' +
							'<span class="alert-title" data-notify="title">{1}</span> ' +
							'<span class="h3 font-weight-bold" data-notify="message">{2}</span>' +
							'</div>' +
							'<button type="button" class="close" data-notify="dismiss" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
							'</div>'
					});

					table.ajax.reload(null, false);
				},
				error: function(data) {
					alert(JSON.stringify());
				}
			});
		});

		$(document).on('click', '.btn-finalizar', function() {
			let valor = $(this).val();
			var url_finalizar = "{{ route('estoque.reposicao_finalizar','_codigo_') }}".replace('_codigo_', valor);
			$.ajax({
				url: url_finalizar,
				method: "GET",
				dataType: 'json',
				success: function(data) {
					$.notify({
						icon: 'fas fa-check-circle fa-2x',
						title: ' Situação Alterada',
						message: ' Em transporte',
					}, {
						element: 'body',
						type: 'success',
						z_index: 1080,
						delay: 1000,
						timer: 1000,
						animate: {
							enter: 'animated fadeInDown',
							exit: 'animated fadeOutUp'
						},
						template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert-notify" role="alert">' +
							'<span data-notify="icon"></span> ' +
							'<div class="alert-text"</div> ' +
							'<span class="alert-title" data-notify="title">{1}</span> ' +
							'<span class="h3 font-weight-bold" data-notify="message">{2}</span>' +
							'</div>' +
							'<button type="button" class="close" data-notify="dismiss" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
							'</div>'
					});

					table.ajax.reload(null, false);
				},
				error: function(data) {
					alert(JSON.stringify());
				}
			});
		});
	});
</script>

<script>
	$(document).on('change', '#select_empresa', function() {
		let empresa = $(this).val();
		console.log(empresa);
		let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		$.ajax({
			url: "{{route('estoque.reposicao_produtos')}}",
			method: 'post',
			dataType: 'json',
			data: {
				_token: CSRF_TOKEN,
				empresa: empresa
			},
			timeout: 1000,
			success: function(retorno) {
				$('#reposicao_produtos').children().remove();
				$('#numero_reposicao').val();

				for (let x = 0; x < retorno.success.length; x++) {
					$('#reposicao_produtos').append("<tr class='text-center border-top-5'>" +
						"<td>" + retorno.success[x].id + "</td>" +
						"<td> <img class='avatar avatar-sm' src='../" + retorno.success[x].imagem + "'></td>" +
						"<td class='white-space'>" + retorno.success[x].produto + "</td>" +
						"<td>" + retorno.success[x].quantidade_produto + "</td>" +
						"<td>" + retorno.success[x].data_pedido + "</td>" +
						"</tr>");
				}
			},
			error: function(retorno) {
				alert('erro');
			}
		});
	});
</script>

<script>
	function getPDF() {
		var element = document.getElementById('canvas_div_pdf');
		var opt = {
			margin: 1,
			filename: 'orçamento.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>
@endpush