{# app/modules/loyalty/templates/loyalty/shared/transactions-list.html #}
{#
  Shared transactions list partial. Set these variables before including:
    - transactions_api_prefix (str): API base URL for transactions data
    - show_store_filter (bool): Show store/location dropdown filter
#}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}

<!-- Filter Bar -->
<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="flex flex-wrap items-center gap-4">
        <select x-model="filters.type" @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.transactions.all_types') }}</option>
            <option value="earn">{{ _('loyalty.shared.transactions.type_earn') }}</option>
            <option value="redeem">{{ _('loyalty.shared.transactions.type_redeem') }}</option>
            <option value="adjust">{{ _('loyalty.shared.transactions.type_adjust') }}</option>
            <option value="expire">{{ _('loyalty.shared.transactions.type_expire') }}</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>

<!-- Transactions Table -->
<div x-show="!loading">
    {% call table_wrapper() %}
        {{ table_header([_('loyalty.shared.transactions.col_date'), _('loyalty.shared.transactions.col_customer'), _('loyalty.shared.transactions.col_type'), _('loyalty.shared.transactions.col_points'), _('loyalty.shared.transactions.col_location'), _('loyalty.shared.transactions.col_notes')]) }}
        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
            <template x-if="transactions.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('clock', 'w-12 h-12 mb-2 text-gray-300')"></span>
                            <p class="font-medium">{{ _('loyalty.shared.transactions.no_transactions') }}</p>
                            <p class="text-xs mt-1" x-show="filters.type">{{ _('loyalty.shared.transactions.adjust_filters') }}</p>
                        </div>
                    </td>
                </tr>
            </template>
            <template x-for="tx in transactions" :key="tx.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 text-sm" x-text="formatDateTime(tx.transaction_at)"></td>
                    <td class="px-4 py-3 text-sm" x-text="tx.customer_name || 'Unknown'"></td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 text-xs font-semibold rounded-full"
                              :class="{
                                  'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': tx.points_delta > 0,
                                  'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': tx.points_delta < 0
                              }"
                              x-text="tx.transaction_type.replace(/_/g, ' ')"></span>
                    </td>
                    <td class="px-4 py-3 text-sm font-medium"
                        :class="tx.points_delta > 0 ? 'text-green-600' : 'text-orange-600'"
                        x-text="(tx.points_delta > 0 ? '+' : '') + formatNumber(tx.points_delta)"></td>
                    <td class="px-4 py-3 text-sm" x-text="tx.store_name || '-'"></td>
                    <td class="px-4 py-3 text-sm text-gray-500" x-text="tx.notes || '-'"></td>
                </tr>
            </template>
        </tbody>
    {% endcall %}

    {{ pagination() }}
</div>