{% extends 'base.html' %}
{% block title %}Payment Methods — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Payment Methods</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 24px;">
            Customers pay these Lipa Namba directly (outside the app) and you confirm payment manually once
            received — there's no payment gateway connected. Only <strong>active</strong> methods are shown to
            customers at checkout.
        </p>

        <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 40px;">
            <form method="post" class="contact-form">
                {% csrf_token %}
                <label for="provider">Provider</label>
                <select id="provider" name="provider">
                    {% for value, label in provider_choices %}
                    <option value="{{ value }}">{{ label }}</option>
                    {% endfor %}
                </select>

                <label for="lipa_number">Lipa Namba / number</label>
                <input type="text" id="lipa_number" name="lipa_number" placeholder="e.g. 07XX XXX XXX or Till 123456" required>

                <label for="account_name">Registered account name</label>
                <input type="text" id="account_name" name="account_name" placeholder="e.g. Clanert Sustain Co Ltd">

                <label for="instructions">Instructions (optional)</label>
                <textarea id="instructions" name="instructions" rows="2" placeholder="e.g. Use your order number as reference"></textarea>

                <button type="submit" class="btn-cta">Add Payment Method</button>
            </form>
        </div>

        {% for m in methods %}
        <div class="order-card">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px;">
                <div>
                    <span class="provider-badge" style="background: {{ m.provider_color }};">{{ m.provider_label }}</span>
                    {% if not m.is_active %}<span class="surface-badge warn">Inactive</span>{% endif %}
                    <h3 style="margin: 8px 0 2px;">{{ m.lipa_number }}</h3>
                    {% if m.account_name %}<p style="font-size: 0.9rem; color: var(--muted);">{{ m.account_name }}</p>{% endif %}
                    {% if m.instructions %}<p style="font-size: 0.85rem; color: var(--muted); margin-top: 4px;">{{ m.instructions }}</p>{% endif %}
                </div>
                <div style="display: flex; gap: 8px; flex-shrink: 0;">
                    <button type="button" class="btn-small payment-edit-toggle" data-target="edit-method-{{ m.id }}">Edit</button>
                    <form method="post" action="{% url 'accounts:admin_toggle_payment_method' m.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: var(--muted);">{% if m.is_active %}Deactivate{% else %}Activate{% endif %}</button>
                    </form>
                </div>
            </div>

            <form method="post" action="{% url 'accounts:admin_edit_payment_method' m.id %}" id="edit-method-{{ m.id }}" class="contact-form payment-edit-form" style="display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);">
                {% csrf_token %}
                <label for="provider-{{ m.id }}">Provider</label>
                <select id="provider-{{ m.id }}" name="provider">
                    {% for value, label in provider_choices %}
                    <option value="{{ value }}" {% if m.provider == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>

                <label for="lipa_number-{{ m.id }}">Lipa Namba / number</label>
                <input type="text" id="lipa_number-{{ m.id }}" name="lipa_number" value="{{ m.lipa_number }}" required>

                <label for="account_name-{{ m.id }}">Registered account name</label>
                <input type="text" id="account_name-{{ m.id }}" name="account_name" value="{{ m.account_name }}">

                <label for="instructions-{{ m.id }}">Instructions (optional)</label>
                <textarea id="instructions-{{ m.id }}" name="instructions" rows="2">{{ m.instructions }}</textarea>

                <button type="submit" class="btn-cta">Save Changes</button>
            </form>
        </div>
        {% empty %}
        <p style="color: var(--muted);">No payment methods added yet — add your first Lipa Namba above.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.payment-edit-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var form = document.getElementById(btn.getAttribute('data-target'));
                if (!form) return;
                var isOpen = form.style.display !== 'none';
                form.style.display = isOpen ? 'none' : 'flex';
                btn.textContent = isOpen ? 'Edit' : 'Cancel';
            });
        });
    });
</script>
{% endblock %}