@extends('layouts.app')

@section('title', 'Devenir Revendeur | OraFresh Beauty')

@section('content')
    <div class="bg-gradient-to-b from-rose-50/30 to-white min-h-screen">
        <div class="max-w-4xl mx-auto px-6 py-12 pt-4">
            <div class="text-center mb-16">
                <span class="text-rose-600 uppercase tracking-[0.4em] text-[10px] mb-3 block">Partenariat</span>
                <h1 class="font-serif text-4xl md:text-5xl italic text-gray-900 mb-4">Devenir Revendeur</h1>
                <p class="text-gray-600 text-sm max-w-2xl mx-auto">Rejoignez notre réseau de partenaires et développez votre activité avec nos produits de beauté premium</p>
            </div>

            <div class="bg-white rounded-3xl p-8 md:p-12 shadow-sm border border-rose-100">
                @if(session('success'))
                    <div class="bg-green-50 border border-green-200 text-green-800 px-6 py-4 rounded-2xl mb-8 flex items-center gap-3">
                        <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
                        <span class="text-sm">{{ session('success') }}</span>
                    </div>
                @endif

                <form action="{{ route('reseller.store') }}" method="POST" class="space-y-6">
                    @csrf
                    
                    <div class="border-b border-rose-100 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations Entreprise</h3>
                        
                        <div class="space-y-6">
                            <div>
                                <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Nom de l'entreprise</label>
                                <div class="relative">
                                    <i data-lucide="building-2" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                    <input type="text" name="company_name" required
                                        class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                        placeholder="Nom de votre société">
                                </div>
                                @error('company_name')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                            </div>

                            <div>
                                <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Type d'activité</label>
                                <div class="relative">
                                    <i data-lucide="briefcase" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                    <select name="business_type" required
                                        class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-10 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none appearance-none transition-all">
                                        <option value="">Sélectionnez...</option>
                                        <option value="boutique">Boutique de beauté</option>
                                        <option value="salon">Salon de coiffure/Spa</option>
                                        <option value="pharmacie">Pharmacie/Parapharmacie</option>
                                        <option value="grossiste">Grossiste</option>
                                        <option value="ecommerce">E-commerce</option>
                                        <option value="autre">Autre</option>
                                    </select>
                                    <i data-lucide="chevron-down" class="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400 pointer-events-none"></i>
                                </div>
                                @error('business_type')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                            </div>
                        </div>
                    </div>

                    <div class="border-b border-rose-100 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Contact Principal</h3>
                        
                        <div class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Prénom</label>
                                    <div class="relative">
                                        <i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                        <input type="text" name="first_name" required
                                            class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all">
                                    </div>
                                    @error('first_name')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                                </div>
                                <div>
                                    <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Nom</label>
                                    <div class="relative">
                                        <i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                        <input type="text" name="last_name" required
                                            class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all">
                                    </div>
                                    @error('last_name')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Email</label>
                                    <div class="relative">
                                        <i data-lucide="mail" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                        <input type="email" name="email" required
                                            class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all">
                                    </div>
                                    @error('email')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                                </div>
                                <div>
                                    <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Téléphone</label>
                                    <div class="relative">
                                        <i data-lucide="phone" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                        <input type="text" name="phone" required
                                            class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all">
                                    </div>
                                    @error('phone')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                                </div>
                            </div>

                            <div>
                                <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Ville</label>
                                <div class="relative">
                                    <i data-lucide="map-pin" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                    <input type="text" name="city" required
                                        class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all">
                                </div>
                                @error('city')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                            </div>

                            <div>
                                <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Adresse complète</label>
                                <div class="relative">
                                    <i data-lucide="home" class="absolute left-4 top-6 w-4 h-4 text-rose-400"></i>
                                    <textarea name="address" rows="3" required
                                        class="w-full bg-rose-50/30 border border-rose-100 rounded-2xl py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all resize-none"></textarea>
                                </div>
                                @error('address')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Message (optionnel)</label>
                        <div class="relative">
                            <i data-lucide="message-square" class="absolute left-4 top-6 w-4 h-4 text-rose-400"></i>
                            <textarea name="message" rows="4"
                                class="w-full bg-rose-50/30 border border-rose-100 rounded-2xl py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all resize-none"
                                placeholder="Parlez-nous de votre projet..."></textarea>
                        </div>
                    </div>

                    <button type="submit"
                        class="w-full bg-gradient-to-r from-rose-500 to-pink-600 text-white py-5 text-[11px] uppercase tracking-[0.3em] hover:shadow-xl hover:scale-105 transition-all duration-300 rounded-full flex items-center justify-center gap-2">
                        <i data-lucide="send" class="w-4 h-4"></i>
                        Envoyer ma demande
                    </button>
                </form>
            </div>

            <!-- Avantages -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
                <div class="text-center p-6">
                    <div class="bg-rose-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="trending-up" class="w-8 h-8 text-rose-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Marges Attractives</h3>
                    <p class="text-sm text-gray-600">Profitez de prix grossistes compétitifs</p>
                </div>
                <div class="text-center p-6">
                    <div class="bg-rose-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="package" class="w-8 h-8 text-rose-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Support Marketing</h3>
                    <p class="text-sm text-gray-600">Supports visuels et PLV fournis</p>
                </div>
                <div class="text-center p-6">
                    <div class="bg-rose-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="truck" class="w-8 h-8 text-rose-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Livraison Rapide</h3>
                    <p class="text-sm text-gray-600">Stock disponible et livraison express</p>
                </div>
            </div>
        </div>
    </div>
@endsection