@extends('layouts.app')

@section('title', 'Simulateur de taxe AGEFIPH — Calculez votre contribution OETH')
@section('description', 'Calculez gratuitement votre contribution AGEFIPH en 30 secondes : effectif, travailleurs handicapés, achats secteur protégé. Estimez vos économies potentielles.')

@section('content')

{{-- Header --}}
<section style="background:#0D2B5E;padding:clamp(3rem,6vw,4.5rem) 0">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div style="display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem">
            <span style="width:26px;height:1.5px;background:#F5820A"></span>
            <span style="font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7FA7E0">Gratuit · Résultat immédiat</span>
        </div>
        <h1 style="font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:0 0 1rem;letter-spacing:-.022em">Simulateur de contribution AGEFIPH</h1>
        <p style="font-size:1.02rem;color:#9FB8DC;line-height:1.7;max-width:580px;margin:0 auto">Estimez votre contribution OETH et votre potentiel d'optimisation en deux minutes. Sans engagement, 100% confidentiel.</p>
    </div>
</section>

{{-- Simulateur --}}
<section style="padding:3rem 0 5rem;background:#F8FBFF">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div style="display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start" class="lg:grid-cols-sim">

            {{-- ── Colonne saisie ── --}}
            <div style="background:white;border-radius:20px;padding:2rem;border:1px solid #E0E8F5;box-shadow:0 4px 24px rgba(13,43,94,.06)">
                <h2 style="font-size:1.15rem;font-weight:800;color:#091E42;margin:0 0 .35rem">Votre situation</h2>
                <p style="font-size:.8rem;color:#9BA8C0;margin:0 0 1.75rem">Renseignez vos données — le calcul se met à jour automatiquement.</p>

                {{-- Effectif --}}
                <div style="margin-bottom:1.75rem">
                    <label style="display:flex;align-items:center;justify-content:space-between;font-size:.82rem;font-weight:700;color:#374151;margin-bottom:.6rem">
                        <span>Effectif total de l'entreprise</span>
                        <span id="effectif-val" style="font-size:.95rem;font-weight:900;color:#1A4B9C">100</span>
                    </label>
                    <input type="range" id="effectif" min="0" max="2000" step="5" value="100"
                           style="width:100%;accent-color:#1A4B9C;cursor:pointer">
                    <div style="display:flex;justify-content:space-between;font-size:.68rem;color:#9BA8C0;margin-top:.25rem">
                        <span>0</span><span>1000</span><span>2000+</span>
                    </div>
                    <input type="number" id="effectif-num" min="0" value="100"
                           style="width:100%;margin-top:.6rem;padding:.6rem .8rem;border:1.5px solid #D1D9E6;border-radius:9px;font-size:.85rem;outline:none;box-sizing:border-box"
                           onfocus="this.style.borderColor='#1A4B9C'" onblur="this.style.borderColor='#D1D9E6'">
                </div>

                {{-- TH actuels --}}
                <div style="margin-bottom:1.75rem">
                    <label style="display:flex;align-items:center;justify-content:space-between;font-size:.82rem;font-weight:700;color:#374151;margin-bottom:.6rem">
                        <span>Travailleurs handicapés (TH) employés</span>
                        <span id="th-val" style="font-size:.95rem;font-weight:900;color:#00A86B">1</span>
                    </label>
                    <input type="range" id="th" min="0" max="120" step="1" value="1"
                           style="width:100%;accent-color:#00A86B;cursor:pointer">
                    <input type="number" id="th-num" min="0" value="1"
                           style="width:100%;margin-top:.6rem;padding:.6rem .8rem;border:1.5px solid #D1D9E6;border-radius:9px;font-size:.85rem;outline:none;box-sizing:border-box"
                           onfocus="this.style.borderColor='#00A86B'" onblur="this.style.borderColor='#D1D9E6'">
                </div>

                {{-- Achats EA/ESAT --}}
                <div style="margin-bottom:.5rem">
                    <label style="display:flex;align-items:center;justify-content:space-between;font-size:.82rem;font-weight:700;color:#374151;margin-bottom:.6rem">
                        <span>Achats au secteur protégé (EA/ESAT) — N-1</span>
                        <span id="achats-val" style="font-size:.95rem;font-weight:900;color:#F5820A">0 €</span>
                    </label>
                    <input type="number" id="achats" min="0" step="500" value="0"
                           style="width:100%;padding:.6rem .8rem;border:1.5px solid #D1D9E6;border-radius:9px;font-size:.85rem;outline:none;box-sizing:border-box"
                           onfocus="this.style.borderColor='#F5820A'" onblur="this.style.borderColor='#D1D9E6'">
                    <p style="font-size:.7rem;color:#9BA8C0;margin:.5rem 0 0">Montant HT des prestations sous-traitées à des ESAT ou Entreprises Adaptées.</p>
                </div>
            </div>

            {{-- ── Colonne résultats ── --}}
            <div>
                {{-- Bloc non assujetti --}}
                <div id="non-assujetti" style="display:none;background:white;border-radius:20px;padding:2.5rem 2rem;border:1px solid #00A86B40;text-align:center;margin-bottom:1.5rem">
                    <div style="font-size:2.5rem;margin-bottom:.75rem">✅</div>
                    <h3 style="font-size:1.2rem;font-weight:900;color:#052B18;margin:0 0 .5rem">Vous n'êtes pas assujetti</h3>
                    <p style="font-size:.85rem;color:#6B7280;margin:0">L'obligation d'emploi (OETH) concerne les entreprises de <strong>20 salariés et plus</strong>. En dessous, aucune contribution AGEFIPH n'est due.</p>
                </div>

                {{-- Résultats --}}
                <div id="resultats">
                    {{-- Contribution principale --}}
                    <div style="background:linear-gradient(135deg,#0D2B5E,#1A4B9C);border-radius:20px;padding:2rem;color:white;margin-bottom:1.25rem;position:relative;overflow:hidden">
                        <div class="nacre-overlay" style="position:absolute;inset:0;background:radial-gradient(ellipse at 80% 30%,rgba(245,130,10,.2),transparent 60%)"></div>
                        <div style="position:relative;z-index:1">
                            <div style="font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:.5rem">Votre contribution AGEFIPH estimée</div>
                            <div id="contribution-nette" style="font-size:2.6rem;font-weight:900;line-height:1;color:white">0 €</div>
                            <div style="font-size:.78rem;color:#8CAED8;margin-top:.5rem">par an, après optimisation des déductions</div>
                        </div>
                    </div>

                    {{-- Détail --}}
                    <div style="background:white;border-radius:16px;padding:1.5rem;border:1px solid #E0E8F5;margin-bottom:1.25rem">
                        <div style="font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#9BA8C0;margin-bottom:1rem">Détail du calcul</div>
                        @php
                        $rows = [
                            ['taux-emploi',    'Taux d\'emploi TH actuel',         '#1A4B9C'],
                            ['obligation',     'Obligation légale (6%)',           '#374151'],
                            ['unites',         'Unités bénéficiaires manquantes',  '#374151'],
                            ['tarif',          'Tarif unitaire',                   '#374151'],
                            ['brute',          'Contribution brute',               '#374151'],
                            ['deduction',      'Déduction sous-traitance',         '#00A86B'],
                        ];
                        @endphp
                        @foreach($rows as [$id, $label, $color])
                        <div style="display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid #F3F4F6">
                            <span style="font-size:.82rem;color:#6B7280">{{ $label }}</span>
                            <span id="r-{{ $id }}" style="font-size:.88rem;font-weight:800;color:{{ $color }}">—</span>
                        </div>
                        @endforeach
                    </div>

                    {{-- Économie potentielle --}}
                    <div id="economie-box" style="background:#F0FFF8;border:1px solid #00A86B30;border-radius:16px;padding:1.5rem;display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem">
                        <div style="width:44px;height:44px;border-radius:12px;background:#00A86B;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                            <svg width="22" height="22" fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
                        </div>
                        <div>
                            <div style="font-size:.72rem;font-weight:700;color:#00A86B;text-transform:uppercase;letter-spacing:.05em">Économie potentielle / an</div>
                            <div id="economie" style="font-size:1.4rem;font-weight:900;color:#052B18">0 €</div>
                        </div>
                    </div>

                    {{-- Projection 5 ans --}}
                    <div style="background:#FFF4E5;border:1px solid #F5820A30;border-radius:16px;padding:1.5rem">
                        <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:1rem">
                            <svg width="16" height="16" fill="none" stroke="#F5820A" stroke-width="2.5" viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                            <span style="font-size:.82rem;font-weight:800;color:#091E42">Si vous n'agissez pas — majoration progressive</span>
                        </div>
                        <div id="projection" style="display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem"></div>
                        <div style="margin-top:1rem;font-size:.78rem;color:#6B7280;text-align:center">
                            Cumul sur 5 ans : <strong id="cumul-5ans" style="color:#E06A00">0 €</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── CTA lead ── --}}
        <div style="margin-top:2.5rem;background:linear-gradient(135deg,#0D2B5E,#1A4B9C);border-radius:20px;padding:2.5rem 2rem;position:relative;overflow:hidden">
            <div class="nacre-overlay" style="position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(0,168,107,.18),transparent 60%)"></div>
            <div style="position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center">
                <h3 style="font-size:1.4rem;font-weight:900;color:white;margin:0 0 .5rem">Recevez votre analyse détaillée et personnalisée</h3>
                <p style="font-size:.88rem;color:#8CAED8;margin:0 0 1.75rem">Un expert HAndipartner étudie votre situation et identifie tous vos leviers d'optimisation. Gratuit et sans engagement.</p>

                @if(session('success'))
                <div style="background:#F0FFF8;border:1px solid #00A86B;border-radius:12px;padding:1.25rem;display:flex;align-items:center;gap:.75rem;justify-content:center;max-width:520px;margin:0 auto">
                    <svg width="18" height="18" fill="none" stroke="#00A86B" stroke-width="2.5" viewBox="0 0 24 24" style="flex-shrink:0"><polyline points="20 6 9 17 4 12"/></svg>
                    <span style="font-size:.88rem;color:#052B18;font-weight:600">{{ session('success') }}</span>
                </div>
                @else
                <form method="POST" action="{{ route('simulateur.lead') }}" style="background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.75rem;backdrop-filter:blur(8px)">
                    @csrf
                    {{-- Champs cachés alimentés par le simulateur --}}
                    <input type="hidden" name="effectif"     id="lead-effectif" value="100">
                    <input type="hidden" name="th"           id="lead-th" value="1">
                    <input type="hidden" name="achats"       id="lead-achats" value="0">
                    <input type="hidden" name="contribution" id="lead-contribution" value="">
                    <input type="hidden" name="economie"     id="lead-economie" value="">

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:.85rem">
                        <input type="text" name="prenom" placeholder="Prénom *" required value="{{ old('prenom') }}" style="padding:.7rem 1rem;border:1.5px solid rgba(255,255,255,.2);border-radius:9px;font-size:.85rem;background:rgba(255,255,255,.92);outline:none;box-sizing:border-box">
                        <input type="text" name="nom" placeholder="Nom *" required value="{{ old('nom') }}" style="padding:.7rem 1rem;border:1.5px solid rgba(255,255,255,.2);border-radius:9px;font-size:.85rem;background:rgba(255,255,255,.92);outline:none;box-sizing:border-box">
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:.85rem">
                        <input type="email" name="email" placeholder="Email professionnel *" required value="{{ old('email') }}" style="padding:.7rem 1rem;border:1.5px solid rgba(255,255,255,.2);border-radius:9px;font-size:.85rem;background:rgba(255,255,255,.92);outline:none;box-sizing:border-box">
                        <input type="tel" name="phone" placeholder="Téléphone" value="{{ old('phone') }}" style="padding:.7rem 1rem;border:1.5px solid rgba(255,255,255,.2);border-radius:9px;font-size:.85rem;background:rgba(255,255,255,.92);outline:none;box-sizing:border-box">
                    </div>
                    <input type="text" name="societe" placeholder="Société" value="{{ old('societe') }}" style="width:100%;padding:.7rem 1rem;border:1.5px solid rgba(255,255,255,.2);border-radius:9px;font-size:.85rem;background:rgba(255,255,255,.92);outline:none;box-sizing:border-box;margin-bottom:1.25rem">
                    <button type="submit" class="btn-shine" style="width:100%;padding:14px;border-radius:10px;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:white;border:none;cursor:pointer;background:linear-gradient(135deg,#F5820A,#E06A00);box-shadow:0 4px 20px rgba(245,130,10,.4)">
                        Recevoir mon analyse gratuite
                    </button>
                    @if($errors->any())
                    <p style="font-size:.72rem;color:#FFC070;margin:.75rem 0 0">Merci de remplir les champs obligatoires (*).</p>
                    @endif
                </form>
                @endif
            </div>
        </div>

        <p style="text-align:center;font-size:.72rem;color:#9BA8C0;margin-top:1.5rem;max-width:680px;margin-left:auto;margin-right:auto">
            Estimation indicative basée sur la réglementation OETH en vigueur (SMIC horaire 11,88 €). Le calcul réel peut varier selon votre situation (ECAP, accords agréés, dépenses déductibles). Contactez nos experts pour une analyse précise.
        </p>
    </div>
