{% extends 'basic.html' %}
{% block title %}
Kiosk Antrian
{% endblock %}
{% block head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>

<script  type="text/javascript">
    function printDiv(divName) {
        // var printContents = document.getElementById(divName).innerHTML;
        // w=window.open();
        // w.document.write(printContents);
        // w.print();
        // w.close();
        var printContents = document.getElementById(divName).innerHTML;
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
        
        // Get the iframe's document
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        
        // Write your print contents to the iframe's document
        iframeDoc.write(printContents);
        iframeDoc.close();
        
        // Trigger the print action
        iframe.contentWindow.print();
        
        // Remove the iframe when done
        iframe.onload = function () {
          document.body.removeChild(iframe);
        };
    }
</script>
<script>
    function generatePDF() {
 var doc = new jsPDF();  //create jsPDF object
  doc.fromHTML(document.getElementById("test{{ waktusekarang }}"), // page element which you want to print as PDF
  15,
  15,
  {
    'width': 170  //set width
  },
  function(a)
   {
    doc.save("antrian{{ waktusekarang }}.pdf"); // save file name as printkma.pdf
  });
}
</script>
<script>
function refreshnomor() {
        setInterval('refreshNomorAntri()', 500);
}
function refreshNomorAntri() {
        $.ajax({
        url: '/pemeriksaan/automengantri',
        success: function(data) {
        $('#automengantribois').html(data);
        }
    });
}
</script>
    <script>
    function wakturefresh() {
            setInterval('refreshWaktu()', 1000);
    }
    function refreshWaktu() {
            $.ajax({
            url: '/pemeriksaan/autowaktusekarang',
            success: function(data) {
            $('#autowaktusekarang').html(data + "<br><small>Loket Pendaftaran</small>");
            }
        });
    }
    </script>
<script  type="text/javascript">
    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        w=window.open();
        w.document.write(printContents);
        w.print();
        w.close();
    }
</script>
{% endblock %}

{% block content %}
<!-- Header ends -->

<main class="h-100">
<!-- main page content -->
<div class="main-container container">

<div class="d-flex justify-content-center">
    <div class="row mb-3 mt-4 ">
        <div class="col">
            <h6>Mengantri Pendaftaran</h6>
        </div>
    </div>
</div>
<div class="d-flex justify-content-center" >
    <div class="row mt-4">
        <div class="col-12 mb-2">
                    <p class="text-color-theme text-center">Nomor Antrian yang akan di dapatkan </p>
            <div class="card">
                <div class="card-body">
    <div id="printableArea">
    <center id="printInvoice">
      <thead>
        <div style="border-bottom: 2px dashed;margin-bottom:20px">
            <div style="display: flex;flex-direction: row;">
                {% comment %} <b style="color:white">{{ info_dasar_faskes.nama }}</b><br> {% endcomment %}
                {% comment %} <div style="text-transform: uppercase;">{{ info_dasar_faskes.alamat }}</div> {% endcomment %}
                <div style="width: 70%;text-transform: uppercase; font-size:14px; text-align: center;align-self: center;">
                   <h2 style="padding-bottom: 5px">NINA DENTAL CARE</h2>
                </div>
                <div style="width: 30%">
                    <div id="logo" style="display:flex;justify-content: flex-end">
                        <img src="/media/public/logo/aklik.png" style="width: 100px;mix-blend-mode: luminosity;">
                    </div>
                </div>
            </div>
        </div>
      </thead>
      <tbody >
          NOMOR ANTRIAN
          <br>
          <center>
    <script>refreshnomor()</script>
    <h1 id="automengantribois"></h1>
    <script>wakturefresh()</script>
    <small><p id="autowaktusekarang"></p></small>
    <div style="height: 50px !important;opacity:0"><br>.</div>
        </center>
    </div>
                </div>
            </div>
        </div>
    </div>
       </tbody>
    </center>
</div>
<div class="d-flex justify-content-center">
    <form method="post" action="/pemeriksaan/antrianambilnomor" onsubmit="printDiv('printableArea')">
        {% csrf_token %}
            <button class="btn btn-primary rounded-15" type="submit">Antri</button>
        </form>
    </div>

</div>
</main>
{% endblock %}