<!DOCTYPE html>
<?php include '../config/_globle.php'; ?>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/x-icon" href="<?=$app_url;?>img/logo_sm.png" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SPEED LINK</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
	<style type="text/css">
	@media print
	{
		table { page-break-inside:auto }
		tr    { page-break-inside:avoid; page-break-after:auto }
		thead { display:table-header-group;}
		tfoot { display:table-footer-group }
	}
	@page {
        size: auto;
        margin: 0;
    }
    html, body {
        width: 183mm !important;
        height: 127mm !important;
        margin-left: 25px;
        margin-top: 5px;;
    }
    
	body{
		width: 100%;
        height: 100%;
		font-size: 14px;
		font-family: 'Century Gothic';
		font-weight: bold;
		/*padding: 20px;*/
		/*color-adjust: exact;  -webkit-print-color-adjust: exact; print-color-adjust: exact;*/
	}
	.page-header {
	    border-bottom: 1px solid #eee0 !important;
	}
	/*th, td{
		line-height: 0.429 !important;
	}*/
	#txtCAddress {
  		white-space: pre-wrap;
    }


</style>
</head>
<?php
$id = "";
if(isset($_GET['vid'])){
	if(!empty($_GET['vid'])){
		$id = $_GET['vid'];
	}
}
?>
<body>
	<div class="wrapper">
		<section>
			<div class="col-xs-12" style="padding-left:0px; padding-right: 0px;">
				<center>
					<h2 class="page-header" style="margin:0px;">
						<!-- <i class="fa fa-globe"></i>Xtrame Co.LTD -->
						<!-- <div  style="margin-top:4px; font-size:15px; line-height:18px; font-weight: bold;float: left;color: #9f4dc4;padding-left: 100px;">Let's Go online</div> -->
						<img src="" style="width:150px;height:auto;float: left;" id="invoice_logo">
						<div class="col-xs-1"></div><span class="col-xs-9" id="txtCAddress" style="text-align:left;padding-top:9%; font-size:19px;"></span>
						<!-- <div style="margin-top:4px; font-size:16px; line-height:18px; font-weight: bold;float: left;color: #5d8af6; text-align: left;"><span class="badge badge-warning" style="width: 100px; ">Head Office</span> တိုးချဲ့ဆောင်(၁)၊ အခန်း(၅)၊ ကျွဲဆည်ကန်ပွဲရုံတန်း၊ ၇၈လမ်း နှင့် မြဝတီမင်းကြီး(၁)လမ်းဆုံ၊ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;မန္တလေးမြို့။</div>
						<div style="margin-top:4px; font-size:16px; line-height:18px; font-weight: bold;float: left;color: #5d8af6; text-align: left;"><span class="badge badge-warning" style="width: 100px; ">Daik-U Branch</span><span style="font-size:18px; line-height:18px; font-weight: bold;"> ငွေစင်ကြယ်</span> လျှပ်စစ်ပစ္စည်းမျိုးစုံ နှင့် မိုဘိုင်းဖုန်းအရောင်းစင်တာ အိမ်အမှတ်(၇၀)၊ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;အမှတ်(၂), ကုန်သည်ရပ်ကွက်၊ မင်းလမ်း၊ ဒိုက်ဦးမြို့။</div>
						<div style="margin-top:4px; font-size:16px; line-height:18px; font-weight: bold;float: left;color: #5d8af6; text-align: left;"><span class="badge badge-warning" style="width: 100px; ">Phone</span> 09-776600848, 09-776600767  -->

					</h2>
				</center>
				<!-- <img src="https://therestpos.com/gd/img/payment.jpg" style="width: 100%;"> -->
			</div>
			<div class="col-xs-12" style="padding-left:0px; padding-right: 0px;padding-top: 12px;color: black;padding-bottom: 9px;">
				<div class="col-xs-5" style="padding-right: 0px;padding-left: 25px;">
					<div class="row">
						<div class="col-xs-6" style="padding-top: 4px;">Date:</div><div class="col-xs-6" id="txtDate" style="padding-left:0; padding-top: 4px;font-size:13px;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
					</div>
				</div>
				<div class="col-xs-2"></div>
				<div class="col-xs-5">
					<div class="row">
						<div class="col-xs-6" style="padding-top: 4px;">Invoice NO.:</div><div class="col-xs-6" id="txtInvoiceNo" style="padding-left:0; padding-top: 4px;font-size:13px;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
					</div>
				</div>
				<!-- <div class="col-xs-5" style="padding-right: 0px;padding-left: 25px;">
					<div class="row">
						<div class="col-xs-5" style="padding-top: 4px;">Voucher No.:</div><div class="col-xs-7" id="txtInvoiceNo" style="padding-left:0; padding-top: 4px;font-size:13px;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
					</div>
				</div> -->
				
			</div>
			<div class="col-xs-12" style="padding-left:0px; padding-right: 0px;">
				<table class="table table-bordered" id="myTable" style="margin-bottom:0px;border: 1px solid #ddd">
					<thead>
						<tr style="background-color: #5d8af6;color: #fff;">
						    <th style="font-size: 14px;text-align: center;">No.</th>
						    <th style="font-size: 14px;text-align: center;">Internet Plan</th>
						    <th style="font-size: 14px;text-align: center;">Monthly Price</th>
							<th style="font-size: 14px;text-align: center;">Month</th>
							<th style="font-size: 14px;text-align: center;">Fee</th>
						    <th style="font-size: 14px;text-align: center;">Start Date</th>
						    <th style="font-size: 14px;text-align: center;">End Date</th>
						    <th style="font-size: 14px;text-align: center;">Amount</th>
						</tr>
					</thead>
					<tbody id="tbody">
					</tbody>
				</table>
			</div>
			<div class="col-xs-12" style="padding-left:0;padding-right:0;padding-bottom: 9px;padding-top: 15px;color: black;">
				<div class="row">
					<div class="col-xs-5">	
						<div class="row">
							<div class="col-xs-6" style="text-align:right;">Customer ID: </div><span class="col-xs-6" id="txtCustomerID" style="text-align:right;padding-right:23px;"></span>
						</div>
						<div class="row">
							<div class="col-xs-6" style="text-align:right;">Customer Name: </div><span class="col-xs-6" id="txtCustomerName" style="text-align:right;padding-right:23px;"></span>
						</div>
						<div class="row">
							<div class="col-xs-6" style="text-align:right;">Phone: </div><span class="col-xs-6" id="txtPhone" style="text-align:right;padding-right:23px;"></span>
						</div>
						<div class="row">
							<div class="col-xs-6" style="text-align:right;">Address: </div><span class="col-xs-6" id="txtAddress" style="text-align:right;padding-right:23px;"></span>
						</div>
					</div>
					<div class="col-xs-7">	
						<div class="row">
							<div class="col-xs-9" style="text-align:right;">Total: </div><span class="col-xs-3" id="txtTotalAmount" style="text-align:right;padding-right:23px;"></span>
						</div>
						<div class="row">
							<div class="col-xs-9" style="text-align:right;">Discount: </div><span class="col-xs-3" id="txtDiscount" style="text-align:right;padding-right:23px;"></span>
						</div>
						<div class="row">
							<div class="col-xs-9" style="text-align:right;">Advance: </div><span class="col-xs-3" id="txtAdvance" style="text-align:right;padding-right:23px;"></span>
						</div>
						<div class="row">
							<div class="col-xs-9" style="text-align:right;">Balance: </div><span class="col-xs-3" id="txtBalance" style="text-align:right;padding-right:23px;"></span>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-3"></div><span class="col-xs-6" id="txtInvoiceRemark" style="text-align:left;padding-top:20px; font-size:19px;"></span>
				</div>
			</div>
		</section>
	</div>
	<div style="page-break-before: always;"></div>
