<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}">
<head>
<meta charset="UTF-8" />
<title>{{ title }}</title>
<base href="{{ base }}" />
<link href="view/javascript/bootstrap/css/bootstrap.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="view/javascript/jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="view/javascript/bootstrap/js/bootstrap.min.js"></script>
<link href="view/javascript/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link type="text/css" href="view/stylesheet/stylesheet.css" rel="stylesheet" media="all" />
</head>
<body>
<div class="container">
    
  {% for order in orders %}
  <div style="page-break-after: always;">
    <div class="text-center">
      <img src="{{ order.store_logo }}" alt="Store Logo" width="120"/>
    </div>

    <p class="pull-left">
      <strong>Date:</strong> {{ order.date_added }}
    </p>
    <p class="pull-right">
    <button id="printpagebutton" type="button" onclick="printpage()"><i class="fa fa-print"></i> Print</button>
  
    </p>
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>{{ text_order_detail }}</td>
          <td style="width: 50%;"><b>Ship To</b></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width: 50%;">
              {% if order.invoice_no %}{{ text_invoice }} #{{ order.invoice_no }}{% else %}{{ order.text_order }}{% endif %}
          
            <address>
            <strong>{{ order.store_name }}</strong><br>
            {{ order.store_address }}<br />
             {{ order.store_telephone }}<br />
            {{ order.store_email }}
            </address>
          </td>
          <td style="width: 50%;">
            <address>
              {{ order.shipping_address }}
            </address>
          </td>
        </tr>
      </tbody>
    </table>
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <td><b>{{ column_product }}</b></td>
          <td><b>{{ column_model }}</b></td>
          <td class="text-right"><b>{{ column_quantity }}</b></td>
          <td class="text-right"><b>{{ column_price }}</b></td>
          <td class="text-right"><b>{{ column_total }}</b></td>
        </tr>
      </thead>
      <tbody>
        {% for product in order.product %}
        <tr>
          <td>{{ product.name }}
            {% for option in product.option %}
            <br/>
            &nbsp;<small> - {{ option.name }}: {{ option.value }}</small>
            {% endfor %}</td>
          <td>{{ product.model }}</td>
          <td class="text-right">{{ product.quantity }}</td>
          <td class="text-right">{{ product.price }}</td>
          <td class="text-right">{{ product.total }}</td>
        </tr>
        {% endfor %}
        {% for voucher in order.voucher %}
        <tr>
          <td>{{ voucher.description }}</td>
          <td></td>
          <td class="text-right">1</td>
          <td class="text-right">{{ voucher.amount }}</td>
          <td class="text-right">{{ voucher.amount }}</td>
        </tr>
        {% endfor %}
        {% for total in order.total %}
        <tr>
          <td class="text-right" colspan="4"><b>{{ total.title }}</b></td>
          <td class="text-right">{{ total.text }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if order.comment %}
    <table class="table table-bordered">
      <thead>
        <tr>
          <td><b>{{ text_comment }}</b></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ order.comment }}</td>
        </tr>
      </tbody>
    </table>
    {% endif %}
  </div>
  {% endfor %}
</div>
<script type="text/javascript">
  function printpage() {

    /* Get the print button and put it into a variable */

    var printButton = document.getElementById("printpagebutton");


    /* Set the button visibility to 'hidden' */
    printButton.style.visibility = 'hidden';

    /* Print the page content */
    window.print()

    /* Restore button visibility */
    printButton.style.visibility = 'visible';

  }
</script>
</body>
</html>
