@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_assurancehabitation ">
        <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 Habitation</h1>

                <ul>
                    <li><a href="/extranetacceuil">Home</a></li>
                    <li><span>»</span></li>
                    <li><a href="">Assurance habitation</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="#">
                        <!-- Identification du proposant -->
                        <div class="section_title">
                            <h3>Identification du proposant</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="prenom"><i class="fas fa-user"></i> Prénom</label>
                                <input type="text" id="prenom" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="nom"><i class="fas fa-user"></i> Nom</label>
                                <input type="text" id="nom" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="profession"><i class="fas fa-briefcase"></i> Profession</label>
                                <input type="text" id="profession" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="adresse"><i class="fas fa-map-marker-alt"></i> Adresse</label>
                                <input type="text" id="adresse" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="ville"><i class="fas fa-city"></i> Ville</label>
                                <input type="text" id="ville" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="etat_province"><i class="fas fa-location-arrow"></i> État / Province /
                                    Région</label>
                                <input type="text" id="etat_province" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="zip_code"><i class="fas fa-code"></i> ZIP / Code postal</label>
                                <input type="text" id="zip_code" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="pays"><i class="fas fa-flag"></i> Pays</label>
                                <input type="text" id="pays" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="telephone"><i class="fas fa-phone"></i> Téléphone</label>
                                <input type="text" id="telephone" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="qualite"><i class="fas fa-building"></i> Qualité par rapport au
                                    bâtiment</label>
                                <input type="text" id="qualite" class="form-control">
                            </div>
                        </div>

                        <!-- Identification du risque -->
                        <div class="section_title">
                            <h3>Identification du risque</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="nature_risque"><i class="fas fa-exclamation-circle"></i> Nature du
                                    risque</label>
                                <input type="text" id="nature_risque" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="situation_geographique"><i class="fas fa-map-marker-alt"></i> Situation
                                    géographique</label>
                                <input type="text" id="situation_geographique" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="lot_ilot_numero"><i class="fas fa-hashtag"></i> Préciser lot et îlot ou
                                    numéro</label>
                                <input type="text" id="lot_ilot_numero" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="valeur_batiment"><i class="fas fa-home"></i> Valeur du bâtiment (si
                                    propriétaire)</label>
                                <input type="text" id="valeur_batiment" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="loyer_mensuel"><i class="fas fa-building"></i> Loyer mensuel (si
                                    locataire)</label>
                                <input type="text" id="loyer_mensuel" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="contenu"><i class="fas fa-couch"></i> Contenu (mobilier, effets
                                    personnels)</label>
                                <input type="text" id="contenu" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="nombre_pieces"><i class="fas fa-th"></i> Nombre de pièces</label>
                                <input type="text" id="nombre_pieces" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="superficie"><i class="fas fa-arrows-alt"></i> Superficie développée</label>
                                <input type="text" id="superficie" class="form-control">
                            </div>
                        </div>

                        <!-- Garanties souhaitées -->
                        <div class="section_title">
                            <h3>Garanties souhaitées</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <input type="checkbox" id="incendie_explosion" class="form-check-input">
                                <label for="incendie_explosion"><i class="fas fa-fire"></i> Incendie / Explosions /
                                    Événements assimilés</label>
                            </div>
                            <div class="form-group">
                                <input type="checkbox" id="tempete" class="form-check-input">
                                <label for="tempete"><i class="fas fa-cloud-showers-heavy"></i> Tempête</label>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <input type="checkbox" id="degats_eaux" class="form-check-input">
                                <label for="degats_eaux"><i class="fas fa-tint"></i> Dégâts des eaux</label>
                            </div>
                            <div class="form-group">
                                <input type="checkbox" id="vol" class="form-check-input">
                                <label for="vol"><i class="fas fa-lock"></i> Vol</label>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <input type="checkbox" id="bris_glaces" class="form-check-input">
                                <label for="bris_glaces"><i class="fas fa-glass-martini"></i> Bris de glaces</label>
                            </div>
                            <div class="form-group">
                                <input type="checkbox" id="dommages_electriques" class="form-check-input">
                                <label for="dommages_electriques"><i class="fas fa-bolt"></i> Dommages électriques</label>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <input type="checkbox" id="rc_famille" class="form-check-input">
                                <label for="rc_famille"><i class="fas fa-shield-alt"></i> Responsabilité Civile Chef de
                                    famille</label>
                            </div>
                        </div>

                        <!-- Mesures de protection -->
                        <div class="section_title">
                            <h3>Mesures de protection</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="portes_securisees"><i class="fas fa-door-closed"></i> Nature des portes
                                    donnant sur l'extérieur</label>
                                <input type="text" id="portes_securisees" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="serrures_securite"><i class="fas fa-lock"></i> Sont-elles munies de serrures
                                    de sécurité ?</label>
                                <select id="serrures_securite" class="form-control">
                                    <option value="oui">Oui</option>
                                    <option value="non">Non</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="gardien"><i class="fas fa-user-shield"></i> Avez-vous un gardien ?</label>
                                <select id="gardien" class="form-control">
                                    <option value="oui">Oui</option>
                                    <option value="non">Non</option>
                                </select>
                            </div>
                        </div>

                        <!-- Déclarations diverses -->
                        <div class="section_title">
                            <h3>Déclarations diverses</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="contrat_indexe"><i class="fas fa-percent"></i> Souhaitez-vous que votre
                                    contrat soit indexé ?</label>
                                <select id="contrat_indexe" class="form-control">
                                    <option value="oui">Oui</option>
                                    <option value="non">Non</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="objets_precieux"><i class="fas fa-gem"></i> La valeur des objets précieux
                                    est-elle supérieure à 30% du contenu ?</label>
                                <select id="objets_precieux" class="form-control">
                                    <option value="oui">Oui</option>
                                    <option value="non">Non</option>
                                </select>
                            </div>
                        </div>

                        <!-- Consentement -->
                        <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