{# app/modules/loyalty/templates/loyalty/shared/cards-list.html #}
{#
  Shared loyalty cards list partial. Set these variables before including:
    - cards_api_prefix (str): API base URL (e.g. '/store/loyalty', '/merchants/loyalty', '/admin/loyalty/merchants/5')
    - cards_base_url (str): URL prefix for card detail links
    - show_store_filter (bool): Show store/location dropdown filter
    - show_enroll_button (bool): Show "Enroll New" button (store persona only)
    - enroll_url (str): URL for the enroll button (if show_enroll_button)
#}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}

<!-- Stats Cards -->
<div x-show="!loading && program" class="grid gap-6 mb-8 md:grid-cols-4">
    <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('users', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.cards.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>
    <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">{{ _('loyalty.shared.cards.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>
    <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('user-plus', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.cards.new_this_month') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.new_this_month)">0</p>
        </div>
    </div>
    <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('currency-dollar', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('loyalty.shared.cards.total_points_balance') }}</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_points_balance)">0</p>
        </div>
    </div>
</div>

<!-- Search and Filters -->
<div x-show="!loading && program" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="flex flex-wrap items-center gap-4">
        <div class="flex-1 min-w-[200px]">
            <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
                </span>
                <input type="text"
                       x-model="filters.search"
                       @input="debouncedSearch()"
                       placeholder="{{ _('loyalty.shared.cards.search_placeholder') }}"
                       class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
            </div>
        </div>
        <select x-model="filters.status" @change="applyFilter()"
                class="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
            <option value="">{{ _('loyalty.shared.cards.all_status') }}</option>
            <option value="active">{{ _('loyalty.common.active') }}</option>
            <option value="inactive">{{ _('loyalty.common.inactive') }}</option>
        </select>
        {% if show_store_filter %}
        <select x-model="filters.store_id" @change="applyFilter()"
                class="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
            <option value="">{{ _('loyalty.common.all_stores') }}</option>
            <template x-for="loc in locations" :key="loc.store_id">
                <option :value="loc.store_id" x-text="loc.store_name"></option>
            </template>
        </select>
        {% endif %}
    </div>
</div>

<!-- Cards Table -->
<div x-show="!loading && program">
    {% call table_wrapper() %}
        {{ table_header([_('loyalty.shared.cards.col_member'), _('loyalty.shared.cards.col_card_number'), _('loyalty.shared.cards.col_points_balance'), _('loyalty.shared.cards.col_last_activity'), _('loyalty.shared.cards.col_status'), _('loyalty.shared.cards.col_actions')]) }}
        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
            <template x-if="cards.length === 0">
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
                        <div class="flex flex-col items-center">
                            <span x-html="$icon('users', 'w-12 h-12 mb-2 text-gray-300')"></span>
                            <p class="font-medium">{{ _('loyalty.shared.cards.no_members') }}</p>
                            <p class="text-xs mt-1" x-show="filters.search">{{ _('loyalty.shared.cards.adjust_search') }}</p>
                        </div>
                    </td>
                </tr>
            </template>
            <template x-for="card in cards" :key="card.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 class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
                                 :style="'background-color: ' + (program?.card_color || '#4F46E5') + '20'">
                                <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold"
                                      :style="'color: ' + (program?.card_color || '#4F46E5')"
                                      x-text="card.customer_name?.charAt(0).toUpperCase() || '?'"></span>
                            </div>
                            <div>
                                <p class="font-semibold" x-text="card.customer_name || 'Unknown'"></p>
                                <p class="text-xs text-gray-600 dark:text-gray-400" x-text="card.customer_email || card.customer_phone || '-'"></p>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-sm font-mono" x-text="card.card_number"></td>
                    <td class="px-4 py-3 text-sm font-semibold" x-text="formatNumber(card.points_balance)"></td>
                    <td class="px-4 py-3 text-sm" x-text="formatDate(card.last_activity_at)"></td>
                    <td class="px-4 py-3 text-xs">
                        <span class="px-2 py-1 font-semibold leading-tight rounded-full"
                              :class="card.is_active ? '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="card.is_active ? $t('loyalty.common.active') : $t('loyalty.common.inactive')"></span>
                    </td>
                    <td class="px-4 py-3">
                        <a :href="'{{ cards_base_url }}/' + card.id"
                           class="text-purple-600 hover:text-purple-700 dark:text-purple-400">{{ _('loyalty.common.view') }}</a>
                    </td>
                </tr>
            </template>
        </tbody>
    {% endcall %}

    {{ pagination() }}
</div>