<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="{{ asset("css/bootstrap.min.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("css/icons/fontawesome/styles.min.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("treegrid/css/jquery.treegrid.css")}}" rel="stylesheet" type="text/css">
	<script src="{{ asset("js/core/libraries/jquery.min.js")}}"></script>
	<script src="{{ asset("js/jzebra.js") }}"></script>

	<style>

        @page { margin: 10px; }

        body {
        	font-family: arial;
        }

          .page_break { page-break-before: always; }

          .page-number:after { content: counter(page); }

          .table-data-header{
          	font-weight: bold;
          	font-size: 13px;
          }

          .table-title{
          	font-size: 14px;
          	font-weight: bold;
          	text-align: center;
          	width: 100%;
          	margin-top: 20px;
          	margin-bottom: 10px;
          }

          .table-title td{
          	text-align: center;
          }

          #table-data{
          	font-size: 12px;
          	font-weight: bold;
	        border: 1px solid #555;
	        margin-bottom: 10px;
          }

          #table-signature{
          	font-size: 12px;
          	font-weight: bold;
	        border: 1px solid #555;
          }

          #table-data th{
            border: 1px solid #aaa;
            border-collapse: collapse;
            border-bottom: 3px solid #ccc;
            background: #fff;
            padding: 8px 15px;
            font-size: 10pt;
          }

          #table-data td{
            border: 1px solid #000;
          }

          #table-signature td{
            border: 1px solid #000;
          }

          #table-data td.currency{
            text-align: right;
            padding-right: 5px;
          }

          #table-data td.no-border{
            border: 0px;
          }

          #table-data td.total.not-same{
             color: red !important;
             -webkit-print-color-adjust: exact;
          }

          #table-data-inside{
            font-size: 9pt;
            margin-top: 5px;
          }

          #table-data-inside td{
            padding: 5px 15px;
            border: 0px solid #333;
          }

          #table-data-inside td.lv1{
            padding: 5px 10px;
          }

          #table-data-inside td.lv2{
            padding: 5px 10px;
          }

          #table-data-inside td.lv3{
            padding: 5px 10px;
            font-style: italic;
          }

          #table-data-inside td.money{
            text-align: right;
            padding: 5px 10px;
            font-weight: bold;
          }

          #table-data-inside td.total{
            border-top: 2px solid #777; ;
          }

          #navigation ul{
            float: right;
            padding-right: 110px;
          }

          #navigation ul li{
            color: #fff;
            font-size: 15pt;
            list-style-type: none;
            display: inline-block;
            margin-left: 40px;
          }

           #form-table{
              font-size: 8pt;
            }

            #form-table td{
              padding: 5px 0px;
            }

            #form-table .form-control{
              height: 30px;
              width: 90%;
              font-size: 8pt;
            }

        #layout{
        	margin-top: 80px;
        	padding: 10px 15px;
        	height: 600px;
        }

      </style>

      <style type="text/css" media="print">
        @page {
        	size: portrait;
        }
        html, body{
        	width: 125mm;
        	/*height: 250mm;*/
        }
        #navigation{
            display: none;
          }

          #layout{
          	margin-top: 20px;
          }

          .page-break { display: block; page-break-before: always; }
      </style>
