{% 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 />
                                {% blocktrans%}Order ID #{{ estimate.sale_orders.first.formatted_order_id }}{%endblocktrans%}
                                <br />
                                {{ estimate.sale_orders.first.created|date }}
                            </div>
                            <table class="invoice-items table">
                                <thead>
                                    <tr>
                                        <th>{% trans "Item" %}</th>
                                        <th class="text-end">{% trans "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>{% trans "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">{%trans "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 %}