@extends('pages/fronts/modelfront')

@section('content')
    <style>
        /* Général */
        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            /* Espacement entre les éléments */
        }

        .form-group {
            flex: 1 1 calc(50% - 20px);
            /* Par défaut, deux éléments sur une ligne */
            margin-bottom: 20px;
        }

        /* Responsivité */
        @media (max-width: 768px) {
            .form-group {
                flex: 1 1 100%;
                /* Sur mobile, chaque élément prend toute la largeur */
            }
        }

        /* Style des icônes */
        .fas {
            margin-left: 8px;
            font-size: 1.2rem;
            /* Augmenter la taille des icônes */
            color: #4CAF50;
            /* Couleur verte pour les icônes */
            transition: color 0.3s ease;
            /* Animation de changement de couleur */
        }

        .fas:hover {
            color: #FF5722;
            /* Couleur orange au survol */
        }

        /* Style des titres de sections */
        .section_title h2,
        .section_title h3 {
            font-family: 'Arial', sans-serif;
            color: #333;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #4CAF50;
            /* Ligne sous le titre */
        }

        .section_title h2 {
            font-size: 2rem;
            /* Taille plus grande pour les grands titres */
            font-weight: bold;
        }

        .section_title h3 {
            font-size: 1.5rem;
            /* Taille plus petite pour les sous-titres */
            font-weight: normal;
            color: #444;
        }

        /* Bouton d'envoi */
        .btn.puprple_btn {
            background-color: #4CAF50;
            color: white;
            font-size: 1rem;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn.puprple_btn:hover {
            background-color: #388E3C;
        }

        /* Style pour le texte des termes et conditions */
        .term_check label {
            font-size: 0.9rem;
            color: #555;
        }

        .term_check input {
            margin-right: 10px;
            transform: scale(1.2);
            /* Agrandir la case à cocher */
        }

        /* Espacement global */
        .contact_page_section {
            padding: 40px 0;
        }

        .contact_form {
            background-color: #f9f9f9;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* Ajout d'une bordure arrondie autour des champs de formulaire */
        .form-control {
            border-radius: 8px;
            border: 1px solid #ccc;
            padding: 12px;
            font-size: 1rem;
            width: 100%;
            transition: border-color 0.3s ease;
        }

        .form-control:focus {
            border-color: #4CAF50;
            outline: none;
        }

        /* Ajout d'un effet de survol sur les champs de saisie */
        .form-control:hover {
            border-color: #4CAF50;
        }
    </style>

    <!-- BredCrumb-Section -->
    <div class="bred_crumb_assurancevie">
        <div class="container">
            <!-- shape animation  -->
            <span class="banner_shape1"> <img src="assets/asset_landing/images/banner-shape1.png" alt="image">
            </span>
            <span class="banner_shape2"> <img src="assets/asset_landing/images/banner-shape2.png" alt="image">
            </span>
            <span class="banner_shape3"> <img src="assets/asset_landing/images/banner-shape3.png" alt="image">
            </span>

            <div class="bred_text">
                <h1>Assurance vie</h1>

                <ul>
                    <li><a href="/extranetacceuil">Home</a></li>
                    <li><span>»</span></li>
                    <li><a href="">Assurance vie</a></li>
                </ul>
            </div>
        </div>
    </div>


    <section class="contact_page_section">
        <div class="container">
            <div class="contact_inner">
                <div class="contact_form">
                    <div class="section_title">
                        <h2>Formulaire <span>à remplir</span></h2>
                    </div>
                    <form action="#">
                        <!-- Dénomination de la pharmacie Section -->

                        <div class="form-row">
                            <div class="form-group">
                                <label for="nom_pharmacie"><i class="fas fa-hospital"></i> Dénomination de la
                                    pharmacie</label>
                                <input type="text" id="nom_pharmacie" class="form-control">
                            </div>
                        </div>


                        <div class="form-row">
                            <div class="form-group">
                                <label for="prenom_pharmacie"><i class="fas fa-user"></i> Prénom du pharmacien</label>
                                <input type="text" id="prenom_pharmacie" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="nom_pharmacie"><i class="fas fa-user"></i> Nom du pharmacien</label>
                                <input type="text" id="nom_pharmacie" class="form-control">
                            </div>
                        </div>



                        <div class="form-row">
                            <div class="form-group">
                                <label for="date_naissance_pharm"><i class="fas fa-calendar-alt"></i> Date de
                                    naissance</label>
                                <input type="text" id="date_naissance_pharm" class="form-control"
                                    placeholder="MM/DD/YYYY">
                            </div>



                            <div class="form-group">
                                <label for="lieu_naissance_pharm"><i class="fas fa-map-marker-alt"></i> Lieu de
                                    naissance</label>
                                <input type="text" id="lieu_naissance_pharm" class="form-control">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="situation_matrimoniale"><i class="fas fa-heart"></i> Situation
                                    matrimoniale</label>
                                <select id="situation_matrimoniale" class="form-control">
                                    <option value="celibataire">Célibataire</option>
                                    <option value="marie">Marié(e)</option>
                                    <option value="divorce">Divorcé(e)</option>
                                    <option value="veuf">Veuf(ve)</option>
                                </select>
                            </div>
                        </div>

                        <!-- Adresse Section -->
                        <div class="section_title">
                            <h3>Adresse</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="adresse_pharmacie"><i class="fas fa-home"></i> Adresse</label>
                                <input type="text" id="adresse_pharmacie" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="adresse_ligne2_pharm"><i class="fas fa-home"></i> Adresse ligne 2</label>
                                <input type="text" id="adresse_ligne2_pharm" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="ville_pharmacie"><i class="fas fa-map-marker-alt"></i> Ville</label>
                                <input type="text" id="ville_pharmacie" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="etat_province_pharm"><i class="fas fa-map-marker-alt"></i> État / Province /
                                    Région</label>
                                <input type="text" id="etat_province_pharm" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="code_postal_pharm"><i class="fas fa-map-marker-alt"></i> ZIP / Code
                                    postal</label>
                                <input type="text" id="code_postal_pharm" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="pays_pharm"><i class="fas fa-globe"></i> Pays</label>
                                <input type="text" id="pays_pharm" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="telephone_pharm"><i class="fas fa-phone"></i> Téléphone</label>
                                <input type="text" id="telephone_pharm" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="mobile_pharm"><i class="fas fa-mobile-alt"></i> Mobile</label>
                                <input type="text" id="mobile_pharm" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="email_pharm"><i class="fas fa-envelope"></i> E-mail</label>
                                <input type="email" id="email_pharm" class="form-control">
                            </div>
                        </div>

                        <!-- Renseignements d'ordre général Section -->
                        <div class="section_title">
                            <h3>Renseignements d'ordre général et antécédents du risque</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="accident_souscrit"><i class="fas fa-check-circle"></i> Avez-vous déjà souscrit
                                    un contrat accident de la vie ou individuelle accident ?</label>
                                <div>
                                    <input type="radio" id="accident_souscrit_oui" name="accident_souscrit"
                                        value="oui">
                                    <label for="accident_souscrit_oui">Oui</label>
                                    <input type="radio" id="accident_souscrit_non" name="accident_souscrit"
                                        value="non">
                                    <label for="accident_souscrit_non">Non</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="compagnie_accident"><i class="fas fa-building"></i> Si oui, auprès de quelle
                                    compagnie ?</label>
                                <input type="text" id="compagnie_accident" class="form-control">
                            </div>

                            <div class="form-group">
                                <label for="accident_3ans"><i class="fas fa-exclamation-circle"></i> Avez-vous été victime
                                    d'un accident au cours des trois (3) dernières années ?</label>
                                <div>
                                    <input type="radio" id="accident_3ans_oui" name="accident_3ans" value="oui">
                                    <label for="accident_3ans_oui">Oui</label>
                                    <input type="radio" id="accident_3ans_non" name="accident_3ans" value="non">
                                    <label for="accident_3ans_non">Non</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="droitierougaucher"><i class="fas fa-check-circle"></i> Etre-vous gaucher ou
                                    droitier ?</label>
                                <div>
                                    <input type="radio" id="gaucher" name="gaucher" value="Gaucher">
                                    <label for="gaucher">Gaucher</label>
                                    <input type="radio" id="droitier" name="droitier" value="Droitier">
                                    <label for="droitier">Droitier</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="invalidite_permanente"><i class="fas fa-wheelchair"></i> Avez-vous une
                                    invalidité permanente ?</label>
                                <div>
                                    <input type="radio" id="invalidite_permanente_oui" name="invalidite_permanente"
                                        value="oui">
                                    <label for="invalidite_permanente_oui">Oui</label>
                                    <input type="radio" id="invalidite_permanente_non" name="invalidite_permanente"
                                        value="non">
                                    <label for="invalidite_permanente_non">Non</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="deces"><i class="fas fa-skull-crossbones"></i> Décès</label>
                                <input type="text" id="deces" class="form-control">
                            </div>
                        </div>



                        <!-- Pratiques sportives -->
                        <div class="section_title">
                            <h3>Pratiques sportives</h3>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="sports_pratiques_amateur"><i class="fas fa-running"></i> Sports pratiqués en
                                    tant qu'amateur</label>
                                <input type="text" id="sports_pratiques_amateur" class="form-control"
                                    placeholder="Exemple : Football, Basketball...">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="sports_dangereux"><i class="fas fa-exclamation-triangle"></i> Pratiquez-vous
                                    des sports dangereux ?</label>
                                <div>
                                    <input type="radio" id="sports_dangereux_oui" name="sports_dangereux"
                                        value="oui">
                                    <label for="sports_dangereux_oui">Oui</label>
                                    <input type="radio" id="sports_dangereux_non" name="sports_dangereux"
                                        value="non">
                                    <label for="sports_dangereux_non">Non</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="vehicule_2_ou_3_roues"><i class="fas fa-motorcycle"></i> Utilisez-vous des
                                    véhicules à 2 ou 3 roues munis d'un moteur excédant 50 cm3 ?</label>
                                <div>
                                    <input type="radio" id="vehicule_2_ou_3_roues_oui" name="vehicule_2_ou_3_roues"
                                        value="oui">
                                    <label for="vehicule_2_ou_3_roues_oui">Oui</label>
                                    <input type="radio" id="vehicule_2_ou_3_roues_non" name="vehicule_2_ou_3_roues"
                                        value="non">
                                    <label for="vehicule_2_ou_3_roues_non">Non</label>
                                </div>
                            </div>
                        </div>



                        <!-- Capitaux à assurer Section -->
                        <div class="section_title">
                            <h3>Capitaux à assurer</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="deces_capitaux"><i class="fas fa-skull-crossbones"></i> Décès - Capitaux à
                                    assurer</label>
                                <input type="text" id="deces_capitaux" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="invalidite_capitaux"><i class="fas fa-wheelchair"></i> Invalidité permanente -
                                    Capitaux à assurer</label>
                                <input type="text" id="invalidite_capitaux" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="frais_medicaux_capitaux"><i class="fas fa-heartbeat"></i> Frais médicaux -
                                    Capitaux à assurer</label>
                                <input type="text" id="frais_medicaux_capitaux" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="indemnite_journaliere"><i class="fas fa-calendar-day"></i> Indemnité
                                    journalière - Capitaux à assurer</label>
                                <input type="text" id="indemnite_journaliere" class="form-control">
                            </div>
                        </div>




                        <!-- Attribution du capital en cas de décès Section -->
                        <div class="section_title">
                            <h3>Attribution du capital en cas de décès</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="beneficiaire"><i class="fas fa-users"></i> Bénéficiaire</label>
                                <select id="beneficiaire" class="form-control">
                                    <option value="ayant_droits">Ayant-droits</option>
                                    <option value="epoux">Epoux(se)</option>
                                    <option value="enfants">Enfant(s)</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="liste_beneficiaires"><i class="fas fa-list"></i> Joindre une liste de
                                    bénéficiaires nominativement</label>
                                <input type="text" id="liste_beneficiaires" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <p><strong>Important :</strong> Les personnes ayant une invalidité permanente supérieure à 66%,
                                une aliénation mentale, une paralysie totale d'au moins un membre, ou l'épilepsie ne peuvent
                                être assurées.</p>
                        </div>

                        <!-- Consentement Section -->
                        <div class="form-group term_check">
                            <input type="checkbox" id="term">
                            <label for="term"><i class="fas fa-envelope"></i> J'accepte de recevoir des e-mails, des
                                newsletters et des messages promotionnels.</label>
                        </div>

                        <div class="form-group mb-0">
                            <button type="submit" class="btn puprple_btn"><i class="fas fa-paper-plane"></i> Soumettre
                                le formulaire</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {

        })
    </script>
@endsection