<form id="tarifFormTPPC">
    <h5>
        Formulaire de tarification TPPC
    </h5>
    <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 tarif</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>

    <div>
        <div class="header">
            <div class="chapter">
                <i class="material-icons">group</i><span style="margin-left: 10px;">Informations sur le client
                    :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez renseigner les informations sur l'entreprise
                    ci-dessous :</h6>
            </div>
        </div>
        <div class="row" id="row-typeContrat">
            <div class="subdiv">
                <label>Type de contrat :</label>
            </div>

            <label>
                <input name="typeContrat" id="cotisationDetaillee" type="radio" value="detaillee" checked />
                <span>Cotisation détaillée par type de véhicule</span>
            </label>
            <label>
                <input name="typeContrat" id="cotisationEnsemble" type="radio" value="ensemble" />
                <span>Cotisation forfaitaire pour l'ensemble des véhicules</span>
            </label>
        </div>
        <div class="mrg padding-bottom grille-flex">
            <div id="col-activite">
                <label for="activite" class="left">Activité de l'assuré</label>
                <div class="input-field" style="margin : 0">
                    <input id="activite" class="autocomplete" type="text" placeholder="Ex: Fabricant">
                </div>
                <span id="activite-error" class="helper-text red-text"></span>
                <div class="chip modulo " id="chip-modulo-activite" style="display: none;">
                    Mod. activité : x2
                </div>
            </div>
            <div id="col-flotte">
                <label for="flotte" class="left">Nombre de véhicules assurés</label>
                <div class="input-field" style="margin : 0">
                    <input id="flotte" type="number" placeholder="Ex: 3">
                </div>
                <span id="flotte-error" class="helper-text red-text"></span>
                <div class="chip modulo" id="chip-modulo-flotte" style="display: none;">
                    Mod. flotte : x2
                </div>
            </div>

            <div id="col-capitalVehicule">
                <label for="capitalVehicule" class="left">Capital à garantir par véhicule</label>
                <input id="capitalVehicule" type="number" placeholder="Ex: 100 (en €)">
                <span id="capitalVehicule-error" class="helper-text red-text"></span>
            </div>

            <div id="col-marAssuree">
                <div class="left-align">
                    <label>Marchandise assurée</label>
                </div>
                <div class="input-field">
                    <div id="selected-mar">
                        <div class="chip select-chip" id="marOrdinaires-chip">Ordinaires</div>
                        <div class="chip select-chip" id="marBennes-chip">Bennes</div>
                        <div class="chip select-chip" id="marDenreesHorsTemp-chip">Denrées périssables hors température
                            dirigée</div>
                        <div class="chip select-chip" id="marAuto-chip">Véhicules automobiles</div>
                        <div class="chip select-chip" id="marRisques-chip">Risques exclus et réservés</div>
                        <div class="chip select-chip" id="marEngins-chip">Engins</div>
                        <div class="chip select-chip" id="marCiternes-chip">Citernes</div>
                        <div class="chip select-chip" id="marAnimaux-chip">Animaux Vivants</div>
                        <div class="chip select-chip" id="marDenreesSousTemp-chip">Denrées périssables sous température
                            dirigée</div>
                        <div class="chip select-chip" id="marEnExpo-chip">Marchandises en Exposition</div>
                    </div>
                    <select multiple id="marAssuree" name="marAssuree">
                        <option value="" disabled selected>Marchandise assurée:</option>
                    </select>
                </div>
                <div class="chip modulo " id="chip-modulo-marAssuree" style="display: none;">
                    Mod. marchandise : x2
                </div>
            </div>
            <div id="col-garSouhaitees">
                <div class="subdiv">
                    <div style="display: flex;justify-content: space-between; align-items: flex-end;">
                        <label>Garanties souhaitées</label>
                        <a class="waves-effect waves-light btn grille-garanties" id="bouton-grille">
                            <i class="material-icons">grid_on</i>
                        </a>
                    </div>
                    <hr />
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <label>
                        <input type="checkbox" id="garSouhaitees-IAC" name="garSouhaitees" class="filled-in" value="IAC"
                            checked disabled />
                        <span id="garSouhaitees-IAC-text">Garantie IAC</span>
                    </label>

                    <label>
                        <input type="checkbox" id="garSouhaitees-HIAC" name="garSouhaitees" class="filled-in"
                            value="HIAC" />
                        <span id="garSouhaitees-HIAC-text">Garantie HIAC</span>
                    </label>

                    <label>
                        <input type="checkbox" id="garSouhaitees-vol" name="garSouhaitees" class="filled-in"
                            value="Vol" />
                        <span id="garSouhaitees-IAC-vol">Garantie Vol</span>
                    </label>
                </div>
                <span id="garSouhaitees-error" class="helper-text"></span>
            </div>
        </div>
        <div class="row" id="row-tarification-vehicules">
            <div>
                <div class="row">
                    <h6 class="red-text text-darken-4">Veuillez lister les types de véhicules :</h6>
                    <span class="red-text" id="message-BenneTousRisques" style="display: none;"> 
                        Vous ne pouvez pas choisir la garantie tous risques avec le type de véhicule Benne <u>OU</u> type de marchandise Bennes
                    </span>

                </div>
                <div class="card">
                    <table id="empTableTarifVehicules">
                        <tr id="header">
                            <th>Type de véhicule</th>
                            <th>Capital par véhicule</th>
                            <th>Garanties souscrites</th>
                            <th>Type de Marchandise</th>
                            <th>Nombre de véhicules</th>
                            <th>Prime par véhicule (€)</th>
                            <th>Prime totale (€)</th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr id="inputRow" name="tarifRow">
                            <td id="td-typeVehTarif">
                                <input name="typeVehTarif" id="typeVehTarif" placeholder="Ex: Voiture" />
                            </td>
                            <td><input type="number" name="capitalTarif" id="capitalTarif" min="0" placeholder="Non défini" />
                            </td>
                            <td> <select id="garTarif" name="garTarif">
                                    <option value="" disabled selected>Garanties souscrites:
                                    </option>
                                    <option value="IAC">IAC</option>
                                    <option value="IAC+HIAC">IAC + Hors IAC</option>
                                    <option value="IAC+Vol">IAC + Vol</option>
                                    <option value="IAC+HIAC+Vol">IAC + hors IAC + Vol</option>
                                </select>
                            </td>
                            <td id="td-typeMarTarif"> 
                                <select id="typeMarTarif" name="typeMarTarif">
                                    <option value="" disabled selected>Type de marchandise:
                                    </option>
                                </select>
                            </td>
                            <td>
                                <input type="number" name="nbVehiculesTarif" id="nbVehiculesTarif"
                                    placeholder="Non défini" value="0" />
                            </td>
                            <td>
                                <input type="number" name="primeVehTarif" id="primeVehTarif" min="0" placeholder="Non défini" />
                            </td>
                            <td>
                                <input type="number" name="primeHTTarif" id="primeHTTarif" min="0" placeholder="Non défini" />
                            </td>

                            <td>
                                <div class="chip modulo" name="moduloTarif" id="modulo-mar-tarif-0"
                                    style="display : none">
                                    Mod. Marchandise : x2
                                </div>
                                <input type="number" name="modulo" id="modulo" disabled style="display : none" />
                            </td>
                            <td><button class="btn" type="button" id="btnAddTypeVehicule">
                                    <i class="material-icons">add</i></button></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="col-sinistre">
        <div class="chapter">
            <i class="material-icons">time_to_leave</i>
            <span style="margin-left: 10px;">Montant de sinistres annuels</span>
        </div>
        <h6 class="red-text text-darken-4">Veuillez renseigner le montant de sinistres annuels : </h6>

        <div class="subdiv">
            <label>Montant de sinistres annuels</label>
        </div>

        <div class="mrg grille-flex">
            <div>
                <label for="sinistre" class="left"></label>
                <input id="sinistre" type="number" placeholder="Ex: 100 (en €)">
                <span id="sinistre-error" class="helper-text red-text"></span>
                <div class="chip modulo " id="chip-modulo-sinistre" style="display : none">
                    Mod. sinistre : x2
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col s12 m4" id="card-tarif-par-vehicule">
            <div class="card indigo darken-4 tarif-card">
                <div class="card-content white-text">
                    <p>Tarif de base par véhicule (hors modulations) :</p>
                    <p class="tarif-module" id="tarif-par-vehicule">
                        0 €
                    </p>
                </div>
            </div>
        </div>
        <div class="col s12 m4" id="card-tarif-total-vehicule">
            <div class="card indigo darken-4  tarif-card">
                <div class="card-content white-text">
                    <p>Tarif de base pour l'ensemble des véhicules (hors modulations) :</p>
                    <p class="tarif-module" id="tarif-total-vehicule">
                        0 €
                    </p>
                </div>
            </div>
        </div>
        <div class="col s12 m4" id="card-nbr-vehicule">
            <div class="card indigo darken-4  tarif-card">
                <div class="card-content white-text">
                    <p>Tarif modulé en fonction du nombre de véhicule avant application franchise :</p>
                    <p class="tarif-module" id="tarif-nbr-vehicule">
                        0 €
                    </p>
                </div>
            </div>
        </div>
        <div class="col s12 m4" id="card-tarif-mod-mar">
            <div class="card indigo darken-4  tarif-card">
                <div class="card-content white-text">
                    <p>Tarif incluant la modulation marchandises :</p>
                    <p class="tarif-module" id="tarif-mod-mar">
                        0 €
                    </p>
                </div>
            </div>
        </div>
        <div class="col s12 m4" id="card-tarif-mod">
            <div class="card indigo darken-4  tarif-card">
                <div class="card-content white-text">
                    <p>Tarif modulé avant application franchise :</p>
                    <p class="tarif-module" id="tarif-mod">
                        0 €
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="chapter">
            <i class="material-icons">check_box</i>
            <span style="margin-left: 10px;">Garanties additionnelles</span>
        </div>

        <h6 class="red-text text-darken-4">Veuillez renseigner les garanties additionnelles du contrat :
        </h6>

        <div class="col s12 m4 garAdd">
            <div class="card">

                <div class="card-title">
                    <label>
                        <input type="checkbox" id="marEnExpo" />
                        <span>Marchandises en Exposition</span>
                    </label>
                </div>
                <div class="card-content" id="marEnExpo-div" style="display: none">
                    <hr />
                    <div class="subdiv left-align">
                        <label class="left">Nombre d'expositions</label>
                    </div>
                    <input id="nombreExposition" name="nombreExposition" type="number" value="" placeholder="Ex : 3">
                    <span class="helper-text"></span>

                    <div class="subdiv left-align">
                        <label class="left">Capital à assurer</label>
                    </div>
                    <input id="capitalExposition" name="capitalExposition" type="number" value=""
                        placeholder="Ex : 100 (€)">
                    <span class="helper-text"></span>
                    <div class="subdiv left-align" style="width: 100%;">
                        <label>Type de Marchandises</label>
                        <hr />
                    </div>
                    <select id="typeMarEnExp" name="typeMar">
                        <option value="" disabled selected>Type de Marchandise:</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="row-propositions">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">credit_card</i>
                <span style="margin-left: 10px;">Propositions tarifaires (Hors taxes)</span>
            </div>
            <h6 class="red-text text-darken-4">Veuillez sélectionner la proposition tarifaire adaptée :
            </h6>

            <div class="row" id="propositions" style="display : none">
                <div class="col s12 m3">
                    <div class="franchise-card card border" id="150">
                        <div class="red darken-3 white-text card-tarif-head">
                            <div class="card-tarif-head-content">
                                <span>Franchise 150€</span> <br/>
                                <span class="price" id="proposition-150">0.00€</span>
                            </div>
                        </div>
                        <div class="card-content no-padding txt-color">
                            <p id="mod-activite-150">Modulation Activité : +0%</p>
                            <p id="mod-marchandise-150">Modulation Marchandise : 0%</p>
                            <p id="mod-ca-150">Modulation Flotte : 0%</p>
                            <p id="mod-franchise-150">Modulation Franchise : 0%</p>
                            <p id="prime-vehicule-150">Prime par véhicule : 0€</p>
                        </div>
                        <div class="card-action">
                            <button class="btn" type="submit" name="150">Choisir</button>
                        </div>
                    </div>
                </div>
                <div class="col s12 m3">
                    <div class="franchise-card card border" id="300">
                        <div class="card-tarif-head card-tarif-head-content orange darken-4 white-text">
                            <div class="card-tarif-head-content">
                                <span>Franchise 300€</span> <br/>
                                <span class="price" id="proposition-300">0.00€</span>
                            </div>
                        </div>
                        <div class="card-content no-padding txt-color">
                            <p id="mod-activite-300">Modulation Activité : +0%</p>
                            <p id="mod-marchandise-300">Modulation Marchandise : 0%</p>
                            <p id="mod-ca-300">Modulation Flotte : 0%</p>
                            <p id="mod-franchise-300">Modulation Franchise : 0%</p>
                            <p id="prime-vehicule-300">Prime par véhicule : 0€</p>
                        </div>
                        <div class="card-action">
                            <button class="btn" type="submit" name="300">Choisir</button>
                        </div>
                    </div>
                </div>
                <div class="col s12 m3">
                    <div class="franchise-card card border" id="mini150">
                        <div class="yellow darken-3 white-text card-tarif-head">
                            <div class="card-tarif-head-content">
                                <span>5% avec mini 150 € et maxi 1000 €</span> <br/>
                                <span class="price" id="proposition-mini150">0.00€</span>
                            </div>
                        </div>
                        <div class="card-content no-padding txt-color">
                            <p id="mod-activite-mini150">Modulation Activité : 0%</p>
                            <p id="mod-marchandise-mini150">Modulation Marchandise : 0%</p>
                            <p id="mod-ca-mini150">Modulation Flotte : 0%</p>
                            <p id="mod-franchise-mini150">Modulation Franchise : 0%</p>
                            <p id="prime-vehicule-mini150">Prime par véhicule : 0€</p>
                        </div>
                        <div class="card-action">
                            <button class="btn" type="submit" name="mini150">Choisir</button>
                        </div>
                    </div>
                </div>
                <div class="col s12 m3">
                    <div class="franchise-card card border" id="mini300">
                        <div class="green darken-3 white-text card-tarif-head">
                            <div class="card-tarif-head-content">
                                <span>10% avec mini 300 € et maxi 2000 €</span> <br/>
                                <span class="price" id="proposition-mini300">0.00€</span>
                             </div>
                        </div>
                        <div class="card-content no-padding txt-color">
                            <p id="mod-activite-mini300">Modulation Activité : 0%</p>
                            <p id="mod-marchandise-mini300">Modulation Marchandise : 0%</p>
                            <p id="mod-ca-mini300">Modulation Flotte : 0%</p>
                            <p id="mod-franchise-mini300">Modulation Franchise : 0%</p>
                            <p id="prime-vehicule-mini300">Prime par véhicule : 0€</p>
                        </div>
                        <div class="card-action">
                            <button class="btn" type="submit" name="mini300">Choisir</b>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="row-champsManquants">
            <p class="red-text">
                Veuillez renseigner les champs manquants :
            </p>
            <div>
                <div class="chip" id="chip-act">Activité</div>
                <div class="chip" id="chip-sinistre">Montant de Sinistres Annuels</div>
                <div class="chip" id="chip-marAssuree">Marchandise assurée</div>
            </div>
        </div>

    </div>
