@extends('layouts.app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" type="text/javascript"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript"></script>

@section('content')
<!-- 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">
	@foreach($OS as $os)
	@endforeach
	<div class="row ">
		<div class="col-xl-8 mx-auto canvas_div_pdf">
			<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">{{ __('Relatórios Ordem Serviço') }}</h3>
						</div>
					</div>
					<div class="container mt-2 border border-dark pb-0">
						<div class="row ">
							<div class="col-lg-3 col-md-12 col-sm-12 mt-4">
								<img class="d-block mx-auto w-75" src="../../img/produtos_cadastrados/logo_prontax.png">
							</div>
							<div class="col-lg-9 col-md-12 col-sm-12 mt-4">
								<div class="row">
									<div class="col-lg-8 col-md-8 col-sm-12 text-center">
										<h5 class="mx-auto font-weight-bold">Prontax Industria e Comercio Ltda</h5>
									</div>
									<div class="col-lg-4 col-md-4 col-sm-12 text-center">
										<h5 class="mx-auto font-weight-bold text-success">(12) 3624-1515</h5>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-8 col-md-8 col-sm-12 text-center">
										<h5 class="mx-auto font-weight-bold">Rua José Felipe Cursino de Moura, 410 <br> Vila Aparecida, Taubaté/SP</h5>
									</div>
									<div class="col-lg-4 col-md-4 col-sm-12 text-center">
										<h5 class="mx-auto font-weight-bold text-warning">contato@reman.com.br</h5>
									</div>
								</div>
							</div>
						</div>
						<div class="row border-top pt-4 mb-4">
							<div class="col-lg-4 col-md-4 col-sm-12">
								<span class="h4 font-weight-bold">Ordem de serviço n°: </span> {{$os->id}}
							</div>
							<div class="col-lg-4 col-md-4 col-sm-12">
								<span class="h4 font-weight-bold">Data: </span> {{$os->created_at}}
							</div>
							<div class="col-lg-4 col-md-4 col-sm-12">
								<span class="h4 font-weight-bold">Hora: </span> {{$os->created_at}}
							</div>
						</div>
					</div>
					<div class="container pt-0 border border-dark">
						<div class="row mt-3">
							<h4 class="mx-auto">Informações sobre o cliente</h4>
						</div>
						<table class="table-responsive-md table table-hover table-bordered text-center">
							<thead class="font-weight-bold">
								<tr>
									<th>
										Cliente
									</th>
									<th>
										Telefone
									</th>
									<th>
										Celular
									</th>
									<th>
										Email
									</th>
								</tr>
							</thead>
							<tbody>
								<tr class="text-center">
									<td style="font-size:12px">{{$os->razao_cliente}}</td>
									@if(isset($os->telefone_cliente))
									<td style="font-size:12px">{{$os->telefone_cliente}}</td>
									@else
									<td style="font-size:12px" class="text-danger font-weight-bold">--/--</td>
									@endif
									@if(isset($os->celular_cliente))
									<td style="font-size:12px">
										{{$os->celular_cliente}}
										<!-- <div class="row">
											<span >{{$os->celular_cliente}}</span>
											@if(isset($os->whatsapp_cliente) && $os->whatsapp_cliente==1)
											<img class="img-fluid d-block mx-auto" src="{{asset('img/ordem_de_servico/whatsapp.png')}}" alt="{{$os->whatsapp_cliente}}">
											@endif
										</div> -->
									</td>
									@else
									<td style="font-size:12px" class="text-danger font-weight-bold">--/--</td>
									@endif
									@if(isset($os->email_cliente))
									<td style="font-size:12px">{{$os->email_cliente}}</td>
									@else
									<td style="font-size:12px" class="text-danger font-weight-bold">--/--</td>
									@endif
								</tr>
							</tbody>
						</table>
						<table class="table-responsive-md table table-hover table-bordered text-center">
							<div class="row mt-3">
								<h4 class="mx-auto">Endereço</h4>
							</div>
							<thead>
								<tr>
									<th scope="col"><span class="h6">Rua</span></th>
									<th scope="col"><span class="h6">Adicional</span></th>
									<th scope="col"><span class="h6">Cidade</span></th>
								</tr>
							</thead>
							<tbody class="font-weight-bold">
								<tr>
									@if(isset($os->rua_cliente))
									<th scope="row">
										<p style="font-size:12px">{{$os->rua_cliente}}</p>
									</th>
									@else
									<td scope="col" class="text-danger font-weight-bold">--/--</td>
									@endif
									@if(isset($os->bairro_cliente))
									<td scope="col">
										<p style="font-size:12px">{{$os->bairro_cliente}}
											@if(isset($os->casa_cliente))
											<span class="ml-3">
												, número : {{$os->casa_cliente}}
											</span>
											@endif
										</p>
										@if(isset($os->ponto_referencia_cliente))
										<p style="font-size:12px">Ponto de referência : ({{$os->ponto_referencia_cliente}})</p>
										@endif
									</td>
									@else
									<td class="text-danger font-weight-bold">--/--</td>
									@endif
									@if(isset($os->cidade_cliente))
									<td scope="col">
										<p style="font-size:12px">{{$os->cidade_cliente}}</p>
									</td>
									@else
									<td scope="col" class="text-danger font-weight-bold">--/--</td>
									@endif
								</tr>
							</tbody>
						</table>
					</div>
					<div class="container pt-0 border border-dark">
						<div class="row">
							<h4 class="mx-auto">Informações do Produto</h4>
						</div>
						<div class="row">
							<div class="col-8">
								<ul class="list-unstyled">
									<li>
										<div class="row ">
											<div class="col-md-4 col-lg-4 col-sm-12">
												Equipamentos :
											</div>
											<div class="col-lg-8 col-md-8 col-sm-12 col-sm-12">
												@if(isset($os->nome_produto))
												<span class="text-dark">{{$os->nome_produto}}</span>
												@else
												<span class="text-danger">Não informado</span>
												@endif
											</div>
										</div>
									</li>
									<li>
										<div class="row ">
											<div class="col-md-4 col-lg-4 col-sm-12">Acessórios :</div>
											<div class="col-lg-8 col-md-8 col-sm-12 col-sm-12">Não informado</div>
										</div>
									</li>
									<li>
										<div class="row ">
											<div class="col-md-4 col-lg-4 col-sm-12">Código :</div>
											<div class="col-lg-8 col-md-8 col-sm-12 col-sm-12">{{$os->prod_id}}</div>
										</div>
									</li>
									<li>
										<div class="row ">
											<div class="col-md-4 col-lg-4 col-sm-12">Marca :</div>
											<div class="col-lg-8 col-md-8 col-sm-12 col-sm-12">{{$os->nome_marca_produto}}</div>
										</div>
									</li>
								</ul>
							</div>
							<div class="col-4">
								<img class="d-block mx-auto w-25" src="{{asset($os->imagem_produto)}}">
							</div>
						</div>
					</div>
					<div class="container pt-0 border border-dark">
						<div class="row">
							<h3 class="mx-auto">Comprovante de entrada</h3>
						</div>
						<ul class="list-unstyled">
							<li>
								<div class="row">
									<div class="col-md-4 col-lg-4 col-sm-12">Problema informado : </div>
									<div class="col-lg-8 col-md-8 col-sm-12 col-sm-12">
										@if(isset($os->problema_informado_os))
										<span>{{$os->problema_informado_os}}</span>
										@else
										<span>Não informado</span>
										@endif
									</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="col-md-4 col-lg-4">Observações :</div>
									<div class="col-lg-8 col-md-8 col-sm-12">
										@if(isset($os->observao_os))
										<span>{{$os->observao_os}}</span>
										@endif
									</div>
								</div>
							</li>
						</ul>
						<div class="row">
							<div class="col-6">
								<hr class="w-100 pb-0">
								<div class="text-center">
									<small class="text-uppercase mx-auto">assinatura</small>
								</div>
							</div>
							<div class="col-6">
								<hr class="w-100">
								<div class="text-center">
									<small class="text-uppercase mx-auto">assinatura</small>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row text-center col-12">
					<button onclick="getPDF()" id="gerar_pdf" class="btn btn-danger mx-auto btn-lg font-weight-bold">PDF</button>
					<!-- <button data-dismiss="modal" class="btn btn-default btn-lg font-weight-bold "><i class="text-white mr-2"></i>Fechar</button> -->
				</div>
			</div>
		</div>
	</div>

	<!-- Comentando o navbar horizontal -->

	@endsection

	@push('js')
	<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>
		function getPDF() {
			$("#genmsg").show();
			var HTML_Width = $(".canvas_div_pdf").width();
			var HTML_Height = $(".canvas_div_pdf").height();
			var top_left_margin = 15;
			var PDF_Width = HTML_Width + (top_left_margin * 2);
			if (HTML_Width > 420) {
				var PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2);
			} else {
				var PDF_Height = HTML_Height + (HTML_Height * 0.1);
			}
			var canvas_image_width = HTML_Width;
			var canvas_image_height = HTML_Height;

			var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

			html2canvas($(".canvas_div_pdf")[0], {
				allowTaint: true
			}).then(function(canvas) {
				canvas.getContext('2d');

				console.log(canvas.height + "  " + canvas.width);

				var imgData = canvas.toDataURL("image/png", 1.0);
				var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
				pdf.addImage(imgData, 'PNG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);


				for (var i = 1; i <= totalPDFPages; i++) {
					pdf.addPage(PDF_Width, PDF_Height);
					pdf.addImage(imgData, 'PNG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
				}

				pdf.save("HTML-Document.pdf");

			});
		};

		function getPDF2() {
			var conteudo = document.getElementById('canvas').innerHTML;
			tela_impressao = window.open('about:blank');
			tela_impressao.document.write(conteudo);
			tela_impressao.window.print();
			tela_impressao.window.close();
			tela_impressao.event.keyCode = 13;
		};
	</script>
	@endpush