{% extends "dashboard/base.html" %}
{% load humanize %}

{% block page_title %}Mobile Money Payout Details{% endblock %}

{% block dashboard_content %}
<div class="card" style="max-width: 650px;">

    {% if business.is_payout_configured %}
    <div class="alert alert--info mb-6" style="background:#DBEAFE; color:#1E40AF; padding:var(--space-4); border-radius:var(--radius-md); border:1px solid #93C5FD;">
        <strong>MoMo Payout Account Active:</strong> Sales revenue from your customer purchases is automatically
        settled directly to your <strong>{{ business.payout_provider }}</strong> wallet
        ({{ business.payout_account_number }}).
    </div>
    {% else %}
    <div class="alert alert--warning mb-6" style="background:#FEF3C7; color:#92400E; padding:var(--space-4); border-radius:var(--radius-md); border:1px solid #FCD34D;">
        <strong>Action Required:</strong> Please configure your Mobile Money payout details below so customer
        sales revenue is paid out directly to your MoMo wallet without delay.
    </div>
    {% endif %}

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

        <div class="form-group mb-4">
            <label class="form-label">Mobile Money Network Provider</label>
            <select name="provider_code" class="form-input" required>
                <option value="">-- Select Mobile Money Network --</option>
                {% for p in providers %}
                <option value="{{ p.code }}" {% if business.payout_bank_code == p.code %}selected{% endif %}>{{ p.name }}</option>
                {% endfor %}
            </select>
            <span class="form-help text-xs text-muted mt-1" style="display:block;">
                Supports Ghanaian Mobile Money networks (MTN MoMo, Telecel Cash, AT Money).
            </span>
        </div>

        <div class="form-group mb-4">
            <label class="form-label">Mobile Money Phone Number</label>
            <div style="display:flex; gap:8px; align-items:center;">
                <span style="padding:8px 12px; background:var(--color-border-light); border:1px solid var(--color-border); border-radius:var(--radius-md); font-weight:600; color:var(--color-text-muted); white-space:nowrap;">+233</span>
                <input type="tel" name="account_number" class="form-input" required value="{{ business.payout_account_number }}" placeholder="24 123 4567" maxlength="9" oninput="formatGhanaPhoneInput(this)" style="flex:1;">
            </div>
            <span class="form-help text-xs text-muted mt-1" style="display:block;">
                Enter your 9-digit Mobile Money subscriber number after +233 (e.g. 241234567).
            </span>
        </div>

        <div class="form-group mb-6">
            <label class="form-label">Registered MoMo Account Name</label>
            <input type="text" name="account_name" class="form-input" required value="{{ business.payout_account_name }}" placeholder="e.g. Kofi Mensah">
            <span class="form-help text-xs text-muted mt-1" style="display:block;">
                Must match the official registered name on your Mobile Money SIM card.
            </span>
        </div>

        <button type="submit" class="btn btn--primary btn--lg">
            Save Mobile Money Payout Details
        </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 %}