</form>

<!-- MODAL Commentaires -->
<div id="modalTarifCom" class="modal">
    <div class="modal-content">


        <div class="mrg row" style="margin-top: 2rem;">
            <p id="tarifRefText" style="font-size: 2rem">Tarif de Référence : 00.00€</p>
            <div id="qualiteDiv" style="display: none;">
                <span class="material-icons" id="modalTarifCom-icon">
                    mood_bad
                </span>
                <p id="qualitePrime">99.99%</p>
            </div>

            <h6 class="red-text text-darken-4"> Veuillez renseigner un tarif commercial</h6>

            <div style="display: flex; justify-content: center; margin-top: 2rem;">
                <div>
                    <label for="tarifCom" class="left">Tarif Commercial</label>
                    <div class="input-field" style="width : 20rem">
                        <input id="tarifCom" type="number">
                        <span id="tarifCom-error" class="helper-text red-text" style="display: none;"> Merci d'ajouter
                            un commentaire
                            explicatif pour justifier cette différence ou modifier le tarif
                            commercial</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="col-commentaire" style="display: none; justify-content: center">
            <div style="width : 40rem">
                <input id="commentaire" name="commentaire" placeholder="Commentaires" value="">
                <span id="commentaire-error" class="helper-text red-text"></span>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button id="comm-OK" class="waves-effect waves-light btn indigo darken-4">Valider</button>
        <button id="comm-cancel" class="modal-close waves-effect waves-light btn red darken-1">Annuler</button>
    </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>

