{% load static %}
<!DOCTYPE html>
<html>

<head>
    <style>
        @page {
            size: A4 landscape;
            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;
        }

        h2 {
            text-align: left;
            margin-bottom: 20px;
        }

        /* 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;
        }

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

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

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

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

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

        }


        .bold {
            font-weight: bold;
        }

        .currency {
            font-family: 'Courier New', monospace;
        }
    </style>
</head>

<body>
    <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;">SBMS Report</span>
                </td>
            </tr>
        </table>
        <div class="header-left">
            <div class="info-row">
                <span class="info-label">Start Date</span>
                <span>: {{ start_date }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">End Date</span>
                <span>: {{ end_date }}</span>
            </div>

        </div>
    </div>
    <div>
        <h2>Laporan Pengeluaran</h2>

        <table>
            <thead>
                <tr>
                    <th width="15%">Tanggal</th>
                    <th width="45%">Produk</th>
                    <th width="30%">Kategori</th>
                    <th width="30%">Supplier</th>
                    <th width="10%">Qty</th>
                    <th width="35%" class="text-right">Harga</th>
                    <th width="35%" class="text-right">Subtotal</th>
                </tr>
            </thead>
            <tbody>
                {% if stocks %}
                {% for stock in stocks %}
                <tr class="{% if forloop.counter|divisibleby:2 %}even-row{% else %}odd-row{% endif %}">
                    <td>{{ stock.date_in|date:"d/m/Y" }}</td>
                    <td>{{ stock.product }}</td>
                    <td>{{ stock.category }}</td>
                    <td>{{ stock.supplier }}</td>
                    <td>{{ stock.stock_in }}</td>
                    <td class="text-right currency">{{ stock.price }}</td>
                    <td class="text-right currency">{{ stock.subtotal }}</td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <td colspan="7" style="font-style: italic;">No products found for
                        the selected date range.</td>
                </tr>
                {% endif %}
            </tbody>
            <tfoot>
                <tr style="padding-top: 6px; padding-bottom: 6px; padding-right: 4px; background-color: #f2f4f7;">
                    <th colspan="6" class="text-right">Total:</th>
                    <th class="text-right currency">{{ stock_total }}</th>
                </tr>
            </tfoot>
        </table>
    </div>

    <div>
        <h2>Laporan Pemasukan</h2>

        <table>
            <thead>
                <tr>
                    <th width="20%">Tanggal</th>
                    <th width="15%">Kode</th>
                    <th width="45%">Produk</th>
                    <th width="30%">Kategori</th>
                    <th width="30%">Employee</th>
                    <th width="30%">Customer</th>
                    <th width="10%">Qty</th>
                    <th width="35%" class="text-right">Harga</th>
                    <th width="35%" class="text-right">Subtotal</th>
                </tr>
            </thead>
            <tbody>
                {% if transaction_items %}
                {% for item in transaction_items %}
                <tr class="{% if forloop.counter|divisibleby:2 %}even-row{% else %}odd-row{% endif %}">
                    <td>{{ item.updated_at|date:"d/m/Y" }}</td>
                    <td>{{ item.transaction_id }}</td>
                    <td>{{ item.product }}</td>
                    <td>{{ item.category }}</td>
                    <td>{{ item.employee }}</td>
                    <td>{{ item.customer }}</td>
                    <td>{{ item.qty }}</td>
                    <td class="text-right currency">{{ item.unit_price }}</td>
                    <td class="text-right currency">{{ item.subtotal }}</td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <td colspan="7" style="font-style: italic;">No transactions found for
                        the selected date range.</td>
                </tr>
                {% endif %}
            </tbody>
            <tfoot>
                <tr style="padding-top: 6px; padding-bottom: 6px; padding-right: 4px; background-color: #f2f4f7;">
                    <th colspan="8" class="text-right">Total:</th>
                    <th class="text-right currency">{{ transaction_total }}</th>
                </tr>
            </tfoot>
        </table>
    </div>

    <div>
        <h2>Rekapitulasi</h2>
        <table class="summary-table">
            <tr>
                <td>Total Pengeluaran</td>
                <td class="text-right currency">{{ stock_total }}</td>
            </tr>
            <tr>
                <td>Total Pemasukan</td>
                <td class="text-right currency">{{ transaction_total }}</td>
            </tr>
            <tr>
                <td>Saldo</td>
                <td class="text-right currency bold">{{ balance }}</td>
            </tr>
        </table>
    </div>

    <htmlpagefooter name="html_footer">
        <table width="100%">
            <tr>
                <td style="text-align: center; font-size: 10px;">
                    Generated on: {{ now|date:"l, F j, Y, H:i" }} | Page <<page>> of <<total>>
                </td>
            </tr>
        </table>
    </htmlpagefooter>
</body>

</html>