<form id="projetForm">
    <h5>
        Etablissement d'un projet TPPC
    </h5>
    <!-- Historique de projet -->
    <div class="row" id="historiqueDiv">
        <div class="col s12">
            <div class="col s5">
                <select id="idSelect">
                    <option value="" selected disabled>Choix d'une ancienne version du projet</option>
                </select>
            </div>
            <div class="col s3">
                <button class="btn" type="button" id="loadHistoriqueBtn" style="margin-top: 10px;">Charger la version
                    sélectionnée</button>
            </div>
        </div>
    </div>

    <!-- --------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur l'entreprise    -->
    <!-- --------------------------------------------------- -->
    <div class="header">
        <div class="chapter">
            <i class="material-icons">group</i><span style="margin-left: 10px;">Eléments d'appréciation sur l'entreprise
                :</span>
        </div>
        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les éléments d'appréciation sur l'entreprise
                ci-dessous :</h6>
        </div>
    </div>
    <div class="row">
        <div class="col s12">
            <div class="col s8 offset-s2">
                <label>
                    <input type="checkbox" id="additionel" class="filled-in"
                        onchange="toggler(this.id, 'checkAdditionnel')" />
                    <span>Assurés additionnels</span>
                </label>
                <div id="checkAdditionnel" style="display:none;">
                    <div class="row">
                        <h6 class="red-text text-darken-4">Veuillez lister les assurés additionnels (Filiales
                            Françaises) :</h6>
                    </div>
                    <div class="card">
                        <table id="empTableAdditionnel">
                            <tr>
                                <th>Nom</th>
                                <th>Adresse</th>
                                <th>Numéro Siret</th>
                                <th>Action</th>
                            </tr>
                            <tr>
                                <td><input type="text" name="nom" id="nomAdditionnel" placeholder="Non défini" /></td>
                                <td><input type="text" name="adresse" id="adresseAditionnel" placeholder="Non défini" />
                                </td>
                                <td><input type="text" name="siret" id="siretAdditionnel" placeholder="Non défini" />
                                </td>
                                <td><button class="btn" type="button" id="btnAddAdditionnel"><i
                                            class="material-icons">add</i></button></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- --------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur les activités   -->
    <!-- --------------------------------------------------- -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">reorder</i><span style="margin-left: 10px;">Eléments d'appréciation sur les activités :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez remplir les informations liées à l'activité de l'assuré : </h6>
            </div>
        </div>

        <!-- Activités -->
        <div class="row" style="max-width: 35rem;">
            <div class="row">
                <label> Activité Assurée:</label>
                <hr>
            </div>
            <div class="input-field" id="rowActivite">
                <i class="material-icons prefix">location_city</i>
                <input id="activite" name="activite" type="text" value="" placeholder="Ex: Artisan">
                <span class="helper-text">Activité de l'assuré</span>
                <span id="activite-error" class="helper-text red-text"></span>

            </div>
        </div>
    </div>

    <!-- --------------------------------------------------- -->
    <!--  Nouvelle section : Informations sur les garanties  -->
    <!-- --------------------------------------------------- -->
    <div class="header">
        <div class="chapter">
            <i class="material-icons">reorder</i><span style="margin-left: 10px;">Informations sur les garanties
                :</span>
        </div>
        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les garanties ainsi que les extensions de garantie si
                il y en a :</h6>
        </div>
    </div>

    <!-- Colonne pour les garanties -->
    <div class="row">
        <div class="col s12">
            <div class="col s6 mrg">
                <div class="row">
                    <label> Garanties :</label>
                    <hr>
                </div>
                <div class="row" style="display: flex; flex-direction: column; align-items: flex-start;">
                    <label>
                        <input type="checkbox" id="IAC" name="IAC" class="filled-in" checked="checked"
                            disabled="disabled" />
                        <span>Garantie IAC</span>
                    </label>
                    <label>
                        <input type="checkbox" id="HIAC" name="HIAC" class="filled-in" />
                        <span>Garantie HIAC</span>
                    </label>
                    <label>
                        <input type="checkbox" id="garantieVol" name="garantieVol" class="filled-in" />
                        <span>Garantie Vol</span>
                    </label>
                    <div id="tousRisques" style="display: none;">
                        <span>Garantie "Tous risques"</span>
                    </div>
                </div>
            </div>

            <!-- Colonne pour les extensions de garantie -->
            <div class="col s6 mrg">
                <div class="row">
                    <label for="activity-selector">Extensions de garantie :</label>
                    <hr>
                </div>
                <div class="row" id="rowExtensionsGarantie">
                    <select multiple id="extensionsGarantie" name="extensionsGarantie" style="width: 2px;">
                        <option selected value="" disabled>Choix des extensions</option>
                    </select>
                    <div id="selected-garanties" style="margin-top: 20px;">
                        <!-- Les Garanties choisies apparaiteront ici -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- --------------------------------------------------- -->
    <!--   Nouvelle section : Informations sur le contrat    -->
    <!-- --------------------------------------------------- -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">settings</i><span style="margin-left: 10px;">Informations sur le contrat :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez renseigner les informations liées au contrat :</h6>
            </div>
        </div>

        <div id="infosContrat" class="row centered">
            <!-- Colonne Fractionnement -->
            <div class="row" id="row-fractionnement" style="max-width: 35rem;">
                <div class="row">
                    <label>Fractionnement :</label>
                    <hr>
                </div>
                <label>
                    <input name="fractionnement" id="mensuel" type="radio" value="mensuel" checked />
                    <span>Mensuel</span>
                </label>
                <label>
                    <input name="fractionnement" id="trimestriel" type="radio" value="trimestriel" />
                    <span>Trimestriel</span>
                </label>
                <label>
                    <input name="fractionnement" id="semestriel" type="radio" value="semestriel" />
                    <span>Semestriel</span>
                </label>
                <label>
                    <input name="fractionnement" id="annuel" type="radio" value="annuel" />
                    <span>Annuel</span>
                </label>
            </div>
            <br>

            <!-- Colonne Date -->
            <div class="row" style="max-width: 35rem;">
                <div class="row">
                    <div style="display: flex;justify-content: space-evenly;align-items: center;">
                        <label>Dates du contrat :</label>
                        <button class="circle" type="button" id="btnModalDate">?</button>
                    </div>
                    <hr>
                </div>
                <div id="rowDateEffet" class="input-field">
                    <div class="col s11">
                        <input id="dateEffet" type="text" placeholder="jj/mm/aaaa">
                        <span class="helper-text">Date d'effet</span>
                        <span id="dateEffet-error" class="helper-text red-text"></span>
                    </div>
                    <div class="col s1">
                        <button class="circle-null" type="button" id="btnNullDateDebut">x</button>
                    </div>
                </div>
                <div id="rowDateEcheance" class="input-field">
                    <div class="col s11">
                        <input id="dateEcheance" type="text" placeholder="jj/mm">
                        <span class="helper-text">Date d'échéance</span>
                        <span id="dateEcheance-error" class="helper-text red-text"></span>
                    </div>
                    <div class="col s1">
                        <button class="circle-null" type="button" id="btnNullDateEcheance">x</button>
                    </div>
                </div>
                <div id="rowDateFin" class="input-field" style="display:none;">
                    <div class="col s11">
                        <input id="dateFin" type="text" placeholder="jj/mm/aaaa">
                        <span class="helper-text">Date de fin</span>
                        <span id="dateFin-error" class="helper-text red-text"></span>
                    </div>
                    <div class="col s1">
                        <button class="circle-null" type="button" id="btnNullDateFin">x</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- --------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur la sinistralité -->
    <!-- --------------------------------------------------- -->
    <div class="header">
        <div class="chapter">
            <i class="material-icons">reorder</i><span style="margin-left: 10px;">Informations sur la sinistralité du
                contrat :</span>
        </div>
        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez remplir les informations liées à la sinistralité du contrat :
            </h6>
        </div>
    </div>
    <div class="flex-adaptable">
        <div class="row" style="max-width: 38rem;">
            <div class="row">
                <label>Antécédent de sinistres :</label>
                <hr>
            </div>
            <div class="row input-field" id="rowActivite">
                <i class="material-icons prefix">format_list_numbered</i>
                <input id="nombreDeSinistres" placeholder="Ex: 2 (Nbr de sinistre)" name="nombreDeSinistres"
                    type="number" value="" required>
                <span class="helper-text">Nombre de Sinistres</span>
                <span id="nombreDeSinistres-error" class="helper-text red-text"></span>
            </div>
        </div>
    </div>

    <!-- --------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur les cotisations -->
    <!-- --------------------------------------------------- -->
    <div class="header">
        <div class="chapter">
            <i class="material-icons">settings</i><span style="margin-left: 10px;">Informations sur les cotisations
                :</span>
        </div>
        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les informations sur la cotisation :</h6>
        </div>
    </div>

        <div class="row">
            <div class="col s12">
                <!-- TYPE COTISATION -->
                <div class="col s4 mrg" id="colTypeCot">
                    <div class="row">
                        <label>Type de cotisation :</label>
                        <hr>
                    </div>
                    <label>
                        <input name="cotisation" id="revisable" type="radio" value="revisable" checked />
                        <span>Cotisation révisable</span>
                    </label>
                    <label>
                        <input name="cotisation" id="forfaitaire" type="radio" value="forfaitaire" />
                        <span>Cotisation forfaitaire</span>
                    </label>
                </div>

                <!-- TYPE Revision -->
                <div class="col s4 mrg">
                    <div id="colTypeDeRevision" name="colTypeRevision">
                        <div class="row">
                            <label>Type de révision :</label>
                            <hr>
                        </div>
                        <label>
                            <input name="typeRevision" type="radio" id="cotisationCA" value="cotisationCA"
                                value="cotisationCA" />
                            <span>Cotisation au CA</span>
                        </label>
                        <label>
                            <input name="typeRevision" type="radio" id="cotisationFlotte" value="cotisationFlotte" checked/>
                            <span>Flotte ouverte</span>
                        </label>
                        
                        <!-- nombre Vehicule -->
                        <div class="mrg" id="colNombreVehicules" style="display: none;place-self: center;width: 80%;">
                            <div class="input-field">
                                <input id="nombreVehicules" name="nombreVehicules" type="text" value="1"
                                    placeholder="1">
                                <span class="helper-text">Nombre de véhicules</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col s4 mrg" id="colCotMini">
                    <div class="row">
                        <label>Cotisation minimale irréductible :</label>
                        <hr>
                    </div>
                    <div class="input-field">
                        <i class="material-icons prefix">euro_symbol</i>
                        <input id="cotisationIrreductible" type="text" placeholder="200">
                        <span class="helper-text">Cotisation minimale irréductible</span>
                        <span id="cotisationIrreductible-error" class="helper-text red-text"></span>
                    </div>
                </div>
            </div>
        </div>

    <div class="row">
        <!-- Tableau cotisations -->
        <div id="tableCotisation" class="col s8 mrg">
            <div class="row">
                <label>Détail des cotisations</label>
                <hr>
            </div>
            <div class="card">
                <table style="border: solid;">
                    <thead>
                        <tr>
                            <th>Capital/Véhicule</th>
                            <th>Chiffre d'affaires</th>
                            <th>Taux au chiffre d'affaires</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input id="capital" name="capital/vehicule" placeholder="Ex : 1000" value=""
                                    type="text">
                                <span id="capital-error" class="helper-text red-text"></span>
                            </td>
                            <td>
                                <input id="chiffreAffaires" name="chiffreAffaires" placeholder="Ex : 10000" type="text"
                                    value="">
                                <span id="chiffreAffaires-error" class="helper-text red-text"></span>
                            </td>
                            <td>
                                <input id="tauxCA" name="tauxCA" placeholder="Ex : 0.05" type="text" value="">
                                <span id="tauxCA-error" class="helper-text red-text"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Tableau désignation véhicules -->
        <div id="designationVehicule" class="col s8 mrg" style="display:none;">
            <div class="row">
                <label>Désignation des véhicules :</label>
                <hr>
            </div>
            <div class="card">
                <table id="empTableVehicules">
                    <tr>
                        <th>Marque</th>
                        <th>Genre</th>
                        <th>Type</th>
                        <th>Immat</th>
                        <th>Capital</th>
                        <th>Action</th>
                    </tr>
                    <tr>
                        <td><input type="text" name="marque" id="marqueVehicule" placeholder="Renault" /></td>
                        <td><input type="text" name="genre" id="genreVehicule" placeholder="VP" /></td>
                        <td><input type="text" name="type" id="typeVehicule" placeholder="Non défini" /></td>
                        <td><input type="text" name="immat" id="immatVehicule" placeholder="AA-999-AA" /></td>
                        <td><input type="text" name="capital" id="capitalVehicule" placeholder="10 000 €" /></td>
                        <td><button class="btn" type="button" id="btnAddVehicule"><i
                                    class="material-icons">add</i></button></td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Tableau tarification -->
        <div class="col s9 mrg" style="display: none;" id="tarificationFlotte" name="tarificationFlotte">
            <div class="row">
                <label> Tarification de la flotte</label>
                <hr>
            </div>
            <div class="card">
                <table id="empTableTarif" style="border: solid;">
                    <thead>
                        <tr>
                            <th style="padding : 5px 50px 5px 5px !important">Type de véhicule</th>
                            <th>Capital / véhicule</th>
                            <th>Prime / véhicule modulée de référence</th>
                            <th>Prime / véhicule commerciale</th>
                            <th>Nombre de véhicules </th>
                            <th>Prime HT de référence</th>
                            <th>Prime HT commercial</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tr id="inputRow">
                        <td><input placeholder="Ex : Fourgon" name="typeVehTarif" id="typeVehTarif" type="text" />
                        </td>
                        <td><input placeholder="Ex : 5000" name="capitalTarif" id="capitalTarif" type="number" /></td>
                        <td>
                        </td>
                        <td><input placeholder="Ex : 300" name="primeVehComTarif" id="primeVehComTarif" type="number" />
                        </td>
                        <td><input placeholder="Ex : 2" name="nbVehiculesTarif" id="nbVehiculesTarif" type="number" />
                        </td>
                        <td>
                        </td>
                        <td><input placeholder="Ex : 600" name="primeHTComTarif" id="primeHTComTarif" type="number" /></td>

                        <td style="display : none" ><input name="garTarif" id="garTarif" type="text" /></td>
                        <td style="display : none" ><input  name="typeMarTarif" id="typeMarTarif" type="text" /></td>
                        <td style="display : none" ><input  name="primeVehTarif" id="primeVehTarif" type="text" /></td>
                        <td style="display : none" ><input name="modulo" id="modulo" type="text" /></td>

                        <td><button class="btn" type="button" id="btnAddTarif"><i
                                    class="material-icons">add</i></button></td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Cotisation nette / Hors taxe et frais de répertoire -->
        <div id="ColCotisation" class="col s3 ">
            <div class="row">
                <label>Cotisation</label>
                <hr>
            </div>
            <div class="card">
                <table style="border: solid;">
                    <thead>
                        <tr>
                            <th name="tarifRefCell">Tarif de Référence</th>
                            <th>Cotisation annuelle HT</th>
                            <th>Cotisation annuelle TTC</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td name="tarifRefCell">
                                <input id="tarifRef" name="tarifRef" type="text" disabled>
                            </td>
                            <td>
                                <input id="cotisationAnnuelleHT" name="cotisationAnnuelleHT" type="text"
                                    placeholder="Ex : 1000€" value="" required>
                                <span id="cotisationAnnuelleHT-error" class="helper-text red-text"></span>
                            </td>
                            <td>
                                <input id="cotisationAnnuelle" name="cotisationAnnuelle" type="text"
                                    placeholder="Ex : 1000€" value="" required>
                                <span id="cotisationAnnuelle-error" class="helper-text red-text"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>


            <span id="cotAnnHTMessage" class="helper-text red-text text-darken-4 bold" style="font-weight: bolder;">
                La cotisation annuelle HT équivaut au tarif
                commercial
            </span>
        </div>
    </div>

    <!-- ------------------------------------------- -->
    <!-- Nouvelle section : Génération et sauvegarde -->
    <!-- ------------------------------------------- -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">save</i><span style="margin-left: 10px;">Enregistrer et poursuivre le parcours
                    :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez enregistrer toutes modifications sur le formulaire :</h6>
            </div>
        </div>

        <button class="btn" type="submit" id="projetFormBtn">Enregistrer et poursuivre le parcours</button>
    </div>
