{# app/modules/loyalty/templates/loyalty/merchant/settings.html #}
{% extends "merchant/base.html" %}
{% from 'shared/macros/headers.html' import page_header_flex %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}

{% block title %}{{ _('loyalty.merchant.settings.title') }}{% endblock %}

{% block i18n_modules %}['loyalty']{% endblock %}

{% block alpine_data %}merchantLoyaltyMerchantSettings(){% endblock %}

{% block content %}
{% call page_header_flex(title=_('loyalty.merchant.settings.title'), subtitle=_('loyalty.merchant.settings.subtitle')) %}
{% endcall %}

{{ loading_state(_('loyalty.merchant.settings.loading')) }}

{{ error_state(_('loyalty.merchant.settings.error_loading')) }}

<!-- Managed by Admin Notice -->
<div x-show="!loading && !error" class="mb-6 px-4 py-3 bg-blue-50 border border-blue-200 rounded-lg dark:bg-blue-900/20 dark:border-blue-800">
    <div class="flex items-center">
        <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-500 mr-2 flex-shrink-0')"></span>
        <p class="text-sm text-blue-700 dark:text-blue-300">{{ _('loyalty.merchant.settings.admin_controlled') }}</p>
    </div>
</div>

<!-- Settings Display -->
<div x-show="!loading && !error && settings" class="space-y-6">

    <!-- Staff PIN Policy -->
    <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('key', 'inline w-5 h-5 mr-2')"></span>
            {{ _('loyalty.merchant.settings.staff_pin_policy') }}
        </h3>
        <div class="grid gap-4 md:grid-cols-3">
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.merchant.settings.pin_policy') }}</p>
                <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">
                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-700"
                          x-text="settings?.staff_pin_policy || '-'"></span>
                </p>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.merchant.settings.lockout_attempts') }}</p>
                <p class="mt-1 text-sm text-gray-700 dark:text-gray-300" x-text="settings?.staff_pin_lockout_attempts || '-'"></p>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">{{ _('loyalty.merchant.settings.lockout_minutes') }}</p>
                <p class="mt-1 text-sm text-gray-700 dark:text-gray-300" x-text="settings?.staff_pin_lockout_minutes || '-'"></p>
            </div>
        </div>
    </div>

    <!-- Enrollment & Permissions -->
    <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('shield-check', 'inline w-5 h-5 mr-2')"></span>
            {{ _('loyalty.merchant.settings.permissions') }}
        </h3>
        <div class="grid gap-4 md:grid-cols-2">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
                <span class="text-sm text-gray-700 dark:text-gray-300">{{ _('loyalty.merchant.settings.self_enrollment') }}</span>
                <span class="px-2 py-1 text-xs font-semibold rounded-full"
                      :class="settings?.allow_self_enrollment ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100'"
                      x-text="settings?.allow_self_enrollment ? '{{ _('loyalty.common.enabled') }}' : '{{ _('loyalty.common.disabled') }}'"></span>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
                <span class="text-sm text-gray-700 dark:text-gray-300">{{ _('loyalty.merchant.settings.cross_location') }}</span>
                <span class="px-2 py-1 text-xs font-semibold rounded-full"
                      :class="settings?.allow_cross_location_redemption ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100'"
                      x-text="settings?.allow_cross_location_redemption ? '{{ _('loyalty.common.enabled') }}' : '{{ _('loyalty.common.disabled') }}'"></span>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
                <span class="text-sm text-gray-700 dark:text-gray-300">{{ _('loyalty.merchant.settings.void_transactions') }}</span>
                <span class="px-2 py-1 text-xs font-semibold rounded-full"
                      :class="settings?.allow_void_transactions ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100'"
                      x-text="settings?.allow_void_transactions ? '{{ _('loyalty.common.enabled') }}' : '{{ _('loyalty.common.disabled') }}'"></span>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('loyalty_static', path='merchant/js/loyalty-merchant-settings.js') }}"></script>
{% endblock %}