<!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;
	}
	/*th, td{
		line-height: 0.429 !important;
	}*/


        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: 12px;
        }

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

        header .contact-info {
            font-size: 12px;
            margin-top: 5px;
        }

        header .contact-info-phone {
            font-size: 12px;
            margin-top: 5px;
            line-height: 1.1;
        }
</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;">
						<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:13px;white-space: nowrap;">
				<div class="col-xs-5">
					<div class="row">
						<div class="col-xs-3" >Date</div><div class="col-xs-9" id="txtDate" ><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-3" >Inv No.</div><div class="col-xs-9" id="txtInvoiceNo" ><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
					</div>
				</div>
			</div> -->

			<div class="col-xs-12">
			    <div class="col-xs-6">
			        <div class="row">
			            <div class="col-xs-12" style="padding-left: 0; padding-top: 0px; font-size: 12px;">
			                <div class="form-group">
			                	<div class="col-xs-12">Date</div>
			                	<div class="col-xs-12" id="txtDate" style="white-space: nowrap;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>

			                	<div class="col-xs-12" style="padding-top: 10px;">Start Date</div>
			                    <input type="text" class="form-control" id="txtStartDate" style="border: 2px solid black; padding: 5px;">


			                    <div class="col-xs-12" id="txtCustomerName" style="white-space: nowrap;padding-top: 10px;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
			                </div>
			                <div class="form-group">
			                	<div class="col-xs-12" id="txtPhone" style="white-space: nowrap;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
			                </div>

			            </div>
			        </div>
			    </div>
			    <!-- <div class="col-xs-2" style="padding-top: 8px;"> To </div> -->
			    <div class="col-xs-6">
			        <div class="row">
			            <div class="col-xs-12" style="padding-left: 0; padding-top: 0px; font-size: 12px;">
			                <div class="form-group">
			                	<div class="col-xs-12" >Inv No.</div>
			                	<div class="col-xs-12" id="txtInvoiceNo" ><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>

			                	 <div class="col-xs-12" style="padding-top: 10px;">End Date</div>
			                    <input type="text" class="form-control " id="txtEndDate" style="border: 2px solid black; padding: 5px;">
			                    <div class="col-xs-12" id="txtCustomerID" style="padding-left:0; padding-top: 0px;font-size:12px;padding-top: 10px;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
			                </div>
			                <div class="form-group" >
			                	<div class="col-xs-12" id="txtAddress" style="padding-left:0; padding-top: 0px;font-size:12px;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
			                </div>
			            </div>
			        </div>
			    </div>

			</div>
<!-- 			<div class="col-xs-12">
				<div class="col-xs-5.5">
					<input type="text" class="form-control" id="txtStartDate" style="border: 2px solid black; padding: 5px;">
				</div>
				<div class="col-xs-1">
						To
				</div>
				<div class="col-xs-5.5">
						<input type="text" class="form-control " id="txtEndDate" style="border: 2px solid black; padding: 5px;">
				</div>
			</div> -->

<!-- 			<div class="col-xs-12">
				<div class="col-xs-3" >
					<div class="row">
						<div class="col-xs-6" id="txtCustomerName" style="white-space: nowrap;"><p style="border-bottom: 1px dashed #ed1c31;">-</p></div>
					</div>
				</div>
				<div class="col-xs-2"></div>
				<div class="col-xs-7">
					<div class="row">
						<div class="col-xs-6" id="txtCustomerID" 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;padding-top: 10px;">
				<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;">Plan</th>
						    <th style="font-size: 14px;text-align: center;">Price</th>
							<th style="font-size: 14px;text-align: center;">Rf. Days</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-bottom: 9px;padding-top: 15px;color: black;">
				<div class="row">
					<div class="col-xs-4">	

							

<!-- 						<div class="row">
							<div class="col-xs-6" style="text-align:right; white-space: nowrap;">Customer ID: </div><span class="col-xs-6" id="txtCustomerID" style="text-align:right;padding-right:10px;"></span>
						</div>
						<div class="row">
							<div class="col-xs-6" style="text-align:right; white-space: nowrap;">Customer Name: </div><span class="col-xs-6" id="txtCustomerName" style="text-align:right;padding-right:23px; white-space: nowrap;"></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; white-space: nowrap;"></span>
						</div> -->
					</div>
					<div class="col-xs-8">	
						<div class="row">
							<div class="col-xs-7" style="text-align:right;">Extra Charges: </div><span class="col-xs-5" id="txtExtraCharges" style="text-align:right;"></span>
						</div>
						<div class="row">
							<div class="col-xs-7" style="text-align:right;">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:right;">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:right;">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:right;">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 = "<?=$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) {	
			
			$("#txtDate").text(data.date);
			$("#txtInvoiceNo").text(data.invoice_no);
			$("#txtStartDate").val(data.start_date);
			$("#txtEndDate").val(data.end_date);
			
			// $.each(data, function(i, v) {
				$("#myTable").find("tbody")
				.append($('<tr>')
					// .append("<td style='text-align:right;'>" + 1 + "</td>")
					.append("<td>" + data.package + data.months + "M</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.days + "</td>")
					// .append("<td style='text-align:right;'>" + data.fee + "</td>")
					.append("<td style='text-align:right;'>" + data.total + "</td>")

				);
			// });	

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

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


</script>
