orion/app/templates/admin/marketplace-letzshop.html

{# 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') }}

<!-- Vendor Required Warning -->
<div x-show="!selectedVendor && !loading" class="mb-8 p-6 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
    <div class="flex items-center">
        <span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-500 mr-3')"></span>
        <div>
            <h3 class="font-medium text-yellow-800 dark:text-yellow-200">Select a Vendor</h3>
            <p class="text-sm text-yellow-700 dark:text-yellow-300">Please select a vendor from the dropdown above to manage their Letzshop integration.</p>
        </div>
    </div>
</div>

<!-- Main Content (shown when vendor selected) -->
<div x-show="selectedVendor" x-transition x-cloak>
    <!-- Vendor Info Bar -->
    <div class="mb-6 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-xs flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                <span class="text-lg font-semibold text-purple-600 dark:text-purple-300" x-text="selectedVendor?.name?.charAt(0).toUpperCase()"></span>
            </div>
            <div>
                <h3 class="font-semibold text-gray-800 dark:text-gray-200" x-text="selectedVendor?.name"></h3>
                <p class="text-sm text-gray-500" x-text="selectedVendor?.vendor_code"></p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <!-- Status Badge -->
            <span class="px-3 py-1 text-sm font-medium rounded-full"
                  :class="letzshopStatus.is_configured ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
                  x-text="letzshopStatus.is_configured ? 'Configured' : 'Not Configured'">
            </span>
            <!-- Auto-sync indicator -->
            <span x-show="letzshopStatus.auto_sync_enabled" class="px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                Auto-sync
            </span>
        </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('settings', 'Settings', tab_var='activeTab', icon='cog') }}
    {% endcall %}

    <!-- Products Tab (Import + Export) -->
    {{ 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 -->
    {{ tab_panel('settings', tab_var='activeTab') }}
        {% include 'admin/partials/letzshop-settings-tab.html' %}
    {{ endtab_panel() }}

    <!-- Unified Jobs Table (below all tabs) -->
    <div class="mt-8">
        {% include 'admin/partials/letzshop-jobs-table.html' %}
    </div>
</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">
                    <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>
{% 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 %}