{# app/templates/admin/vendor-edit.html #}
{% extends "admin/base.html" %}

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

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

{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
    <div>
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Edit Vendor
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="vendor">
            <span x-text="vendor?.name"></span>
            <span class="text-gray-400">•</span>
            <span x-text="vendor?.vendor_code"></span>
        </p>
    </div>
    <a href="/admin/vendors"
       class="flex items-center 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">
        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
        Back to Vendors
    </a>
</div>

<!-- Loading State -->
<div x-show="loadingVendor" class="text-center py-12">
    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading vendor...</p>
</div>

<!-- 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"
                        x-model="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>
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Contact Information
                </h3>

                <!-- 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"
                        x-model="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">
                    <span class="text-gray-700 dark:text-gray-400">
                        Contact Email <span class="text-red-600">*</span>
                    </span>
                    <input
                        type="email"
                        x-model="formData.contact_email"
                        required
                        :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">
                        Public business contact email
                    </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">
                    <span class="text-gray-700 dark:text-gray-400">
                        Phone
                    </span>
                    <input
                        type="tel"
                        x-model="formData.contact_phone"
                        :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">
                    <span class="text-gray-700 dark:text-gray-400">
                        Website
                    </span>
                    <input
                        type="url"
                        x-model="formData.website"
                        :disabled="saving"
                        placeholder="https://example.com"
                        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">
                    <span class="text-gray-700 dark:text-gray-400">
                        Business Address
                    </span>
                    <textarea
                        x-model="formData.business_address"
                        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>

                <!-- Tax Number -->
                <label class="block text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Tax Number
                    </span>
                    <input
                        type="text"
                        x-model="formData.tax_number"
                        :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>

        <!-- 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 %}