@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_assuranceauto ">
        <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 auto</h1>

                <ul>
                    <li><a href="/extranetacceuil">Home</a></li>
                    <li><span>»</span></li>
                    <li><a href="">Assurance auto</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 Section -->
                        <div class="section_title">
                            <h3>Identification du proposant</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="nom_proposant"><i class="fas fa-user"></i> Nom</label>
                                <input type="text" id="nom_proposant" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="prenom_proposant"><i class="fas fa-user"></i> Prénom</label>
                                <input type="text" id="prenom_proposant" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="profession_proposant"><i class="fas fa-briefcase"></i> Profession</label>
                                <input type="text" id="profession_proposant" class="form-control">
                            </div>
                        </div>

                        <div class="section_title">
                            <h3>Adresse</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="adresse_proposant"><i class="fas fa-home"></i> Adresse postale</label>
                                <input type="text" id="adresse_proposant" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="adresse_ligne2_proposant"><i class="fas fa-home"></i> Adresse ligne 2</label>
                                <input type="text" id="adresse_ligne2_proposant" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="ville_proposant"><i class="fas fa-map-marker-alt"></i> Ville</label>
                                <input type="text" id="ville_proposant" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="etat_province_proposant"><i class="fas fa-map-marker-alt"></i> État / Province /
                                    Région</label>
                                <input type="text" id="etat_province_proposant" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="code_postal_proposant"><i class="fas fa-map-marker-alt"></i> ZIP / Code
                                    postal</label>
                                <input type="text" id="code_postal_proposant" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="pays_proposant"><i class="fas fa-globe"></i> Pays</label>
                                <input type="text" id="pays_proposant" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="telephone_proposant"><i class="fas fa-phone"></i> Téléphone</label>
                                <input type="text" id="telephone_proposant" class="form-control">
                            </div>
                        </div>

                        <!-- Identification du véhicule Section -->
                        <div class="section_title">
                            <h3>Identification du véhicule</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="marque"><i class="fas fa-car"></i> Marque</label>
                                <input type="text" id="marque" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="genre"><i class="fas fa-car-side"></i> Genre</label>
                                <input type="text" id="genre" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="nombre_places"><i class="fas fa-users"></i> Nombre de places</label>
                                <input type="number" id="nombre_places" class="form-control" min="2"
                                    max="20">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="premiere_mise_en_circulation"><i class="fas fa-calendar-alt"></i> Première
                                    mise en circulation</label>
                                <input type="date" id="premiere_mise_en_circulation" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="usage"><i class="fas fa-road"></i> Usage</label>
                                <input type="text" id="usage" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="immatriculation"><i class="fas fa-car"></i> Immatriculation</label>
                                <input type="text" id="immatriculation" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="puissance"><i class="fas fa-tachometer-alt"></i> Puissance</label>
                                <input type="text" id="puissance" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="charge_utile"><i class="fas fa-weight"></i> Charge utile</label>
                                <input type="text" id="charge_utile" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="valeur_neuve"><i class="fas fa-dollar-sign"></i> Valeur neuve</label>
                                <input type="text" id="valeur_neuve" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="valeur_venale"><i class="fas fa-dollar-sign"></i> Valeur vénale</label>
                                <input type="text" id="valeur_venale" class="form-control">
                            </div>
                        </div>

                        <!-- Garantie demandées Section -->
                        <div class="section_title">
                            <h3>Garanties demandées</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="responsabilite_civile">
                                    <input type="checkbox" id="responsabilite_civile"> Responsabilité civile
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="recours_tiers_incendie">
                                    <input type="checkbox" id="recours_tiers_incendie"> Recours des tiers incendie
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="defense_recours">
                                    <input type="checkbox" id="defense_recours"> Défense / Recours
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="dommages_tous_accidents">
                                    <input type="checkbox" id="dommages_tous_accidents"> Dommages tous accidents
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="dommage_collision">
                                    <input type="checkbox" id="dommage_collision"> Dommage collision
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="incendie_véhicule">
                                    <input type="checkbox" id="incendie_véhicule"> Incendie du véhicule
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="vol">
                                    <input type="checkbox" id="vol"> Vol (y compris le vol des accessoires)
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="bris_glaces">
                                    <input type="checkbox" id="bris_glaces"> Bris de glaces
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="recours_anticipes">
                                    <input type="checkbox" id="term"> Recours anticipé
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="personnes_transportees">
                                    <input type="checkbox" id="personnes_transportees"> Personnes transportées
                                </label>
                            </div>
                        </div>

                        <!-- Consentement Section -->
                        <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>
                </div>
                </form>
            </div>
        </div>
        </div>
    </section>
@endsection

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

        })
    </script>
@endsection