@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">
        <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>Multirisque Professionnel</h1>

                <ul>
                    <li><a href="/extranetacceuil">Home</a></li>
                    <li><span>»</span></li>
                    <li><a href="">Multirisque pro</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 risque -->
                        <div class="form-row">
                            <div class="form-group">
                                <label for="souscripteur"><i class="fas fa-user"></i> Souscripteur</label>
                                <input type="text" id="souscripteur" 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="activite"><i class="fas fa-briefcase"></i> Activité</label>
                                <input type="text" id="activite" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="chiffre_affaire"><i class="fas fa-money-bill-wave"></i> Chiffre
                                    d'affaire</label>
                                <input type="text" id="chiffre_affaire" class="form-control">
                            </div>
                        </div>

                        <!-- Garantie de base Incendie et événements assimilés -->
                        <div class="section_title">
                            <h3>Garantie de base Incendie et événements assimilés</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="batiment_risque_locatif"><i class="fas fa-building"></i> BATIMENT / RISQUE
                                    LOCATIF</label>
                                <input type="text" id="batiment_risque_locatif" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="loyer_mensuel"><i class="fas fa-home"></i> Loyer mensuel (si locataire)</label>
                                <input type="text" id="loyer_mensuel" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="contenu_mobilier"><i class="fas fa-couch"></i> Contenu: Mobilier, Matériel de
                                    bureau, Agencement</label>
                                <input type="text" id="contenu_mobilier" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="materiel_informatique"><i class="fas fa-laptop"></i> Matériel
                                    informatique</label>
                                <input type="text" id="materiel_informatique" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="materiel_exploitation"><i class="fas fa-tools"></i> Matériel
                                    d'exploitation</label>
                                <input type="text" id="materiel_exploitation" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="stock_marchandises"><i class="fas fa-box"></i> Stock de marchandises</label>
                                <input type="text" id="stock_marchandises" class="form-control">
                            </div>
                        </div>

                        <!-- Autres risques -->
                        <div class="section_title">
                            <h3>Autres risques</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="dommages_electriques"><i class="fas fa-bolt"></i> Dommages électriques</label>
                                <input type="text" id="dommages_electriques" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="degats_eaux"><i class="fas fa-tint"></i> Dégâts des eaux</label>
                                <input type="text" id="degats_eaux" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="bris_glaces"><i class="fas fa-glass-martini"></i> Bris de glaces</label>
                                <input type="text" id="bris_glaces" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="vol_effraction"><i class="fas fa-lock"></i> Vol par effraction</label>
                                <input type="text" id="vol_effraction" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="vol_fonds"><i class="fas fa-wallet"></i> Vol des fonds & valeurs
                                    (Tiroir-caisse)</label>
                                <input type="text" id="vol_fonds" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="coffre_fort"><i class="fas fa-safe"></i> Vol des fonds & valeurs
                                    (Coffre-fort)</label>
                                <input type="text" id="coffre_fort" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="transport_fonds"><i class="fas fa-truck"></i> Vol des fonds & valeurs
                                    (Transport de fonds)</label>
                                <input type="text" id="transport_fonds" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="risque_informatique"><i class="fas fa-desktop"></i> Tous risques
                                    informatiques</label>
                                <input type="text" id="risque_informatique" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="tempete"><i class="fas fa-cloud-showers-heavy"></i> Tempête</label>
                                <input type="text" id="tempete" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="responsabilite_civile"><i class="fas fa-shield-alt"></i> Responsabilité
                                    civile</label>
                                <input type="text" id="responsabilite_civile" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="perte_exploitation"><i class="fas fa-fire"></i> Perte d'exploitation (après
                                    incendie)</label>
                                <input type="text" id="perte_exploitation" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="inondation"><i class="fas fa-water"></i> Inondation</label>
                                <input type="text" id="inondation" class="form-control">
                            </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

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

        })
    </script>
@endsection