</section>

@push('styles')
@endpush

<style>
@media (min-width: 1024px) {
    .lg\:grid-cols-sim { grid-template-columns: 420px 1fr !important; }
}
input[type=range] { -webkit-appearance: none; height: 6px; border-radius: 3px; background: #E0E8F5; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: currentColor; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
</style>

<script>
(function() {
    const SMIC = 11.88;
    const fmt  = n => new Intl.NumberFormat('fr-FR', { style:'currency', currency:'EUR', minimumFractionDigits:0, maximumFractionDigits:0 }).format(n);

    const el = id => document.getElementById(id);
    const effectif = el('effectif'), effectifNum = el('effectif-num');
    const th = el('th'), thNum = el('th-num');
    const achats = el('achats');

    function calc(e, t, n) {
        if (e < 20) return { assujetti:false };
        const obligation = Math.floor(e * 0.06);
        const unites = Math.max(0, obligation - t);
        let coef = 400;
        if (e >= 750) coef = 600; else if (e >= 200) coef = 500;
        const tarif = Math.round(coef * SMIC);
        const brute = unites * tarif;
        const plafond = (t / e < 0.03) ? 0.5 : 0.75;
        const deductMax = brute * plafond;
        const valorise = n * 0.75;
        const deduction = Math.min(valorise, deductMax);
        const nette = Math.max(0, brute - deduction);
        return {
            assujetti: true,
            tauxEmploi: (t / e * 100),
            obligation, unites, tarif, brute, deduction, nette,
            economie: brute - nette,
        };
    }

    function render() {
        const e = parseInt(effectifNum.value) || 0;
        const t = parseInt(thNum.value) || 0;
        const n = parseFloat(achats.value) || 0;

        el('effectif-val').textContent = e;
        el('th-val').textContent = t;
        el('achats-val').textContent = fmt(n);

        // Synchroniser TH max sur effectif
        th.max = Math.max(120, e);

        const r = calc(e, t, n);

        const resultats = el('resultats'), nonAssuj = el('non-assujetti');

        if (!r.assujetti) {
            resultats.style.display = 'none';
            nonAssuj.style.display = 'block';
            return;
        }
        resultats.style.display = 'block';
        nonAssuj.style.display = 'none';

        el('contribution-nette').textContent = fmt(r.nette);
        el('r-taux-emploi').textContent = r.tauxEmploi.toFixed(2) + ' %';
        el('r-obligation').textContent = r.obligation + ' unités';
        el('r-unites').textContent = r.unites + ' unités';
        el('r-tarif').textContent = fmt(r.tarif) + ' / unité';
        el('r-brute').textContent = fmt(r.brute);
        el('r-deduction').textContent = '− ' + fmt(r.deduction);
        el('economie').textContent = fmt(r.economie);

        // Coloration taux emploi (vert si ≥ 6%)
        el('r-taux-emploi').style.color = r.tauxEmploi >= 6 ? '#00A86B' : (r.tauxEmploi >= 3 ? '#F5820A' : '#C8102E');

        // Économie box : masquer si 0
        el('economie-box').style.opacity = r.economie > 0 ? '1' : '.5';

        // Projection 5 ans (majoration 0/25/50/75/100%)
        const majs = [0, 25, 50, 75, 100];
        let cumul = 0;
        const proj = el('projection');
        proj.innerHTML = '';
        majs.forEach((maj, i) => {
            const montant = r.nette * (1 + maj/100);
            cumul += montant;
            const intensity = 0.35 + (i * 0.16);
            proj.insertAdjacentHTML('beforeend', `
                <div style="text-align:center;padding:.6rem .2rem;border-radius:8px;background:rgba(245,130,10,${intensity*0.18})">
                    <div style="font-size:.6rem;color:#9BA8C0;font-weight:600">An ${i+1}</div>
                    <div style="font-size:.72rem;font-weight:800;color:#E06A00;margin-top:2px">${fmt(montant)}</div>
                    ${maj > 0 ? `<div style="font-size:.55rem;color:#F5820A">+${maj}%</div>` : '<div style="font-size:.55rem;color:#9BA8C0">base</div>'}
                </div>`);
        });
        el('cumul-5ans').textContent = fmt(cumul);

        // Alimenter les champs cachés du formulaire lead
        if (el('lead-effectif')) {
            el('lead-effectif').value = e;
            el('lead-th').value = t;
            el('lead-achats').value = n;
            el('lead-contribution').value = fmt(r.nette);
            el('lead-economie').value = fmt(r.economie);
        }
    }

    // Synchronisation sliders ↔ number inputs
    function sync(slider, num) {
        slider.addEventListener('input', () => { num.value = slider.value; render(); });
        num.addEventListener('input', () => { slider.value = num.value; render(); });
    }
    sync(effectif, effectifNum);
    sync(th, thNum);
    achats.addEventListener('input', render);

    render();
})();
</script>

@endsection