{% extends 'layouts/base.html' %}

{% block content %}

<div class="panel form-card">
    <div class="page-head">
        <h1>Import Sales Orders</h1>
        <a class="btn" href="{{ url_for('sales.import_template') }}">Download Template</a>
    </div>

    {% if not import_headers %}
    <form method="post" enctype="multipart/form-data" class="form-grid">
        <input type="hidden" name="stage" value="upload">
        <div class="form-group full-width">
            <label>Select CSV or Excel File</label>
            <input type="file" name="file" accept=".csv,.xlsx,.xlsm" required>
        </div>

        <div class="form-actions full-width">
            <button class="btn" type="submit">Continue to Column Mapping</button>
            <a class="btn btn-sm" href="{{ url_for('sales.index') }}">Cancel</a>
        </div>
    </form>

    <p class="muted">
        Upload a file first. The next screen lets you map each spreadsheet header to the corresponding sales field.
    </p>
    {% else %}
    <form method="post" class="form-grid">
        <input type="hidden" name="stage" value="import">
        <div class="form-group full-width">
            <label>Map Uploaded Columns</label>
            <div class="table-wrap">
                <table class="modern-table">
                    <thead><tr><th>CRM Field</th><th>Spreadsheet Column</th></tr></thead>
                    <tbody>
                        {% for field in import_columns %}
                        <tr>
                            <td><strong>{{ field|replace('_', ' ')|title }}</strong>{% if field in ['lead_mobile', 'sale_date'] %} <span class="badge badge-danger">Required</span>{% endif %}</td>
                            <td>
                                <select name="map_{{ field }}" {% if field in ['lead_mobile', 'sale_date'] %}required{% endif %}>
                                    <option value="">Do not import</option>
                                    {% for header in import_headers %}
                                    <option value="{{ header }}" {% if mapping.get(field) == header %}selected{% endif %}>{{ header }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="form-actions full-width">
            <button class="btn" type="submit">Import Mapped Sales</button>
            <a class="btn btn-sm" href="{{ url_for('sales.bulk_import') }}">Cancel Import</a>
        </div>
    </form>

    <p class="muted">
        Lead Mobile is mandatory and must match an existing lead's primary or alternate mobile. If Customer Name is not mapped or blank, the linked lead name is used; when no name exists, it is stored as Unknown.
    </p>
    {% endif %}

    <p class="muted">
        Required template columns: lead_mobile and sale_date. Optional: customer_name, client_type, start_date, due_date, amount,
        discount, payment_status, bank_account, product, quantity, unit_price, tax_percent, notes.
        When amount is blank it is calculated from quantity, unit_price, tax_percent and discount.
    </p>
</div>

{% endblock %}