<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
		<meta name="application-name" content="TCorp E-Hub">
		<meta name="author" content="Salihin Premier Solutions">
		<meta name="description" content="TCorp E-Hub reporting page">
		<meta name="keywords" content="reporting,report,tekun,tekun corporation,entrepreneur hub,TCorp E-Hub">
		<link rel="shortcut icon" href="<?php echo base_url()?>dist/img/tlogo.png">
        <title>CRM - <?php echo (isset($rptTitle) ? $rptTitle : 'Report'); ?></title>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,700">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<link rel="stylesheet" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		<style type="text/css">
		* {
			font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
			font-size: 1em;
		}
		small {
			font-size: 0.8em;
		}
		a:link, a:visited {
			text-decoration: none;
		}
		header, footer, section {
			padding: 0 0 20px;
			z-index: 1;
			clear: both;
		}
		header .report-title {
			padding: 0 5px 0 0;
		}
		header .t-corp {
			width: 220px;
			text-align: center;
			padding: 20px 0 0 5px;
		}
		header .t-corp-name {
			width: inherit;
			margin: 0 auto;
			padding: 8px 0 0;
		}
		header .t-corp-logo {
			margin: 0 auto;
			text-align: center;
		}
		header .t-corp-logo img {
			width: 100%;
		}
		header .company {
			margin: 10px 0 0;
			width: 100%;
		}
		header .company span, header label {
			display: block;
		}
		header .company .divider {
			vertical-align: top;
			width: 35%;
			min-height: 100px;
		}
		header .company .details {
			width: 30%;
			text-align: center;
		}
		header .company .line {
			width: 100%;
			border-top: 4px solid #444;
			margin: 10px 0 0;
		}
		header .company > td {
			min-height: 100px;
		}
		nav {
			display: inline-block;
			float: right;
			width: auto;
			margin: 0 auto;
			padding: 5px 15px;
			z-index: 2;
			text-align: center;
			position: relative;
		}
		section pre b {
			font-family: Arial, sans-serif !important;
		}
		section pre {
			background: none;
			border: none;
			margin: 0;
			padding: 0;
			line-height: 2em;
		}
		section h5 {
			font-weight: 700;
		}
		section table td, section table th {
			padding: 10px 7px;
			vertical-align: top;
		}
		section table th {
			border-top: 3px solid #444;
			border-bottom: 3px solid #444;
		}
		section table tr:last-child td {
			border-bottom: 3px solid #444;
		}
		section table tbody tr {
			min-height: 100px !important;
		}
		section .item {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		section .item-title {
			font-weight: 700;
		}
		section table {
			margin: 10px 0 0;
		}
		section .grand-total {
			border: 4px solid #444;
			padding: 8px 10px 0;
			margin: 20px 0 0;
		}
		section .grand-total span {
			display: block;
		}
		.customer-panel {
			padding: 25px 0 10px;
		}
		.customer-panel .address {
			text-transform: capitalize !important;
		}
		.tar {
			text-align: right;
		}
		.tac {
			text-align: center;
		}
		.total-title {
			display: inline;
			padding: 7px 15px 0;
			text-align: left;
			color: #333;
			font-weight: 700;
			text-align: right;
		}
		.total-value {
			display: inline;
			padding: 7px 15px 0;
			text-align: left;
			color: #333;
		}
		.terms .title {
			font-weight: 700;
			text-decoration: underline;
		}
		.terms .space:first-of-type {
			padding: 0;
		}
		.terms .space {
			padding: 10px 0 0;
			line-height: 2em;
			text-align: justify;
		}
		.terms ol {
			padding: 0;
			margin: 0 0 0 10px;
		}
		.terms li {
			padding: 0 0 0 15px;
		}
		.terms .name {
			line-height: 1em;
			font-size: 12pt;
			font-weight: 700;
			display: block;
			text-transform: uppercase;
		}
		.terms .generated {
			width: 150px;
			padding: 3px 0;
			border-top: 1px dashed #444;
			margin: 100px 0 0;
			text-align: center;
		}
		.terms .generated:after {
			line-height: 1em;
			content: "TEKUN";
			position:absolute;
			top: 30px;
			left: 30px;
			z-index: 1;
			-webkit-transform: rotate(-25deg); /* Safari */
			-moz-transform: rotate(-25deg); /* Firefox */
			-ms-transform: rotate(-25deg); /* IE */
			-o-transform: rotate(-25deg); /* Opera */
			transform: rotate(-25deg);
			font-size: 18pt;
			color: #c00;
			background: #fff;
			border: solid 4px #c00;
			padding: 8px;
			border-radius: 5px;
			zoom: 1;
			filter: alpha(opacity=30);
			opacity: 0.3;
			-webkit-text-shadow: 0 0 2px #c00;
			text-shadow: 0 0 2px #c00;
			box-shadow: 0 0 2px #c00;
		}
		@page {
			size: auto;
			margin: 8mm 10mm;
		}
		@media print {
			header .company .divider { width: 25%; }
			header .company .details { width: 50%; }
			header .t-corp { width: 200px; }
			.btn-icon, nav { display:none; }
			.pagebreak { page-break-before: always; }
			table { page-break-inside:auto }
			tr    { page-break-inside:avoid; page-break-after:auto }
			thead { display:table-header-group }
			tfoot { display:table-footer-group }
		}
		@media screen and (max-width:360px) {
			header .t-corp {
				width: 180px;
			}
		}
		left {
			float:right;
			border-radius: 5px;
			padding: 20px; 
			width: 300px;
			height: 100px;    
		}
		#rounded {
			border-radius: 25px;
			border: 2px solid;
			padding: 20px; 
			width: 570px;
			height: 118px; 
		}
		</style>
    </head>
	<body>
		<nav class="btn-panel">
			<div class="pull-right btn-group">
				<button type="button" class="btn btn-default" onClick="do_print()"><span class="fa fa-print"></span></button>
				<button type="button" class="btn btn-default"><span class="fa fa-file-excel-o"></span></button>
				<button type="button" class="btn btn-default"><span class="fa fa-file-pdf-o"></span></button>
				<a type="button" class="btn btn-default" href="javascript:close();"><span class="fa fa-close"></span></a>
			</div>
		</nav>
		<header class="container">
			<div class="row">
				<div class="col-xs-12">
					<!--<div class="t-corp ">
						<div class="t-corp-logo pull-center ">
							<img src="<?php echo base_url().'assets/images/logo/salihin-logo.png'; ?>" alt="company logo" align="center" />
						</div>
						<div class="t-corp-name"><b>SPS</b> | CRM SYSTEM</div>
					</div>
					<!--<div class="report-title pull-right">
						<h2><?php// echo (isset($title) ? $title : 'Report'); ?></h2>
					</div>-->
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-12">
					<br>
					
					<!--<table class="rcorners" border="1" cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td>
								Name:
								<br>Employee ID:
								<br>Department:
							</td>
							<td>
								Wages Month:
								<br>IC No:
								<br>Designation:
							</td>
						</tr>
					</table>-->
				</div>
			</div>
		</header>