</form>

<!-- --------------------------- -->
<!-- Début de la liste des Modal -->
<!-- --------------------------- -->
<!-- Modal infobulle Mutualiste -->
<div id="modalFranchiseVehiculeTransporte" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h5>Franchise véhicule transporté :</h5>
            <hr>
        </div>
        <div class="row">
            <h6>Il s'agit d'une <strong>exclusion</strong>. Pour effectuer le rachat <strong>veuillez vous référer au
                    recueil de clause</strong> pour intégrer la garantie des véhicules.</h6>
        </div>
        <div class="modal-footer">
            <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
        </div>
    </div>
</div>

<!-- Modal pour gestion des dates par défaut -->
<div id="modalDate" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h5>Format de saisie date :</h5>
            <hr>
        </div>
        <div class="row">
            <h6 class="red-text text-darken-4">Le format de donnée DATE doit respecter cette convention :</h6>
            <p class="indigo-text text-darken-4">- Pour date d'effet et date de fin <b>JJ/MM/AAAA</b><br /></p>
            <p class="indigo-text text-darken-4">- Pour date d'échéance et date de fin <b>JJ/MM</b><br /></p>
        </div>
        <div class="row">
            <h6>Pour des raisons de qualité de la donnée, aucun autre format ne sera possible, vous pouvez toutefois
                utiliser le bouton :</h6>
            <br>
            <center>
                <button class="circle-null" type="button">x</button>
            </center>
            <br>
            <h6>Vos CP seront alors renseignées avec la mention "A PRECISER" à la place de ladite DATE.</h6>
        </div>
    </div>
    <div class="modal-footer">
        <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
