{# app/templates/admin/vendor-product-create.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import detail_page_header %}

{% block title %}Create Vendor Product{% endblock %}

{% block alpine_data %}adminVendorProductCreate(){% 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 %}
{% call detail_page_header("'Create Vendor Product'", '/admin/vendor-products') %}
    <span>Add a new product to a vendor's catalog</span>
{% endcall %}

<!-- Create Form -->
<form @submit.prevent="createProduct()">
    <!-- Vendor Selection -->
    <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">
            Vendor
        </h3>
        <div class="max-w-md">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Select Vendor *</label>
            <select id="vendor-select" x-ref="vendorSelect" placeholder="Search vendor...">
            </select>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">The vendor whose catalog this product will be added to</p>
        </div>
    </div>

    <!-- Basic Information -->
    <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">
            Basic Information
        </h3>
        <div class="grid gap-4 md:grid-cols-2">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Title *</label>
                <input
                    type="text"
                    x-model="form.title"
                    required
                    class="w-full px-3 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"
                    placeholder="Product title"
                />
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Brand</label>
                <input
                    type="text"
                    x-model="form.brand"
                    class="w-full px-3 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"
                    placeholder="Brand name"
                />
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Vendor SKU</label>
                <input
                    type="text"
                    x-model="form.vendor_sku"
                    class="w-full px-3 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"
                    placeholder="SKU"
                />
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">GTIN/EAN</label>
                <input
                    type="text"
                    x-model="form.gtin"
                    class="w-full px-3 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"
                    placeholder="GTIN/EAN"
                />
            </div>
        </div>
    </div>

    <!-- Pricing -->
    <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">
            Pricing
        </h3>
        <div class="grid gap-4 md:grid-cols-3">
            {# noqa: FE-008 - Using raw number input for price field #}
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price</label>
                <input
                    type="number"
                    step="0.01"
                    x-model="form.price"
                    class="w-full px-3 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"
                    placeholder="0.00"
                />
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Currency</label>
                <select
                    x-model="form.currency"
                    class="w-full px-3 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="EUR">EUR</option>
                    <option value="USD">USD</option>
                    <option value="GBP">GBP</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Availability</label>
                <select
                    x-model="form.availability"
                    class="w-full px-3 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="">Not specified</option>
                    <option value="in_stock">In Stock</option>
                    <option value="out_of_stock">Out of Stock</option>
                    <option value="preorder">Preorder</option>
                    <option value="backorder">Backorder</option>
                </select>
            </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">
            Status
        </h3>
        <div class="flex flex-wrap gap-6">
            <label class="flex items-center">
                <input
                    type="checkbox"
                    x-model="form.is_active"
                    class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                />
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</span>
            </label>
            <label class="flex items-center">
                <input
                    type="checkbox"
                    x-model="form.is_featured"
                    class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                />
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Featured</span>
            </label>
            <label class="flex items-center">
                <input
                    type="checkbox"
                    x-model="form.is_digital"
                    class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                />
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product</span>
            </label>
        </div>
    </div>

    <!-- Description -->
    <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">
            Description
        </h3>
        <textarea
            x-model="form.description"
            rows="6"
            class="w-full px-3 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"
            placeholder="Product description (HTML supported)"
        ></textarea>
    </div>

    <!-- Actions -->
    <div class="flex items-center justify-between px-4 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <a
            href="/admin/vendor-products"
            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
        >
            Cancel
        </a>
        <button
            type="submit"
            :disabled="saving || !form.vendor_id"
            class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
        >
            <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
            <span x-text="saving ? 'Creating...' : 'Create Product'"></span>
        </button>
    </div>
</form>
{% 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/vendor-product-create.js') }}"></script>
{% endblock %}