</head>
<body onLoad="detectPrinter()">
	{{-- <div class="col-md-12" id="navigation" style="background: rgba(0, 0, 0, 0.4); box-shadow: 0px 2px 5px #444; position: fixed; z-index: 2;">
        <div class="row">
          <div class="col-md-7" style="background: none; padding: 15px 15px; color: #fff; padding-left: 120px;">
            CV. Ketjubung
          </div>
          <div class="col-md-5" style="background: none; padding: 10px 15px 5px 15px">
            <ul>
              <li><i class="fa fa-print" style="cursor: pointer;" id="print" data-toggle="tooltip" data-placement="bottom" title="Print Surat Jalan"></i></li>
            </ul>
          </div>
        </div>
    </div> --}}

    {{-- <div class="col-md-4 col-md-offset-3" id="layout" style="background: white;">

        <table class="table-data-header">
        	<tr>
        		<td width="5%">TGL</td>
        		<td width="1%" class="text-center">:</td>
        		<td width="45%" style="padding-left: 5px">{{ date_db($data['data'][0]->tanggal_surat, 2) }}</td>
        		<td width="100%" class="text-center">KEPADA YTH</td>
        	</tr>
        	<tr>
        		<td width="50px;"></td>
        		<td width="10px" class="text-center"></td>
        		<td width="65px" style="padding-left: 5px"></td>
        		<td width="100%" class="text-center">{{ $data['data'][0]->nama }}</td>
        	</tr>
        	<tr>
        		<td width="50px;"></td>
        		<td width="10px" class="text-center"></td>
        		<td width="65px" style="padding-left: 5px"></td>
        		<td width="100%" class="text-center">{{ $data['data'][0]->alamat }}</td>
        	</tr>
        	<tr>
        		<td width="50px;"></td>
        		<td width="10px" class="text-center"></td>
        		<td width="65px" style="padding-left: 5px"></td>
        		<td width="100%" class="text-center">{{ $data['data'][0]->id_kabupaten }}</td>
        	</tr>
        </table>

	    <table class="table-title">
	    	<tr>
	    		<td>SURAT JALAN</td>
	    	</tr>
	    	<tr>
	    		<td>NO : {{ $data['data'][0]->no_surat.$data['data'][0]->sufix_no_surat }}</td>
	    	</tr>
	    </table>

        <table id="table-data" width="100%">
	        <tr>
	          <td width="5%" class="text-center">NO</td>
	          <td width="25%" class="text-center">
	            NAMA BARANG
	          </td>
	          <td width="10%" class="text-center">
	            QTY
	          </td>
	          <td width="10%" class="text-center">KETERANGAN</td>
	        </tr>

	        @php($no=1)
	        @if(count($data['data']) > 0)
		        @foreach($data['data'] as $d)
			        <tr>
			          <td width="5%" class="text-center">{{ $no }}</td>
			          <td width="25%" class="text-left" style="padding-left: 5px">
			            {{ $d->nama_barang }}
			          </td>
			          <td width="10%" class="text-center">
			            {{ $d->jml_barang.' '.$d->nama_satuan }}
			          </td>
			          <td width="10%" class="text-left" style="padding-left: 5px">{{ $d->keterangan }}</td>
			        </tr>
			        @php($no++)
		        @endforeach
	        @endif

	        @if($no < 9)
	        	@for($i=$no; $i < 9; $i++)
	        		<tr>
			          <td width="5%" class="text-center">{{ $no }}</td>
			          <td width="25%" class="text-left" style="padding-left: 5px"></td>
			          <td width="10%" class="text-center"></td>
			          <td width="10%" class="text-left" style="padding-left: 5px"></td>
			        </tr>
			        @php($no++)
	        	@endfor
	        @endif
        </table>

        <table id="table-signature" width="100%">
        	<tr>
        		<td class="text-center">Penerima</td>
        		<td class="text-center">Keamanan</td>
        		<td class="text-center">Mengetahui</td>
        		<td class="text-center">Pengirim</td>
        	</tr>
        	<tr>
        		<td class="text-center" style="height: 40px;"></td>
        		<td class="text-center" style="height: 40px;"></td>
        		<td class="text-center" style="height: 40px;"></td>
        		<td class="text-center" style="height: 40px;"></td>
        	</tr>
        </table>

    </div> --}}

    <table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr> <td colspan="2" bgcolor="#000000"><span id="printerStatusBar" style="color: #fff;">Loading...</span></td></tr>
    <tr> <td width="47%"><form name="form1" method="post" >
    String untuk dicetak<br>
    <textarea name="struk" cols="50" rows="7" id="struk"></textarea>
    <br><input name="button" type=button onClick="printStruk(form1.struk.value)" value="Test Cetak">
    <input name="button2" type=button onClick="print64()" value="Test Cetak (Base64)">
    <input type="reset" name="Reset" value="Reset"></form></td>
    <td width="53%">
    {{-- <applet name="jZebra" code="jzebra.RawPrintApplet.class" archive="{{ asset("js/jzebra.jar")}}" width="100" height="100">
    <param name="printer" value="L3110-Series">
    <param name="sleep" value="200"></applet> --}}
<applet name="jZebra" code="jzebra.PrintApplet.class" archive="{{ asset("js/jzebra.jar")}}" width="10" height="10" style="background-color: #FAFAFA">
	<param name="printer" value="zebra">
</applet></td></tr></table>

    <script type="text/javascript">
        $(document).ready(function(){
        	// self.print();

          baseUrl = '{{ url('/') }}';

          // script for neraca

          $('#print').click(function(evt){
            evt.preventDefault();

            // self.print();
          })

        })

        function detectPrinter()
        {
	        var applet = document.jZebra;
	        if (applet != null)
	        {
		        applet.findPrinter("zebra");
		        while (!applet.isDoneFinding())
		        {
		        // Wait
		        }
		        var ps = applet.getPrintService();
		        if (ps == null){
		        	var info="Printer belum siap";
		        } else {
		        	var info="Printer \"" + ps.getName() + "\" siap";
		        }
	        } else {
	        	var info="Java Runtime belum siap!";
	        	document.getElementById("printerStatusBar").innerHTML=info;
	        	window.setTimeout('detectPrinter()',5000);
	        }
        }
         
        function printStruk(str)
        {
        var applet = document.jZebra;
        if (applet != null)
        {
        // Plain Text
        str=returnEnter(str);
        applet.append(str);
        // Send to the printer
        applet.print();
        while (!applet.isDonePrinting())
        {
        // Wait
        }
        var e = applet.getException();
        if (e == null) var info="Printed Successfully";
        else var info="Error: " + e.getLocalizedMessage();
        }
        else
        {
        var info="Printer belum siap";
        }
        document.getElementById("printerStatusBar").innerHTML=info;
        }
         
        function returnEnter(dataStr)
        {
        return dataStr.replace(/(\r\n|\r|\n)/g, "\n");
        }

        function print64() {
           var applet = document.jzebra;
           if (applet != null) {
              // Use jZebra's `"append64"` function. This will automatically convert provided
              // base64 encoded text into ascii/bytes, etc.
              applet.append64("QTU5MCwxNjAwLDIsMywxLDEsTiwialplYnJhIHNhbXBsZS5odG1sIgpBNTkwLDE1NzAsMiwzLDEsMSxOLCJUZXN0aW5nIHRoZSBwcmludDY0KCkgZnVuY3Rpb24iClAxCg==");
              
              // Send characters/raw commands to printer
              applet.print();
           }
           
           // *Note:  monitorPrinting() still works but is too complicated and
           // outdated.  Instead create a JavaScript  function called 
           // "jzebraDonePrinting()" and handle your next steps there.
           monitorPrinting();
        }

              function monitorPrinting() {
        	var applet = document.jzebra;
        	if (applet != null) {
        	   if (!applet.isDonePrinting()) {
        	      window.setTimeout('monitorPrinting()', 100);
        	   } else {
        	      var e = applet.getException();
        	      alert(e == null ? "Printed Successfully" : "Exception occured: " + e.getLocalizedMessage());
                      applet.clearException();
        	   }
        	} else {
                    alert("Applet not loaded!");
                }
              }
    </script>
</body>
</html>