{% extends 'store/base.html' %}
{% block title %}Invoice detail{% endblock %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Order confirmation </title>
<meta name="robots" content="noindex,nofollow" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<style>
  @import "compass/css3";
  .invoice-receipt {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
    width: 50%;
    background-color: #ffffff;
    font-family: 'courier';
  }
</style>
<div class="container text-center m-5">
<a class="btn btn-success btn-sm"><i class="fa fa-print"></i> Print</a>
</div>
<div class="container invoice-receipt p-5">
  <!-- Header -->
  <table width="100%" cellpadding="0" cellspacing="0" align="center" class="fullTable" >
    <tr>
      <td height="20"></td>
    </tr>
    <tr>
      <td>
        <table width="600" cellpadding="0" cellspacing="0" align="center" class="fullTable" style="border-radius: 10px 10px 0 0;">
          <tr class="hiddenMobile">
            <td height="40"></td>
          </tr>
          <tr class="visibleMobile">
            <td height="30"></td>
          </tr>

          <tr>
            <td>
              <table width="480" cellpadding="0" cellspacing="0" align="center" class="fullPadding">
                <tbody>
                  <tr>
                    <td>
                      <table width="220" cellpadding="0" cellspacing="0" align="left" class="col">
                        <tbody>
                          <tr>
                            <td align="left">InventoryMS</td>
                          </tr>
                          <tr class="hiddenMobile">
                            <td height="40"></td>
                          </tr>
                          <tr class="visibleMobile">
                            <td height="20"></td>
                          </tr>
                          <tr>
                            <td style="font-size: 12px; color: #5b5b5b;  line-height: 18px; vertical-align: top; text-align: left;">
                              Hello, {{invoice.customer_name}}
                              <br> Thank you for shopping from our store and for your order.
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <table width="220" cellpadding="0" cellspacing="0" align="right" class="col">
                        <tbody>
                          <tr class="visibleMobile">
                            <td height="20"></td>
                          </tr>
                          <tr>
                            <td height="5"></td>
                          </tr>
                          <tr>
                            <td style="font-size: 21px; color: #ff0000; letter-spacing: -1px;  line-height: 1; vertical-align: top; text-align: right;">
                              Invoice
                            </td>
                          </tr>
                          <tr>
                          <tr class="hiddenMobile">
                            <td height="50"></td>
                          </tr>
                          <tr class="visibleMobile">
                            <td height="20"></td>
                          </tr>
                          <tr>
                            <td style="font-size: 12px; color: #5b5b5b;  line-height: 18px; vertical-align: top; text-align: right;">
                              <small>ORDER</small> #800000025<br />
                              <small>{{invoice.date}}</small>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- /Header -->
  <!-- Order Details -->
  <table width="100%" cellpadding="0" cellspacing="0" align="center" class="fullTable">
    <tbody>
      <tr>
        <td>
          <table width="600" cellpadding="0" cellspacing="0" align="center" class="fullTable">
            <tbody>
              <tr>
              <tr class="hiddenMobile">
                <td height="60"></td>
              </tr>
              <tr class="visibleMobile">
                <td height="40"></td>
              </tr>
              <tr>
                <td>
                  <table width="480" cellpadding="0" cellspacing="0" align="center" class="fullPadding">
                    <tbody>
                      <tr>
                        <th style="font-size: 12px;  color: #5b5b5b; font-weight: normal; line-height: 1; vertical-align: top; padding: 0 10px 7px 0;" width="52%" align="left">
                          Item
                        </th>
                        <th style="font-size: 12px;  color: #5b5b5b; font-weight: normal; line-height: 1; vertical-align: top; padding: 0 0 7px;" align="center">
                          Quantity
                        </th>
                        <th style="font-size: 12px;  color: #1e2b33; font-weight: normal; line-height: 1; vertical-align: top; padding: 0 0 7px;" align="right">
                          Subtotal
                        </th>
                      </tr>
                      <tr>
                        <td height="1" style="background: #bebebe;" colspan="4"></td>
                      </tr>
                      <tr>
                        <td height="10" colspan="4"></td>
                      </tr>
                      <tr>
                        <td style="font-size: 12px;  color: #ff0000;  line-height: 18px;  vertical-align: top; padding:10px 0;" class="article">
                          {{invoice.item.name}}
                        </td>

                        <td style="font-size: 12px;  color: #646a6e;  line-height: 18px;  vertical-align: top; padding:10px 0;" align="center">{{invoice.quantity}}</td>
                        <td style="font-size: 12px;  color: #1e2b33;  line-height: 18px;  vertical-align: top; padding:10px 0;" align="right">Ksh {{invoice.price_per_item}}</td>
                      </tr>
                      <tr>
                        <td height="1" colspan="4" style="border-bottom:1px solid #e4e4e4"></td>
                      </tr>
                      <tr>
                        <td height="1" colspan="4" style="border-bottom:1px solid #e4e4e4"></td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="20"></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- /Order Details -->
  <!-- Total -->
  <table width="100%" cellpadding="0" cellspacing="0" align="center" class="fullTable">
    <tbody>
      <tr>
        <td>
          <table width="600" cellpadding="0" cellspacing="0" align="center" class="fullTable">
            <tbody>
              <tr>
                <td>

                  <!-- Table Total -->
                  <table width="480" cellpadding="0" cellspacing="0" align="center" class="fullPadding">
                    <tbody>
                      <tr>
                        <td style="font-size: 12px;  color: #646a6e; line-height: 22px; vertical-align: top; text-align:right; ">
                          Subtotal
                        </td>
                        <td style="font-size: 12px;  color: #646a6e; line-height: 22px; vertical-align: top; text-align:right; white-space:nowrap;" width="80">
                          {{invoice.total}}
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 12px;  color: #646a6e; line-height: 22px; vertical-align: top; text-align:right; ">
                          Shipping &amp; Handling
                        </td>
                        <td style="font-size: 12px;  color: #646a6e; line-height: 22px; vertical-align: top; text-align:right; ">
                          {{invoice.shipping}}
                        </td>
                      </tr>
                      <tr>
                        <td style="font-size: 12px;  color: #000; line-height: 22px; vertical-align: top; text-align:right; ">
                          <strong>Grand Total</strong>
                        </td>
                        <td style="font-size: 12px;  color: #000; line-height: 22px; vertical-align: top; text-align:right; ">
                          <strong>{{invoice.grand_total}}</strong>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <!-- /Table Total -->

                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- /Total -->
  <!-- /Information -->
  <table width="100%" cellpadding="0" cellspacing="0" align="center" class="fullTable" >

    <tr>
      <td>
        <table width="600" cellpadding="0" cellspacing="0" align="center" class="fullTable" style="border-radius: 0 0 10px 10px;">
          <tr>
            <td>
              <table width="480" cellpadding="0" cellspacing="0" align="center" class="fullPadding">
                <tbody>
                  <tr>
                    <td style="font-size: 12px; color: #5b5b5b;  line-height: 18px; vertical-align: top; text-align: left;">
                      Have a nice day.
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr class="spacer">
            <td height="50"></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="20"></td>
    </tr>
  </table>
</div>
{% endblock %}