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

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

{% block alpine_data %}storeProductCreate(){% endblock %}

{% block content %}
{% call detail_page_header("'Create Product'", backUrl) %}
    <span>Add a new product to your catalog</span>
{% endcall %}

<!-- Create Form -->
<form @submit.prevent="createProduct()">
    <!-- 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">SKU</label>
                <input
                    type="text"
                    x-model="form.store_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"
                    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="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="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"
        ></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="backUrl"
            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.title"
            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 animate-spin')"></span>
            <span x-text="saving ? 'Creating...' : 'Create Product'"></span>
        </button>
    </div>
</form>
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('catalog_static', path='store/js/product-create.js') }}"></script>
{% endblock %}