<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link href="<?=base_url();?>/assets/style.css" rel="stylesheet">
	<!-- SETTING MEDIA PRINT. HANYA AKTIF KETIKA PRINT DOCUMENT -->
	<style>
		@page {
			size: A4;
			margin: 0;
		}

		@media print {

			html,
			body {
				width: 100% !important;
     		 	min-width: auto !important;
				width: 210mm;
				height: 297mm;
				margin:0;
			}

			.page {
				/* margin: 50px; */
				border: initial;
				border-radius: initial;
				width: initial;
				min-height: initial;
				/* box-shadow: initial; */
				background: initial;
				page-break-after: always;
			}

			/* h4{ margin:0; padding:0; } */
			p { margin:0; padding:0; }
			.card-footer-btn {
				display: flex;
				align-items: center;
				border-top-left-radius: 0 !important;
				border-top-right-radius: 0 !important;
			}

			.text-uppercase-bold-sm {
				text-transform: uppercase !important;
				font-weight: 500 !important;
				letter-spacing: 2px !important;
				font-size: .85rem !important;
			}

			.hover-lift-light {
				transition: box-shadow .25s ease, transform .25s ease, color .25s ease, background-color .15s ease-in;
			}

			.justify-content-center {
				justify-content: center !important;
			}

			.btn-group-lg>.btn,
			.btn-lg {
				padding: 0.8rem 1.85rem;
				font-size: 1.1rem;
				border-radius: 0.3rem;
			}

			.btn-dark {
				color: #fff;
				background-color: #1e2e50;
				border-color: #1e2e50;
			}

			.card {
				position: relative;
				display: flex;
				flex-direction: column;
				min-width: 0;
				word-wrap: break-word;
				background-color: #fff;
				background-clip: border-box;
				border: 1px solid rgba(30, 46, 80, .09);
				border-radius: 0.25rem;
				/* box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%); */
			}

			.p-5 {
				padding: 3rem !important;
			}

			.card-body {
				flex: 1 1 auto;
				padding: 1.5rem 1.5rem;
			}

			tbody,
			td,
			tfoot,
			th,
			thead,
			tr {
				border-color: inherit;
				border-style: solid;
				border-width: 0;
			}

			.table td,
			.table th {
				border-bottom: 0;
				border-top: 1px solid #edf2f9;
			}

			.table>:not(caption)>*>* {
				/* padding: 1rem 1rem; */
				background-color: var(--bs-table-bg);
				border-bottom-width: 1px;
				box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
			}

			.px-0 {
				padding-right: 0 !important;
				padding-left: 0 !important;
			}

			.table thead th,
			tbody td,
			tbody th {
				vertical-align: middle;
			}

			tbody,
			td,
			tfoot,
			th,
			thead,
			tr {
				border-color: inherit;
				border-style: solid;
				border-width: 0;
			}

			.mt-5 {
				margin-top: 3rem !important;
			}
		}
	</style>
</head>

