<!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>555</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: 80mm !important;
/*        height: 127mm !important;*/
        margin-left: 5px;
        margin-top: 0px;;
    }
    
	body{
		width: 100%;
        height: 100%;
		font-size: 12px;
		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;
	}
/*	#txtCAddress {
  		white-space: pre-wrap;
    }*/
	/*th, td{
		line-height: 0.429 !important;
	}*/

	    body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
        }

        header {
            text-align: center;
            padding: 10px;
        }

        header h1 {
            margin: 0;
            font-size: 20px;
        }

        header p {
            margin: 5px 0 0;
            font-size: 14px;
        }

        header .myanmar-text {
            font-size: 15px;
            line-height: 1.6;
        }

        header .contact-info {
            font-size: 14px;
            margin-top: 5px;
        }
               
         header .contact-info-phone {
            font-size: 13px;
            margin-top: 5px;
            line-height: 1.1;
        }


</style>
</head>
<?php
$vid = "";
if(isset($_GET['vid'])){
	if(!empty($_GET['vid'])){
		$vid = $_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;">
						<header>
					        <h1 style="font-weight: bold;">Fiber Internet</h1>
					        <p style="font-weight: bold;" class="contact-info-phone">09-985500505</p>
					        <p style="font-weight: bold;" class="myanmar-text">အမှတ်(၃)၊ သဲတော ဝမ်းတွင်းလမ်းမကြီး၊ အောင်ချမ်းသာရပ်ကွက်၊ 555 မုန့်တိုက်၊ သဲတောမြို့ ။</p>
					        <p style="font-weight: bold;" class="contact-info">Kpay: 09-985500505 - Daw Nyunt Tin</p>
					    </header>

					</h2>
				</center>
			</div>
			<div class="col-xs-12" style="font-size:11px;white-space: nowrap;text-align: center;">
				<div class="col-xs-6">
					<div class="row">
						<div class="col-xs-4" >Date</div><div class="col-xs-8" id="txtDate" ><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="row">
						<div class="col-xs-4" >Inv No.</div><div class="col-xs-8" id="txtInvoiceNo" ><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
					</div>
				</div>
			</div>
			<div class="col-xs-12" style="font-size:11px;white-space: nowrap;text-align: center;">
				<div class="col-xs-6">
					<div class="row">
						<div class="col-xs-4" >Name</div><div class="col-xs-8" id="txtCustomerName" ><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="row">
						<div class="col-xs-4" >Phone</div><div class="col-xs-8" id="txtPhone" ><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;">Description</th>
						    <th style="font-size: 14px;text-align: center;">Qty</th>
						    <th style="font-size: 14px;text-align: center;">Price</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-6">	
					</div>
					<div class="col-xs-6">	
						
						<div class="row">
							<div class="col-xs-7" style="text-align:left;">Total: </div><span class="col-xs-5" id="txtTotalAmount" style="text-align:right;"></span>
						</div>
						<div class="row">
							<div class="col-xs-7" style="text-align:left;">Discount: </div><span class="col-xs-5" id="txtDiscount" style="text-align:right;"></span>
						</div>
						<div class="row">
							<div class="col-xs-7" style="text-align:left;">Advance: </div><span class="col-xs-5" id="txtAdvance" style="text-align:right;"></span>
						</div>
						<div class="row">
							<div class="col-xs-7" style="text-align:left;">Balance: </div><span class="col-xs-5" id="txtBalance" style="text-align:right;"></span>
						</div>
					</div>
				</div>
				<div class="row" style='padding-top:10px;text-align:center;'>
					<p  id="txtInvoiceRemark" style="padding-left:5px;font-size:14px;">"Thanks for choosing our fiber internet service."</p>
				</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 = "<?=$vid;?>";
	$(function(){
		// window.print();
		if(id){
			getOnePrint();
		}
	});


	function getOnePrint(){
		$("#myTable").find("tbody").find("tr").remove();
		$.ajax({
			url: APP_URL + "api/item_sales/get_one_sales.php",
			type: "POST",
			data: JSON.stringify({ voucher_no: id  })
		}).done(function(data) {	
			// $("#invoice_logo").attr("src", APP_URL + "api/city/upload/" + data.profile_picture);
			$("#txtCAddress").text(data.caddress);
			$("#txtDate").text(data.sales_date);
			$("#txtCustomerName").text(data.name);
			$("#txtInvoiceNo").text(data.voucher_no);
			$("#txtPhone").text(data.phone);
			// getAllCustomer(data.customer_id,data.sales_no);
			
			$.each(data.s_details, function(i, v) {
				$("#myTable").find("tbody")
		        .append($('<tr>')
					.append("<td style='width: 10px'>" + ($("#myTable tbody tr").length +1) + "</td>")
					.append("<td>" + v.description + "</td>")
					.append("<td style='text-align:right; '>" + v.quantity + "</td>")
					.append("<td style='text-align:right; '>" + parseInt(v.price).toLocaleString() + "</td>")
					.append("<td style='text-align:right; '>" + parseInt(v.quantity*v.price).toLocaleString() + "</td>")
					// .append("<td style='width: 70px'><button type='button' class='btn btn-danger btn-sm'  style='padding: 0px 19px;font-size: 14px;' onclick='$(this).parent().parent().remove();calculate();'>×</button></td>")
				)
	        });
			$("#txtTotalAmount").text(data.total_amount);
			$("#txtDiscount").text(data.discount);
			$("#txtAdvance").text(data.payment);
			$("#txtBalance").text(0);
			window.print();
		});
	}


</script>