</body>
<script src="../plugins/jquery/jquery.min.js"></script>
</html>	

<script type="text/javascript">
	var APP_URL = '<?=$app_url;?>';
	var id = "<?=$id;?>";
	$(function(){
		// window.print();
		if(id){
			getOnePrint();
		}
	});

	function getOnePrint(){
		$("#myTable").find("tbody").find("tr").remove();
		$.ajax({
			url: APP_URL + "api/sales/get_one_row.php",
			type: "POST",
			data: JSON.stringify({ id: id  })
		}).done(function(data) {	
			$("#invoice_logo").attr("src", APP_URL + "api/city/upload/" + data.profile_picture);
			$("#txtCAddress").text(data.caddress);
			$("#txtDate").text(data.date);
			$("#txtInvoiceNo").text(data.invoice_no);
			$("#txtInvoiceRemark").text(data.invoice_remark);
			// getAllCustomer(data.customer_id,data.sales_no);
			
			// $.each(data, function(i, v) {
				$("#myTable").find("tbody")
				.append($('<tr>')
					.append("<td style='text-align:right;'>" + 1 + "</td>")
					.append("<td>" + data.package + "</td>")
					.append("<td style='text-align:right;'>" + data.price + "</td>")
					.append("<td style='text-align:right;'>" + data.months + "</td>")
					.append("<td style='text-align:right;'>" + data.fee + "</td>")
					.append("<td style='text-align:right;'>" + data.start_date + "</td>")
					.append("<td style='text-align:right;'>" + data.end_date + "</td>")
					.append("<td style='text-align:right;'>" + data.total_amount + "</td>")

				);
			// });	

			$("#txtCustomerName").text(data.name);
			$("#txtCustomerID").text(data.id_no);
			$("#txtPhone").text(data.phone);
			$("#txtAddress").text(data.address);

			$("#txtTotalAmount").text(data.total_amount);
			$("#txtDiscount").text(data.all_discount);
			$("#txtAdvance").text(data.payment);
			$("#txtBalance").text(data.balance);
			window.print();
		});
	}


</script>
