{% extends "pos/base.html" %}

{% block title %}Import Desktop Customers{% endblock %}
{% block heading %}Import Desktop Customers{% endblock %}

{% block stylesheets %}
<style>
    .desktop-import-page form.desktop-import-form {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .desktop-import-card {
        max-width: 920px;
        margin: 0 auto;
        border: 1px solid #dfe8f1;
        border-radius: .75rem;
        background: #fff;
        box-shadow: 0 6px 22px rgba(15,48,87,.06);
    }

    .desktop-import-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: 1rem 1.1rem;
        border-bottom: 1px solid #e5edf4;
    }

    .desktop-import-header h5 {
        margin: 0;
        color: #14263d;
        font-size: 1rem;
        font-weight: 700;
    }

    .desktop-import-body {
        padding: 1.1rem;
    }

    .desktop-help {
        padding: .8rem .9rem;
        margin-bottom: 1rem;
        border: 1px solid #d8eaf8;
        border-radius: .55rem;
        color: #36566f;
        background: #f4faff;
        font-size: .76rem;
        line-height: 1.55;
    }

    .desktop-error-box {
        max-height: 330px;
        overflow: auto;
        margin-bottom: 1rem;
        padding: .8rem .9rem;
        border: 1px solid #f1c0c4;
        border-radius: .55rem;
        color: #852c34;
        background: #fff5f6;
        font-size: .73rem;
    }

    .desktop-error-box ol {
        margin-bottom: 0;
        padding-left: 1.2rem;
    }

    .desktop-actions {
        display: flex;
        justify-content: space-between;
        gap: .6rem;
        margin-top: 1rem;
    }

    @media (max-width: 576px) {
        .desktop-import-header,
        .desktop-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .desktop-actions .btn {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="desktop-import-page">

    <div class="desktop-import-card">

        <div class="desktop-import-header">
            <div>
                <h5>Desktop Offline Customer Import</h5>
                <small class="text-muted">
                    Download the official template, fill it and upload the .xlsx file.
                </small>
            </div>

            <a
                href="{% url 'ref:desktop_customer_template' %}"
                class="btn btn-sm btn-outline-primary"
            >
                <i class="fas fa-file-download mr-1"></i>
                Download Template
            </a>
        </div>

        <div class="desktop-import-body">

            <div class="desktop-help">
                <strong>Required columns:</strong>
                customer_code and business_name.
                The same customer_code can be uploaded again to update an existing
                Desktop Offline customer. If display_order is blank, a new customer
                is appended at the end.
            </div>

            {% if import_errors %}
                <div class="desktop-error-box">
                    <strong>
                        Import was not saved because the following errors were found:
                    </strong>

                    <ol class="mt-2">
                        {% for error in import_errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ol>
                </div>
            {% endif %}

            <form
                method="post"
                enctype="multipart/form-data"
                class="desktop-import-form"
            >
                {% csrf_token %}

                {% if form.non_field_errors %}
                    <div class="alert alert-danger">
                        {{ form.non_field_errors }}
                    </div>
                {% endif %}

                <div class="form-group">
                    <label for="{{ form.excel_file.id_for_label }}">
                        {{ form.excel_file.label }}
                    </label>

                    {{ form.excel_file }}

                    {% if form.excel_file.help_text %}
                        <small class="form-text text-muted">
                            {{ form.excel_file.help_text }}
                        </small>
                    {% endif %}

                    {% for error in form.excel_file.errors %}
                        <div class="text-danger small mt-1">
                            {{ error }}
                        </div>
                    {% endfor %}
                </div>

                <div class="desktop-actions">
                    <a
                        href="{% url 'ref:customer_manage' %}?source=desktop_offline"
                        class="btn btn-light"
                    >
                        <i class="fas fa-arrow-left mr-1"></i>
                        Back
                    </a>

                    <button
                        type="submit"
                        class="btn btn-success"
                    >
                        <i class="fas fa-upload mr-1"></i>
                        Validate and Import
                    </button>
                </div>
            </form>

        </div>

    </div>

</div>
{% endblock %}