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

{% block title %}Add Desktop Customer{% endblock %}
{% block heading %}Add Desktop Customer{% endblock %}

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

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

    .desktop-form-section {
        padding: 1rem;
        border-bottom: 1px solid #edf1f5;
    }

    .desktop-form-section:last-child {
        border-bottom: 0;
    }

    .desktop-form-section h6 {
        margin-bottom: .8rem;
        color: #17466d;
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03rem;
    }

    .desktop-form-page label {
        margin-bottom: .25rem;
        color: #405970;
        font-size: .68rem;
        font-weight: 700;
    }

    .desktop-form-page .form-control {
        min-height: 2.2rem;
        border-color: #d8e3ed;
        font-size: .76rem;
    }

    .desktop-form-page textarea.form-control {
        min-height: auto;
    }

    .desktop-check {
        min-height: 2.2rem;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .45rem .65rem;
        border: 1px solid #d8e3ed;
        border-radius: .25rem;
        background: #fbfdff;
    }

    .desktop-check label {
        margin: 0;
    }

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

    @media (max-width: 576px) {
        .desktop-form-actions {
            flex-direction: column;
        }

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

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

    <form
        method="post"
        class="desktop-customer-form"
    >
        {% csrf_token %}

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

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

            <div class="desktop-form-section">
                <h6>Business Information</h6>

                <div class="row">
                    {% for field in form %}
                        {% if field.name == "business_name" or field.name == "company_name" or field.name == "branch_name" or field.name == "contact_person" or field.name == "business_type" or field.name == "shop_type" %}
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">
                                        {{ field.label }}
                                    </label>
                                    {{ field }}
                                    {% for error in field.errors %}
                                        <div class="text-danger small mt-1">{{ error }}</div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>

            <div class="desktop-form-section">
                <h6>Contact Information</h6>

                <div class="row">
                    {% for field in form %}
                        {% if field.name == "mobile_no" or field.name == "phone_no" or field.name == "whatsapp_no" or field.name == "email" or field.name == "website_url" %}
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">
                                        {{ field.label }}
                                    </label>
                                    {{ field }}
                                    {% for error in field.errors %}
                                        <div class="text-danger small mt-1">{{ error }}</div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>

            <div class="desktop-form-section">
                <h6>Address and License</h6>

                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label for="{{ form.address.id_for_label }}">
                                {{ form.address.label }}
                            </label>
                            {{ form.address }}
                            {% for error in form.address.errors %}
                                <div class="text-danger small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    {% for field in form %}
                        {% if field.name == "city" or field.name == "area" or field.name == "country" or field.name == "license_code" or field.name == "license_expiry" %}
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">
                                        {{ field.label }}
                                    </label>
                                    {{ field }}
                                    {% for error in field.errors %}
                                        <div class="text-danger small mt-1">{{ error }}</div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>

            <div class="desktop-form-section">
                <h6>Public Website and Management</h6>

                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                            <label for="{{ form.status.id_for_label }}">
                                {{ form.status.label }}
                            </label>
                            {{ form.status }}
                            {% for error in form.status.errors %}
                                <div class="text-danger small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                            <label for="{{ form.parent.id_for_label }}">
                                {{ form.parent.label }}
                            </label>
                            {{ form.parent }}
                            {% for error in form.parent.errors %}
                                <div class="text-danger small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                            <label for="{{ form.display_order.id_for_label }}">
                                {{ form.display_order.label }}
                            </label>
                            {{ form.display_order }}
                            <small class="form-text text-muted">
                                Leave blank or 0 to append at the end.
                            </small>
                            {% for error in form.display_order.errors %}
                                <div class="text-danger small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="desktop-check">
                            {{ form.show_on_site }}
                            <label for="{{ form.show_on_site.id_for_label }}">
                                {{ form.show_on_site.label }}
                            </label>
                        </div>
                        {% for error in form.show_on_site.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="desktop-check">
                            {{ form.is_featured }}
                            <label for="{{ form.is_featured.id_for_label }}">
                                {{ form.is_featured.label }}
                            </label>
                        </div>
                        {% for error in form.is_featured.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="col-12 mt-3">
                        <div class="form-group">
                            <label for="{{ form.public_description.id_for_label }}">
                                {{ form.public_description.label }}
                            </label>
                            {{ form.public_description }}
                            {% for error in form.public_description.errors %}
                                <div class="text-danger small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group mb-0">
                            <label for="{{ form.internal_notes.id_for_label }}">
                                {{ form.internal_notes.label }}
                            </label>
                            {{ form.internal_notes }}
                            {% for error in form.internal_notes.errors %}
                                <div class="text-danger small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

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

                <button
                    type="submit"
                    class="btn btn-primary"
                >
                    <i class="fas fa-save mr-1"></i>
                    Save Desktop Customer
                </button>
            </div>

        </div>
    </form>

</div>
{% endblock %}