{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        clifford: '#da373d',
                    }
                }
            }
        }
    </script>
    <style>
        @page {
            size: B5;
            margin: 15mm;
            footer: html_footer;
        }

        body {
            margin: 0;
            padding: 0;
            font-size: 9pt;
            font-family: Arial, Helvetica, sans-serif;
            color: #2d3436;
            line-height: 1.25;
            background-color: white;
        }

        .container {
            width: 100%;
            margin: 0 auto;
        }

        /* Header Styles */
        .header {
            display: table;
            width: 100%;
            margin-bottom: 20px;
        }

        .header-left {
            display: table-cell;
            width: 60%;
            vertical-align: top;
            line-height: 1;
        }

        .info-row {
            margin-bottom: 5px;
        }

        .info-label {
            display: inline-block;
            width: 80px;
            color: #666;
        }

        .customer-name {
            padding-top: 10px;
            font-weight: bold;
            font-size: 9pt;
            margin-bottom: 5px;
        }

        /* Table Styles */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        thead th {
            padding: 4px;
            font-weight: bold;
            color: #4B5563;
            background-color: #f2f4f7;
            text-align: left;
        }

        tbody td {
            padding: 4px;
            border-bottom: 0.5px solid #dee2e6;
        }

        tbody tr:hover {
            background-color: #e8f0fe;
        }

        .text-right {
            text-align: right;
        }

        /* Summary Table */
        .summary-table {
            width: 40%;
            float: right;
        }

        .summary-table tr:last-child {
            font-weight: bold;

        }

        /* Utility Classes */
        .bold {
            font-weight: bold;
        }

        .currency {
            font-family: 'Courier New', monospace;
        }

        .even-row {
            background-color: #F9FAFB;
        }

        .page_number {
            text-align: right;
            position: fixed;
            bottom: 0;
            width: 100%;
            font-size: 9px;
        }

        /* Footer */
        .footer {
            position: fixed;
            text-align: center;
            font-size: 8pt;
            color: #666;
        }

        .footer-content1 {
            padding-top: 30px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="invoice-header">
            <table style="width: 100%;">
                <tr>
                    <td style="width: 60px; vertical-align: middle;">
                        <img src="{% static 'img/Logo2.png' %}" alt="Logo" style="height: 50px; width: auto;">
                    </td>
                    <td style="vertical-align: middle;">
                        <span style="font-size: 24px; font-weight: bold; color: #4d200c;">Invoice</span>
                    </td>
                </tr>
            </table>
            <div class="header-left">
                <div class="info-row">
                    <span class="info-label">Invoice ID</span>
                    <span>: #{{ transaction.id }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Date</span>
                    <span>: {{ transaction.transaction_date }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Employee</span>
                    <span>: {{ transaction.employee }}</span>
                </div>
            </div>

            <div class="header-left">
                <div class="info-row">
                    <div class="customer-name">Customer</div>
                    <div>{{ transaction.customer }}</div>
                    <div>{{ transaction.customer_address }}</div>
                    <div>{{ transaction.customer_phone }} / {{ transaction.customer_email }}</div>
                </div>
            </div>
        </div>

        <!-- Invoice Table -->
        <table>
            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th width="45%">Name</th>
                    <th width="10%">Qty</th>
                    <th width="35%" class="text-right">Price</th>
                    <th width="35%" class="text-right">Subtotal</th>
                </tr>
            </thead>
            <tbody>
                {% for item in transaction_items %}
                <tr class="{% if forloop.counter|divisibleby:2 %}even-row{% else %}odd-row{% endif %}">
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.product }}</td>
                    <td>{{ item.qty }}</td>
                    <td class="text-right currency">{{ item.unit_price }}</td>
                    <td class="text-right currency">{{ item.subtotal }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        

        <table class="summary-table">
            <tr>
                <td>Total Payment</td>
                <td class="text-right currency">{{ transaction.total_amount }}</td>
            </tr>
            <tr>
                <td>Total Paid</td>
                <td class="text-right currency">{{ transaction.paid_amount }}</td>
            </tr>
            <tr>
                <td>Total Change</td>
                <td class="text-right currency">{{ transaction.change_amount }}</td>
            </tr>
            <tr>
                <td>Payment Status</td>
                <td class="text-right bold">{{ transaction.status }}</td>
            </tr>
        </table>

        <table style="width: 100%; border-collapse: collapse; margin-top: 50px;">
            <tr>
                <td style="text-align: center;" colspan="2">
                    <strong>Reviewed by</strong>
                </td>
                <td style="text-align: center;">
                    <strong>Approved by</strong>
                </td>
            </tr>
            <tr>
                <td style="height: 90px; text-align: center; vertical-align: bottom;">
                    <u>Purch & Logistic Manager</u>
                </td>
                <td style="height: 90px; text-align: center; vertical-align: bottom;">
                    <u>Sr Operations Manager</u>
                </td>
                <td style="height: 90px; text-align: center; vertical-align: bottom;">
                    <u>Operations Director</u>
                </td>
            </tr>
        </table>

        <!-- Footer -->
        <div class="footer">
            <p class="footer-content1">Thank you for your business!</p>
            <p>For any inquiries, please contact our customer service.</p>
            <span>Generated on: {{ now|date:"F j, Y, H:i" }}</span>
        </div>
        <htmlpagefooter name="html_footer">
            <table width="100%">
                <tr>
                    <td style="text-align: center; font-size: 12px;">
                        Page <<page>>
                    </td>
                </tr>
            </table>
        </htmlpagefooter>
    </div>
</body>

</html>