orion/app/modules/loyalty/templates/loyalty/admin/merchant-detail.html

{# app/modules/loyalty/templates/loyalty/admin/merchant-detail.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/headers.html' import detail_page_header %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/modals.html' import confirm_modal %}

{% block title %}Merchant Loyalty Details{% endblock %}

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

{% block content %}
{% call detail_page_header("merchant?.name || 'Merchant Loyalty'", '/admin/loyalty/programs', subtitle_show='merchant') %}
    <span x-text="program ? 'Loyalty Program Active' : 'No Loyalty Program'"></span>
{% endcall %}

{{ loading_state('Loading merchant loyalty details...') }}

{{ error_state('Error loading merchant loyalty') }}

<!-- Merchant Details -->
<div x-show="!loading && merchant">
    <!-- Quick Actions Card -->
    <div class="px-4 py-3 mb-6 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">
            Quick Actions
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <a x-show="program"
                :href="`/admin/loyalty/merchants/${merchantId}/program`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                <span x-html="$icon('pencil', 'w-4 h-4 mr-2')"></span>
                Edit Program
            </a>
            <a
                :href="`/admin/loyalty/merchants/${merchantId}/settings`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                <span x-html="$icon('shield-check', 'w-4 h-4 mr-2')"></span>
                Admin Policy
            </a>
            <a
                :href="`/admin/merchants/${merchant?.id}`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                <span x-html="$icon('building-office', 'w-4 h-4 mr-2')"></span>
                View Merchant
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid gap-6 mb-8 md:grid-cols-4">
        <!-- Total Members -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
                <span x-html="$icon('users', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Total Members
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_cards)">
                    0
                </p>
            </div>
        </div>

        <!-- Active Members -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
                <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Active (30d)
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.active_cards)">
                    0
                </p>
            </div>
        </div>

        <!-- Points Issued (30d) -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
                <span x-html="$icon('trending-up', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Points Issued (30d)
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.points_issued_30d)">
                    0
                </p>
            </div>
        </div>

        <!-- Points Redeemed (30d) -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
                <span x-html="$icon('gift', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Points Redeemed (30d)
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.points_redeemed_30d)">
                    0
                </p>
            </div>
        </div>
    </div>

    <!-- Program Configuration -->
    {% set show_edit_button = false %}
    {% include "loyalty/shared/program-view.html" %}

    <!-- No Program Notice -->
    <div x-show="!program" class="px-4 py-3 mb-8 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-500 mr-3')"></span>
                <div>
                    <h3 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200">No Loyalty Program</h3>
                    <p class="text-sm text-yellow-700 dark:text-yellow-300">This merchant has not set up a loyalty program yet.</p>
                </div>
            </div>
            <a :href="`/admin/loyalty/merchants/${merchantId}/program`"
               class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
                <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
                Create Program
            </a>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    {{ confirm_modal(
        'deleteProgramModal',
        'Delete Loyalty Program',
        'This will permanently delete the loyalty program and all associated data. This action cannot be undone.',
        'deleteProgram()',
        'showDeleteModal',
        'Delete Program',
        'Cancel',
        'danger'
    ) }}

    <!-- Location Breakdown -->
    <div x-show="locations.length > 0" class="px-4 py-3 mb-8 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('map-pin', 'inline w-5 h-5 mr-2')"></span>
            Location Breakdown (<span x-text="locations.length"></span>)
        </h3>
        {% call table_wrapper() %}
            {{ table_header(['Location', 'Enrolled', 'Points Earned', 'Points Redeemed', 'Transactions (30d)']) }}
            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                <template x-for="location in locations" :key="location.store_id">
                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-3">
                            <div class="flex items-center text-sm">
                                <div>
                                    <p class="font-semibold" x-text="location.store_name"></p>
                                    <p class="text-xs text-gray-600 dark:text-gray-400" x-text="location.store_code"></p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm" x-text="formatNumber(location.enrolled_count)">0</td>
                        <td class="px-4 py-3 text-sm" x-text="formatNumber(location.points_earned)">0</td>
                        <td class="px-4 py-3 text-sm" x-text="formatNumber(location.points_redeemed)">0</td>
                        <td class="px-4 py-3 text-sm" x-text="formatNumber(location.transactions_30d)">0</td>
                    </tr>
                </template>
                <!-- Totals Row -->
                <tr class="text-gray-900 dark:text-gray-100 font-semibold bg-gray-50 dark:bg-gray-700">
                    <td class="px-4 py-3 text-sm">TOTAL</td>
                    <td class="px-4 py-3 text-sm" x-text="formatNumber(stats.total_cards)">0</td>
                    <td class="px-4 py-3 text-sm" x-text="formatNumber(stats.total_points_issued)">0</td>
                    <td class="px-4 py-3 text-sm" x-text="formatNumber(stats.total_points_redeemed)">0</td>
                    <td class="px-4 py-3 text-sm" x-text="formatNumber(stats.transactions_30d)">0</td>
                </tr>
            </tbody>
        {% endcall %}
    </div>

    <!-- Merchant Settings (Admin-controlled) -->
    <div class="px-4 py-3 mb-8 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>
            Admin Policy Settings
        </h3>
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Staff PIN Policy</p>
                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold leading-tight rounded-full"
                      :class="{
                          'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': settings?.staff_pin_policy === 'required',
                          'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': settings?.staff_pin_policy === 'optional',
                          'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100': settings?.staff_pin_policy === 'disabled'
                      }">
                    <span x-text="settings?.staff_pin_policy ? settings.staff_pin_policy.charAt(0).toUpperCase() + settings.staff_pin_policy.slice(1) : 'Optional'"></span>
                </span>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Self Enrollment</p>
                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold leading-tight 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'">
                    <span x-text="settings?.allow_self_enrollment ? 'Allowed' : 'Disabled'"></span>
                </span>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Cross-Location Redemption</p>
                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold leading-tight rounded-full"
                      :class="settings?.allow_cross_location_redemption !== false ? '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'">
                    <span x-text="settings?.allow_cross_location_redemption !== false ? 'Allowed' : 'Disabled'"></span>
                </span>
            </div>
        </div>
        <div class="mt-4">
            <a
                :href="`/admin/loyalty/merchants/${merchantId}/settings`"
                class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400">
                <span x-html="$icon('cog', 'inline w-4 h-4 mr-1')"></span>
                Modify admin policy
            </a>
        </div>
    </div>
</div>
{% endblock %}

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