{# templates/vendor/register.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Devenir vendeur - Marketplace{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <h1 class="text-3xl font-bold mb-8 text-center">Devenir vendeur</h1>
        
        <div class="bg-white rounded-lg shadow p-6">
            <form method="POST" action="{{ path('api_vendor_register') }}" id="vendor-register-form">
                <div class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium mb-1">Nom de la boutique *</label>
                        <input type="text" 
                               name="storeName" 
                               required
                               class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500">
                        <p class="text-xs text-gray-500 mt-1">Le nom qui apparaîtra sur votre boutique</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium mb-1">Description de la boutique</label>
                        <textarea name="description" 
                                  rows="4"
                                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500"></textarea>
                        <p class="text-xs text-gray-500 mt-1">Décrivez votre activité et vos produits</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium mb-1">Logo de la boutique</label>
                        <input type="file" 
                               name="logo" 
                               accept="image/*"
                               class="w-full border rounded-lg px-3 py-2">
                    </div>
                    
                    <div class="border-t pt-6">
                        <h3 class="font-semibold text-lg mb-4">Coordonnées bancaires</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">IBAN</label>
                                <input type="text" 
                                       name="bankDetails[iban]" 
                                       class="w-full border rounded-lg px-3 py-2">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">BIC/SWIFT</label>
                                <input type="text" 
                                       name="bankDetails[bic]" 
                                       class="w-full border rounded-lg px-3 py-2">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Titulaire du compte</label>
                                <input type="text" 
                                       name="bankDetails[holder]" 
                                       class="w-full border rounded-lg px-3 py-2">
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <div class="flex items-start">
                            <i class="fas fa-info-circle text-yellow-600 mt-1 mr-3"></i>
                            <div class="text-sm text-yellow-800">
                                <p class="font-semibold mb-1">Informations importantes :</p>
                                <ul class="list-disc list-inside space-y-1">
                                    <li>Votre demande sera examinée par notre équipe</li>
                                    <li>Le délai de validation est de 48h maximum</li>
                                    <li>Une commission de {{ default_commission|default(10) }}% sera appliquée sur vos ventes</li>
                                    <li>Vous pourrez retirer vos gains à partir de 50€</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-end space-x-3 pt-4">
                        <a href="{{ path('home') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
                            Annuler
                        </a>
                        <button type="submit" 
                                id="submit-btn"
                                class="bg-primary-600 text-white px-6 py-2 rounded-lg hover:bg-primary-700">
                            <i class="fas fa-paper-plane mr-2"></i>
                            Envoyer ma demande
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.getElementById('vendor-register-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const submitBtn = document.getElementById('submit-btn');
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Envoi en cours...';
    
    const formData = new FormData(this);
    
    try {
        const response = await fetch(this.action, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        });
        
        const data = await response.json();
        
        if (response.ok) {
            // Success
            showNotification('Votre demande a bien été envoyée !', 'success');
            setTimeout(() => {
                window.location.href = '{{ path("home") }}';
            }, 2000);
        } else {
            // Error
            showNotification(data.error || 'Une erreur est survenue', 'error');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    } catch (error) {
        showNotification('Erreur de connexion', 'error');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    }
});

function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `fixed top-20 right-4 z-50 px-4 py-2 rounded shadow-lg animate-slide-in-right ${
        type === 'success' ? 'bg-green-500' : 'bg-red-500'
    } text-white`;
    notification.textContent = message;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.opacity = '0';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}
</script>
{% endblock %}