<body class='bg-white'>

	<h4 class="mt-2 text-center fw-bold"> Data Activity Periode <?=$opendate . ' to ' . $closedate;?> </h4>

	<div class='text-center'>
		<button class='btn btn-primary mb-3' onclick="printDiv('pdf')">Cetak PDF</button>	
	</div>
	
	<div class="pdf" id="pdf">
		
		<?php
		foreach($export as $data) { 
			$actid = $data['actid'];

			if($data['action'] == 'r'){
				$actby = 'Remote';
			} else if($data['action'] == 'p'){
				$actby = 'Phone';
			} else if($data['action'] == 'o'){
				$actby = 'On Site';
			} else {
				$actby = '-';
			}

			array('WA'=>'Whatsapp', 'PH'=> 'Phone', 'VB' => 'Verbal', 'LT'=>'Letter', 'CRM'=>'Direct CRM', 'SKP'=>'Skype');

			if($data['media'] == 'WA'){
				$media = 'Whatsapp';
			} else if ($data['media'] == 'PH'){
				$media = 'Phone';
			} else if ($data['media'] == 'VB'){
				$media = 'Verbal';
			} else if ($data['media'] == 'LT'){
				$media = 'Letter';
			} else if ($data['media'] == 'CRM'){
				$media = 'Direct CRM';
			} else if ($data['media'] == 'SKP'){
				$media = 'Skype';
			} else {
				$media = '-';
			}
		?>

		<div class="page">
			<div class="row justify-content-center">
				<div class="col-12">
					<div class="card">
						<div class="card-body pt-1 px-4 pb-0">

							<!-- DONE -->
							<div class="row p-3">
								<div class="col-6">
									<h4 class='m-0 fw-bold'>ID : <?=$data['actid'];?></h4>
								</div>
								<div class="col-6 text-end">
									<h4 class='m-0 fw-bold'><?=$data['sitename'];?></h4>
								</div>
							</div>
							
							<!-- DONE -->
							<div class="border-top border-gray-200 p-0">
								<div class="row text-center">
									<div class="col-4">
										<div class="text-muted mb-1">Report Date</div>
										<strong><?=$data['reportdate'];?></strong>
									</div>
									<div class="col-4">
										<div class="text-muted mb-1">Open Date</div>
										<strong><?=$data['opendate'];?></strong>
									</div>
									<div class="col-4">
										<div class="text-muted mb-1">Close Date</div>
										<strong><?=$data['closedate'];?></strong>
									</div>
								</div>
							</div>

							<div class="border-top border-gray-200 p-0">

								<!-- DONE -->
								<div class="row mt-3">
									<div class="col-4">
											<p class='m-0'><b class='fw-bold'>Act Owner</b> : <strong><?=$data['firstname'];?> <?=$data['lastname'];?></strong></p>
											<p class='m-0'><b class='fw-bold'>Act Type</b> : <strong><?=$data['fulltext'];?></strong></p>
											<p class='m-0'><b class='fw-bold'>Action By</b> : <strong> <?= $actby;?> </strong></p>
										</div>
										<div class="col-4">
											<p class='m-0'><b class='fw-bold'>Media</b> : <strong><?=$media;?></strong></p>
											<p class='m-0'><b class='fw-bold'>Reference</b> : <strong><?=$data['actid_ref'];?></strong></p>
											<p class='m-0'><b class='fw-bold'>Report From</b> : <strong><?=$data['reportfrom'];?></strong></p>
										</div>
										<div class="col-4">
											<p class='m-0'><b class='fw-bold'>Product</b> : <strong><?=$data['productname'] != '' ? $data['productname'] : '-';?></strong></p>
											<p class='m-0'><b class='fw-bold'>Serial Number</b> : <strong><?=$data['productnumber'] != '' ? $data['productnumber'] : '-';?></strong></p>
											<p class='m-0'><b class='fw-bold'>Software Version</b> : <strong><?=$data['swversion'] != '' ? $data['swversion'] : '-' ;?></strong></p>
										</div>
									</div>
								</div>
								
								<!-- DONE -->
								<?php if (!empty($consumables[$actid])) { ?>
								<div class="row mt-3">

									<div class="col-12">
										<table class="table table-sm">
											<thead>
												<tr class='bg-light'>
													<th scope="col" colspan='3'><h4 class='text-center mb-0 fw-bold'><u>CONSUMABLES</u></h4></th>
												</tr>
												<tr>
													<th scope="col">Catalog Number</th>
													<th scope="col">Product Name</th>
													<th scope="col">Lot Number</th>
												</tr>
											</thead>
											<tbody>

									<?php foreach($consumables[$actid] as $datac) {
											$catalognumber = $datac['catalognumber'];
											$productname = $datac['productname'];
											$lotnumber = $datac['lotnumber'];
									?>
												<tr>
													<td class="text-muted"><?=$catalognumber?></td>
													<td class="text-muted"><?=$productname?></td>
													<td class="text-muted"><?=$lotnumber?></td>
												</tr>
									<?php } ?>
											</tbody>
										</table>
									</div>
										
								</div>
								<?php } ?>
								
								<!-- DONE -->
								<table class="table table-sm mb-0 mt-3">
									<thead>
										<tr class='bg-light'>
											<th scope="col"><h4 class='text-center mb-0 fw-bold mt-2 mb-1'><u><?=$data['subject'];?></u></h4></th>
										</tr>
									</thead>
									<tbody class='border-top border-gray-200'>
										<?php foreach($actdetails[$actid] as $datas) : 
												$acttext = $datas['fulltext'];
												$textvalue = $datas['textvalue'];
												$logdate = $datas['createdate'];
										?>
										<tr>									
											<td class="px-0">
												<div class="row fw-bold">
													<div class="col-6">
														<?=$acttext?> :
													</div>
													<div class="col-6 text-end">
														<?=$logdate?>
													</div>		
												</div>
												<?=$textvalue?>
											</td>
										</tr>
										<?php endforeach; ?>
									</tbody>
								</table>

								<!-- DONE -->
								<?php if (!empty($invtrans[$actid])) { ?>
								<div class="row mt-3">

									<!-- <div class="col-12">
										<h4 class='text-center mb-0 fw-bold'><u>TRANSACTIONS</u></h4>
									</div> -->

									<div class="col-12">
										<table class="table table-sm">
											<thead>
												<tr class='bg-light'>
													<th scope="col" colspan='5'><h4 class='text-center mb-0 fw-bold'><u>TRANSACTIONS</u></h4></th>
												</tr>
												<tr>
													<th scope="col">Catalog Number</th>
													<th scope="col">Product Name</th>
													<th scope="col">Lot Number</th>
													<th scope="col">Qty</th>
													<th scope="col">Unit</th>
												</tr>
											</thead>
											<tbody>

									<?php foreach($invtrans[$actid] as $datai) {
											$catalognumber = $datai['catalognumber'];
											$productname = $datai['productname'];
											$lotnumber = $datai['lotnumber'];
											$qty = $datai['qty'];
											$unit = $datai['unit'];
									?>
												<tr>
													<td class="text-muted"><?=$catalognumber?></td>
													<td class="text-muted"><?=$productname?></td>
													<td class="text-muted"><?=$lotnumber?></td>
													<td class="text-muted"><?=$qty?></td>
													<td class="text-muted"><?=$unit?></td>
												</tr>
									<?php } ?>
											</tbody>
										</table>
									</div>
										
								</div>
								<?php } ?>
							</div>
						
						</div>
					</div>
				</div>
			</div>

		<?php } ?>
		</div>
	</div>
	<script type="text/javascript">
		function printDiv(divName) {
			var printContents = document.getElementById(divName).innerHTML;
			var originalContents = document.body.innerHTML;
			document.body.innerHTML = printContents;
			window.print();
			document.body.innerHTML = originalContents;
		}
</script>
</body>

</html>