{% extends "base.html" %}
{% load static %}

{% block title %}Settings — {{ vendor.store_name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
{% endblock %}

{% block body %}
<div class="dash">
    <nav class="dash-nav">
        <div class="dash-nav-brand">
            <span class="logo-icon">&#9670;</span>
            <span class="logo-text">ACA Vendor</span>
        </div>
        <div class="dash-nav-links">
            <a href="{% url 'vendors:dashboard' %}" class="nav-link">Dashboard</a>
            <a href="{% url 'vendors:orders' %}" class="nav-link">Orders</a>
            <a href="{% url 'escrow:payout_setup' %}" class="nav-link">Payout</a>
            <a href="{% url 'vendors:settings' %}" class="nav-link active">Settings</a>
            <a href="/whatsapp/" class="nav-link">Chat</a>
        </div>
        <div class="dash-nav-right">
            <span class="nav-user">{{ vendor.store_name }}</span>
            <form method="post" action="{% url 'logout' %}" style="display:inline">
                {% csrf_token %}
                <button type="submit" class="nav-link btn-logout">Logout</button>
            </form>
        </div>
    </nav>

    <div class="page-scroll" style="height: 100vh;">
        <div class="page-layout">
            <div class="page-content">
                <a href="{% url 'vendors:dashboard' %}" class="back-link">&larr; Back to Dashboard</a>
                <h1 class="page-title">Store Settings</h1>
                <p class="page-desc">Update your store details.</p>

                {% if saved %}
                <div class="alert alert-success">Settings saved successfully.</div>
                {% endif %}

                <form method="post">
                    {% csrf_token %}

                    <div class="form-section">
                        <div class="section-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>Store Details</h2>
                            <div class="form-group">
                                <label for="store_name">Store Name</label>
                                <input type="text" id="store_name" name="store_name" required value="{{ vendor.store_name }}">
                            </div>
                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea id="description" name="description" rows="3"
                                          style="width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none;resize:vertical;">{{ vendor.description }}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="logo_url">Logo URL</label>
                                <input type="url" id="logo_url" name="logo_url" value="{{ vendor.logo_url }}"
                                       placeholder="https://example.com/logo.png">
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-icon dim-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>Contact</h2>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="phone">Phone</label>
                                    <input type="text" id="phone" name="phone" value="{{ vendor.phone }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="address">Address</label>
                                <textarea id="address" name="address" rows="2"
                                          style="width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none;resize:vertical;">{{ vendor.address }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-icon dim-icon">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 7h20"/><path d="M5 7v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7"/><path d="M9 11h6"/></svg>
                        </div>
                        <div class="section-content">
                            <h2>Delivery Pricing</h2>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="delivery_fee">Base Delivery Fee (GHS)</label>
                                    <input type="number" step="0.01" min="0" id="delivery_fee" name="delivery_fee" value="{{ vendor.delivery_fee }}">
                                </div>
                                <div class="form-group">
                                    <label for="free_delivery_threshold">Free Delivery Threshold (GHS)</label>
                                    <input type="number" step="0.01" min="0" id="free_delivery_threshold" name="free_delivery_threshold"
                                           value="{% if vendor.free_delivery_threshold is not None %}{{ vendor.free_delivery_threshold }}{% endif %}"
                                           placeholder="Optional">
                                </div>
                            </div>
                            <p style="font-size:12px;color:var(--text-muted);margin:0;">
                                Delivery is calculated per store in the unified cart. Leave threshold empty to always charge base delivery fee.
                            </p>
                        </div>
                    </div>

                    <div class="form-actions-bar">
                        <a href="{% url 'vendors:dashboard' %}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary btn-lg">Save Settings</button>
                    </div>
                </form>
            </div>

            <aside class="page-sidebar">
                <div class="sidebar-card">
                    <div class="sidebar-store-preview">
                        {% if vendor.logo_url %}
                        <img src="{{ vendor.logo_url }}" class="preview-logo" alt="">
                        {% else %}
                        <div class="store-logo-placeholder lg">{{ vendor.store_name|first }}</div>
                        {% endif %}
                        <h3>{{ vendor.store_name }}</h3>
                        <span class="preview-url">{{ vendor.store_slug }}</span>
                    </div>
                </div>
                <div class="sidebar-card">
                    <h3>Info</h3>
                    <div class="sidebar-meta">
                        <div class="meta-row"><span>Slug</span><code>{{ vendor.store_slug }}</code></div>
                        <div class="meta-row"><span>Joined</span><span>{{ vendor.created_at|date:"M d, Y" }}</span></div>
                        <div class="meta-row"><span>Products</span><span>{{ vendor.products.count }}</span></div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>
{% endblock %}