{% 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-phoenix-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="icon-saudi_riyal"></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 %}