{# app/templates/admin/marketplace-letzshop.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button, tab_panel, endtab_panel %}
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{# Import modals macro - custom modals below use inline definition for specialized forms #}
{% from 'shared/macros/modals.html' import modal_simple %}

{% block title %}Letzshop Management{% endblock %}
{% block alpine_data %}adminMarketplaceLetzshop(){% endblock %}

{% block extra_head %}
<!-- Tom Select CSS with local fallback -->
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
    onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/vendor/tom-select.default.min.css') }}';"
/>
<style>
    /* Tom Select dark mode overrides */
    .dark .ts-wrapper .ts-control {
        background-color: rgb(55 65 81);
        border-color: rgb(75 85 99);
        color: rgb(209 213 219);
    }
    .dark .ts-wrapper .ts-control input {
        color: rgb(209 213 219);
    }
    .dark .ts-wrapper .ts-control input::placeholder {
        color: rgb(156 163 175);
    }
    .dark .ts-dropdown {
        background-color: rgb(55 65 81);
        border-color: rgb(75 85 99);
        color: rgb(209 213 219);
    }
    .dark .ts-dropdown .option {
        color: rgb(209 213 219);
    }
    .dark .ts-dropdown .option.active {
        background-color: rgb(147 51 234);
        color: white;
    }
    .dark .ts-dropdown .option:hover {
        background-color: rgb(75 85 99);
    }
    .dark .ts-wrapper.focus .ts-control {
        border-color: rgb(147 51 234);
        box-shadow: 0 0 0 1px rgb(147 51 234);
    }
</style>
{% endblock %}

{% block content %}
<!-- Page Header with Vendor Selector -->
{% call page_header_flex(title='Letzshop Management', subtitle='Manage Letzshop integration for vendors') %}
    <div class="flex items-center gap-4">
        <!-- Vendor Autocomplete (Tom Select) -->
        <div class="w-80">
            <select id="vendor-select" x-ref="vendorSelect" placeholder="Search vendor...">
            </select>
        </div>
        {{ refresh_button(loading_var='loading', onclick='refreshData()', variant='secondary') }}
    </div>
{% endcall %}

<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 rounded-lg flex items-start">
    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
    <div>
        <p class="font-semibold" x-text="successMessage"></p>
    </div>
    <button @click="successMessage = ''" class="ml-auto text-green-700 dark:text-green-300 hover:text-green-900">
        <span x-html="$icon('x', 'w-4 h-4')"></span>
    </button>
</div>

<!-- Error Message -->
{{ error_state('Error', show_condition='error && !loading') }}

<!-- Cross-vendor info banner (shown when no vendor selected) -->
<div x-show="!selectedVendor && !loading" class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
    <div class="flex items-center">
        <span x-html="$icon('information-circle', 'w-6 h-6 text-blue-500 mr-3')"></span>
        <div>
            <h3 class="font-medium text-blue-800 dark:text-blue-200">All Vendors View</h3>
            <p class="text-sm text-blue-700 dark:text-blue-300">Showing data across all vendors. Select a vendor above to manage products, import orders, or access settings.</p>
        </div>
    </div>
</div>

<!-- Main Content -->
<div x-show="!loading" x-transition x-cloak>
    <!-- Selected Vendor Filter (same pattern as orders page) -->
    <div x-show="selectedVendor" x-transition class="mb-6 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                    <span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="selectedVendor?.name?.charAt(0).toUpperCase()"></span>
                </div>
                <div class="flex items-center gap-3">
                    <div>
                        <span class="font-medium text-purple-800 dark:text-purple-200" x-text="selectedVendor?.name"></span>
                        <span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-mono" x-text="selectedVendor?.vendor_code"></span>
                    </div>
                    <!-- Status badges -->
                    <span class="px-2 py-0.5 text-xs font-medium rounded-full"
                          :class="letzshopStatus.is_configured ? 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'"
                          x-text="letzshopStatus.is_configured ? 'Configured' : 'Not Configured'">
                    </span>
                    <span x-show="letzshopStatus.auto_sync_enabled" class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
                        Auto-sync
                    </span>
                </div>
            </div>
            <button @click="clearVendorSelection()" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm flex items-center gap-1">
                <span x-html="$icon('x', 'w-4 h-4')"></span>
                Clear filter
            </button>
        </div>
    </div>

    <!-- Tabs -->
    {% call tabs_nav(tab_var='activeTab') %}
        {{ tab_button('products', 'Products', tab_var='activeTab', icon='cube') }}
        {{ tab_button('orders', 'Orders', tab_var='activeTab', icon='shopping-cart', count_var='orderStats.pending') }}
        {{ tab_button('exceptions', 'Exceptions', tab_var='activeTab', icon='exclamation-circle', count_var='exceptionStats.pending') }}
        {{ tab_button('jobs', 'Jobs', tab_var='activeTab', icon='collection') }}
        <template x-if="selectedVendor">
            <span>{{ tab_button('settings', 'Settings', tab_var='activeTab', icon='cog') }}</span>
        </template>
    {% endcall %}

    <!-- Products Tab -->
    {{ tab_panel('products', tab_var='activeTab') }}
        {% include 'admin/partials/letzshop-products-tab.html' %}
    {{ endtab_panel() }}

    <!-- Orders Tab -->
    {{ tab_panel('orders', tab_var='activeTab') }}
        {% include 'admin/partials/letzshop-orders-tab.html' %}
    {{ endtab_panel() }}

    <!-- Settings Tab - Vendor only -->
    <template x-if="selectedVendor">
        {{ tab_panel('settings', tab_var='activeTab') }}
            {% include 'admin/partials/letzshop-settings-tab.html' %}
        {{ endtab_panel() }}
    </template>

    <!-- Exceptions Tab -->
    {{ tab_panel('exceptions', tab_var='activeTab') }}
        {% include 'admin/partials/letzshop-exceptions-tab.html' %}
    {{ endtab_panel() }}

    <!-- Jobs Tab -->
    {{ tab_panel('jobs', tab_var='activeTab') }}
        {% include 'admin/partials/letzshop-jobs-table.html' %}
    {{ endtab_panel() }}
</div>

<!-- Tracking Modal -->
<div
    x-show="showTrackingModal"
    x-transition:enter="transition ease-out duration-150"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
    @click.self="showTrackingModal = false"
    x-cloak
>
    <div
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 transform translate-y-1/2"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0 transform translate-y-1/2"
        class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-md"
        @click.stop
    >
        <header class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Set Tracking Information</h3>
            <button @click="showTrackingModal = false" class="text-gray-400 hover:text-gray-600">
                <span x-html="$icon('x', 'w-5 h-5')"></span>
            </button>
        </header>

        <form @submit.prevent="submitTracking()">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Tracking Number <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    x-model="trackingForm.tracking_number"
                    required
                    placeholder="1Z999AA10123456784"
                    class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                />
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Carrier <span class="text-red-500">*</span>
                </label>
                <select
                    x-model="trackingForm.tracking_provider"
                    required
                    class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                >
                    <option value="">Select carrier...</option>
                    <option value="dhl">DHL</option>
                    <option value="ups">UPS</option>
                    <option value="fedex">FedEx</option>
                    <option value="post_lu">Post Luxembourg</option>
                    <option value="dpd">DPD</option>
                    <option value="gls">GLS</option>
                    <option value="other">Other</option>
                </select>
            </div>

            <div class="flex justify-end gap-3">
                <button
                    type="button"
                    @click="showTrackingModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    :disabled="submittingTracking"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
                >
                    <span x-show="submittingTracking" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                    <span x-text="submittingTracking ? 'Saving...' : 'Save Tracking'"></span>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Order Details Modal -->
<div
    x-show="showOrderModal"
    x-transition:enter="transition ease-out duration-150"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
    @click.self="showOrderModal = false"
    x-cloak
>
    <div
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 transform translate-y-1/2"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0 transform translate-y-1/2"
        class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl max-h-[80vh] overflow-y-auto"
        @click.stop
    >
        <header class="flex justify-between items-center mb-4">
            <div class="flex items-center gap-3">
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Order Details</h3>
                <a
                    :href="'/admin/letzshop/orders/' + selectedOrder?.id"
                    class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400 flex items-center gap-1"
                    title="Open full order page"
                >
                    <span x-html="$icon('external-link', 'w-3 h-3')"></span>
                    Full View
                </a>
            </div>
            <button @click="showOrderModal = false" class="text-gray-400 hover:text-gray-600">
                <span x-html="$icon('x', 'w-5 h-5')"></span>
            </button>
        </header>

        <div x-show="selectedOrder" class="space-y-4">
            <!-- Order Info Grid -->
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Order Number:</span>
                    <span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.external_order_number || selectedOrder?.order_number"></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Order Date:</span>
                    <span class="ml-2 text-gray-700 dark:text-gray-300" x-text="formatDate(selectedOrder?.order_date || selectedOrder?.created_at)"></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Status:</span>
                    <span
                        class="ml-2 px-2 py-0.5 text-xs rounded-full"
                        :class="{
                            'bg-orange-100 text-orange-700': selectedOrder?.status === 'pending',
                            'bg-green-100 text-green-700': selectedOrder?.status === 'processing',
                            'bg-red-100 text-red-700': selectedOrder?.status === 'cancelled',
                            'bg-blue-100 text-blue-700': selectedOrder?.status === 'shipped'
                        }"
                        x-text="selectedOrder?.status === 'cancelled' ? 'DECLINED' : (selectedOrder?.status === 'processing' ? 'CONFIRMED' : selectedOrder?.status?.toUpperCase())"
                    ></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Total:</span>
                    <span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.total_amount + ' ' + selectedOrder?.currency"></span>
                </div>
            </div>

            <!-- Customer & Shipping Info -->
            <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
                <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
                    <span x-html="$icon('user', 'w-4 h-4')"></span>
                    Customer & Shipping
                </h4>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400">
                            <span class="font-medium">Name:</span>
                            <span class="ml-1" x-text="selectedOrder?.customer_name || 'N/A'"></span>
                        </p>
                        <p class="text-gray-600 dark:text-gray-400">
                            <span class="font-medium">Email:</span>
                            <a :href="'mailto:' + selectedOrder?.customer_email" class="ml-1 text-purple-600 hover:underline" x-text="selectedOrder?.customer_email"></a>
                        </p>
                        <p class="text-gray-600 dark:text-gray-400" x-show="selectedOrder?.customer_locale">
                            <span class="font-medium">Language:</span>
                            <span class="ml-1 uppercase" x-text="selectedOrder?.customer_locale"></span>
                        </p>
                    </div>
                    <div x-show="selectedOrder?.shipping_country_iso">
                        <p class="text-gray-600 dark:text-gray-400">
                            <span class="font-medium">Ship to:</span>
                            <span class="ml-1" x-text="selectedOrder?.shipping_country_iso"></span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Tracking Info -->
            <div x-show="selectedOrder?.tracking_number" class="border-t border-gray-200 dark:border-gray-600 pt-4">
                <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
                    <span x-html="$icon('truck', 'w-4 h-4')"></span>
                    Tracking
                </h4>
                <div class="text-sm bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
                    <p class="text-gray-700 dark:text-gray-300">
                        <span class="font-medium">Carrier:</span>
                        <span class="ml-1" x-text="selectedOrder?.tracking_provider"></span>
                    </p>
                    <p class="text-gray-700 dark:text-gray-300">
                        <span class="font-medium">Tracking #:</span>
                        <span class="ml-1 font-mono" x-text="selectedOrder?.tracking_number"></span>
                    </p>
                </div>
            </div>

            <!-- Order Items -->
            <div x-show="selectedOrder?.items?.length > 0" class="border-t border-gray-200 dark:border-gray-600 pt-4">
                <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
                    <span x-html="$icon('shopping-bag', 'w-4 h-4')"></span>
                    Items
                    <span class="text-xs font-normal text-gray-500">
                        (<span x-text="selectedOrder?.items?.length"></span> item<span x-show="selectedOrder?.items?.length > 1">s</span>)
                    </span>
                </h4>
                <div class="space-y-2 max-h-64 overflow-y-auto">
                    <template x-for="(item, index) in selectedOrder?.items || []" :key="item.id">
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <p class="font-medium text-gray-700 dark:text-gray-200 text-sm" x-text="item.product_name || 'Unknown Product'"></p>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 space-y-0.5">
                                        <p x-show="item.gtin">
                                            <span class="font-medium">GTIN:</span> <span x-text="item.gtin"></span>
                                            <span x-show="item.gtin_type" class="text-gray-400" x-text="'(' + item.gtin_type + ')'"></span>
                                        </p>
                                        <p x-show="item.product_sku"><span class="font-medium">SKU:</span> <span x-text="item.product_sku"></span></p>
                                        <p><span class="font-medium">Qty:</span> <span x-text="item.quantity"></span></p>
                                        <p x-show="item.unit_price"><span class="font-medium">Price:</span> <span x-text="item.unit_price + ' ' + selectedOrder?.currency"></span></p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 ml-4">
                                    <!-- Item State Badge -->
                                    <span
                                        class="px-2 py-0.5 text-xs rounded-full whitespace-nowrap"
                                        :class="{
                                            'bg-orange-100 text-orange-700': !item.item_state,
                                            'bg-green-100 text-green-700': item.item_state === 'confirmed_available',
                                            'bg-red-100 text-red-700': item.item_state === 'confirmed_unavailable',
                                            'bg-gray-100 text-gray-700': item.item_state === 'returned'
                                        }"
                                        x-text="item.item_state === 'confirmed_unavailable' ? 'DECLINED' : (item.item_state === 'confirmed_available' ? 'CONFIRMED' : (item.item_state ? item.item_state.toUpperCase() : 'PENDING'))"
                                    ></span>
                                    <!-- Item Actions (only for unconfirmed items) -->
                                    <template x-if="!item.item_state && selectedOrder?.status === 'pending'">
                                        <div class="flex gap-1">
                                            <button
                                                @click="confirmInventoryUnit(selectedOrder, item, index)"
                                                class="p-1 text-green-600 hover:bg-green-100 rounded"
                                                title="Confirm this item"
                                            >
                                                <span x-html="$icon('check', 'w-4 h-4')"></span>
                                            </button>
                                            <button
                                                @click="declineInventoryUnit(selectedOrder, item, index)"
                                                class="p-1 text-red-600 hover:bg-red-100 rounded"
                                                title="Decline this item"
                                            >
                                                <span x-html="$icon('x', 'w-4 h-4')"></span>
                                            </button>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <!-- Bulk Actions -->
                <div x-show="selectedOrder?.status === 'pending'" class="mt-4 flex gap-2 justify-end">
                    <button
                        @click="confirmAllItems(selectedOrder)"
                        class="px-3 py-1.5 text-sm text-white bg-green-600 hover:bg-green-700 rounded-lg"
                    >
                        Confirm All Items
                    </button>
                    <button
                        @click="declineAllItems(selectedOrder)"
                        class="px-3 py-1.5 text-sm text-white bg-red-600 hover:bg-red-700 rounded-lg"
                    >
                        Decline All Items
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Exception Resolve Modal -->
<div
    x-show="showResolveModal"
    x-transition:enter="transition ease-out duration-150"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
    @click.self="showResolveModal = false"
    x-cloak
