{% extends "dashboard/base.html" %}
{% block page_title %}Settings{% endblock %}

{% block dashboard_content %}
<div class="card" style="max-width:600px;">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form-group">
            <label class="form-label">Business Name</label>
            <input type="text" name="name" class="form-input" value="{{ business.name }}" required>
        </div>
        <div class="form-group">
            <label class="form-label">Phone</label>
            <div class="phone-input-group">
                <span class="phone-prefix">+233</span>
                <input type="tel" name="phone" class="form-input" value="{{ business.phone }}" required
                    placeholder="24 123 4567" maxlength="9" oninput="formatGhanaPhoneInput(this)">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Email</label>
            <input type="email" name="email" class="form-input" value="{{ business.email }}" required>
        </div>
        <div class="form-group">
            <label class="form-label">Business Logo</label>
            {% if business.logo %}
            <div class="mb-4">
                <img src="{{ business.logo.url }}" alt=""
                    style="width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--color-border-light);">
            </div>
            {% endif %}
            <input type="file" name="logo" class="form-input" accept="image/*">
        </div>
        <button type="submit" class="btn btn--primary mt-4">Save Settings</button>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function formatGhanaPhoneInput(inputEl) {
        let raw = inputEl.value.replace(/\D/g, '');
        if (raw.startsWith('233')) raw = raw.substring(3);
        if (raw.startsWith('0')) raw = raw.substring(1);
        if (raw.length > 9) raw = raw.substring(0, 9);
        inputEl.value = raw;
    }
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('input[oninput*="formatGhanaPhoneInput"]').forEach(function (el) {
            formatGhanaPhoneInput(el);
        });
    });
</script>
{% endblock %}