@extends('layouts.site')

@section('titre', $produit->libelle().' - Souscription en ligne')

@section('contenu')
    <x-page-header :titre="$produit->libelle()" :image="$image ?? 'contrat.jpg'" :parent="['Nos solutions', route('nos-solutions')]" />

    <section class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mb-5 mb-lg-0">
                    <div class="sidebar-widget quote-sidebar-widget p-4 p-md-5 mb-0">
                        <div class="mb-4">
                            <span class="section-label no-line">Souscription en ligne</span>
                            <h2 class="widget-title">{{ $produit->libelle() }}</h2>
                            <p class="mb-0">@yield('intro')</p>
                        </div>
                        <x-alertes />
                        <form id="form-souscription" class="row g-4" action="{{ route('souscription.enregistrer', $produit->slug()) }}" method="POST" novalidate>
                            @csrf
                            <div class="col-12"><h3 class="h5-style mb-0 text-primary">01. Vos coordonnées</h3></div>
                            <x-champ nom="societe" libelle="Nom de la société (si professionnel)" />
                            <x-champ nom="societe_siret" libelle="Numéro SIRET (si professionnel)" />
                            <x-champ nom="identite_nom" libelle="Nom" requis />
                            <x-champ nom="identite_prenom" libelle="Prénom" />
                            <x-champ nom="identite_adresse" libelle="Adresse" requis col="col-12" />
                            <x-champ nom="identite_cp" libelle="Code postal" requis />
                            <x-champ nom="identite_ville" libelle="Ville" requis />
                            <x-champ nom="identite_telephone" libelle="Téléphone" type="tel" requis />
                            <x-champ nom="identite_telportable" libelle="Téléphone portable" type="tel" requis aide="Utilisé pour la signature électronique (code reçu par SMS)." />
                            <x-champ nom="identite_email" libelle="Adresse mail" type="email" requis />
                            @yield('coordonnees')

                            <div class="col-12 mt-5"><h3 class="h5-style mb-0 text-primary">02. Informations nécessaires à la souscription</h3></div>
                            @yield('champs')

                            <div class="col-12 mt-5"><h3 class="h5-style mb-0 text-primary">03. Votre cotisation</h3></div>
                            <div class="col-md-6">
                                <label class="form-label">Date de la demande et du devis</label>
                                <input type="text" class="form-control" value="{{ now()->format('d/m/Y') }}" readonly>
                            </div>
                            <x-champ nom="date_deffet" libelle="Date d'effet souhaitée" type="date" requis :min="now()->toDateString()" data-tarif />
                            <div class="col-12">
                                <div class="agc-tarif" id="tarif" aria-live="polite">
                                    <span class="agc-tarif-libelle">Montant de la cotisation à payer</span>
                                    <span class="agc-tarif-montant" id="tarif-montant">—</span>
                                    <span class="agc-tarif-detail" id="tarif-detail">Choisissez une date d'effet pour calculer votre cotisation.</span>
                                </div>
                            </div>

                            <div class="col-12"><x-recaptcha /></div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary" data-hover="Recevoir mon projet"><span>Demande de projet et documents de souscription</span></button>
                                <p class="small text-muted mt-3 mb-0">Une fois votre demande validée, vous recevrez votre projet par email et pourrez régler votre cotisation sur la page suivante.</p>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-4 ps-lg-5">
                    <div class="sidebar-widget">
                        <h2 class="widget-title">Comment ça marche ?</h2>
                        <ul class="check-list dark-text">
                            <li><i class="fa-solid fa-check"></i><span>Simulation gratuite et immédiate</span></li>
                            <li><i class="fa-solid fa-check"></i><span>Projet complet reçu par email</span></li>
                            <li><i class="fa-solid fa-check"></i><span>Signature électronique avec Yousign</span></li>
                            <li><i class="fa-solid fa-check"></i><span>Paiement sécurisé Société Générale</span></li>
                        </ul>
                    </div>
                    @hasSection('documents')
                        <div class="sidebar-widget">
                            <h2 class="widget-title">Documents</h2>
                            <div class="brochure-box">@yield('documents')</div>
                        </div>
                    @endif
                    @include('partials.sidebar-aide')
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    (function () {
        const form = document.getElementById('form-souscription');
        const montant = document.getElementById('tarif-montant');
        const detail = document.getElementById('tarif-detail');
        const declencheurs = form.querySelectorAll('[data-tarif]');

        function calculer() {
            const date = form.querySelector('[name="date_deffet"]').value;
            if (!date) return;
            const donnees = new FormData(form);
            donnees.delete('g-recaptcha-response');
            montant.textContent = '…';
            fetch(@json(route('souscription.tarif', $produit->slug())), {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': @json(csrf_token()), 'Accept': 'application/json' },
                body: donnees,
            })
                .then(r => r.json())
                .then(r => {
                    if (r.erreur == 0) {
                        montant.textContent = r.tarif.replace('.', ',') + ' €';
                        detail.textContent = 'Valable du ' + r.dateDebut + ' au ' + r.dateFin + (r.codeAdhesionTxt ? ' — ' + r.codeAdhesionTxt : '');
                    } else {
                        montant.textContent = '—';
                        detail.textContent = 'Erreur : ' + r.message;
                    }
                })
                .catch(() => { montant.textContent = '—'; detail.textContent = 'Le calcul a échoué, merci de réessayer.'; });
        }

        declencheurs.forEach(el => el.addEventListener('change', calculer));
        calculer();
        form.addEventListener('submit', () => {
            const bouton = form.querySelector('button[type="submit"]');
            bouton.disabled = true;
            bouton.innerHTML = '<span>Merci de patienter pendant l\'envoi de votre demande…</span>';
        });
    })();
</script>
@endpush