{% extends 'admin/layout/base.twig' %}

{% block title %}Edit Fee Rule - {{ app_name }}{% endblock %}

{% block content %}
<div class="op-page-header">
    <div>
        <h1>Edit Fee Rule</h1>
        <p class="op-page-subtitle">Modify percentage/flat rates, thresholds, and activation criteria for this fee rule.</p>
    </div>
    <div class="op-header-actions">
        <a href="/admin/fee-rules" class="op-btn op-btn-sm op-btn-secondary">← Back to Fee Rules</a>
    </div>
</div>

<form method="POST" action="/admin/fee-rules/{{ rule.id }}/update" class="op-form">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

    <div class="op-card op-mb-4">
        <div class="op-card-header">
            <h3>Rule Parameters</h3>
        </div>
        <div class="op-card-body">
            <div class="op-form-row">
                {# Brand/Merchant Scope #}
                <div class="op-form-group op-col-6">
                    <label for="merchant_id">Brand / Store Context *</label>
                    {% if is_global %}
                        <select id="merchant_id" name="merchant_id" class="op-input" required>
                            <option value="" {{ rule.merchant_id is null ? 'selected' : '' }}>{{ __('fee_rules.global') }}</option>
                            {% for b in brands %}
                                <option value="{{ b.id }}" {{ rule.merchant_id == b.id ? 'selected' : '' }}>{{ b.name }}</option>
                            {% endfor %}
                        </select>
                    {% else %}
                        <input type="text" value="{{ active_brand ? active_brand.name : 'System' }}" class="op-input" readonly>
                        <input type="hidden" name="merchant_id" value="{{ active_brand_id|default('') }}">
                    {% endif %}
                </div>

                {# Gateway #}
                <div class="op-form-group op-col-6">
                    <label for="gateway_slug">Payment Gateway *</label>
                    <select id="gateway_slug" name="gateway_slug" class="op-input">
                        <option value="" {{ rule.gateway_slug is null ? 'selected' : '' }}>All Gateways</option>
                        {% for g in gateways %}
                            <option value="{{ g.slug }}" {{ rule.gateway_slug == g.slug ? 'selected' : '' }}>{{ g.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="op-form-row">
                {# Currency #}
                <div class="op-form-group op-col-6">
                    <label for="currency">Currency *</label>
                    <select id="currency" name="currency" class="op-input" required>
                        {% for c in currencies %}
                            <option value="{{ c.code }}" {{ rule.currency == c.code ? 'selected' : '' }}>{{ c.code }} ({{ c.symbol }})</option>
                        {% endfor %}
                    </select>
                </div>

                {# Fee Type #}
                <div class="op-form-group op-col-6">
                    <label for="type">Fee Type *</label>
                    <select id="type" name="type" class="op-input" required>
                        <option value="percentage" {{ rule.type == 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                        <option value="flat" {{ rule.type == 'flat' ? 'selected' : '' }}>Flat Amount</option>
                        <option value="tiered" {{ rule.type == 'tiered' ? 'selected' : '' }}>Tiered Pricing</option>
                    </select>
                </div>
            </div>

            {# Simple Value Input (for Flat & Percentage) #}
            <div class="op-form-group" id="simple-value-group" {{ rule.type == 'tiered' ? 'style="display: none;"' : '' }}>
                <label for="value">Fee Value *</label>
                <input type="number" id="value" name="value" value="{{ rule.value }}" step="0.0001" min="0" class="op-input">
                <small class="op-text-muted">For percentage type, enter e.g. 2.5 for 2.5% fee.</small>
            </div>
        </div>
    </div>

    {# Tiered Editor Card (visible only when type=tiered) #}
    <div class="op-card op-mb-4" id="tiered-setup-card" {{ rule.type == 'tiered' ? '' : 'style="display: none;"' }}>
        <div class="op-card-header">
            <h3>Tiered Pricing Setup</h3>
            <button type="button" id="add-tier-btn" class="op-btn op-btn-sm op-btn-outline">+ Add Tier</button>
        </div>
        <div class="op-card-body">
            <p class="op-text-muted op-mb-3 op-text-sm">
                Define pricing tiers based on transaction amount. Leave the limit empty on the last tier to act as a catch-all fallback.
            </p>
            <div id="tiers-container">
                {% for i, tier in tiers %}
                <div class="op-field-row op-card op-card-bordered op-mb-2 op-p-3 op-tier-row">
                    <div class="op-form-row">
                        <div class="op-form-group op-col-4">
                            <label>Amount Limit <=</label>
                            <input type="number" name="tiers[{{ i }}][limit]" value="{{ tier.limit }}" step="0.01" min="0" class="op-input tier-limit-input" placeholder="Catch-all / No Limit">
                        </div>
                        <div class="op-form-group op-col-3">
                            <label>Fee Type</label>
                            <select name="tiers[{{ i }}][type]" class="op-input">
                                <option value="percentage" {{ tier.type == 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                                <option value="flat" {{ tier.type == 'flat' ? 'selected' : '' }}>Flat Amount</option>
                            </select>
                        </div>
                        <div class="op-form-group op-col-3">
                            <label>Fee Value</label>
                            <input type="number" name="tiers[{{ i }}][value]" value="{{ tier.value }}" step="0.0001" min="0" class="op-input" required>
                        </div>
                        <div class="op-form-group op-col-2">
                            <label>&nbsp;</label>
                            <button type="button" class="op-btn op-btn-sm op-btn-danger remove-tier-btn" style="width: 100%;">Remove</button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {# Fee Limits/Caps #}
    <div class="op-card op-mb-4">
        <div class="op-card-header">
            <h3>Fee Limits (Optional)</h3>
        </div>
        <div class="op-card-body">
            <div class="op-form-row">
                <div class="op-form-group op-col-6">
                    <label for="min_fee">Minimum Fee</label>
                    <input type="number" id="min_fee" name="min_fee" value="{{ rule.min_fee }}" step="0.01" min="0" placeholder="None" class="op-input">
                </div>
                <div class="op-form-group op-col-6">
                    <label for="max_fee">Maximum Fee</label>
                    <input type="number" id="max_fee" name="max_fee" value="{{ rule.max_fee }}" step="0.01" min="0" placeholder="None" class="op-input">
                </div>
            </div>
            
            <div class="op-form-group op-mt-3">
                <label class="op-checkbox-label">
                    <input type="checkbox" name="status" value="active" {{ rule.status == 'active' ? 'checked' : '' }}>
                    Rule is Active
                </label>
            </div>
        </div>
    </div>

    <div class="op-form-actions">
        <button type="submit" class="op-btn op-btn-primary op-btn-lg">Save Changes</button>
        <a href="/admin/fee-rules" class="op-btn op-btn-outline op-btn-lg">Cancel</a>
    </div>
</form>

<template id="tier-row-template">
    <div class="op-field-row op-card op-card-bordered op-mb-2 op-p-3 op-tier-row">
        <div class="op-form-row">
            <div class="op-form-group op-col-4">
                <label>Amount Limit <=</label>
                <input type="number" name="tiers[__IDX__][limit]" step="0.01" min="0" class="op-input tier-limit-input" placeholder="Catch-all / No Limit">
            </div>
            <div class="op-form-group op-col-3">
                <label>Fee Type</label>
                <select name="tiers[__IDX__][type]" class="op-input">
                    <option value="percentage">Percentage (%)</option>
                    <option value="flat">Flat Amount</option>
                </select>
            </div>
            <div class="op-form-group op-col-3">
                <label>Fee Value</label>
                <input type="number" name="tiers[__IDX__][value]" step="0.0001" min="0" value="0.00" class="op-input" required>
            </div>
            <div class="op-form-group op-col-2">
                <label>&nbsp;</label>
                <button type="button" class="op-btn op-btn-sm op-btn-danger remove-tier-btn" style="width: 100%;">Remove</button>
            </div>
        </div>
    </div>
</template>
{% endblock %}

{% block scripts %}
<script nonce="{{ csp_nonce }}" src="/assets/js/pages/fee-rules.js?v=014"></script>
{% endblock %}