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

{% block content %}
<div class="container" style="max-width: 800px; margin: 0 auto; padding: 2rem;">
    <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
        <h1 style="margin-top: 0; margin-bottom: 2rem;">Edit Store Profile</h1>
        
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            
            {% if form.non_field_errors %}
            <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
                {{ form.non_field_errors }}
            </div>
            {% endif %}

            <div style="display: grid; gap: 1.5rem;">
                <!-- Store Info -->
                <div class="form-group">
                    <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Store Name</label>
                    {{ form.store_name }}
                    {% if form.store_name.errors %}
                        <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">{{ form.store_name.errors }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Description</label>
                    {{ form.description }}
                    {% if form.description.errors %}
                        <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">{{ form.description.errors }}</div>
                    {% endif %}
                </div>
                
                <!-- Images -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                    <div class="form-group">
                        <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Store Icon (Avatar)</label>
                        {{ form.store_image }}
                         {% if form.store_image.errors %}
                            <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">{{ form.store_image.errors }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="form-group">
                        <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Hero Banner Image</label>
                        {{ form.hero_image }}
                        {% if form.hero_image.errors %}
                            <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">{{ form.hero_image.errors }}</div>
                        {% endif %}
                    </div>
                </div>

                <!-- Contact Info -->
                <div style="border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-top: 0.5rem;">
                    <h3 style="margin-top: 0; margin-bottom: 1rem; font-size: 1.125rem;">Contact Information</h3>
                    
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                        <div class="form-group">
                            <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Email</label>
                            {{ form.contact_email }}
                        </div>
                        <div class="form-group">
                            <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Phone</label>
                            {{ form.contact_phone }}
                        </div>
                    </div>
                    
                    <div style="margin-top: 1.5rem;">
                        <h4 style="margin-top: 0; margin-bottom: 0.5rem; color: #94a3b8; font-size: 1rem;">Store Address</h4>
                        <div class="form-group" style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Street</label>
                            {{ form.street }}
                        </div>
                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                            <div class="form-group">
                                <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">City</label>
                                {{ form.city }}
                            </div>
                            <div class="form-group">
                                <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">State</label>
                                {{ form.state }}
                            </div>
                            <div class="form-group">
                                <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Zip Code</label>
                                {{ form.zip_code }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Shipping Settings -->
                <div style="border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-top: 0.5rem;">
                    <h3 style="margin-top: 0; margin-bottom: 1rem; font-size: 1.125rem;">Shipping Settings</h3>
                    
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                        <div class="form-group">
                            <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Minimum Order Amount ($) for Free Shipping</label>
                            {{ form.minimum_order_amount }}
                            {% if form.minimum_order_amount.errors %}
                                <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">{{ form.minimum_order_amount.errors }}</div>
                            {% endif %}
                            <small style="display: block; margin-top: 0.25rem; color: #64748b; font-size: 0.75rem;">Set to 0 if shipping is never free.</small>
                        </div>
                        <div class="form-group">
                            <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Shipping Cost ($)</label>
                            {{ form.shipping_cost }}
                             {% if form.shipping_cost.errors %}
                                <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">{{ form.shipping_cost.errors }}</div>
                            {% endif %}
                            <small style="display: block; margin-top: 0.25rem; color: #64748b; font-size: 0.75rem;">Standard cost for orders below minimum.</small>
                        </div>
                    </div>
                </div>
                
                <!-- Financial Information -->
                <div style="border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-top: 0.5rem;">
                    <h3 style="margin-top: 0; margin-bottom: 1rem; font-size: 1.125rem;">Financial Information <span style="font-size: 0.75rem; color: #ef4444; font-weight: normal;">(Required to sell)</span></h3>
                    
                    <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid #3b82f6; color: #93c5fd; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; font-size: 0.875rem;">
                        <p style="margin: 0;"><strong>Secure Storage:</strong> Your Tax ID and Payout Details are encrypted before storage. We use industry-standard encryption to protect your sensitive data.</p>
                    </div>

                    <div style="display: grid; gap: 1.5rem;">
                        <div class="form-group">
                            <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Tax ID (SSN/EIN/ITIN)</label>
                            {{ form.tax_id }}
                            {% if form.tax_id.errors %}
                                <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">{{ form.tax_id.errors }}</div>
                            {% endif %}
                            <small style="display: block; margin-top: 0.25rem; color: #64748b; font-size: 0.75rem;">{{ form.tax_id.help_text }}</small>
                        </div>
                        <div class="form-group">
                            <label style="display: block; margin-bottom: 0.5rem; color: #94a3b8;">Payout Details</label>
                            {{ form.payout_details }}
                            {% if form.payout_details.errors %}
                                <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">{{ form.payout_details.errors }}</div>
                            {% endif %}
                            <small style="display: block; margin-top: 0.25rem; color: #64748b; font-size: 0.75rem;">{{ form.payout_details.help_text }}</small>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin-top: 2rem; display: flex; gap: 1rem;">
                <button type="submit" class="btn">Save Changes</button>
                <a href="{% url 'store:seller_dashboard' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color);">Cancel</a>
            </div>
        </form>
    </div>
</div>

<style>
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="number"],
    .form-group textarea {
        width: 100%;
        padding: 0.75rem;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        color: var(--text-color);
    }
    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
    }
</style>
{% endblock %}