{% extends "superadmin/base.html" %}

{% block superadmin_content %}
<div class="flex justify-between items-center mb-6">
    <div>
        <h2 style="font-size: var(--font-size-xl); font-weight: 700;">Platform Configuration & Settings</h2>
        <p class="text-sm text-secondary">System defaults, pricing model rules, and gateway configurations</p>
    </div>
</div>

<div class="grid grid--2 gap-6 mb-8">
    <div class="card card--flat">
        <h3 class="font-bold text-lg mb-4" style="color:var(--color-primary);">Booking Pricing Defaults</h3>
        <div class="flex flex-col gap-4">
            <div class="flex justify-between items-center pb-3" style="border-bottom:1px solid var(--color-border-light);">
                <div>
                    <strong class="text-sm block">Daily Rate Fee</strong>
                    <span class="text-xs text-muted">Fee per 24-hour sale window paid upfront</span>
                </div>
                <strong style="font-size:var(--font-size-base);color:var(--color-primary);">GHS {{ config.BOOKING_DAILY_RATE }} / day</strong>
            </div>

            <div class="flex justify-between items-center pb-3" style="border-bottom:1px solid var(--color-border-light);">
                <div>
                    <strong class="text-sm block">Commission Percentage</strong>
                    <span class="text-xs text-muted">Post-sale percentage on gross sales revenue</span>
                </div>
                <strong style="font-size:var(--font-size-base);color:var(--color-primary);">{{ config.BOOKING_COMMISSION_PERCENT }}%</strong>
            </div>

            <div class="flex justify-between items-center">
                <div>
                    <strong class="text-sm block">Commission Activation Fee</strong>
                    <span class="text-xs text-muted">Upfront activation fee for commission-based booking</span>
                </div>
                <strong style="font-size:var(--font-size-base);color:var(--color-primary);">GHS {{ config.BOOKING_COMMISSION_MIN_FEE }}</strong>
            </div>
        </div>
    </div>

    <div class="card card--flat">
        <h3 class="font-bold text-lg mb-4" style="color:var(--color-primary);">Payment Gateway Configuration</h3>
        <div class="flex flex-col gap-4">
            <div class="flex justify-between items-center pb-3" style="border-bottom:1px solid var(--color-border-light);">
                <div>
                    <strong class="text-sm block">Payment Provider</strong>
                    <span class="text-xs text-muted">Mobile Money & Card Processing</span>
                </div>
                <span class="badge badge--live">Paystack Ghana</span>
            </div>

            <div class="flex justify-between items-center pb-3" style="border-bottom:1px solid var(--color-border-light);">
                <div>
                    <strong class="text-sm block">Currency</strong>
                    <span class="text-xs text-muted">Platform native currency</span>
                </div>
                <strong class="text-sm">Ghanaian Cedi (GHS)</strong>
            </div>

            <div class="flex justify-between items-center">
                <div>
                    <strong class="text-sm block">Paystack Secret Key</strong>
                    <span class="text-xs text-muted">Configured in environment settings</span>
                </div>
                <span class="font-mono text-xs text-muted" style="font-family:monospace;">{{ config.PAYSTACK_SECRET_KEY }}</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}