{% extends "base.html" %}
{% block content %}
<style>
    .bill-page {
        width: 210mm;  /* A4 width */
        height: 148mm; /* A4 half height */
        padding: 10mm;
        page-break-after: always;
        margin-bottom: 48px; /* Extra gap after each copy */
    }
    .bill-header {
        text-align: center;
        font-weight: bold;
        margin-bottom: 4px;
        margin-top: -28px;
    }
    .bill-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .bill-table {
        width: 100%;
        border-collapse: collapse;
    }
    .bill-table th, .bill-table td {
        border: 1px solid black;
        padding: 4px;
        text-align: center;
        font-size: 12px;
    }
    .bill-footer {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }
    @media print {
        @page {
            size: A4;
            margin: 0;
        }
        .no-print {
            display: none;
        }
    }
    .print-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
    }
</style>

<!-- Print Button -->
<div class="no-print">
    <button onclick="window.print()" class="btn btn-primary print-btn">
        <i class="fas fa-print"></i> Print Jambo Bill
    </button>
    <button onclick="window.close()" class="btn btn-secondary" style="position: fixed; top: 20px; right: 200px; z-index: 1000;">
        <i class="fas fa-times"></i> Close
    </button>
</div>

{% for copy_type in ['Office Copy', 'Factory Copy', 'Gatepass Copy'] %}
<div class="bill-page">
    <div class="bill-header">
        <h2>Al Wasiqa Packages Pvt Ltd</h2>
        <h3>Jambo Bill</h3>
        <div style="text-align: right">{{ copy_type }}</div>
    </div>
    
    <div class="bill-info">
        <div>
            <strong>M/S:</strong> {{ bill.customer_name }}
        </div>
        <div>
            <strong>Date:</strong> {{ bill.date }}&nbsp;&nbsp;&nbsp;
            <strong>Bill No:</strong> {{ bill.bill_no }}
        </div>
    </div>
    
    <table class="bill-table">
        <thead>
            <tr>
                <th>S.No</th>
                <th>Jambo No</th>
                <th>Size</th>
                <th>Colour</th>
                <th>Micron</th>
                <th>Weight</th>
                <th>Roll No</th>
                <th>Varity</th>
                <th>Rate</th>
            </tr>
        </thead>
        <tbody>
            {% for item in bill.jambo_items %}
            <tr>
                <td>{{ loop.index }}</td>
                <td>{{ item.jambo_no }}</td>
                <td>{{ item.jambo_size }}</td>
                <td>{{ item.colour }}</td>
                <td>{{ item.micron }}</td>
                <td>{{ item.weight }}</td>
                <td>{{ item.roll_no }}</td>
                <td>{{ item.varity }}</td>
                <td>{{ item.rate }}</td>
            </tr>
            {% endfor %}
            
            <!-- Empty rows for formatting -->
            {% for i in range(10 - bill.jambo_items|length) %}
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    
    <div class="bill-footer">
        <div>
            <strong>Prepared By:</strong> {{ session.get('full_name', 'System') }}
        </div>
        <div>
                            <strong>Total Items:</strong> {{ bill.jambo_items|length }}
        </div>
    </div>
</div>
{% endfor %}

<script>
// Auto print on load if needed
document.addEventListener('DOMContentLoaded', function() {
    // Add any additional print logic here if needed
});
</script>
{% endblock %}