{% extends "base.html" %}

{% block title %}Shop Settings{% endblock %}
{% block page_title %}Shop & Invoice Settings{% endblock %}
{% block page_subtitle %}Details shown on invoice PDFs and app branding{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="card mb-6 bg-blue-50 border-blue-200">
    <p class="text-sm text-blue-900">
        These details appear at the <strong>top of every invoice PDF</strong> (shop name, address, phone).
        Customer name, mobile, and address on invoices come from the <strong>Customer</strong> record on each order.
    </p>
</div>

<div class="card max-w-2xl">
    <form method="post" class="space-y-4">
        {% csrf_token %}
        {% for field in form %}
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ field.id_for_label }}">
                {{ field.label }}
            </label>
            {{ field }}
            {% if field.help_text %}<p class="text-xs text-slate-500 mt-1">{{ field.help_text }}</p>{% endif %}
            {% if field.errors %}<p class="text-red-600 text-xs mt-1">{{ field.errors.0 }}</p>{% endif %}
        </div>
        {% endfor %}
        <div class="flex flex-wrap gap-3 pt-2">
            <button type="submit" class="btn-primary">Save Shop Details</button>
            <a href="{% url 'dashboard' %}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<div class="card max-w-2xl mt-6">
    <h3 class="text-sm font-semibold text-slate-700 mb-2">Invoice preview fields</h3>
    <dl class="text-sm space-y-1 text-slate-600">
        <div><dt class="inline font-medium">Shop header: </dt><dd class="inline">{{ profile.shop_name|default:"—" }}</dd></div>
        <div><dt class="inline font-medium">Address: </dt><dd class="inline">{{ profile.address|default:"—" }}</dd></div>
        <div><dt class="inline font-medium">Phone: </dt><dd class="inline">{{ profile.phone|default:"—" }}</dd></div>
    </dl>
    <p class="text-xs text-slate-500 mt-3">After saving, generate a new invoice from an order to see updated PDF.</p>
</div>
{% endblock %}