{{-- resources/views/livewire/formulaire-adhesion.blade.php --}}
<div class="max-w-3xl mx-auto px-4 py-10">

    {{-- En-tête --}}
    <div class="text-center mb-8">
        <h1 class="text-3xl font-black text-gray-900 mb-2">Adhésion au CGA — CGA_MaFiscalite</h1>
        <p class="text-gray-500">Bénéficiez de l'abattement 50% sur votre IGS ou IS/IRPP. Inscription sécurisée en 6 étapes.</p>
    </div>

    @if($adhesionCompletee)
    {{-- ─── Confirmation finale ─────────────────────────────────── --}}
    <div class="bg-green-50 border border-green-200 rounded-2xl p-8 text-center">
        <div class="text-6xl mb-4">✅</div>
        <h2 class="text-2xl font-black text-green-800 mb-3">Dossier reçu !</h2>
        <p class="text-green-700 mb-6">
            Votre dossier d'adhésion <strong>#{{ $adherentId }}</strong> a bien été reçu.
            Notre équipe le traitera sous <strong>48h ouvrées</strong>.
            Un email et un SMS de confirmation vous ont été envoyés.
        </p>
        <div class="bg-white rounded-xl p-4 text-sm text-gray-600 mb-6">
            <p class="font-semibold text-gray-800 mb-2">Prochaines étapes :</p>
            <ol class="text-left space-y-1.5 list-decimal list-inside">
                <li>Vérification de votre dossier par notre équipe (NIU, RCCM, paiement)</li>
                <li>Validation et création de votre espace adhérent</li>
                <li>Réception de votre attestation CGA par email</li>
                <li>Accès à votre tableau de bord fiscal personnalisé</li>
            </ol>
        </div>
        <a href="{{ route('accueil') }}" class="bg-blue-700 text-white font-bold px-6 py-3 rounded-xl inline-block">
            Retour à l'accueil
        </a>
    </div>

    @else

    {{-- ─── Barre de progression ─────────────────────────────────── --}}
    <div class="mb-8">
        <div class="flex justify-between mb-2">
            @php
                $etapes = ['Entreprise', 'Régime', 'Dirigeant', 'Documents', 'Paiement', 'Confirmation'];
            @endphp
            @foreach($etapes as $i => $label)
            <div class="flex flex-col items-center flex-1 {{ $i < count($etapes) - 1 ? 'relative' : '' }}">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold mb-1
                    {{ $etape > $i+1 ? 'bg-green-500 text-white' : ($etape === $i+1 ? 'bg-blue-700 text-white' : 'bg-gray-200 text-gray-500') }}">
                    {{ $etape > $i+1 ? '✓' : $i+1 }}
                </div>
                <span class="text-xs {{ $etape === $i+1 ? 'text-blue-700 font-semibold' : 'text-gray-400' }} hidden sm:block">
                    {{ $label }}
                </span>
                @if($i < count($etapes) - 1)
                <div class="absolute top-4 left-1/2 w-full h-0.5 {{ $etape > $i+1 ? 'bg-green-400' : 'bg-gray-200' }} -z-10"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-8">

        {{-- ══════════ ÉTAPE 1 — Entreprise ══════════ --}}
        @if($etape === 1)
        <h2 class="text-xl font-bold text-gray-900 mb-6">
            <span class="text-blue-700">Étape 1 /6</span> — Informations de l'entreprise
        </h2>

        <div class="space-y-4">
            <div>
                <label class="form-label">Raison sociale *</label>
                <input type="text" wire:model="raisonSociale" class="form-input" placeholder="SARL EXEMPLE">
                @error('raisonSociale') <p class="form-error">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="form-label">NIU * <span class="text-xs font-normal text-gray-400">(M/P+9 chiffres+lettre)</span></label>
                    <input type="text" wire:model.live="niu" class="form-input" placeholder="M012345678A">
                    @error('niu') <p class="form-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="form-label">RCCM</label>
                    <input type="text" wire:model="rccm" class="form-input" placeholder="06039/RDA/B14/SACS">
                </div>
            </div>

            <div>
                <label class="form-label">CA Annuel HT (FCFA) *</label>
                <input type="number" wire:model.live="caAnnuelHt" class="form-input" placeholder="8000000" min="0">
                @error('caAnnuelHt') <p class="form-error">{{ $message }}</p> @enderror

                {{-- Détection automatique régime --}}
                @if($regimeDetecte)
                <div class="mt-2 rounded-xl p-3 flex items-start gap-3
                    {{ $regimeDetecte === 'IGS' ? 'bg-blue-50 border border-blue-200' : 'bg-orange-50 border border-orange-200' }}">
                    <span class="text-lg">{{ $regimeDetecte === 'IGS' ? '🔵' : '🟠' }}</span>
                    <div>
                        <p class="text-sm font-bold {{ $regimeDetecte === 'IGS' ? 'text-blue-800' : 'text-orange-800' }}">
                            Régime détecté automatiquement :
                            {{ $regimeDetecte === 'IGS' ? 'IGS (Impôt Général Synthétique)' : ($regimeDetecte === 'REEL_SIMPLIFIE' ? 'Réel Simplifié' : 'Réel Normal') }}
                        </p>
                        @if($regimeDetecte === 'IGS' && $classeIgsDetectee)
                        <p class="text-xs text-blue-700 mt-0.5">
                            Classe {{ $classeIgsDetectee }} —
                            IGS : <strong>{{ number_format($montantIgsEstime, 0, ',', ' ') }} FCFA</strong> /an
                            → Avec CGA : <strong class="text-green-700">{{ number_format($montantIgsEstime - $economiesCgaEstimees, 0, ',', ' ') }} FCFA</strong>
                            (Économie : {{ number_format($economiesCgaEstimees, 0, ',', ' ') }} FCFA)
                        </p>
                        @endif
                    </div>
                </div>
                @endif
            </div>

            <div>
                <label class="form-label">Secteur d'activité (NACAM)</label>
                <select wire:model="secteurNacam" class="form-input">
                    <option value="">Sélectionnez votre secteur</option>
                    <option value="commerce_general">Commerce général</option>
                    <option value="restauration">Restauration / Hôtellerie</option>
                    <option value="btph">BTP / Artisanat</option>
                    <option value="services">Services aux entreprises</option>
                    <option value="agriculture">Agriculture / Élevage</option>
                    <option value="transport">Transport / Logistique</option>
                    <option value="sante">Santé / Médecine</option>
                    <option value="juridique">Juridique / Conseil</option>
                    <option value="informatique">Informatique / Numérique</option>
                    <option value="autre">Autre</option>
                </select>
            </div>
        </div>

        {{-- ══════════ ÉTAPE 2 — Régime Fiscal ══════════ --}}
        @elseif($etape === 2)
        <h2 class="text-xl font-bold text-gray-900 mb-6">
            <span class="text-blue-700">Étape 2 /6</span> — Confirmation du régime fiscal
        </h2>

        <div class="space-y-5">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                @foreach(['IGS' => 'IGS', 'REEL_SIMPLIFIE' => 'Réel Simplifié', 'REEL_NORMAL' => 'Réel Normal'] as $val => $label)
                <button wire:click="$set('regimeFiscal', '{{ $val }}')"
                        class="p-4 rounded-xl border-2 text-left transition-all
                            {{ $regimeFiscal === $val ? 'border-blue-600 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}">
                    <div class="font-bold text-sm {{ $regimeFiscal === $val ? 'text-blue-800' : 'text-gray-700' }}">{{ $label }}</div>
                    <div class="text-xs text-gray-500 mt-1">
                        @if($val === 'IGS') CA < 50M FCFA
                        @elseif($val === 'REEL_SIMPLIFIE') CA 50M — 100M FCFA
                        @else CA > 100M FCFA
                        @endif
                    </div>
                </button>
                @endforeach
            </div>
            @error('regimeFiscal') <p class="form-error">{{ $message }}</p> @enderror

            @if($regimeFiscal === 'IGS')
            <div>
                <label class="form-label">Classe IGS *</label>
                <select wire:model="classeIgs" class="form-input">
                    <option value="">Sélectionnez votre classe</option>
                    @for($i = 1; $i <= 12; $i++)
                    <option value="{{ $i }}">Classe {{ $i }}</option>
                    @endfor
                </select>
                @error('classeIgs') <p class="form-error">{{ $message }}</p> @enderror

                @if($classeIgs)
                <div class="mt-3 bg-green-50 border border-green-200 rounded-xl p-3 text-sm">
                    <p class="font-semibold text-green-800">✅ Avantage CGA — Classe {{ $classeIgs }} :</p>
                    <p class="text-green-700 text-xs mt-1">
                        Abattement 50% sur votre IGS annuel (art. 119 CGI 2026).
                        <a href="{{ route('simulateurs.igs') }}" target="_blank" class="underline">Calculer précisément →</a>
                    </p>
                </div>
                @endif
            </div>
            @endif

            @if($regimeFiscal && $regimeFiscal !== 'IGS')
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 text-sm text-blue-800">
                <p class="font-semibold mb-1">✅ Avantage CGA — Régime {{ $regimeFiscal === 'REEL_SIMPLIFIE' ? 'Réel Simplifié' : 'Réel Normal' }} :</p>
                <ul class="text-xs space-y-1 text-blue-700">
                    <li>• Abattement 50% sur IS et IRPP (art. 118-119 CGI 2026)</li>
                    <li>• Exonération totale de patente professionnelle</li>
                    <li>• Dispense de contrôle fiscal</li>
                    <li>• Réduction des précomptes fournisseurs</li>
                </ul>
            </div>
            @endif
        </div>

        {{-- ══════════ ÉTAPE 3 — Dirigeant ══════════ --}}
        @elseif($etape === 3)
        <h2 class="text-xl font-bold text-gray-900 mb-6">
            <span class="text-blue-700">Étape 3 /6</span> — Informations du dirigeant
        </h2>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="form-label">Nom *</label>
                <input type="text" wire:model="nomDirigeant" class="form-input" placeholder="MBARGA">
                @error('nomDirigeant') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="form-label">Prénom *</label>
                <input type="text" wire:model="prenomDirigeant" class="form-input" placeholder="Jean-Pierre">
                @error('prenomDirigeant') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="form-label">N° CNI</label>
                <input type="text" wire:model="cniDirigeant" class="form-input" placeholder="123456789">
            </div>
            <div>
                <label class="form-label">Téléphone * <span class="text-xs font-normal text-gray-400">(format camerounais)</span></label>
                <div class="flex">
                    <span class="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-gray-200 bg-gray-50 text-sm text-gray-500">+237</span>
                    <input type="tel" wire:model="telephone" class="form-input rounded-l-none" placeholder="691234567">
                </div>
                @error('telephone') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div class="sm:col-span-2">
                <label class="form-label">Email *</label>
                <input type="email" wire:model="email" class="form-input" placeholder="dirigeant@entreprise.cm">
                @error('email') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="form-label">Ville *</label>
                <select wire:model="ville" class="form-input">
                    <option value="">Choisir</option>
                    @foreach(['Bertoua','Yaoundé','Douala','Bafoussam','Garoua','Maroua','Ngaoundéré','Ebolowa','Kribi','Limbe'] as $v)
                    <option>{{ $v }}</option>
                    @endforeach
                </select>
                @error('ville') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="form-label">Agence CGA_MaFiscalite de rattachement</label>
                <select wire:model="agenceCga" class="form-input">
                    <option value="">Sélectionner</option>
                    <option>Bertoua — Siège</option>
                    <option>Yaoundé</option>
                    <option>Douala</option>
                </select>
            </div>
        </div>

        {{-- ══════════ ÉTAPE 4 — Documents ══════════ --}}
        @elseif($etape === 4)
        <h2 class="text-xl font-bold text-gray-900 mb-6">
            <span class="text-blue-700">Étape 4 /6</span> — Upload des documents
        </h2>

        <div class="space-y-5">
            <div class="upload-zone">
                <label class="form-label">Registre Commerce (RCCM) * <span class="text-xs font-normal text-gray-400">PDF, JPG, PNG — max 5 Mo</span></label>
                <input type="file" wire:model="docRccm" accept=".pdf,.jpg,.jpeg,.png" class="form-file">
                @error('docRccm') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="form-label">Carte Nationale d'Identité (CNI) *</label>
                <input type="file" wire:model="docCni" accept=".pdf,.jpg,.jpeg,.png" class="form-file">
                @error('docCni') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="form-label">Attestation DGI (Conformité Fiscale)</label>
                <input type="file" wire:model="docAttestationDgi" accept=".pdf,.jpg,.jpeg,.png" class="form-file">
            </div>
            @if($dsfObligatoire)
            <div class="border-2 border-orange-300 rounded-xl p-4">
                <label class="form-label text-orange-700">⚠️ DSF (Déclaration Statistique & Fiscale) * <span class="text-xs font-normal">Obligatoire classes 8-12 (CA ≥ 10M FCFA)</span></label>
                <input type="file" wire:model="docDsf" accept=".pdf" class="form-file">
                @error('docDsf') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            @endif
        </div>

        {{-- ══════════ ÉTAPE 5 — Paiement ══════════ --}}
        @elseif($etape === 5)
        <h2 class="text-xl font-bold text-gray-900 mb-6">
            <span class="text-blue-700">Étape 5 /6</span> — Paiement de la cotisation
        </h2>

        <div class="space-y-5">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                @foreach(['orange_money' => ['🟠', 'Orange Money', '#F97316'], 'mtn_momo' => ['🟡', 'MTN MoMo', '#EAB308'], 'virement' => ['🏦', 'Virement bancaire', '#3B82F6']] as $val => [$icon, $label, $color])
                <button wire:click="$set('modePaiement', '{{ $val }}')"
                        class="p-4 rounded-xl border-2 text-center transition-all
                            {{ $modePaiement === $val ? 'border-blue-600 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}">
                    <div class="text-2xl mb-1">{{ $icon }}</div>
                    <div class="font-bold text-sm text-gray-700">{{ $label }}</div>
                </button>
                @endforeach
            </div>
            @error('modePaiement') <p class="form-error">{{ $message }}</p> @enderror

            @if($modePaiement)
            <div class="bg-blue-50 rounded-xl p-4 text-sm">
                @if($modePaiement === 'orange_money')
                <p class="font-semibold text-gray-800">Instructions Orange Money :</p>
                <p class="text-gray-600 mt-1">Envoyez votre cotisation au <strong>+237 6XX XXX XXX</strong> (CGA_MaFiscalite Bertoua), puis saisissez la référence reçue.</p>
                @elseif($modePaiement === 'mtn_momo')
                <p class="font-semibold text-gray-800">Instructions MTN MoMo :</p>
                <p class="text-gray-600 mt-1">Envoyez votre cotisation au <strong>+237 6XX XXX XXX</strong> (CGA_MaFiscalite), puis saisissez la référence de transaction.</p>
                @else
                <p class="font-semibold text-gray-800">Virement bancaire :</p>
                <p class="text-gray-600 mt-1">BICEC — IBAN CM21 XXXX XXXX XXXX — Réf : CGA_MaFiscalite-ADHESION</p>
                @endif
            </div>

            <div>
                <label class="form-label">Référence de transaction *</label>
                <input type="text" wire:model="referencePaiement" class="form-input"
                       placeholder="Ex: MP220427ABCDEF ou numéro de reçu bancaire">
                @error('referencePaiement') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            @endif
        </div>

        @endif

        {{-- ─── Navigation étapes ──────────────────────────── --}}
        <div class="flex justify-between mt-8 pt-6 border-t border-gray-100">
            @if($etape > 1)
            <button wire:click="etapePrecedente"
                    class="px-5 py-2.5 border border-gray-200 rounded-xl text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors">
                ← Précédent
            </button>
            @else
            <div></div>
            @endif

            @if($etape < 5)
            <button wire:click="etapeSuivante"
                    class="px-6 py-2.5 bg-blue-700 hover:bg-blue-800 text-white rounded-xl text-sm font-semibold transition-colors">
                Suivant →
            </button>
            @elseif($etape === 5)
            <button wire:click="soumettre"
                    class="px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white rounded-xl text-sm font-semibold transition-colors">
                ✅ Soumettre mon dossier
            </button>
            @endif
        </div>
    </div>
    @endif
</div>

<style>
.form-label { @apply block text-xs font-bold text-gray-600 uppercase tracking-wide mb-1.5; }
.form-input { @apply w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent; }
.form-error { @apply text-red-500 text-xs mt-1; }
.form-file  { @apply w-full text-sm text-gray-500 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 mt-1; }
</style>