feat(loyalty): add dedicated program edit page with full CRUD and tests

Add /admin/loyalty/merchants/{id}/program route for program configuration
with a dedicated Alpine.js edit page supporting create/edit/delete flows.
Restructure programs dashboard with create modal (merchant search +
duplicate detection) and delete confirmation. Rename "Loyalty Settings"
to "Admin Policy" for clearer separation of concerns.

Add integration tests for all admin page routes (12 tests) and program
list search/filter/pagination endpoints (9 tests).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -25,11 +25,17 @@
             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-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('cog', 'w-4 h-4 mr-2')"></span>
-                Loyalty 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}`"
@@ -167,11 +173,11 @@
                     <p class="text-sm text-yellow-700 dark:text-yellow-300">This merchant has not set up a loyalty program yet.</p>
                 </div>
             </div>
-            <button @click="createProgram()"
-                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
+            <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
-            </button>
+            </a>
         </div>
     </div>
 
@@ -237,7 +243,7 @@
     <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 Settings
+            Admin Policy Settings
         </h3>
         <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
             <div>
@@ -271,7 +277,7 @@
                 :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 settings
+                Modify admin policy
             </a>
         </div>
     </div>

app/modules/loyalty/templates/loyalty/admin/merchant-settings.html

@@ -9,7 +9,7 @@
 {% block alpine_data %}adminLoyaltyMerchantSettings(){% endblock %}
 
 {% block content %}
-{% call detail_page_header("'Loyalty Settings: ' + (merchant?.name || '')", backUrl, subtitle_show='merchant') %}
+{% call detail_page_header("'Admin Policy: ' + (merchant?.name || '')", '/admin/loyalty/merchants/' ~ merchant_id, subtitle_show='merchant') %}
     Admin-controlled settings for this merchant's loyalty program
 {% endcall %}
 

app/modules/loyalty/templates/loyalty/admin/program-edit.html

@@ -0,0 +1,252 @@
+{# app/modules/loyalty/templates/loyalty/admin/program-edit.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+
+{% block title %}Program Configuration{% endblock %}
+
+{% block alpine_data %}adminLoyaltyProgramEdit(){% endblock %}
+
+{% block content %}
+{% call detail_page_header("isNewProgram ? 'Create Program: ' + (merchant?.name || '') : 'Edit Program: ' + (merchant?.name || '')", '/admin/loyalty/merchants/' ~ merchant_id, subtitle_show='merchant') %}
+    <span x-text="isNewProgram ? 'Create a loyalty program for this merchant' : 'Edit program configuration'"></span>
+{% endcall %}
+
+{{ loading_state('Loading program configuration...') }}
+{{ error_state('Error loading program configuration') }}
+
+<div x-show="!loading">
+    <form @submit.prevent="saveSettings">
+        <!-- Program Type (only shown on create) -->
+        <div x-show="isNewProgram" class="px-4 py-5 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">
+                <span x-html="$icon('squares-2x2', 'inline w-5 h-5 mr-2')"></span>
+                Program Type
+            </h3>
+            <div class="grid gap-4 md:grid-cols-3">
+                <label class="flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
+                       :class="settings.loyalty_type === 'points' ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 dark:border-gray-600'">
+                    <input type="radio" name="loyalty_type" value="points" x-model="settings.loyalty_type" class="mt-1 text-purple-600 form-radio">
+                    <div class="ml-3">
+                        <p class="font-medium text-gray-700 dark:text-gray-300">Points</p>
+                        <p class="text-sm text-gray-500">Earn points per EUR spent</p>
+                    </div>
+                </label>
+                <label class="flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
+                       :class="settings.loyalty_type === 'stamps' ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 dark:border-gray-600'">
+                    <input type="radio" name="loyalty_type" value="stamps" x-model="settings.loyalty_type" class="mt-1 text-purple-600 form-radio">
+                    <div class="ml-3">
+                        <p class="font-medium text-gray-700 dark:text-gray-300">Stamps</p>
+                        <p class="text-sm text-gray-500">Collect N stamps, get reward</p>
+                    </div>
+                </label>
+                <label class="flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
+                       :class="settings.loyalty_type === 'hybrid' ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 dark:border-gray-600'">
+                    <input type="radio" name="loyalty_type" value="hybrid" x-model="settings.loyalty_type" class="mt-1 text-purple-600 form-radio">
+                    <div class="ml-3">
+                        <p class="font-medium text-gray-700 dark:text-gray-300">Hybrid</p>
+                        <p class="text-sm text-gray-500">Both stamps and points</p>
+                    </div>
+                </label>
+            </div>
+        </div>
+
+        <!-- Points Configuration -->
+        <div x-show="settings.loyalty_type === 'points' || settings.loyalty_type === 'hybrid'" class="px-4 py-5 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">
+                <span x-html="$icon('currency-dollar', 'inline w-5 h-5 mr-2')"></span>
+                Points Configuration
+            </h3>
+            <div class="grid gap-6 md:grid-cols-2">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Points per EUR spent</label>
+                    <input type="number" min="1" max="100" x-model.number="settings.points_per_euro"
+                           class="w-full 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">
+                    <p class="mt-1 text-xs text-gray-500">1 EUR = <span x-text="settings.points_per_euro || 1"></span> point(s)</p>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Welcome Bonus Points</label>
+                    <input type="number" min="0" x-model.number="settings.welcome_bonus_points"
+                           class="w-full 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">
+                    <p class="mt-1 text-xs text-gray-500">Bonus points awarded on enrollment</p>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Minimum Redemption Points</label>
+                    <input type="number" min="1" x-model.number="settings.minimum_redemption_points"
+                           class="w-full 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">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Points Expiration (days)</label>
+                    <input type="number" min="0" x-model.number="settings.points_expiration_days"
+                           placeholder="0 = never expire"
+                           class="w-full 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">
+                    <p class="mt-1 text-xs text-gray-500">Days of inactivity before points expire (0 = never)</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Stamps Configuration -->
+        <div x-show="settings.loyalty_type === 'stamps' || settings.loyalty_type === 'hybrid'" class="px-4 py-5 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">
+                <span x-html="$icon('star', 'inline w-5 h-5 mr-2')"></span>
+                Stamps Configuration
+            </h3>
+            <div class="grid gap-6 md:grid-cols-2">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Stamps Target</label>
+                    <input type="number" min="2" max="50" x-model.number="settings.stamps_target"
+                           class="w-full 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">
+                    <p class="mt-1 text-xs text-gray-500">Number of stamps needed for reward</p>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reward Description</label>
+                    <input type="text" x-model="settings.stamps_reward_description" placeholder="e.g., Free coffee"
+                           class="w-full 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">
+                </div>
+            </div>
+        </div>
+
+        <!-- Rewards Configuration (Points) -->
+        <div x-show="settings.loyalty_type === 'points' || settings.loyalty_type === 'hybrid'" class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    <span x-html="$icon('gift', 'inline w-5 h-5 mr-2')"></span>
+                    Redemption Rewards
+                </h3>
+                <button type="button" @click="addReward()"
+                        class="flex items-center px-3 py-1 text-sm text-purple-600 hover:text-purple-700">
+                    <span x-html="$icon('plus', 'w-4 h-4 mr-1')"></span>
+                    Add Reward
+                </button>
+            </div>
+            <div class="space-y-4">
+                <template x-if="settings.points_rewards.length === 0">
+                    <p class="text-gray-500 dark:text-gray-400 text-sm">No rewards configured. Add a reward to allow customers to redeem points.</p>
+                </template>
+                <template x-for="(reward, index) in settings.points_rewards" :key="index">
+                    <div class="flex items-start gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
+                        <div class="flex-1 grid gap-4 md:grid-cols-3">
+                            <div>
+                                <label class="block text-xs text-gray-500 mb-1">Reward Name</label>
+                                <input type="text" x-model="reward.name" placeholder="e.g., EUR5 off"
+                                       class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
+                            </div>
+                            <div>
+                                <label class="block text-xs text-gray-500 mb-1">Points Required</label>
+                                <input type="number" min="1" x-model.number="reward.points_required"
+                                       class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
+                            </div>
+                            <div>
+                                <label class="block text-xs text-gray-500 mb-1">Description</label>
+                                <input type="text" x-model="reward.description" placeholder="Optional description"
+                                       class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
+                            </div>
+                        </div>
+                        <button type="button" @click="removeReward(index)"
+                                class="text-red-500 hover:text-red-700 p-2">
+                            <span x-html="$icon('trash', 'w-5 h-5')"></span>
+                        </button>
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <!-- Branding -->
+        <div class="px-4 py-5 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">
+                <span x-html="$icon('paint-brush', 'inline w-5 h-5 mr-2')"></span>
+                Branding
+            </h3>
+            <div class="grid gap-6 md:grid-cols-2">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Name</label>
+                    <input type="text" x-model="settings.card_name" placeholder="e.g., VIP Rewards"
+                           class="w-full 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">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Primary Color</label>
+                    <div class="flex items-center gap-3">
+                        <input type="color" x-model="settings.card_color"
+                               class="w-12 h-10 rounded cursor-pointer">
+                        <input type="text" x-model="settings.card_color" pattern="^#[0-9A-Fa-f]{6}$"
+                               class="flex-1 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Status -->
+        <div class="px-4 py-5 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">
+                <span x-html="$icon('power', 'inline w-5 h-5 mr-2')"></span>
+                Program Status
+            </h3>
+            <label class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-600 rounded-lg">
+                <div>
+                    <p class="font-medium text-gray-700 dark:text-gray-300">Program Active</p>
+                    <p class="text-sm text-gray-500">When disabled, customers cannot earn or redeem</p>
+                </div>
+                <div class="relative">
+                    <input type="checkbox" x-model="settings.is_active" class="sr-only peer">
+                    <div @click="settings.is_active = !settings.is_active"
+                         class="w-11 h-6 bg-gray-200 rounded-full cursor-pointer peer-checked:bg-purple-600 dark:bg-gray-700"
+                         :class="settings.is_active ? 'bg-purple-600' : ''">
+                        <div class="absolute top-[2px] left-[2px] bg-white w-5 h-5 rounded-full transition-transform"
+                             :class="settings.is_active ? 'translate-x-5' : ''"></div>
+                    </div>
+                </div>
+            </label>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex items-center justify-between">
+            <div>
+                <template x-if="!isNewProgram">
+                    <button type="button" @click="confirmDelete()"
+                            class="flex items-center px-4 py-2 text-sm font-medium text-red-600 border border-red-300 rounded-lg hover:bg-red-50 dark:text-red-400 dark:border-red-700 dark:hover:bg-red-900/20">
+                        <span x-html="$icon('trash', 'w-4 h-4 mr-2')"></span>
+                        Delete Program
+                    </button>
+                </template>
+            </div>
+            <div class="flex items-center gap-3">
+                <a :href="backUrl"
+                   class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                    Cancel
+                </a>
+                <button type="submit" :disabled="saving"
+                        class="flex items-center px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
+                    <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
+                    <span x-text="saving ? 'Saving...' : (isNewProgram ? 'Create Program' : 'Save Changes')"></span>
+                </button>
+            </div>
+        </div>
+    </form>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div x-show="showDeleteModal" x-cloak
+     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete Loyalty Program</h3>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">
+            This will permanently delete the loyalty program and all associated data (cards, transactions, rewards).
+            This action cannot be undone.
+        </p>
+        <div class="flex justify-end gap-3">
+            <button @click="showDeleteModal = false"
+                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
+                Cancel
+            </button>
+            <button @click="deleteProgram()" :disabled="deleting"
+                    class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50">
+                <span x-text="deleting ? 'Deleting...' : 'Delete Program'"></span>
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script defer src="{{ url_for('loyalty_static', path='admin/js/loyalty-program-edit.js') }}"></script>
+{% endblock %}

app/modules/loyalty/templates/loyalty/admin/programs.html

@@ -10,7 +10,7 @@
 {% block alpine_data %}adminLoyaltyPrograms(){% endblock %}
 
 {% block content %}
-{{ page_header('Loyalty Programs') }}
+{{ page_header('Loyalty Programs', action_label='Create Program', action_onclick="showCreateModal = true") }}
 
 {{ loading_state('Loading loyalty programs...') }}
 
@@ -219,13 +219,22 @@
 
                                 <!-- Edit Button -->
                                 <a
-                                    :href="'/admin/loyalty/merchants/' + program.merchant_id"
+                                    :href="'/admin/loyalty/merchants/' + program.merchant_id + '/program'"
                                     class="flex items-center justify-center p-2 text-purple-600 rounded-lg hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
-                                    title="Edit program"
+                                    title="Edit program configuration"
                                 >
-                                    <span x-html="$icon('pencil', 'w-5 h-5')"></span>
+                                    <span x-html="$icon('edit', 'w-5 h-5')"></span>
                                 </a>
 
+                                <!-- Delete Button -->
+                                <button
+                                    @click="confirmDeleteProgram(program)"
+                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="Delete program"
+                                >
+                                    <span x-html="$icon('delete', 'w-5 h-5')"></span>
+                                </button>
+
                                 <!-- Activate/Deactivate Toggle -->
                                 <button
                                     @click="toggleProgramActive(program)"
@@ -244,6 +253,104 @@
 
     {{ pagination() }}
 </div>
+
+<!-- Delete Confirmation Modal -->
+<div x-show="showDeleteModal" x-cloak
+     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete Loyalty Program</h3>
+        <p class="text-gray-600 dark:text-gray-400 mb-1">
+            Delete the loyalty program for <strong x-text="deletingProgram?.merchant_name"></strong>?
+        </p>
+        <p class="text-sm text-red-600 dark:text-red-400 mb-4">
+            This will permanently remove the program and all associated data (cards, transactions, rewards). This cannot be undone.
+        </p>
+        <div class="flex justify-end gap-3">
+            <button @click="showDeleteModal = false; deletingProgram = null"
+                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
+                Cancel
+            </button>
+            <button @click="deleteProgram()"
+                    class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
+                Delete Program
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Create Program Modal -->
+<div x-show="showCreateModal" x-cloak
+     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-lg w-full mx-4">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Create Loyalty Program</h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            Select a merchant to create a loyalty program for.
+        </p>
+
+        <!-- Merchant Search -->
+        <div class="mb-4">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Merchant</label>
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <span x-html="$icon('search', 'w-4 h-4 text-gray-400')"></span>
+                </span>
+                <input type="text"
+                       x-model="merchantSearch"
+                       @input="searchMerchants()"
+                       placeholder="Type merchant name..."
+                       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>
+
+        <!-- Search Results -->
+        <div class="mb-4 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-lg" x-show="merchantResults.length > 0">
+            <template x-for="m in merchantResults" :key="m.id">
+                <button @click="selectedMerchant = m; merchantSearch = m.name"
+                        class="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center justify-between"
+                        :class="selectedMerchant?.id === m.id ? 'bg-purple-50 dark:bg-purple-900/20' : ''">
+                    <div>
+                        <p class="font-medium text-gray-700 dark:text-gray-300" x-text="m.name"></p>
+                        <p class="text-xs text-gray-500" x-text="m.contact_email"></p>
+                    </div>
+                    <span x-show="selectedMerchant?.id === m.id" x-html="$icon('check', 'w-5 h-5 text-purple-600')"></span>
+                </button>
+            </template>
+        </div>
+
+        <div x-show="merchantSearch && merchantResults.length === 0 && !searchingMerchants" class="mb-4 text-sm text-gray-500 text-center py-4">
+            No merchants found
+        </div>
+
+        <!-- Existing program warning -->
+        <div x-show="selectedMerchant && existingProgramForMerchant(selectedMerchant.id)"
+             class="mb-4 px-4 py-3 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
+            <div class="flex items-start">
+                <span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-500 mr-3 mt-0.5 flex-shrink-0')"></span>
+                <div>
+                    <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">This merchant already has a loyalty program.</p>
+                    <a :href="'/admin/loyalty/merchants/' + selectedMerchant.id + '/program'"
+                       class="inline-flex items-center mt-1 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400">
+                        <span x-html="$icon('eye', 'w-4 h-4 mr-1')"></span>
+                        View / Edit existing program
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-3">
+            <button @click="showCreateModal = false; merchantSearch = ''; merchantResults = []; selectedMerchant = null"
+                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
+                Cancel
+            </button>
+            <button @click="goToCreateProgram()"
+                    :disabled="!selectedMerchant || existingProgramForMerchant(selectedMerchant?.id)"
+                    class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                Continue
+            </button>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}