{# app/templates/vendor/profile.html #}
{% extends "vendor/base.html" %}
{% from 'shared/macros/headers.html' import page_header_flex %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}

{% block title %}Profile{% endblock %}

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

{% block content %}
<!-- Page Header -->
{% call page_header_flex(title='Profile', subtitle='Manage your business information') %}
    <div class="flex items-center gap-4">
        <button
            x-show="hasChanges"
            @click="resetForm()"
            class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
        >
            Reset
        </button>
        <button
            @click="saveProfile()"
            :disabled="saving || !hasChanges"
            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"
        >
            <span x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
            <span x-show="!saving">Save Changes</span>
            <span x-show="saving">Saving...</span>
        </button>
    </div>
{% endcall %}

{{ loading_state('Loading profile...') }}

{{ error_state('Error loading profile') }}

<!-- Profile Form -->
<div x-show="!loading && !error" class="w-full mb-8">
    <!-- Business Information -->
    <div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-4 border-b dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Business Information</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Basic information about your business</p>
        </div>
        <div class="p-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Business Name -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Business Name *
                    </label>
                    <input
                        type="text"
                        x-model="form.name"
                        @input="markChanged()"
                        :class="{'border-red-500': errors.name}"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                    />
                    <p x-show="errors.name" class="mt-1 text-xs text-red-500" x-text="errors.name"></p>
                </div>

                <!-- Tax Number -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Tax Number / VAT ID
                    </label>
                    <input
                        type="text"
                        x-model="form.tax_number"
                        @input="markChanged()"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                        placeholder="LU12345678"
                    />
                </div>

                <!-- Business Address -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Business Address
                    </label>
                    <textarea
                        x-model="form.business_address"
                        @input="markChanged()"
                        rows="3"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                        placeholder="123 Business Street&#10;City, Postal Code&#10;Country"
                    ></textarea>
                </div>

                <!-- Description -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Business Description
                    </label>
                    <textarea
                        x-model="form.description"
                        @input="markChanged()"
                        rows="4"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                        placeholder="Tell customers about your business..."
                    ></textarea>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Information -->
    <div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-4 border-b dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Information</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">How customers can reach you</p>
        </div>
        <div class="p-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Contact Email -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Contact Email
                    </label>
                    <input
                        type="email"
                        x-model="form.contact_email"
                        @input="markChanged()"
                        :class="{'border-red-500': errors.contact_email}"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                        placeholder="contact@yourbusiness.com"
                    />
                    <p x-show="errors.contact_email" class="mt-1 text-xs text-red-500" x-text="errors.contact_email"></p>
                </div>

                <!-- Contact Phone -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Contact Phone
                    </label>
                    <input
                        type="tel"
                        x-model="form.contact_phone"
                        @input="markChanged()"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                        placeholder="+352 123 456 789"
                    />
                </div>

                <!-- Website -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Website
                    </label>
                    <input
                        type="url"
                        x-model="form.website"
                        @input="markChanged()"
                        :class="{'border-red-500': errors.website}"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                        placeholder="https://www.yourbusiness.com"
                    />
                    <p x-show="errors.website" class="mt-1 text-xs text-red-500" x-text="errors.website"></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Vendor Info (Read Only) -->
    <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-4 border-b dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Account Information</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Your vendor account details (read-only)</p>
        </div>
        <div class="p-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Vendor Code -->
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Vendor Code</label>
                    <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="profile?.vendor_code"></p>
                </div>

                <!-- Subdomain -->
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Subdomain</label>
                    <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="profile?.subdomain || '-'"></p>
                </div>

                <!-- Status -->
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Status</label>
                    <span
                        :class="profile?.is_active
                            ? 'px-2 py-1 text-xs font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
                            : 'px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100'"
                        x-text="profile?.is_active ? 'Active' : 'Inactive'"
                    ></span>
                    <span
                        x-show="profile?.is_verified"
                        class="ml-2 px-2 py-1 text-xs font-semibold text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100"
                    >Verified</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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