<div id="modalGrille" class="modal">
    <div class="modal-content">
        <h4>Grille tarifaire TPPC</h4>
        <div style="overflow:auto;">
            <table class="striped centred responsive-table">
                <thead>
                    <tr>
                        <th>Montant Garanti</th>
                        <th>IAC</th>
                        <th>HIAC</th>
                        <th>IAC + HIAC</th>
                        <th>VOL</th>
                        <th>IAC + VOL</th>
                        <th>TOUS RISQUES</th>
                    </tr>
                </thead>

                <tbody id="bodyGrilleCotisation">
                    <tr>
                        <td>3000 €</td>
                        <td>48 €</td>
                        <td>24 €</td>
                        <td>72 €</td>
                        <td>48 €</td>
                        <td>96 €</td>
                        <td>120 €</td>
                    </tr>
                    <tr>
                        <td>5000 €</td>
                        <td>60 €</td>
                        <td>30 €</td>
                        <td>90 €</td>
                        <td>60 €</td>
                        <td>120 €</td>
                        <td>150 €</td>
                    </tr>
                    <tr>
                        <td>10000 €</td>
                        <td>84 €</td>
                        <td>42 €</td>
                        <td>126 €</td>
                        <td>84 €</td>
                        <td>168 €</td>
                        <td>210 €</td>
                    </tr>
                    <tr>
                        <td>15000 €</td>
                        <td>100 €</td>
                        <td>50 €</td>
                        <td>150 €</td>
                        <td>100 €</td>
                        <td>200 €</td>
                        <td>250 €</td>
                    </tr>
                    <tr>
                        <td>20000 €</td>
                        <td>124 €</td>
                        <td>62 €</td>
                        <td>186 €</td>
                        <td>124 €</td>
                        <td>248 €</td>
                        <td>310 €</td>
                    </tr>
                    <tr>
                        <td>25000 €</td>
                        <td>152 €</td>
                        <td>76 €</td>
                        <td>228 €</td>
                        <td>152 €</td>
                        <td>304 €</td>
                        <td>380 €</td>
                    </tr>
                    <tr>
                        <td>30000 €</td>
                        <td>166 €</td>
                        <td>83 €</td>
                        <td>249 €</td>
                        <td>166 €</td>
                        <td>332 €</td>
                        <td>415 €</td>
                    </tr>
                    <tr>
                        <td>35000 €</td>
                        <td>200 €</td>
                        <td>100 €</td>
                        <td>300 €</td>
                        <td>200 €</td>
                        <td>400 €</td>
                        <td>500 €</td>
                    </tr>
                    <tr>
                        <td>40000 €</td>
                        <td>220 €</td>
                        <td>110 €</td>
                        <td>330 €</td>
                        <td>220 €</td>
                        <td>440 €</td>
                        <td>550 €</td>
                    </tr>
                    <tr>
                        <td>45000 €</td>
                        <td>240 €</td>
                        <td>120 €</td>
                        <td>360 €</td>
                        <td>240 €</td>
                        <td>480 €</td>
                        <td>600 €</td>
                    </tr>
                    <tr>
                        <td>50000 €</td>
                        <td>252 €</td>
                        <td>126 €</td>
                        <td>378 €</td>
                        <td>252 €</td>
                        <td>504 €</td>
                        <td>630 €</td>
                    </tr>
                    <tr>
                        <td>60000 €</td>
                        <td>300 €</td>
                        <td>150 €</td>
                        <td>450 €</td>
                        <td>300 €</td>
                        <td>600 €</td>
                        <td>750 €</td>
                    </tr>
                    <tr>
                        <td>70000 €</td>
                        <td>332 €</td>
                        <td>166 €</td>
                        <td>498 €</td>
                        <td>332 €</td>
                        <td>664 €</td>
                        <td>830 €</td>
                    </tr>
                    <tr>
                        <td>80000 €</td>
                        <td>356 €</td>
                        <td>178 €</td>
                        <td>534 €</td>
                        <td>356 €</td>
                        <td>712 €</td>
                        <td>890 €</td>
                    </tr>
                    <tr>
                        <td>90000 €</td>
                        <td>376 €</td>
                        <td>188 €</td>
                        <td>564 €</td>
                        <td>376 €</td>
                        <td>752 €</td>
                        <td>940 €</td>
                    </tr>
                    <tr>
                        <td>100000 €</td>
                        <td>400 €</td>
                        <td>200 €</td>
                        <td>600 €</td>
                        <td>400 €</td>
                        <td>800 €</td>
                        <td>1000 €</td>
                    </tr>
                    <tr>
                        <td>150000 €</td>
                        <td>420 €</td>
                        <td>210 €</td>
                        <td>630 €</td>
                        <td>420 €</td>
                        <td>840 €</td>
                        <td>1050 €</td>
                    </tr>
                    <tr>
                        <td>200000 €</td>
                        <td>432 €</td>
                        <td>216 €</td>
                        <td>648 €</td>
                        <td>432 €</td>
                        <td>864 €</td>
                        <td>1080 €</td>
                    </tr>
                    <tr>
                        <td>250000 €</td>
                        <td>444 €</td>
                        <td>222 €</td>
                        <td>666 €</td>
                        <td>444 €</td>
                        <td>888 €</td>
                        <td>1110 €</td>
                    </tr>
                    <tr>
                        <td>300000 €</td>
                        <td>456 €</td>
                        <td>228 €</td>
                        <td>684 €</td>
                        <td>456 €</td>
                        <td>912 €</td>
                        <td>1140 €</td>
                    </tr>
                    <tr></tr>
                </tbody>

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