{% extends 'base/layout.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-6">
        <h1 class="text-3xl font-bold mb-6 text-center text-white">Become a Seller</h1>
        
        <form method="post" class="space-y-4">
            {% csrf_token %}
            
            {% if user_form %}
                <h2 class="text-xl font-semibold text-white mb-2">Account Details</h2>
                {% if user_form.non_field_errors %}
                    <div class="bg-red-500 text-white p-3 rounded mb-2">{{ user_form.non_field_errors }}</div>
                {% endif %}
                {% for field in user_form %}
                    <div class="flex flex-col mb-2">
                        <label for="{{ field.id_for_label }}" class="text-gray-300 mb-1">{{ field.label }}</label>
                        {{ field }}
                        {% if field.errors %}<p class="text-red-400 text-sm mt-1">{{ field.errors.0 }}</p>{% endif %}
                    </div>
                {% endfor %}
                <hr class="border-gray-600 my-4">
                <h2 class="text-xl font-semibold text-white mb-2">Store Details</h2>
            {% endif %}

            {% if form.non_field_errors %}
                <div class="bg-red-500 text-white p-3 rounded">
                    {{ form.non_field_errors }}
                </div>
            {% endif %}

            <!-- Store Details -->
            <div class="space-y-4">
                <div class="flex flex-col">
                    <label for="{{ form.store_name.id_for_label }}" class="text-gray-300 mb-1">{{ form.store_name.label }}</label>
                    {{ form.store_name }}
                    {% if form.store_name.errors %}<p class="text-red-400 text-sm mt-1">{{ form.store_name.errors.0 }}</p>{% endif %}
                </div>
                <div class="flex flex-col">
                    <label for="{{ form.description.id_for_label }}" class="text-gray-300 mb-1">{{ form.description.label }}</label>
                    {{ form.description }}
                    {% if form.description.errors %}<p class="text-red-400 text-sm mt-1">{{ form.description.errors.0 }}</p>{% endif %}
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex flex-col">
                        <label for="{{ form.contact_email.id_for_label }}" class="text-gray-300 mb-1">{{ form.contact_email.label }}</label>
                        {{ form.contact_email }}
                        {% if form.contact_email.errors %}<p class="text-red-400 text-sm mt-1">{{ form.contact_email.errors.0 }}</p>{% endif %}
                    </div>
                    <div class="flex flex-col">
                        <label for="{{ form.contact_phone.id_for_label }}" class="text-gray-300 mb-1">{{ form.contact_phone.label }}</label>
                        {{ form.contact_phone }}
                        {% if form.contact_phone.errors %}<p class="text-red-400 text-sm mt-1">{{ form.contact_phone.errors.0 }}</p>{% endif %}
                    </div>
                </div>
            </div>

            <!-- Store Address -->
            <div class="mt-6">
                <h3 class="text-xl font-semibold text-white mb-4">Store Address</h3>
                <div class="space-y-4">
                    <div class="flex flex-col">
                        <label for="{{ form.street.id_for_label }}" class="text-gray-300 mb-1">Street Address</label>
                        {{ form.street }}
                        {% if form.street.errors %}<p class="text-red-400 text-sm mt-1">{{ form.street.errors.0 }}</p>{% endif %}
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="flex flex-col">
                            <label for="{{ form.city.id_for_label }}" class="text-gray-300 mb-1">City</label>
                            {{ form.city }}
                            {% if form.city.errors %}<p class="text-red-400 text-sm mt-1">{{ form.city.errors.0 }}</p>{% endif %}
                        </div>
                        <div class="flex flex-col">
                            <label for="{{ form.state.id_for_label }}" class="text-gray-300 mb-1">State</label>
                            {{ form.state }}
                            {% if form.state.errors %}<p class="text-red-400 text-sm mt-1">{{ form.state.errors.0 }}</p>{% endif %}
                        </div>
                        <div class="flex flex-col">
                            <label for="{{ form.zip_code.id_for_label }}" class="text-gray-300 mb-1">Zip Code</label>
                            {{ form.zip_code }}
                            {% if form.zip_code.errors %}<p class="text-red-400 text-sm mt-1">{{ form.zip_code.errors.0 }}</p>{% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200">
                Register Store
            </button>
        </form>
    </div>
</div>

<style>
    /* basic styling for form inputs since we are using django form rendering */
    input[type="text"], input[type="email"], input[type="number"], textarea {
        background-color: var(--input-bg);
        border: 1px solid var(--border-color);
        color: var(--text-color);
        padding: 0.5rem;
        border-radius: 0.25rem;
        width: 100%;
    }
    input:focus, textarea:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
    }
</style>
{% endblock %}