{% extends "admin/base_site.html" %}
{% block content %}
<h1>Import Products from Excel</h1>

<!-- Download Template -->
<div style="margin-bottom: 24px; padding: 16px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px;">
    <strong>Step 1:</strong> Download the template, fill it in, then upload below.
    <br><br>
    <a href="?download_template=1" class="button" style="background:#2c7a2c; color:#fff; padding: 8px 16px; border-radius:4px; text-decoration:none;">
        ⬇ Download Template
    </a>
</div>

<!-- Errors -->
{% if errors %}
    <div style="background:#fdecea; border:1px solid #e74c3c; padding:12px; border-radius:6px; margin-bottom:16px;">
        <strong>⚠️ Import could not proceed:</strong>
        <ul>{% for e in errors %}<li>{{ e }}</li>{% endfor %}</ul>
    </div>
{% endif %}

<!-- Upload Form — hide once preview is shown -->
{% if not preview %}
    <div style="padding:16px; background:#fff; border:1px solid #dee2e6; border-radius:6px; margin-bottom:24px;">
        <strong>Step 2:</strong> Upload your filled Excel file.
        <br><br>
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="action" value="preview">
            {{ form.as_p }}
            <button type="submit" class="button default">Preview Import</button>
        </form>
    </div>
{% endif %}

<!-- Valid Rows Preview -->
{% if preview %}
    <h2 style="color:#2c7a2c;">✅ Valid Rows ({{ preview|length }})</h2>
    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="confirm">
        <input type="hidden" name="valid_rows_json" value="{{ valid_rows_json }}">
        <table style="width:100%; border-collapse:collapse; margin-bottom:16px;">
            <thead style="background:#2c7a2c; color:#fff;">
                <tr>
                    <th style="padding:8px;">Name</th>
                    <th>Buying</th>
                    <th>Selling</th>
                    <th>Discount</th>
                    <th>Stock</th>
                    <th>Category</th>
                    <th>Lipa Mdogo</th>
                </tr>
            </thead>
            <tbody>
            {% for row in preview %}
                <tr style="border-bottom:1px solid #dee2e6;">
                    <td style="padding:8px;">{{ row.name }}</td>
                    <td>{{ row.buying_price }}</td>
                    <td>{{ row.selling_price }}</td>
                    <td>{{ row.discount }}</td>
                    <td>{{ row.stock }}</td>
                    <td>{{ row.category }}</td>
                    <td>{{ row.lipa_mdogo }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <button type="submit" class="button default" style="background:#2c7a2c; color:#fff;">
            ✅ Confirm & Save {{ preview|length }} Product(s)
        </button>
        <a href="." style="margin-left:12px;">Cancel</a>
    </form>
{% endif %}
<!-- ↑ preview block ends here -->

<!-- Skipped Rows — outside preview block so it shows even when all rows are skipped -->
{% if skipped %}
    <h2 style="color:#e67e22; margin-top:24px;">⚠️ Skipped Rows ({{ skipped|length }})</h2>
    <table style="width:100%; border-collapse:collapse;">
        <thead style="background:#f39c12; color:#fff;">
            <tr>
                <th style="padding:8px;">Name</th>
                <th>Reason</th>
            </tr>
        </thead>
        <tbody>
        {% for row in skipped %}
            <tr style="border-bottom:1px solid #dee2e6;">
                <td style="padding:8px;">{{ row.name }}</td>
                <td style="color:#c0392b;">{{ row.reason }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endif %}

<!-- Success -->
{% if success_count %}
    <div style="background:#e8f5e9; border:1px solid #2c7a2c; padding:16px; border-radius:6px; margin-top:16px;">
        <strong>✅ Successfully imported {{ success_count }} product(s).</strong>
        <br><br>
        <a href="../" class="button">Back to Products</a>
    </div>
{% endif %}

{% endblock %}