@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_assurancevoyage">
        <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 voyage</h1>

                <ul>
                    <li><a href="/extranetacceuil">Home</a></li>
                    <li><span>»</span></li>
                    <li><a href="">Assurance voyage</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="#">
                        <!-- Intermédiaire Section -->
                        <div class="section_title">
                            <h3>Intermédiaire</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="nom_intermediaire"><i class="fas fa-user"></i> Nom</label>
                                <input type="text" id="nom_intermediaire" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="prenom_intermediaire"><i class="fas fa-user"></i> Prénom</label>
                                <input type="text" id="prenom_intermediaire" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="code_intermediaire"><i class="fas fa-id-card"></i> Code</label>
                                <input type="text" id="code_intermediaire" class="form-control">
                            </div>
                        </div>

                        <!-- Information assuré(e) Section -->
                        <div class="section_title">
                            <h3>Information assuré(e)</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="nom_assure"><i class="fas fa-user"></i> Nom de l'assuré(e)</label>
                                <input type="text" id="nom_assure" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="prenom_assure"><i class="fas fa-user"></i> Prénom de l'assuré(e)</label>
                                <input type="text" id="prenom_assure" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="adresse_postale"><i class="fas fa-home"></i> Adresse postale</label>
                                <input type="text" id="adresse_postale" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="adresse_ligne2"><i class="fas fa-home"></i> Adresse ligne 2</label>
                                <input type="text" id="adresse_ligne2" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="ville"><i class="fas fa-map-marker-alt"></i> Ville</label>
                                <input type="text" id="ville" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="etat_province"><i class="fas fa-map-marker-alt"></i> État / Province /
                                    Région</label>
                                <input type="text" id="etat_province" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="code_postal"><i class="fas fa-map-marker-alt"></i> ZIP / Code postal</label>
                                <input type="text" id="code_postal" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="pays"><i class="fas fa-globe"></i> Pays</label>
                                <input type="text" id="pays" class="form-control">
                            </div>
                            <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="cellulaire"><i class="fas fa-mobile-alt"></i> Cellulaire</label>
                                <input type="text" id="cellulaire" class="form-control">
                            </div>
                            <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="date_naissance"><i class="fas fa-calendar-alt"></i> Date de naissance</label>
                                <input type="text" id="date_naissance" class="form-control" placeholder="MM/DD/YYYY">
                            </div>
                            <div class="form-group">
                                <label for="lieu_naissance"><i class="fas fa-map-marker-alt"></i> Lieu de
                                    naissance</label>
                                <input type="text" id="lieu_naissance" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="passport_num"><i class="fas fa-passport"></i> N° de Passeport</label>
                                <input type="text" id="passport_num" class="form-control">
                            </div>
                        </div>

                        <!-- Destination Section -->
                        <div class="section_title">
                            <h3>Destination</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="destination"><i class="fas fa-globe"></i> Pays</label>
                                <input type="text" id="destination" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="villes"><i class="fas fa-map"></i> Villes</label>
                                <input type="text" id="villes" class="form-control">
                            </div>
                        </div>

                        <!-- Période de garantie Section -->
                        <div class="section_title">
                            <h3>Période de garantie</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="date_depart"><i class="fas fa-calendar-alt"></i> Date de départ</label>
                                <input type="text" id="date_depart" class="form-control" placeholder="MM/DD/YYYY">
                            </div>
                            <div class="form-group">
                                <label for="date_retour"><i class="fas fa-calendar-alt"></i> Date de retour</label>
                                <input type="text" id="date_retour" class="form-control" placeholder="MM/DD/YYYY">
                            </div>
                        </div>

                        <!-- Personne à contacter en cas d'urgence en CI Section -->
                        <div class="section_title">
                            <h3>Personne à contacter en cas d'urgence en CI</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="nom_urgence"><i class="fas fa-user"></i> Nom</label>
                                <input type="text" id="nom_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="prenom_urgence"><i class="fas fa-user"></i> Prénom</label>
                                <input type="text" id="prenom_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="adresse_urgence"><i class="fas fa-home"></i> Adresse</label>
                                <input type="text" id="adresse_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="adresse_ligne2_urgence"><i class="fas fa-home"></i> Adresse ligne 2</label>
                                <input type="text" id="adresse_ligne2_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="ville_urgence"><i class="fas fa-map-marker-alt"></i> Ville</label>
                                <input type="text" id="ville_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="etat_province_urgence"><i class="fas fa-map-marker-alt"></i> État / Province /
                                    Région</label>
                                <input type="text" id="etat_province_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="code_postal_urgence"><i class="fas fa-map-marker-alt"></i> ZIP / Code
                                    postal</label>
                                <input type="text" id="code_postal_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="pays_urgence"><i class="fas fa-globe"></i> Pays</label>
                                <input type="text" id="pays_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="telephone_urgence"><i class="fas fa-phone"></i> Téléphone</label>
                                <input type="text" id="telephone_urgence" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="cellulaire_urgence"><i class="fas fa-mobile-alt"></i> Cellulaire</label>
                                <input type="text" id="cellulaire_urgence" class="form-control">
                            </div>
                        </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