@csrf
<ul class="nav nav-underline" id="myTab" role="tablist">
  <li class="nav-item"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#tab-home" role="tab" aria-controls="tab-home" aria-selected="true">Informations principales</a></li>
  <li class="nav-item"><a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#tab-profile" role="tab" aria-controls="tab-profile" aria-selected="false">Compositions</a></li>
  <li class="nav-item"><a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#tab-contact" role="tab" aria-controls="tab-contact" aria-selected="false">Documents</a></li>
</ul>
<div class="tab-content mt-3" id="myTabContent">

    <div class="tab-pane fade show active" id="tab-home" role="tabpanel" aria-labelledby="home-tab">

           <div class="row g-2 mt-2">
                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                    
                            <label for="referenceLocation" class="FormLabel">Référence</label>
                            <input type="text" class="form-control referenceLocation" id="referenceLocation" name="referenceLocation" readonly>
                            <input type="hidden" class="form-control referenceNumerique" id="referenceNumerique" name="referenceNumerique" readonly>
                </div>
                
                <div class="col-md-2 col-sm-2 col-lg-2 col-xl-2">
                  <label for="validationCustom01" class="FormLabel">Date début contrat</label>
                                <input value="04/10/2026" class="form-control datetimepicker dateDebLocation" name="dateDebLocation" id="datepicker" type="text" placeholder="dd/mm/yyyy" data-options='{"disableMobile":true,"dateFormat":"d/m/Y"}' required />
                                <div class="invalid-dateDeb">
                                </div>

                </div> 
                <div class="col-md-2 col-sm-2 col-lg-2 col-xl-2">

                            <label for="datereevaluation" class="FormLabel">Prochaine réévaluation</label>
                           <input value="04/10/2026" class="form-control datetimepicker datereevaluation" name="datereevaluation" id="datepicker" type="text" placeholder="dd/mm/yyyy" data-options='{"disableMobile":true,"dateFormat":"d/m/Y"}'/>
                           <div class="invalid-dateDeb">
                           </div>
                </div>

                <div class="col-md-2 col-sm-2 col-lg-2 col-xl-2">

                            <label for="dureeBail" class="FormLabel">Durée du bail</label>
                          
                           <select class="form-select dureeBailSelect" id="dureeBailSelect" name="dureeBailSelect">
                                    <option  value="1">1 an</option>
                                    <option  value="2">2 ans</option>
                                    <option  value="3">3 ans</option>
                                    <option  value="4">6 ans</option>
                                    <option  value="5">9 ans</option>
                                    <option  value="6">Autres</option>
                                </select>
                                <div class="invalid-feedback">
                                   
                                </div>
                          
                </div>



                <input type="hidden" class="form-control IdLocationInput" value="0" id="IdLocationInput" name="IdLocationInput" readonly>
                <input type="hidden" class="form-control IdGarantInput" value="0" id="IdGarantInput" name="IdGarantInput[]" readonly>


                <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">

                        <label for="LocataireSelect" class="FormLabel">Locataire</label>
                        <select class="form-select LocataireSelect Pselect2X" id="LocataireSelect" name="Locataire" required>
                            <option selected disabled value="">Choisir...</option>
                        </select>
                        <div class="invalid-feedback">
                            Locataire obligatoire
                        </div>
                            
                </div>

            </div>
            
            <div class="row g-2">
            
                <div class="col-md-3">
                        <label for="BienSelect" class="FormLabel">Bien</label>
                            <select class="form-select Bien Pselect2X" id="BienSelect" name="BienLocation" required>
                                <option selected disabled value="">Choisir...</option>
                            </select>
                            <div class="invalid-feedback">
                                Bien obligatoire
                            </div>
                </div>
                <div class="col-md-3">

                            <label for="StatutLocationSelect" class="FormLabel">Statut Location</label>
                            <select class="form-select StatutLocation" id="StatutLocationSelect" name="StatutLocation" required>
                                <option selected value="1">En cours</option>
                                <option value="2">En attente</option>
                                <option value="3">Clôturé</option>
                            </select>
                            <div class="invalid-feedback">
                                Statut obligatoire
                            </div>
                </div>
                <div class="col-md-3">

                            <label for="IndiceRevisionSelect" class="FormLabel">Indice de révision</label>
                            <select class="form-select IndiceRevisionSelect" id="IndiceRevisionSelect" name="IndiceRevisionSelect">
                                <option selected disabled value="">Choisir...</option>
                            </select>
                            <div class="invalid-feedback">
                                Bien obligatoire
                            </div>
                </div>


                <div class="col-md-3">

                         <label for="TrimestreRefSelect" class="FormLabel">Trimestre de référence</label>
                                <select class="form-select TrimestreRefSelect" id="TrimestreRefSelect" name="TrimestreRefSelect">
                                    <option  value="1">1er</option>
                                    <option  value="2">2ème</option>
                                    <option  value="3">3ème</option>
                                    <option  value="4">4ème</option>
                                </select>
                                <div class="invalid-feedback">
                                   
                                </div>
                </div> 
            </div>

            <br>
  
            <div class="d-flex">
                <h5>::. Garant</h5>
                <div class="gradient-background1" style="width:93%;height:1px;margin-top:13px;margin-left:3px"></div>
            </div>

            <div class="row g-3 mt-2">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table style="width:100%">
                            <tbody id="GarranspaceField">

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

            </div>
   

            <div class="d-flex mt-4">
                <h5>::. Paramètres de facturation</h5>
                <div class="gradient-background" style="width:78.5%;height:1px;margin-top:13px;margin-left:3px"></div>
            </div>

             <input type="hidden" class="form-control QtePeriodicite" id="QtePeriodicite" name="QtePeriodicite">

            <div class="row g-3">

                <div class="col-xl-3">
                                           <label for="MtTTC" class="FormLabel">Montant de la location</label>
                                            <input type="text" class="form-control MtTTC" id="MtTTC" name="MtTTC" required>
                                            <div class="FormLabel MtTTCRequired text-danger">
                                            </div>
                                            <div class="invalid-feedback">
                                                Montant obligatoire
                                            </div>
                </div>

                <div class="col-xl-2">

                                           <label for="QteCaution" class="FormLabel">Nombre mois caution</label>
                                            <input type="text" class="form-control QteCaution" id="QteCaution" name="QteCaution" required>
                                            <div class="FormLabel QteCaution text-danger">
                                            </div>
                                            <div class="invalid-feedback">
                                               
                                            </div>
                
                </div>

                <div class="col-xl-2">

                                           <label for="CautionLoyer" class="FormLabel">Montant caution</label>
                                            <input type="text" class="form-control CautionLoyer" id="CautionLoyer" name="CautionLoyer" required>
                                            <div class="invalid-feedback">
                                                Caution obligatoire
                                            </div>
                
                </div>


                 <div class="col-xl-2">

                                            <label for="ValeurFraisR" class="FormLabel">Frais de retard</label>
                                            <input type="text" min="0" class="form-control ValeurFraisR" id="ValeurFraisR" name="ValeurFraisR">
                
                </div>
                <div class="col-xl-1">

                                             <label for="TypeFraisR" class="FormLabel">Type</label>
                                            <select class="form-select TypeFraisR" id="TypeFraisR" name="TypeFraisR" required>
                                                <option value="%">%</option>
                                                <option value="F">Monnétaire</option>
                                            </select>
                
                </div>


                 <div class="col-xl-2">

                                           <label for="Periodicite" class="FormLabel">Périodicité</label>
                                            <select class="form-select Periodicite" id="Periodicite" name="Periodicite" required>
                                                <option  disabled value="">Choisir...</option>
                                                <option value="1">Journalier</option>
                                                <option value="2">Hebdomadaire</option>
                                                <option selected value="3">Mensuelle</option>
                                                <option value="4">Trimestrielle</option>
                                                <option value="5">Semestrielle</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Périodicité obligatoire
                                            </div>
                </div>


               

                {{-- <div class="col-md-12 col-sm-12 col-lg-12 col-xl-12 ">
                    <div class="card" style="border:none">
                        <div class="card-body">

                            <div class="row g-3">
                                <div class=" col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label for="MtTTC" class="FormLabel">Montant HT <i title="Montant HT de la location" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" class="form-control MtTTC" id="MtTTC" name="MtTTC" required>
                                            <div class="FormLabel MtTTCRequired text-danger">
                                            </div>
                                            <div class="invalid-feedback">
                                                Montant HT obligatoire
                                            </div>
                                        </div>

                                         <div class="col-md-3">
                                            <label for="QteCaution" class="FormLabel">Nbre mois <i title="Nombre de mois de caution" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" class="form-control QteCaution" id="QteCaution" name="QteCaution" required>
                                            <div class="FormLabel QteCaution text-danger">
                                            </div>
                                            <div class="invalid-feedback">
                                               
                                            </div>
                                        </div>

                                        <div class="col-md-5">
                                            <label for="CautionLoyer" class="FormLabel">Caution</label>
                                            <input type="text" class="form-control CautionLoyer" id="CautionLoyer" name="CautionLoyer" required>
                                            <div class="invalid-feedback">
                                                Caution obligatoire
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                    <div class="row g-3">

                                        <div class="col-md-6">
                                            <label for="ValeurFraisR" class="FormLabel">Frais de retard</label>
                                            <input type="text" min="0" class="form-control ValeurFraisR" id="ValeurFraisR" name="ValeurFraisR">
                                        </div>

                                        <div class="col-md-6">
                                            <label for="TypeFraisR" class="FormLabel">Type</label>
                                            <select class="form-select TypeFraisR" id="TypeFraisR" name="TypeFraisR" required>
                                                <option value="%">%</option>
                                                <option value="F">Monnétaire</option>
                                            </select>
                                        </div>

                                    </div>

                                </div>


                                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">

                                    <div class="row g-3">

                                        <div class="col-md-6">

                                            <label for="Periodicite" class="FormLabel">Périodicité</label>
                                            <select class="form-select Periodicite" id="Periodicite" name="Periodicite" required>
                                                <option  disabled value="">Choisir...</option>
                                                <option value="1">Journalier</option>
                                                <option value="2">Hebdomadaire</option>
                                                <option selected value="3">Mensuelle</option>
                                                <option value="4">Trimestrielle</option>
                                                <option value="5">Semestrielle</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Périodicité obligatoire
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="TypeBail" class="FormLabel">Type de bail</label>
                                            <select class="form-select TypebailSelect TypeBail" id="TypeBail" name="TypeBail" required>
                                                <option selected disabled value="">Choisir...</option>
                                                <option value="1">BAIL COMMERCIAL</option>
                                                <option value="2">BAIL RESIDENTIEL</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Type de bail obligatoire
                                            </div>
                                        </div>

                                    </div>

                                </div>

                                <div class="col-md-2 col-sm-2 col-lg-2 col-xl-2">

                                            <label for="JourFacturation" class="FormLabel">Jour de facturation</label>
                                            <select class="form-select JourFacturation " id="JourFacturation" name="JourFacturation" required>
                                                <option selected disabled value="">Choisir...</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                                <option value="13">13</option>
                                                <option value="14">14</option>
                                                <option value="15">15</option>
                                                <option value="16">16</option>
                                                <option value="17">17</option>
                                                <option value="18">18</option>
                                                <option value="19">19</option>
                                                <option value="20">20</option>
                                                <option value="21">21</option>
                                                <option value="22">22</option>
                                                <option value="23">23</option>
                                                <option value="24">24</option>
                                                <option value="25">25</option>
                                                <option value="26">26</option>
                                                <option value="27">27</option>
                                                <option value="28">28</option>
                                                <option value="29">29</option>
                                                <option value="30">30</option>
                                                <option value="31">31</option>
                                            </select>
                                </div>

                            </div>


                            <div class="row g-3">
                                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                    <div class="row g-3">
                                        <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6">
                                            <label for="" class="FormLabel">Nbre de mois <i title="Nombre de mois d'avance de loyer" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" id="NbreMoisAvanceLoyer" name="NbreMoisAvanceLoyer" class="form-control NbreMoisAvanceLoyer">
                                        </div>

                                        <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6">
                                            <label for="" class="FormLabel">Loyer <i title="Montant mois d'avance" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" id="montantMoisAvance" name="montantMoisAvance" class="form-control montantMoisAvance" readonly>
                                        </div>

                                    </div>
                                        
                                </div> 


                                <div class="col-md-5 col-sm-5 col-lg-5 col-xl-5">
                                        <div class="row g-3">
                                            <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                                <label for="" class="FormLabel">Nbre de mois <i title="Nombre de mois charge" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <input type="text" id="nbreMoisCharge" name="nbreMoisCharge" class="form-control nbreMoisCharge">
                                            </div>


                                            <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                                <label for="" class="FormLabel">Charge <i title="Montant mois de charge" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <input type="text" id="montantMoisCharge" name="montantMoisCharge" class="form-control montantMoisCharge">
                                            </div>

                                            <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                                <label for="" class="FormLabel">Provisions <i title="Provisions de charge" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <select class="form-select ProvisionCharge" id="ProvisionCharge" name="ProvisionCharge">
                                                <option selected disabled value="0">Choisir...</option>
                                                <option value="1">Conservées</option>
                                                <option value="2">Reversées</option>
                                               
                                            </select>
                                            <div class="invalid-feedback">
                                               
                                            </div>
                                            </div>

                                            

                                        </div>
                                </div> 


                                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                    
                                        <div class="row g-3">
                                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6">
                                                <label for="" class="FormLabel">Clim</label>
                                                <input type="text" id="clim" name="clim" class="form-control clim">
                                            </div>

                                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6">
                                                <label for="" class="FormLabel">Eau</label>
                                                <input type="text" id="eau" name="eau" class="form-control eau">
                                            </div>

                                        </div>
                                </div> 


                                <div class="col-md-1 col-sm-1 col-lg-1 col-xl-1">
                                    
                                        <label for="" class="FormLabel">Timbre</label>
                                        <input type="text" id="timbre" name="timbre" class="form-control timbre">
                                </div> 
                        </div>

                        <div class="row g-3">

                                    <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                   
                                            <div class="row g-3">
                                                <div class="col-md-12 col-sm-6 col-lg-6 col-xl-6">
                                                    <label for="NbreJourEcheance" class="FormLabel">Délais paiement</label>
                                                    <input class="form-control  NbreJourEcheance" name="DateEcheance" type="number" min="0" placeholder="Nbre jour" style="" required />
                                                    <div class="invalid-feedback">
                                                        Délais paiement obligatoire
                                                    </div>
                                                </div>

                                                <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                                    <label for="" class="FormLabel">Taxe  <i title="Autre taxe en %" class="fa fa-info-circle cursor-pointer"></i></label>
                                                    <input type="text" id="autreTaxe" name="autreTaxe" class="form-control autreTaxe" readonly>
                                                </div>

                                                <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                                        <label for="" class="FormLabel">TVA  <i title="18% des frais de dossier" class="fa fa-info-circle cursor-pointer"></i></label>
                                                        <input type="text" value="18" id="tvaFraisDossier" name="tvaFraisDossier" class="form-control tvaFraisDossier" readonly>
                                                </div>
                                                
                                            </div>
                                            
                                    </div>

                                    <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                            <label for="" class="FormLabel">Frais de dossier</label>
                                            <input type="text" id="fraisDossier"  name="fraisDossier" class="form-control fraisDossier" readonly>
                                    </div>

                                    <div class="col-md-12 col-sm-4 col-lg-4 col-xl-4">
                                        <div class="row g-3">

                                            <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                                <label for="" class="FormLabel">Taux <i title="Taux honoraire en %" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <input type="text" id="TauxHonoraire"  name="TauxHonoraire" class="form-control TauxHonoraire">
                                                <div class="invalid-feedback">
                                                TVA obligatoire
                                                </div>
                                            </div>

                                            <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                                <label for="" class="FormLabel">TVA <i title="18% des honoraires" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <input type="text" id="TvaHonoraire" value="18" name="TvaHonoraire" class="form-control TvaHonoraire" required>
                                                <div class="invalid-feedback">
                                                TVA obligatoire
                                                </div>
                                            </div>

                                            <div class="col-md-12 col-sm-6 col-lg-6 col-xl-6">
                                                 <label for="" class="FormLabel">Honoraires d'agence</label>
                                                <input type="text" id="honoraireAgence" name="honoraireAgence" class="form-control honoraireAgence" readonly>
                                            </div>
                                        </div>
                                            
                                    </div>

                                    <div class="col-md-12 col-sm-2 col-lg-2 col-xl-2">
                                            <label for="" class="FormLabel">Enregistr. <i title="Enregistrement (2,5% du loyer annuel)" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" id="enregistrementLoyerAnnuel" name="enregistrementLoyerAnnuel" class="form-control enregistrementLoyerAnnuel" readonly>
                                    </div>
                        </div>

                         <div class="row g-3">

                                <div class="col-md-4">

                                    <div style="width:100%; height:40px;border-radius:10px;border:1px dashed gray; margin-top:20px; padding:5px;">

                                        <div class="form-check form-switch">
                                            <input class="form-check-input checkboxProrata" id="flexSwitchCheckCheckedDisabled" name="ProrataCheckbox" type="checkbox" />
                                            <label class="form-check-label text-warning" for="flexSwitchCheckCheckedDisabled">Generer la facture au
                                                prorata</label>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-4">
                                    <label for="NombreDeJourAuProrata" class="FormLabel">Nombre de jour</label>
                                    <input type="text" id="NombreDeJourAuProrata" name="NombreDeJourAuProrata" class="form-control NombreDeJourAuProrata" readonly>
                                </div>

                                <div class="col-md-4">
                                    <label for="" class="FormLabel">Montant à payer</label>
                                    <input type="number" id="MontantAuProrata" name="MontantAuProrata" min="0" readonly class="form-control MontantAuProrata">
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>

            <div class="row g-3">

                <div class="col-xl-3">
                                           <label for="TypeBail" class="FormLabel">Type de bail</label>
                                            <select class="form-select TypebailSelect TypeBail" id="TypeBail" name="TypeBail" required>
                                                <option selected disabled value="">Choisir...</option>
                                                <option value="1">BAIL COMMERCIAL</option>
                                                <option value="2">BAIL RESIDENTIEL</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Type de bail obligatoire
                                            </div>
                </div>

                <div class="col-xl-1">

                                           <label for="JourFacturation" class="FormLabel">J. facturation</label>
                                            <select class="form-select JourFacturation " id="JourFacturation" name="JourFacturation" required>
                                                <option selected disabled value="">Choisir...</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                                <option value="13">13</option>
                                                <option value="14">14</option>
                                                <option value="15">15</option>
                                                <option value="16">16</option>
                                                <option value="17">17</option>
                                                <option value="18">18</option>
                                                <option value="19">19</option>
                                                <option value="20">20</option>
                                                <option value="21">21</option>
                                                <option value="22">22</option>
                                                <option value="23">23</option>
                                                <option value="24">24</option>
                                                <option value="25">25</option>
                                                <option value="26">26</option>
                                                <option value="27">27</option>
                                                <option value="28">28</option>
                                                <option value="29">29</option>
                                                <option value="30">30</option>
                                                <option value="31">31</option>
                                            </select>
                
                </div>

                <div class="col-xl-2">

                                           <label for="" class="FormLabel">Nombre mois d'avance</label>
                                            <input type="text" id="NbreMoisAvanceLoyer" name="NbreMoisAvanceLoyer" class="form-control NbreMoisAvanceLoyer">
                
                </div>


                 <div class="col-xl-2">

                                            <label for="" class="FormLabel">Montant avance</label>
                                            <input type="text" id="montantMoisAvance" name="montantMoisAvance" class="form-control montantMoisAvance" readonly>
                
                </div>
                <div class="col-xl-2">

                                            <label for="NbreJourEcheance" class="FormLabel">Délais paiement</label>
                                            <input class="form-control  NbreJourEcheance" name="DateEcheance" type="number" min="0" placeholder="Nbre jour" style="" required />
                                            <div class="invalid-feedback">
                                                Délais paiement obligatoire
                                            </div>
                
                </div>


                 <div class="col-xl-2">

                                          
                </div>


               

                {{-- <div class="col-md-12 col-sm-12 col-lg-12 col-xl-12 ">
                    <div class="card" style="border:none">
                        <div class="card-body">

                            <div class="row g-3">
                                <div class=" col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label for="MtTTC" class="FormLabel">Montant HT <i title="Montant HT de la location" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" class="form-control MtTTC" id="MtTTC" name="MtTTC" required>
                                            <div class="FormLabel MtTTCRequired text-danger">
                                            </div>
                                            <div class="invalid-feedback">
                                                Montant HT obligatoire
                                            </div>
                                        </div>

                                         <div class="col-md-3">
                                            <label for="QteCaution" class="FormLabel">Nbre mois <i title="Nombre de mois de caution" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" class="form-control QteCaution" id="QteCaution" name="QteCaution" required>
                                            <div class="FormLabel QteCaution text-danger">
                                            </div>
                                            <div class="invalid-feedback">
                                               
                                            </div>
                                        </div>

                                        <div class="col-md-5">
                                            <label for="CautionLoyer" class="FormLabel">Caution</label>
                                            <input type="text" class="form-control CautionLoyer" id="CautionLoyer" name="CautionLoyer" required>
                                            <div class="invalid-feedback">
                                                Caution obligatoire
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                    <div class="row g-3">

                                        <div class="col-md-6">
                                            <label for="ValeurFraisR" class="FormLabel">Frais de retard</label>
                                            <input type="text" min="0" class="form-control ValeurFraisR" id="ValeurFraisR" name="ValeurFraisR">
                                        </div>

                                        <div class="col-md-6">
                                            <label for="TypeFraisR" class="FormLabel">Type</label>
                                            <select class="form-select TypeFraisR" id="TypeFraisR" name="TypeFraisR" required>
                                                <option value="%">%</option>
                                                <option value="F">Monnétaire</option>
                                            </select>
                                        </div>

                                    </div>

                                </div>


                                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">

                                    <div class="row g-3">

                                        <div class="col-md-6">

                                            <label for="Periodicite" class="FormLabel">Périodicité</label>
                                            <select class="form-select Periodicite" id="Periodicite" name="Periodicite" required>
                                                <option  disabled value="">Choisir...</option>
                                                <option value="1">Journalier</option>
                                                <option value="2">Hebdomadaire</option>
                                                <option selected value="3">Mensuelle</option>
                                                <option value="4">Trimestrielle</option>
                                                <option value="5">Semestrielle</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Périodicité obligatoire
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="TypeBail" class="FormLabel">Type de bail</label>
                                            <select class="form-select TypebailSelect TypeBail" id="TypeBail" name="TypeBail" required>
                                                <option selected disabled value="">Choisir...</option>
                                                <option value="1">BAIL COMMERCIAL</option>
                                                <option value="2">BAIL RESIDENTIEL</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Type de bail obligatoire
                                            </div>
                                        </div>

                                    </div>

                                </div>

                                <div class="col-md-2 col-sm-2 col-lg-2 col-xl-2">

                                            <label for="JourFacturation" class="FormLabel">Jour de facturation</label>
                                            <select class="form-select JourFacturation " id="JourFacturation" name="JourFacturation" required>
                                                <option selected disabled value="">Choisir...</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                                <option value="13">13</option>
                                                <option value="14">14</option>
                                                <option value="15">15</option>
                                                <option value="16">16</option>
                                                <option value="17">17</option>
                                                <option value="18">18</option>
                                                <option value="19">19</option>
                                                <option value="20">20</option>
                                                <option value="21">21</option>
                                                <option value="22">22</option>
                                                <option value="23">23</option>
                                                <option value="24">24</option>
                                                <option value="25">25</option>
                                                <option value="26">26</option>
                                                <option value="27">27</option>
                                                <option value="28">28</option>
                                                <option value="29">29</option>
                                                <option value="30">30</option>
                                                <option value="31">31</option>
                                            </select>
                                </div>

                            </div>


                            <div class="row g-3">
                                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                    <div class="row g-3">
                                        <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6">
                                            <label for="" class="FormLabel">Nbre de mois <i title="Nombre de mois d'avance de loyer" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" id="NbreMoisAvanceLoyer" name="NbreMoisAvanceLoyer" class="form-control NbreMoisAvanceLoyer">
                                        </div>

                                        <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6">
                                            <label for="" class="FormLabel">Loyer <i title="Montant mois d'avance" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" id="montantMoisAvance" name="montantMoisAvance" class="form-control montantMoisAvance" readonly>
                                        </div>

                                    </div>
                                        
                                </div> 


                                <div class="col-md-5 col-sm-5 col-lg-5 col-xl-5">
                                        <div class="row g-3">
                                            <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                                <label for="" class="FormLabel">Nbre de mois <i title="Nombre de mois charge" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <input type="text" id="nbreMoisCharge" name="nbreMoisCharge" class="form-control nbreMoisCharge">
                                            </div>


                                            <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                                <label for="" class="FormLabel">Charge <i title="Montant mois de charge" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <input type="text" id="montantMoisCharge" name="montantMoisCharge" class="form-control montantMoisCharge">
                                            </div>

                                            <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                                <label for="" class="FormLabel">Provisions <i title="Provisions de charge" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <select class="form-select ProvisionCharge" id="ProvisionCharge" name="ProvisionCharge">
                                                <option selected disabled value="0">Choisir...</option>
                                                <option value="1">Conservées</option>
                                                <option value="2">Reversées</option>
                                               
                                            </select>
                                            <div class="invalid-feedback">
                                               
                                            </div>
                                            </div>

                                            

                                        </div>
                                </div> 


                                <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                    
                                        <div class="row g-3">
                                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6">
                                                <label for="" class="FormLabel">Clim</label>
                                                <input type="text" id="clim" name="clim" class="form-control clim">
                                            </div>

                                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6">
                                                <label for="" class="FormLabel">Eau</label>
                                                <input type="text" id="eau" name="eau" class="form-control eau">
                                            </div>

                                        </div>
                                </div> 


                                <div class="col-md-1 col-sm-1 col-lg-1 col-xl-1">
                                    
                                        <label for="" class="FormLabel">Timbre</label>
                                        <input type="text" id="timbre" name="timbre" class="form-control timbre">
                                </div> 
                        </div>

                        <div class="row g-3">

                                    <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                                   
                                            <div class="row g-3">
                                                <div class="col-md-12 col-sm-6 col-lg-6 col-xl-6">
                                                    <label for="NbreJourEcheance" class="FormLabel">Délais paiement</label>
                                                    <input class="form-control  NbreJourEcheance" name="DateEcheance" type="number" min="0" placeholder="Nbre jour" style="" required />
                                                    <div class="invalid-feedback">
                                                        Délais paiement obligatoire
                                                    </div>
                                                </div>

                                                <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                                    <label for="" class="FormLabel">Taxe  <i title="Autre taxe en %" class="fa fa-info-circle cursor-pointer"></i></label>
                                                    <input type="text" id="autreTaxe" name="autreTaxe" class="form-control autreTaxe" readonly>
                                                </div>

                                                <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                                        <label for="" class="FormLabel">TVA  <i title="18% des frais de dossier" class="fa fa-info-circle cursor-pointer"></i></label>
                                                        <input type="text" value="18" id="tvaFraisDossier" name="tvaFraisDossier" class="form-control tvaFraisDossier" readonly>
                                                </div>
                                                
                                            </div>
                                            
                                    </div>

                                    <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                            <label for="" class="FormLabel">Frais de dossier</label>
                                            <input type="text" id="fraisDossier"  name="fraisDossier" class="form-control fraisDossier" readonly>
                                    </div>

                                    <div class="col-md-12 col-sm-4 col-lg-4 col-xl-4">
                                        <div class="row g-3">

                                            <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                                <label for="" class="FormLabel">Taux <i title="Taux honoraire en %" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <input type="text" id="TauxHonoraire"  name="TauxHonoraire" class="form-control TauxHonoraire">
                                                <div class="invalid-feedback">
                                                TVA obligatoire
                                                </div>
                                            </div>

                                            <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                                <label for="" class="FormLabel">TVA <i title="18% des honoraires" class="fa fa-info-circle cursor-pointer"></i></label>
                                                <input type="text" id="TvaHonoraire" value="18" name="TvaHonoraire" class="form-control TvaHonoraire" required>
                                                <div class="invalid-feedback">
                                                TVA obligatoire
                                                </div>
                                            </div>

                                            <div class="col-md-12 col-sm-6 col-lg-6 col-xl-6">
                                                 <label for="" class="FormLabel">Honoraires d'agence</label>
                                                <input type="text" id="honoraireAgence" name="honoraireAgence" class="form-control honoraireAgence" readonly>
                                            </div>
                                        </div>
                                            
                                    </div>

                                    <div class="col-md-12 col-sm-2 col-lg-2 col-xl-2">
                                            <label for="" class="FormLabel">Enregistr. <i title="Enregistrement (2,5% du loyer annuel)" class="fa fa-info-circle cursor-pointer"></i></label>
                                            <input type="text" id="enregistrementLoyerAnnuel" name="enregistrementLoyerAnnuel" class="form-control enregistrementLoyerAnnuel" readonly>
                                    </div>
                        </div>

                         <div class="row g-3">

                                <div class="col-md-4">

                                    <div style="width:100%; height:40px;border-radius:10px;border:1px dashed gray; margin-top:20px; padding:5px;">

                                        <div class="form-check form-switch">
                                            <input class="form-check-input checkboxProrata" id="flexSwitchCheckCheckedDisabled" name="ProrataCheckbox" type="checkbox" />
                                            <label class="form-check-label text-warning" for="flexSwitchCheckCheckedDisabled">Generer la facture au
                                                prorata</label>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-4">
                                    <label for="NombreDeJourAuProrata" class="FormLabel">Nombre de jour</label>
                                    <input type="text" id="NombreDeJourAuProrata" name="NombreDeJourAuProrata" class="form-control NombreDeJourAuProrata" readonly>
                                </div>

                                <div class="col-md-4">
                                    <label for="" class="FormLabel">Montant à payer</label>
                                    <input type="number" id="MontantAuProrata" name="MontantAuProrata" min="0" readonly class="form-control MontantAuProrata">
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
            </div>

  
    </div>

    <div class="tab-pane fade" id="tab-profile" role="tabpanel" aria-labelledby="profile-tab">

        <div class="row g-3 mb-4">
        
            <div class="col-md-12 col-lg-6 col-xl-6">
                <label for="CompositionSelect" class="FormLabel">Composition</label>
                <select class="form-select CompositionSelect" id="CompositionSelect" >
                    <option selected  value="0">Choisir...</option>
                </select>
                <div class="invalid FormLabel text-danger">
                   
                </div>
            </div>

             <div class="col-md-12 col-lg-5 col-xl-5">
                <label for="" class="FormLabel">Quantité</label>
                <input type="text" id="QteCompo" class="form-control">
            </div>

             <div class="col-md-12 col-lg-1 col-xl-1">
                <button type="button" id="btn-ajouterComposition" class="btn btn-secondary btn-sm rounded-pill mt-4"><i class="fa fa-plus-circle"></i></button>
            </div>

        </div>

            <div class="table-responsive">
                <table id="CompositionTable" class="table table-light">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Libellé</th>
                            <th>Quantité</th>
                        </tr>
                    </thead>
                  
                </table>
            </div>
            
    
    </div>

  <div class="tab-pane fade" id="tab-contact" role="tabpanel" aria-labelledby="contact-tab">
  
        <div class="row g-3 mt-2">
            <div class="col-md-3">
                <label for="iban" class="FormLabel">Type document</label>
                <select class="form-select TypeDocumentSelect" id="DocumentSelectLocation" required>
                        <option selected style="color:gray" value="0">Choisir...</option>
                 </select>
                 <div class="Typedoc FormLabel text-danger">
                  
                </div>
                <input type="file" class="form-control" id="fichierDocument" hidden>
            </div>
            <div class="col-md-3">
                <label for="bic" class="FormLabel">Référence document</label>
                <input type="text" class="form-control referenceDoc" id="referenceDoc">
                <div class="invalid-feedback">
                </div>
            </div>

            <div class="col-md-4" style="margin-top:32px">
               <input type="text" class="form-control" id="nomFichierChoisirLocation" value="Aucun fichier choisi..." readonly>
            </div>

            <div class="col-md-2" style="margin-top:32px;">
            <div style="float:right" class="d-flex">     
                <button  class="btn btn-danger rounded-pill animate__animated animate__wobble" id="btn-FichierDelete" style="display:none;margin-right:5px" title="Supprimer" type="button"><i data-feather="trash"></i></button>
                <button  style="margin-right:5px" class="btn btn-warning rounded-pill" id="btn-ajoutFichier" title="Choisir un fichier" type="button"><i data-feather="file"></i></button>
                <button  type="button" class="btn btn-secondary rounded-pill" id="btn-AjouterDocuments"  title="Ajouter"><i data-feather="plus-circle"></i></button>
            </div>
             
            </div>
        </div>
        <div class="table-responsive">
            <table id="FormTableDocumentTableLocation" class="table table-bordered mt-4">
                <thead>
                <tr>
                <th>#</th>
                <th>Type document</th>
                <th>Référence document</th>
                <th>Document</th>
                </tr>
                </thead>
            </table> 
        </div> 
  
  </div>
</div>


{{-- <div class="d-flex mt-4">
    <h5>::. Pièces jointe</h5>
    <div style="width:89%;height:1px;background:#838383;margin-top:13px;margin-left:3px"></div>
</div>

<div style="display:none" class="row g-3 RowZonePieceJointe ">
    <div class="col-md-12">
        <div style="display:none" class="ZonePieceJointe mb-4 todo-list">

        </div>

    </div>
</div>

<div class="row g-3 mt-2">
    <div class="col-md-12">
        <input type="file" class="filepond" name="media[]" multiple data-allow-reorder="true" data-max-file-size="3MB" data-max-files="10">
    </div>

</div> --}}