@extends('layouts.site')

@section('description', "Demande de devis assurance VTC Pro & Taxi : 3 formules auto VTC et responsabilité civile professionnelle. Questionnaire d'étude des risques en ligne.")
@section('image', 'bureau.jpg')

@section('titre', 'Questionnaire VTC Pro & Taxi')

@section('contenu')
    <x-page-header titre="Demande de devis VTC Pro & Taxi" image="bureau.jpg" />

    <section class="section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="sidebar-widget quote-sidebar-widget p-4 p-md-5 mb-0">
                        <div class="text-center mb-5">
                            <h2 class="widget-title">Questionnaire d'étude des risques</h2>
                            <p class="mb-0">Demande de devis VTC Pro - Taxi - Responsabilité civile</p>
                        </div>
                        <x-alertes />
                        <form class="row g-4" action="{{ route('questionnaire-vtc.envoyer') }}" method="POST" novalidate>
                            @csrf
                            <div class="col-12"><h3 class="h5-style mb-0 text-primary">01. Vos coordonnées</h3></div>
                            <div class="col-12">
                                <label class="form-label">Statut juridique <span class="text-danger">*</span></label>
                                <div class="d-flex flex-wrap gap-4">
                                    @foreach (['Auto-entrepreneur', 'Vtc travailleur indépendant', 'Société', 'Taxi'] as $statut)
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="proposition_statut" id="statut{{ $loop->index }}" value="{{ $statut }}" @checked(old('proposition_statut') === $statut)>
                                            <label class="form-check-label" for="statut{{ $loop->index }}">{{ $statut }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <x-champ nom="sociale" libelle="Dénomination sociale" requis col="col-12" />
                            <x-champ nom="adresse_siege" libelle="Adresse du siège" requis col="col-12" />
                            <x-champ nom="ville" libelle="Ville" requis />
                            <x-champ nom="cp" libelle="Code postal" requis />
                            <x-champ nom="telephone" libelle="Téléphone" type="tel" requis />
                            <x-champ nom="interlocuteur" libelle="Interlocuteur" requis placeholder="Nom du responsable" />
                            <x-champ nom="mail" libelle="Adresse mail" type="email" requis col="col-12" />

                            <div class="col-12 mt-5"><h3 class="h5-style mb-0 text-primary">02. Formule souhaitée</h3></div>
                            <div class="col-12">
                                @foreach ([
                                    'Formule 1' => 'Formule 1 = Mini + Individuelle Conducteur',
                                    'Formule 2' => 'Formule 2 = Formule 1 + Vol Incendie Bris de Glace et Assistance',
                                    'Formule 3' => 'Formule 3 = Formule 2 + Tous Risques Dommages Tous Accidents + Contenu',
                                ] as $valeur => $libelle)
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="radio" name="formule" id="formule{{ $loop->index }}" value="{{ $valeur }}" @checked(old('formule') === $valeur)>
                                        <label class="form-check-label" for="formule{{ $loop->index }}">{{ $libelle }}</label>
                                    </div>
                                @endforeach
                            </div>

                            <div class="col-12 mt-5"><h3 class="h5-style mb-0 text-primary">03. Véhicule</h3></div>
                            <x-champ nom="marque" libelle="Marque" requis col="col-md-4" />
                            <x-champ nom="modele" libelle="Modèle" requis col="col-md-4" />
                            <x-champ nom="immatriculation" libelle="Immatriculation" requis col="col-md-4" />
                            <x-champ nom="nb_cv" libelle="Nombre de CV fiscaux" type="number" min="0" requis col="col-md-4" />
                            <x-champ nom="pourcentage" libelle="% de bonus à la dernière échéance" type="number" min="0" requis col="col-md-4" />
                            <x-champ nom="valeur_vehicule" libelle="Valeur à neuf du véhicule (€)" type="number" min="0" requis col="col-md-4" />
                            <x-champ nom="date_premiere_circulation" libelle="Date de première mise en circulation" type="date" />
                            <x-champ nom="date_achat" libelle="Date d'achat" type="date" />

                            <div class="col-12 mt-5"><h3 class="h5-style mb-0 text-primary">04. Sinistres des 3 dernières années</h3></div>
                            <x-champ nom="sinistre_bris" libelle="Bris de glace" type="number" min="0" requis col="col-md-3" />
                            <x-champ nom="sinistre_nonresp" libelle="Non responsables (hors bris de glace)" type="number" min="0" requis col="col-md-3" />
                            <x-champ nom="sinistre_resp" libelle="Responsables" type="number" min="0" max="20" requis col="col-md-3" />
                            <x-champ nom="sinistre_autre" libelle="Vol" type="number" min="0" requis col="col-md-3" />
                            <div class="col-12" id="dates-sinistres"></div>

                            <div class="col-12 mt-5"><h3 class="h5-style mb-0 text-primary">05. Contrat actuel</h3></div>
                            <x-champ nom="compagnie_assurance" libelle="Compagnie d'assurance actuelle" requis />
                            <x-champ nom="echance_contrat" libelle="Échéance de votre contrat actuel" type="date" requis />
                            <div class="col-12">
                                <label class="form-label">Votre contrat d'assurance actuel est-il un contrat PRO ? <span class="text-danger">*</span></label>
                                <div class="d-flex gap-4">
                                    @foreach (['Oui', 'Non'] as $choix)
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="proposition" id="pro{{ $choix }}" value="{{ $choix }}" @checked(old('proposition', 'Oui') === $choix)>
                                            <label class="form-check-label" for="pro{{ $choix }}">{{ $choix }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-12"><x-recaptcha /></div>
                            <div class="col-12 text-center mt-4">
                                <button type="submit" class="btn btn-primary" data-hover="Transmettre"><span>Transmettre</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    // un champ date par sinistre responsable
    (function () {
        const nb = document.getElementById('sinistre_resp');
        const zone = document.getElementById('dates-sinistres');
        const anciennes = @json(old('date_sinistre_resp', []));
        function maj() {
            const n = Math.min(parseInt(nb.value, 10) || 0, 20);
            let html = n ? '<label class="form-label">Date des sinistres responsables</label><div class="row g-3">' : '';
            for (let i = 0; i < n; i++) {
                html += '<div class="col-md-3"><input type="date" class="form-control" name="date_sinistre_resp[]" aria-label="Sinistre ' + (i + 1) + '" value="' + (anciennes[i] || '') + '"></div>';
            }
            zone.innerHTML = n ? html + '</div>' : '';
        }
        nb.addEventListener('input', maj);
        maj();
    })();
</script>
@endpush