</div>

<!-- Modal Animaux Vivants -->
<div id="modalAnimauxVivants" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h5>Demande PASS animaux vivants :</h5>
            <hr>
        </div>
        <div class="row">
            <h6>Vous devez faire une <strong>demande de dépassement de pouvoirs</strong> pour pouvoir garantir<strong>
                    les animaux vivants</strong></h6>
        </div>
        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez cliquer sur <strong> « Demande PASS » </strong> pour faire la
                demande sur l'outil <strong>« PASS »</h6>
            <br>
            <button id="depassement" class="btn"
                onclick="window.open('https://ajir.axa-fr.intraxa/secure/RapidBoard.jspa?rapidView=24786&projectKey=ASIARD&quickFilter=47050', '_blank');">
                Demande PASS </button>
        </div>
    </div>
    <div class="modal-footer">
        <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
</div>


<!-- MODAL modification & liaison tarif -->
<div id="modalModif" class="modal modalAlert">
    <div class="modal-content">
        <h4>Attention</h4>
        <p>
            Si vous modifiez cette information, la prime calculée à l'étape "Tarif" sera incorrecte, ce qui entraînera
            la suppression du tarif de référence associé à ce contrat.
        </p>

        <p>Cela s'applique aux informations suivantes :</p>
        <ul class="modalRed">
            <li>Activité assurée</li>
            <li>Garanties</li>
            <li>Extensions de Garanties impactant le tarif</li>
            <li>Type de Cotisation (avec un type de contrat en cotisation forfaitaire) </li>
        </ul>
    </div>
    <div class="modal-footer">
        <a id="modif-OK" class="modal-close waves-effect btn-flat red darken-1">Modifier dans Tarif</a>
        <a id="modif-NO" class="modal-close waves-effect btn-flat indigo darken-4">Annuler</a>
    </div>
</div>

<!-- MODAL client ou intermediaire absent -->
<div id="modalClientInter" class="modal modalAlert">
    <div class="modal-content">
        <h4>Attention</h4>
        <p>
            Pour générer les conditions particulières, vous devez renseigner les informations manquantes suivantes :
        </p>

        <ul>
            <li id="list-client" style="display: none;">Client</li>
            <li id="list-inter" style="display: none;">Intermédiaire</li>
        </ul>
    </div>
    <div class="modal-footer">
        <a id="modal-client" class="modal-close waves-effect waves-green btn-flat" style="display: none;">Ajouter un client</a>
        <a id="modal-inter" class="modal-close waves-effect waves-green btn-flat"  style="display: none;">Ajouter un intermediaire</a>
        <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
</div>


<!-- MODAL COTISATION AU CA -->
<div id="modalCotCA" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h4>Attention</h4>
            <hr>

            <p id="modalComment-content">
                Si vous optez pour le changement du type de révision en cotisation au chiffre d'affaires, cela
                entraînera la suppression du tarif associé à ce parcours.
            </p>
        </div>
        <div class="modal-footer">
            <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
        </div>
    </div>
</div>