{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Payment Methods{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/payment_methods.css">
{% endblock %}
{% block content %}
<div class="hil-page-tools">
    {{ ui.button('Admin Dashboard', '/admin', 'secondary') }}
    {{ ui.button('Help Center', '/help-center', 'secondary') }}
</div>

<div class="header">
    <h1 class="brand">Payment Methods</h1>
    <div class="header-actions">
        <a href="/admin">Back to Admin</a>
    </div>
</div>

<div class="container">
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="flash-messages">
                {% for category, message in messages %}
                    <div class="flash {{ category }}">{{ message }}</div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <div class="card">
        <h3>Configure Payment Providers</h3>
        <p class="hil-inline-b39da198a4">Enable and configure payment methods available at checkout for your shop.</p>

        <div class="provider-grid">
            {% for provider in providers %}
                {% set code = provider.code %}
                {% set name = provider.name %}
                {% set icon = provider.icon %}
                {% set desc = provider.description %}
                {% set req_config = provider.required_config %}
                {% set opt_config = provider.optional_config %}
                {% set saved_method = enabled_methods_map.get(code) %}
                {% set is_enabled = true if code == 'cash' else (saved_method.is_enabled if saved_method else false) %}
                {% set shop_config = saved_method.config if saved_method else {} %}
                {% set display_name = saved_method.display_name if saved_method else name %}

                <div class="provider-card {{ 'enabled' if is_enabled else '' }}">
                    <div class="provider-header">
                        <span class="provider-icon">{{ icon or '💳' }}</span>
                        <div>
                            <p class="provider-name">{{ name }}</p>
                            <p class="provider-desc">{{ desc or 'Payment provider' }}</p>
                        </div>
                        <span class="status-badge {{ 'enabled' if is_enabled else 'disabled' }} hil-inline-6d00061700">
                            {{ 'Enabled' if is_enabled else 'Disabled' }}
                        </span>
                    </div>

                    <form action="/payment-methods/save" method="POST">
                        <input type="hidden" name="provider_code" value="{{ code }}">

                        <div class="form-group">
                            <label>Display Name</label>
                            <input type="text" name="display_name" value="{{ display_name }}" placeholder="e.g. Pay with {{ name }}">
                        </div>

                        {% if req_config %}
                            {% for field in req_config %}
                                {% set field_key = field.strip() %}
                                {% set field_val = shop_config.get(field_key, '') if shop_config else '' %}
                                {% set is_secret = 'secret' in field_key or 'key' in field_key or 'credential' in field_key or 'passkey' in field_key or 'token' in field_key %}
                                <div class="form-group">
                                    <label>{{ field_key.replace('_', ' ').title() }} *</label>
                                    <input type="{{ 'password' if is_secret else 'text' }}" name="{{ field_key }}" value="{{ '' if is_secret else field_val }}" placeholder="{{ 'Saved - leave blank to keep existing value' if is_secret and field_val else 'Enter ' ~ field_key.replace('_', ' ') }}">
                                </div>
                            {% endfor %}
                        {% endif %}

                        {% if opt_config %}
                            {% for field in opt_config %}
                                {% set field_key = field.strip() %}
                                {% if field_key %}
                                    {% set field_val = shop_config.get(field_key, '') if shop_config else '' %}
                                    {% set is_secret = 'secret' in field_key or 'key' in field_key or 'credential' in field_key or 'passkey' in field_key or 'token' in field_key %}
                                    <div class="form-group">
                                        <label>{{ field_key.replace('_', ' ').title() }}</label>
                                        {% if field_key == 'sandbox' %}
                                        <select name="{{ field_key }}">
                                          <option value="true" {{ 'selected' if field_val != 'false' else '' }}>Sandbox / Testing</option>
                                          <option value="false" {{ 'selected' if field_val == 'false' else '' }}>Live / Production</option>
                                        </select>
                                        {% elif field_key in ('mpesa_mode', 'mpesa_default_mode') %}
                                        <select name="{{ field_key }}">
                                          <option value="paybill" {{ 'selected' if field_val in ('', 'paybill') else '' }}>Paybill STK Prompt</option>
                                          <option value="till" {{ 'selected' if field_val == 'till' else '' }}>Till Number STK Prompt</option>
                                          <option value="send_money" {{ 'selected' if field_val == 'send_money' else '' }}>Send Money / B2C</option>
                                        </select>
                                        {% elif field_key == 'send_money_command_id' %}
                                        <select name="{{ field_key }}">
                                          <option value="BusinessPayment" {{ 'selected' if field_val in ('', 'BusinessPayment') else '' }}>Business Payment</option>
                                          <option value="SalaryPayment" {{ 'selected' if field_val == 'SalaryPayment' else '' }}>Salary Payment</option>
                                          <option value="PromotionPayment" {{ 'selected' if field_val == 'PromotionPayment' else '' }}>Promotion Payment</option>
                                        </select>
                                        {% else %}
                                        <input type="{{ 'password' if is_secret else 'text' }}" name="{{ field_key }}" value="{{ '' if is_secret else field_val }}" placeholder="{{ 'Saved - leave blank to keep existing value' if is_secret and field_val else 'Enter ' ~ field_key.replace('_', ' ') ~ ' (optional)' }}">
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}

                        <div class="toggle-row">
                            <span class="toggle-label">Enable at checkout</span>
                            <label class="toggle-switch">
                                <input type="checkbox" name="is_enabled" value="1" {{ 'checked' if is_enabled else '' }} {{ 'disabled' if code == 'cash' else '' }}>
                                <span class="slider"></span>
                            </label>
                            {% if code == 'cash' %}
                            <input type="hidden" name="is_enabled" value="1">
                            {% endif %}
                        </div>

                        <button type="submit" class="btn hil-inline-a4a5b80805">Save {{ name }}</button>
                    </form>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}