{# app/templates/admin/vendor-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state %}
{% from 'shared/macros/headers.html' import edit_page_header %}

{% block title %}Edit Vendor{% endblock %}

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

{% block content %}
{% call edit_page_header('Edit Vendor', '/admin/vendors', subtitle_show='vendor', back_label='Back to Vendors') %}
    <span x-text="vendor?.name"></span>
    <span class="text-gray-400">•</span>
    <span x-text="vendor?.vendor_code"></span>
{% endcall %}

{{ loading_state('Loading vendor...', show_condition='loadingVendor') }}

<!-- Edit Form -->
<div x-show="!loadingVendor && vendor">
    <!-- Quick Actions Card -->
    <div class="px-4 py-3 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">
            Quick Actions
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <button
                @click="toggleVerification()"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="vendor?.is_verified ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'">
                <span x-html="$icon(vendor?.is_verified ? 'x-circle' : 'badge-check', 'w-4 h-4 mr-2')"></span>
                <span x-text="vendor?.is_verified ? 'Unverify Vendor' : 'Verify Vendor'"></span>
            </button>

            <button
                @click="toggleActive()"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="vendor?.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
                <span x-html="$icon(vendor?.is_active ? 'lock-closed' : 'lock-open', 'w-4 h-4 mr-2')"></span>
                <span x-text="vendor?.is_active ? 'Deactivate' : 'Activate'"></span>
            </button>

            <!-- Status Badges -->
            <div class="ml-auto flex items-center gap-2">
                <span
                    x-show="vendor?.is_verified"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                    <span x-html="$icon('badge-check', 'w-3 h-3 mr-1')"></span>
                    Verified
                </span>
                <span
                    x-show="!vendor?.is_verified"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
                    <span x-html="$icon('clock', 'w-3 h-3 mr-1')"></span>
                    Pending
                </span>
                <span
                    x-show="vendor?.is_active"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                    Active
                </span>
                <span
                    x-show="!vendor?.is_active"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
                    Inactive
                </span>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <div class="grid gap-6 mb-8 md:grid-cols-2">
            <!-- Left Column: Basic Info -->
            <div>
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Basic Information
                </h3>

                <!-- Vendor Code (readonly) -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Vendor Code
                    </span>
                    <input
                        type="text"
                        :value="vendor?.vendor_code || ''"
                        disabled
                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Cannot be changed after creation
                    </span>
                </label>

                <!-- Name -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Vendor Name <span class="text-red-600">*</span>
                    </span>
                    <input
                        type="text"
                        x-model="formData.name"
                        required
                        maxlength="255"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
                    >
                    <span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
                </label>

                <!-- Subdomain -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Subdomain <span class="text-red-600">*</span>
                    </span>
                    <input
                        type="text"
                        x-model="formData.subdomain"
                        @input="formatSubdomain()"
                        required
                        maxlength="100"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.subdomain }"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Lowercase letters, numbers, and hyphens only
                    </span>
                    <span x-show="errors.subdomain" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.subdomain"></span>
                </label>

                <!-- Description -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Description
                    </span>
                    <textarea
                        x-model="formData.description"
                        rows="3"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
                    ></textarea>
                </label>
            </div>

            <!-- Right Column: Contact Info -->
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                        Contact Information
                    </h3>
                    <button
                        type="button"
                        @click="resetAllContactToCompany()"
                        :disabled="saving || !hasAnyContactOverride()"
                        class="text-xs px-2 py-1 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 disabled:opacity-50 disabled:cursor-not-allowed"
                        title="Reset all contact fields to inherit from company">
                        <span x-html="$icon('refresh', 'w-3 h-3 inline mr-1')"></span>
                        Reset All to Company
                    </button>
                </div>

                <!-- Owner Email (readonly) -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Owner Email
                    </span>
                    <input
                        type="email"
                        :value="vendor?.owner_email || ''"
                        disabled
                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Owner's authentication email
                    </span>
                </label>

                <!-- Contact Email -->
                <label class="block mb-4 text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-700 dark:text-gray-400">
                            Contact Email
                            <span x-show="!formData.contact_email"
                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400"
                                  title="Inherited from company">
                                (from company)
                            </span>
                        </span>
                        <button
                            type="button"
                            x-show="formData.contact_email"
                            @click="resetFieldToCompany('contact_email')"
                            :disabled="saving"
                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
                            Reset
                        </button>
                    </div>
                    <input
                        type="email"
                        x-model="formData.contact_email"
                        :placeholder="vendor?.company_contact_email || 'contact@company.com'"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.contact_email }"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        <span x-show="!formData.contact_email">Using company value. Enter a value to override.</span>
                        <span x-show="formData.contact_email">Custom value (clear to inherit from company)</span>
                    </span>
                    <span x-show="errors.contact_email" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.contact_email"></span>
                </label>

                <!-- Phone -->
                <label class="block mb-4 text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-700 dark:text-gray-400">
                            Phone
                            <span x-show="!formData.contact_phone"
                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400">
                                (from company)
                            </span>
                        </span>
                        <button
                            type="button"
                            x-show="formData.contact_phone"
                            @click="resetFieldToCompany('contact_phone')"
                            :disabled="saving"
                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
                            Reset
                        </button>
                    </div>
                    <input
                        type="tel"
                        x-model="formData.contact_phone"
                        :placeholder="vendor?.company_contact_phone || '+352 XXX XXX'"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                </label>

                <!-- Website -->
                <label class="block mb-4 text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-700 dark:text-gray-400">
                            Website
                            <span x-show="!formData.website"
                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400">
                                (from company)
                            </span>
                        </span>
                        <button
                            type="button"
                            x-show="formData.website"
                            @click="resetFieldToCompany('website')"
                            :disabled="saving"
                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
                            Reset
                        </button>
                    </div>
                    <input
                        type="url"
                        x-model="formData.website"
                        :placeholder="vendor?.company_website || 'https://company.com'"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                </label>
            </div>
        </div>

        <!-- Business Details -->
        <div class="mb-8">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Business Details
            </h3>

            <div class="grid gap-6 md:grid-cols-2">
                <!-- Business Address -->
                <label class="block text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-700 dark:text-gray-400">
                            Business Address
                            <span x-show="!formData.business_address"
                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400">
                                (from company)
                            </span>
                        </span>
                        <button
                            type="button"
                            x-show="formData.business_address"
                            @click="resetFieldToCompany('business_address')"
                            :disabled="saving"
                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
                            Reset
                        </button>
                    </div>
                    <textarea
                        x-model="formData.business_address"
                        rows="3"
                        :disabled="saving"
                        :placeholder="vendor?.company_business_address || 'No company address'"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
                    ></textarea>
                </label>

                <!-- Tax Number -->
                <label class="block text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-700 dark:text-gray-400">
                            Tax Number
                            <span x-show="!formData.tax_number"
                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400">
                                (from company)
                            </span>
                        </span>
                        <button
                            type="button"
                            x-show="formData.tax_number"
                            @click="resetFieldToCompany('tax_number')"
                            :disabled="saving"
                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
                            Reset
                        </button>
                    </div>
                    <input
                        type="text"
                        x-model="formData.tax_number"
                        :disabled="saving"
                        :placeholder="vendor?.company_tax_number || 'No company tax number'"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                </label>
            </div>
        </div>

        <!-- Marketplace Integration -->
        <div class="mb-8">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                <span x-html="$icon('shopping-bag', 'inline w-5 h-5 mr-2')"></span>
                Letzshop Marketplace URLs
            </h3>
            <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                Configure CSV feed URLs for automatic product imports from Letzshop marketplace
            </p>

            <div class="space-y-4">
                <!-- French CSV URL -->
                <label class="block text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        French CSV URL
                    </span>
                    <input
                        type="url"
                        x-model="formData.letzshop_csv_url_fr"
                        :disabled="saving"
                        placeholder="https://letzshop.lu/feed/fr/products.csv"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        URL for French language product feed
                    </span>
                </label>

                <!-- English CSV URL -->
                <label class="block text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        English CSV URL
                    </span>
                    <input
                        type="url"
                        x-model="formData.letzshop_csv_url_en"
                        :disabled="saving"
                        placeholder="https://letzshop.lu/feed/en/products.csv"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        URL for English language product feed
                    </span>
                </label>

                <!-- German CSV URL -->
                <label class="block text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        German CSV URL
                    </span>
                    <input
                        type="url"
                        x-model="formData.letzshop_csv_url_de"
                        :disabled="saving"
                        placeholder="https://letzshop.lu/feed/de/products.csv"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        URL for German language product feed
                    </span>
                </label>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex items-center justify-end gap-3 pt-6 border-t dark:border-gray-700">
            <a
                href="/admin/vendors"
                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
                Cancel
            </a>
            <button
                type="submit"
                :disabled="saving"
                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 disabled:opacity-50 disabled:cursor-not-allowed">
                <span x-show="!saving">
                    <span x-html="$icon('check', 'w-4 h-4 mr-2 inline')"></span>
                    Save Changes
                </span>
                <span x-show="saving" class="flex items-center">
                    <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                    Saving...
                </span>
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/vendor-edit.js') }}"></script>
{% endblock %}