{% extends 'admin_pages/base_admin.html' %}

{% block title %}Invoice # {{ sale_order.id }} | {{ sale_order.consumer.name }} {% endblock %}
{% load utils %}
{% load static %}
{% block content %}
<style>
    body {
        margin-top: 0px;
        color: #070707;
    }
    .text-secondary-d1 {
        color: #070707 !important;
    }
    .page-header {
        margin: 0 0 1rem;
        padding-bottom: 1rem;
        padding-top: .5rem;
        border-bottom: 1px dotted #e2e2e2;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .text-600 {
        font-weight: 600 !important;
    }

    @media print {
        .navbar, .sidebar, footer, nav, .no-print, .no-print * {
            display: none !important;
        }

        .container {
            padding: 10px;
            font-size: small;
        }

        p, .table td, .table th {
            margin: 0 !important;
            padding: 2px;
            line-height: 1.3;
        }
    }

    .company-header h1 {
        margin-bottom: 0.2rem;
    }

    .company-header div {
        font-size: 1.0rem;
    }
</style>

<div class="container">
    <div class="row mt-4">
        <div class="col-12">
            <!-- Company Info Row -->
            {% include 'includes/print_header.html' %}
            <hr>

            <div class="row">
                <div class="col-sm-6 text-right">
                    <div class="text-grey-m2">
                        <div class="mt-1 mb-2 text-secondary-m1 text-600 text-125">
                            To: {{ sale_order.consumer.name }}
                        </div>
                        <div class="my-2"><i class="fa fa-circle text-blue-m2 text-xs mr-1"></i> <span class="text-600 text-90">ID:</span> #00{{ sale_order.consumer.id }}</div>
                        <div class="my-2"><i class="fa fa-circle text-blue-m2 text-xs mr-1"></i> <span class="text-600 text-90">Address:</span> {{ sale_order.consumer.address }}</div>
                        <div class="my-1"><i class="fa fa-phone fa-flip-horizontal text-secondary"></i> <b class="text-600">{{ sale_order.consumer.phone_number }}</b></div>
                    </div>
                </div>
                <div class="col-sm-4 text-right">
                    <div class="text-grey-m2">
                        <div class="mt-1 mb-2 text-secondary-m1 text-600 text-125">Commercial Invoice</div>
                        <div class="my-2"><i class="fa fa-circle text-blue-m2 text-xs mr-1"></i> <span class="text-600 text-90">No:</span> SO00{{ sale_order.id }}</div>
                        <div class="my-2"><i class="fa fa-circle text-blue-m2 text-xs mr-1"></i> <span class="text-600 text-90">Issue Date:</span> {{ formatted_created_at }}</div>
                        <div class="my-2"><i class="fa fa-circle text-blue-m2 text-xs mr-1"></i> <span class="text-600 text-90">Payment Status:</span> {{ sale_order.get_payment_status_display }}</div>
                    </div>
                </div>
            </div>

            {% if sale_order.is_fully_returned %}
            <div class="alert alert-danger text-center" role="alert">All items returned</div>
            {% elif sale_order.has_returns %}
            <div class="alert alert-warning text-center" role="alert">Items partially returned</div>
            {% endif %}
            <hr>

            <!-- Items Table -->
            <table class="table" style="border: 1px solid black;">
                <thead style="border: 1px solid black;">
                    <tr style="border: 1px solid black;">
                        <th style="border: 1px solid black; text-align: center;">#</th>
                        <th style="border: 1px solid black;">Description</th>
                        <th style="border: 1px solid black;">Batch No</th>
                        <th style="border: 1px solid black;">Quantity</th>
                        <th style="border: 1px solid black;">Unit Price</th>
                        <th style="border: 1px solid black;">Discount</th>
                        <th style="border: 1px solid black;">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in sale_order.saleorderitems_set.all %}
                    <tr style="border: 1px solid black;">
                        <th style="border: 1px solid black; text-align: center;">{{ forloop.counter }}</th>
                        <td style="border: 1px solid black;">{{ item.product.product.title }}</td>
                        <td style="border: 1px solid black;">{{ item.product.batch_number }}</td>
                        <td style="border: 1px solid black;">
                            {{ item.quantity|floatformat:0 }}
                            {% if item.returned_quantity %}
                                <span class="text-danger">(Returned {{ item.returned_quantity|floatformat:0 }})</span>
                            {% endif %}
                        </td>                        <td style="border: 1px solid black;">{{ item.price|floatformat:2 }} AFN</td>
                        <td style="border: 1px solid black;">{{ item.discount|floatformat:0 }}%</td>
                        <td style="border: 1px solid black;">{{ item.total_amount|floatformat:2 }} AFN</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            <hr>

            <!-- Totals -->
            <div class="row">
                <div class="col-7">
                    <b>Total:</b> {{ total|number_to_words }} AFN only.
                </div>
                <div class="col-5 text-right">
                    <div class="row">
                        <div class="col-7 text-right"><b>Gross Amount:</b></div>
                        <div class="col-5">{{ gross_amount|floatformat:2 }} AFN</div>
                    </div>
                    <div class="row">
                        <div class="col-7 text-right"><b>Total Discount:</b></div>
                        <div class="col-5">{{ total_discount|floatformat:2 }} AFN</div>
                    </div>
                    {% if sale_order.brt_rate %}
                    <div class="row">
                        <div class="col-7 text-right"><b>BRT ({{ sale_order.brt_rate }}%):</b></div>
                        <div class="col-5">-{{ brt_amount|floatformat:2 }} AFN</div>
                    </div>
                    {% else %}
                    <div class="row">
                        <div class="col-7 text-right"><b>BRT:</b></div>
                        <div class="col-5">Not Applied</div>
                    </div>
                    {% endif %}
                    <div class="row">
                        <div class="col-7 text-right"><b>Grand Total:</b></div>
                        <div class="col-5">{{ grand_total|floatformat:2 }} AFN</div>
                    </div>
                    <div class="row">
                        <div class="col-7 text-right"><b>Previous Balance:</b></div>
                        <div class="col-5">{{ previous_balance|floatformat:2 }} AFN</div>
                    </div>
                    <div class="row">
                        <div class="col-7 text-right"><b>Net Balance:</b></div>
                        <div class="col-5">{{ net_balance|floatformat:2 }} AFN</div>
                    </div>
                </div>
            </div>

            <hr>

            <!-- Signature Section -->
<div class="row mt-5">
    <div class="col-4">
        <p><strong>Printed At:</strong> {{ sale_order.created_at|date:"Y-m-d H:i" }}</p>
        <p><strong>Printed By:</strong> {{ request.user.last_name }}</p>
    </div>
    <div class="col-4 text-center">
        <p><strong>Medicine Received By:</strong></p>
        <div style="height: 50px; border-bottom: 1px solid black; width: 200px; margin: 0 auto;"></div>
    </div>
    <div class="col-4 text-end">
        <p><strong>Finance Signature:</strong></p>
        <div style="height: 50px; border-bottom: 1px solid black; width: 200px; float: right;"></div>
    </div>
</div>


            <!-- Buttons -->
            <div class="row no-print mt-4">
                <div class="col-12 text-center">
                    <button class="btn btn-outline-secondary" onclick="window.history.back()">Back</button>
                    <button class="btn btn-outline-primary" onclick="window.print()">Print</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}