{% load i18n custom_filters %}
{% block customCSS %}
  <style>
    .invoice {
      width: 100%;
      height: 400px; /* Fixed height */
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* Aligns content to top and bottom */
      background-color: #fff;
      padding: 1rem;
    }
    .invoice-items {
      width: 100%;
    }
    .invoice-items td {
      padding: 0.75rem;
      border-top: 1px solid #dee2e6;
    }
    .invoice-items .total td {
      font-weight: bold;
      border-top: 2px solid #000;
    }
    .footer {
      margin-top: 2rem;
      text-align: center;
      color: #6c757d;
    }
    .b-top {
      border-top: 2px solid #000;
    }
  </style>
{% endblock %}
<div>
    <div class="row justify-content-center px-12">
        <button class="btn btn-primary" type="button" onclick="printDiv('printableArea')">
            <i class="fa-solid fa-print"></i> {{ _('Print') }}
        </button>
    </div>
  <div class="container" id="printableArea">
    <div class="row justify-content-center">
      <div class="col-md-10">
        <div class="card mt-2">
          <div class="card-body text-center">
            <h2 class="card-title">{{ _('Purchase Order') }}</h2>
          </div>
          <div class="card-body">
            <div class="invoice p-4">
              <div class="mb-4">
                <strong>{{ estimate.customer.customer_name }}</strong><br />
                Order ID #{{ estimate.sale_orders.first.formatted_order_id }}<br />
                {{ estimate.sale_orders.first.created|date }}
              </div>
              <table class="invoice-items table">
                <thead>
                  <tr>
                    <th>Item</th>
                    <th class="text-end">Price</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="b-top"></tr>
                  {% for item in data.cars %}
                    <tr>
                      <td>{{ item.make }}</td>
                      <td class="text-end">{{ item.unit_price|floatformat }}</td>
                    </tr>
                  {% endfor %}
                  <tr class="b-top">
                    <td>Additionals :</td>
                  </tr>
                  {% for service in data.additionals %}
                    <tr>
                      <td>{{ service.name }}</td>
                      <td class="text-end">{{ service.price_|floatformat }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
          <div class="card-body text-center">
            <table class="invoice-items table">
              <thead>
                <tr>
                  <th></th>
                  <th class="text-end">Total</th>
                </tr>
              </thead>
              <tbody>
                <tr class="total">
                  <td class="text-end" width="80%"></td>
                  <td class="text-end">{{ data.grand_total|floatformat }}<span class="currency">{{ CURRENCY }}</span></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="card-body text-center"></div>
        </div>
        <div class="mt-5">
          <p>{{ _('Signature') }}:</p>
        </div>        
      </div>
    </div>
  </div>
</div>

{% block customJS %}
  <script>
    function printDiv(divName) {
      var printContents = document.getElementById(divName).innerHTML
      var originalContents = document.body.innerHTML
    
      document.body.innerHTML = printContents
    
      window.print()
    
      document.body.innerHTML = originalContents
    }
  </script>
{% endblock %}