{% extends 'adm/layout.html.twig' %}
{% block add_css %}
{{ parent() }}
<style type="text/css">
	@media print {
		@page {
			size: a4 portrait;
		}

		.table tbody tr td #cl-success{
			-webkit-print-color-adjust:exact !important;
			color-adjust: exact !important;  
			print-color-adjust: exact !important;
			background-color: #5cb85c !important;
		}

		.table tbody tr td #cl-danger{
			-webkit-print-color-adjust:exact !important;
			color-adjust: exact !important;  
			print-color-adjust: exact !important;
			background-color: #d9534f !important;
		}

		#cl-success{
			background-color: #5cb85c !important;
			color: white;
		}

		#cl-danger{
			background-color: #d9534f !important;
			color: white;
		}
	}

	#cl-success{
		background-color: #5cb85c !important;
		color: white;
	}

	#cl-danger{
		background-color: #d9534f !important;
		color: white;
	}

	.wrap-header {

	}

	.wrap-footer {
		page-break-inside: avoid;
	}
</style>
{% endblock %}

{% block content %}

<div class="content-wrapper" id="vue-master">

	<section class="content-header">
		<div class="container-fluid">
			<div class="row mb-2">
				<div class="col-sm-6">
					<h4>{{ content_title }}</h4>
				</div>
				<div class="col-sm-6">
					<ol class="breadcrumb float-sm-right">
						<li class="breadcrumb-item">Beranda</li>
						<li class="breadcrumb-item">Purchase Order</li>
					</ol>
				</div>
			</div>
		</div>
	</section>

	<!-- Main content -->
	<section class="content">
		<div class="container-fluid">
			<div class="row">

				<div class="col-md-12">

					<div class="card card-default col-md-2 float-right">
						<div class="card-body">
							<button class="btn btn-success" style="width: 100%;" id="button-print">
								<i class="fas fa-print"></i> &nbsp; Print
							</button>
						</div>
					</div>

					<div class="card card-default col-md-12">
						<div class="card-body" id="master-content">

							<div class="wrap-header">
								<div class="row"> 
									<table border="0" width="100%" style="color:#40739e; margin-top:5%; text-transform: uppercase">
										{# <tr>
											<td colspan="3" align="center"><img src="{{ base_url('assets/images/logo/header_kwitansi.png') }}" width="450"></td>
										</tr>
										<tr>
											<td width="15%"></td>
											<td width="85%" colspan="2" align="center">No. &nbsp;<b style="font-size:1.3em">{{ number }}</b></td>
										</tr> #}
										{# <tr>
											<td colspan="3">
												<div style="border: 0 0 0 1px blue; border-style:double"></div>
											</td>
										</tr> #}
											<td colspan="2">&nbsp;</td>

										<tr style="font-size:1.8em" style="height:70%;">
											<td style="width:20%">&nbsp;</td>
											<td>
											<b style="margin-left:35%; line-height:1.5; color:black">{{ number}}</b>
											</td>
										<tr>
											<td></td>
											<td colspan="2">&nbsp;</td>
										</tr>
										<tr style="font-size:1.2em" style="height:70%;">
											<td style="width:15%">&nbsp;</td>
											<td>
											<b style="margin-left:17%; line-height:1.1; color:black">{{ guest_name }}</b>
											{# <div style="border-bottom: 2px dotted; width:97%; margin-left:22%;"></div> #}
											</td>
											<td width="50%">
											<b style="margin-left:38%; color:black">{{ list_rooms }}</b>
											{# <div style="border-bottom: 2px dotted; width:86%; margin-left:12%;"></div> #}
											</td>
										</tr>
										<tr style="font-size:1.3em">
											<td>&nbsp;</td>
											<td colspan="2">
											{# : #}
											<b style="margin-left:10%; line-height:2.5; color:black">{{ checkinout }}</b>
											{# <div style="border-bottom: 2px dotted; width:97%; margin-left:2%;"></div> #}
											</td>
										</tr>
										<tr style="font-size:1.3em">
											<td>&nbsp;</td>
											<td colspan="2">
											{# : #}
											<b style="margin-left:10%; line-height:1.5; color:black">{{ description }}</b>
											{# <div style="border-bottom: 2px dotted; width:97%; margin-left:2%;"></div> #}
											</td>
										</tr>
										<tr style="font-size:1.3em">
											<td></td>
											<td colspan="2">
											<b style="margin-left:4%; color:black">&nbsp;</b>
											{# <div style="border-bottom: 2px dotted; width:97%; margin-left:2%;"></div> #}
											</td>
										</tr>
										<tr>
											<td>&nbsp;</td>
											<td></td>
											<td></td>
										</tr>
										<tr>
											<td></td>
											<td></td>
											<td>
												<span style="margin-left:35%; color:black">{{ date }}</span>
											</td>
										</tr>
										<tr style="font-size:1.1em">
											<td colspan="2">
											{# JUMLAH #}
											<b style="margin-left:35%; color:black; line-height: 2; font-size:1.8em">Rp. {{ total_amount }},-</b>
											</td>
											<td width="50%" align="center">
											{# {{  }} #}

											{# <p class="m-0 bold">NEW GARDEN HOTEL</p> #}
											
											</td>
										</tr>
										<tr>
											<td></td>
											<td colspan="2">&nbsp;</td>
										</tr>
										<tr>
											<td></td>
											<td colspan="2">&nbsp;</td>
										</tr>
									</table>
								</div>
							</div>

						</div>
					</div>

				</div>

			</div>
			<!-- /.row -->
		</div><!-- /.container-fluid -->
	</section>
	<!-- /.content -->

</div>

{% endblock  %}

{% block add_javascript %}
{{ parent() }}

<script type="text/javascript">
	// $('[data-widget="pushmenu"]').PushMenu('toggle');

	jQuery(function ($) {

		// Function available at https://gist.github.com/sixlive/55b9630cc105676f842c

		$.fn.printDiv = function () {
			var printContents = $(this).html();
			var originalContents = $('body').html();
			$('body').html(printContents);
			$('body').addClass('js-print');
			window.print();
			$('body').html(originalContents);
			$('body').removeClass('js-print');
		};

		// Print
		$('#button-print').click(function () {
			$('#master-content').printDiv();
			setTimeout(function () {
				window.close()
				location.reload();
			}, 10);
		});

	});
</script>

{% endblock  %}