>
    <div
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 transform translate-y-1/2"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0 transform translate-y-1/2"
        class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-lg"
        @click.stop
    >
        <header class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Resolve Exception</h3>
            <button @click="showResolveModal = false" class="text-gray-400 hover:text-gray-600">
                <span x-html="$icon('x', 'w-5 h-5')"></span>
            </button>
        </header>

        <!-- Exception Details -->
        <div class="mb-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="selectedExceptionForResolve?.original_product_name || 'Unknown Product'"></p>
            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400 space-y-1">
                <p x-show="selectedExceptionForResolve?.original_gtin">
                    <span class="font-medium">GTIN:</span>
                    <code class="ml-1 px-1 bg-gray-200 dark:bg-gray-600 rounded" x-text="selectedExceptionForResolve?.original_gtin"></code>
                </p>
                <p x-show="selectedExceptionForResolve?.original_sku">
                    <span class="font-medium">SKU:</span> <span x-text="selectedExceptionForResolve?.original_sku"></span>
                </p>
                <p>
                    <span class="font-medium">Order:</span>
                    <a :href="'/admin/orders/' + selectedExceptionForResolve?.order_id" class="text-purple-600 hover:underline" x-text="selectedExceptionForResolve?.order_number"></a>
                </p>
            </div>
        </div>

        <form @submit.prevent="submitResolveException()">
            <!-- Product Search -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Assign Product <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <input
                        type="text"
                        x-model="productSearchQuery"
                        @input.debounce.300ms="searchProducts()"
                        placeholder="Search by name, SKU, or GTIN..."
                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                    />
                    <span x-show="searchingProducts" x-html="$icon('spinner', 'w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400')"></span>
                </div>
                <!-- Search Results -->
                <div x-show="productSearchResults.length > 0" class="mt-2 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-md">
                    <template x-for="product in productSearchResults" :key="product.id">
                        <button
                            type="button"
                            @click="selectProductForResolve(product)"
                            class="w-full px-3 py-2 text-left text-sm hover:bg-purple-50 dark:hover:bg-purple-900/20 border-b border-gray-100 dark:border-gray-700 last:border-b-0"
                            :class="resolveForm.product_id === product.id ? 'bg-purple-100 dark:bg-purple-900/30' : ''"
                        >
                            <p class="font-medium text-gray-700 dark:text-gray-200" x-text="product.name || product.title"></p>
                            <p class="text-xs text-gray-500">
                                <span x-show="product.gtin" x-text="'GTIN: ' + product.gtin"></span>
                                <span x-show="product.gtin && product.sku"> · </span>
                                <span x-show="product.sku" x-text="'SKU: ' + product.sku"></span>
                            </p>
                        </button>
                    </template>
                </div>
                <!-- Selected Product -->
                <div x-show="resolveForm.product_id" class="mt-2 p-2 bg-green-50 dark:bg-green-900/20 rounded-md flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-green-700 dark:text-green-300" x-text="resolveForm.product_name"></p>
                        <p class="text-xs text-green-600 dark:text-green-400" x-text="'Product ID: ' + resolveForm.product_id"></p>
                    </div>
                    <button type="button" @click="resolveForm.product_id = null; resolveForm.product_name = ''" class="text-green-600 hover:text-green-800">
                        <span x-html="$icon('x', 'w-4 h-4')"></span>
                    </button>
                </div>
            </div>

            <!-- Resolution Notes -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Notes (Optional)
                </label>
                <textarea
                    x-model="resolveForm.notes"
                    rows="2"
                    placeholder="Add any notes about this resolution..."
                    class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                ></textarea>
            </div>

            <!-- Bulk Resolve Option -->
            <div x-show="selectedExceptionForResolve?.original_gtin" class="mb-4">
                <label class="flex items-center text-sm text-gray-700 dark:text-gray-300">
                    <input
                        type="checkbox"
                        x-model="resolveForm.bulk_resolve"
                        class="mr-2 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                    />
                    Resolve all pending exceptions with this GTIN
                </label>
            </div>

            <div class="flex justify-end gap-3">
                <button
                    type="button"
                    @click="showResolveModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    :disabled="!resolveForm.product_id || submittingResolve"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 disabled:opacity-50"
                >
                    <span x-show="submittingResolve" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                    <span x-text="submittingResolve ? 'Resolving...' : 'Resolve Exception'"></span>
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<!-- Tom Select JS with local fallback -->
<script>
(function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/js/tom-select.complete.min.js';
    script.onerror = function() {
        console.warn('Tom Select CDN failed, loading local copy...');
        var fallbackScript = document.createElement('script');
        fallbackScript.src = '{{ url_for("static", path="shared/js/vendor/tom-select.complete.min.js") }}';
        document.head.appendChild(fallbackScript);
    };
    document.head.appendChild(script);
})();
</script>
<script src="{{ url_for('static', path='admin/js/marketplace-letzshop.js') }}"></script>
{% endblock %}