<div id="facturesGenerationList">

    <div class="row">
        <div class="col-xs-12" ng-if="!periodesCfg.tarification.length">
            <div class="alert alert-danger">
                La configuration des périodes de facturation doit être renseignée dans l'administration.
            </div>
        </div>
        <div class="col-xs-12" ng-if="!periodesCfg.dateReference">
            <div class="alert alert-danger">
                La date de référence pour facturation doit être renseignée dans l'administration.
            </div>
        </div>
    </div>

    <div ng-if="periodesCfg.tarification.length && periodesCfg.dateReference">
        <div class="col-xs-12">
            <div ng-click="goToDolibarr()" class="btn btn-primary pull-right goToDolibar">
                <i class="fa fa-external-link"></i> Module de facturation
            </div>
        </div>
        <div class="col-xs-12">



            <div class="facturesFilter ">
                <div class="title"> Paramétrage </div>
                <div class="body">
                    <div class="row spbrow">
                        <div class="col-xs-6">
                          <label>Nom de la période </label>
                          <input
                            type="text"
                            ng-disabled="generationFiltersLocked"
                            class="form-control"
                            ng-model="generation_filter.nom_periode"
                          />
                        </div>
                        <div class="col-xs-6">
                          <label>Préfixe </label>
                          <input
                            type="text"
                            ng-disabled="generationFiltersLocked"
                            class="form-control"
                            ng-model="generation_filter.prefixe"
                          />
                        </div>
                    </div>
                    <div class="row spbrow">
                        <div class="col-xs-6">
                            <label class="required">Début <small>(inclus)</small></label>
                            <input type="text"
                                   class="form-control"
                                   data-date-format="dd-MM-yyyy"
                                   model-date-format="yyyy-MM-ddTHH:mm:ss.sssZ"
                                   data-max-date="{{generation_filter.fin}}"
                                   ng-model="generation_filter.debut"
                                   ng-disabled="generationFiltersLocked"
                                   bs-datepicker
                                   data-autoclose="true"
                            />
                        </div>
                        <div class="col-xs-6">
                            <label class="required"> Fin <small>(inclus)</small></label>
                            <input type="text"
                                   class="form-control"
                                   data-date-format="dd-MM-yyyy"
                                   model-date-format="yyyy-MM-ddTHH:mm:ss.sssZ"
                                   data-min-date="{{generation_filter.debut}}"
                                   ng-model="generation_filter.fin"
                                   ng-disabled="generationFiltersLocked"
                                   bs-datepicker
                                   data-autoclose="true"
                            />
                        </div>
                    </div>

                    <div class="row spbrow">

                        <div class="col-xs-6">
                            <label class="required"> Date de génération </label>
                            <input  type="text" 
                                    class="form-control" 
                                    ng-model="generation_filter.date_generation" 
                                    ng-disabled="generationFiltersLocked"
                                    bs-datepicker
                                    data-autoclose="true"
                            />
                        </div>
                        <div class="col-xs-6">
                            <label class="required"> Date d'échéance </label>
                            <input  type="text" 
                                    class="form-control" 
                                    ng-model="generation_filter.date_echeance" 
                                    ng-disabled="generationFiltersLocked"
                                    bs-datepicker
                                    data-autoclose="true"
                            />
                        </div>
                    </div>
                    <div class="row spbrow">
                      <div class="col-xs-3">
                        <label for="filter">
                          Option pour trier les données affichées à l'issue de la recherche :
                        </label>
                      </div>
                      <div class="col-xs-3">
                        <input 
                          type="radio" 
                          id="reference_dossier_originale" 
                          name="FiltreControle" 
                          value="reference_dossier_originale" 
                          ng-disabled="generationFiltersLocked"
                          ng-model="generation_filter.type_filter"
                          checked>
                        <label for="reference_dossier_originale">Référence du dossier</label>
                      </div>
                      <div class="col-xs-3">
                        <input 
                          type="radio" 
                          id="Nom" 
                          name="FiltreControle" 
                          value="Nom"
                          ng-disabled="generationFiltersLocked"
                          ng-model="generation_filter.type_filter">
                        <label for="Nom">Nom du Débiteur</label>
                      </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="alert alert-danger" ng-if="fakeCtrlFtiBuilt==false">
                                Impossible de lire la configuration des contrôles.
                            </div>
                            <div
                                ng-if="fakeCtrlFtiBuilt && !generationFiltersLocked"
                                class="btn btn-sm btn-default pull-right"
                                ng-click="refreshListePourGenerationFacturev2()"
                                style="margin-top: 5px;"
                                ng-disabled="!generation_filter.debut || !generation_filter.fin || !generation_filter.date_generation || !generation_filter.date_echeance"
                            >
                                <i class="fa fa-search"></i> Modèles de facturation
                            </div>
                            <div
                                ng-if="generationFiltersLocked"
                                class="btn btn-sm btn-default pull-right"
                                ng-click="unlockGenerationFilters()"
                                style="margin-top: 5px;"
                            >
                                <i class="fa fa-unlock"></i> Modifier les paramètres

                            <!-- <div ng-if="fakeCtrlFtiBuilt" class="btn btn-sm btn-default pull-right" ng-click="refreshListePourGenerationFacturev2()">
                                <i class="fa fa-search"></i> Afficher les modèles de facturation correspondants
                            </div> -->
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <div
        class="listeModelesFacturables"
        ng-if="displayListeFacturable!='cache'"
      >
        <div class="col-xs-12" ng-if="!elementsFacturationEligible.length">
          <div class="alert alert-info">
            Aucun élément de facturation ne correspond aux critères saisis.
          </div>
        </div>
        <div
          class="col-xs-12 elementsFacturationEligible"
          ng-if="elementsFacturationEligible.length"
        >
        
        <div 
        elastic-filter 
        style="display: none"
        filter-id="currentFactuFilterId" 
        place="'widget'"
        broadcast-result="true"
        save-original-properties="1"></div>
  
          <table class="table facturables">
            <tr
              ng-repeat-start="elemfactu in elementsFacturationEligible track by $index"
              class="elementFacturable"
              ng-class="{'selected': elemfactu.picked, 'unselected' : !elemfactu.picked}"
            >
  
  
              <td
                colspan="2"
                class="col-xs-9 clickableModeleFactu"
                ng-click="selectModeleAFacturer(elemfactu)"
              >
                <div class="introDetailEle">
                  <div class="introEle">
                    <h5>{{ elemfactu.nom }}</h5>
  
                    <div class="typeFacturation">
                      Type de facturation :
                      <b>
                        {{getLibelleTypeAssociation(elemfactu.associations.type)}}</b
                      >
                      <div ng-if="elemfactu.associations.type=='simple'">
                        Service associé :
                        <b>{{getServiceInfo(elemfactu.associations.services)}}</b>
                      </div>
                      <div ng-if="elemfactu.associations.type=='modele'">
                        Modèle associé :
                        <b> {{elemfactu.associations.modele}}</b>
                      </div>
                    </div>
                  </div>
  
                  <div class="detailEle">
                    <small> {{ elemfactu.description }} </small>
                    <br />
                    <small>
                      Débiteur :
                      <b>{{ elemfactu.labelDebiteurOriginal }}</b>
                    </small>
                    <br />
                    <small>
                      Type(s) de contrôle(s) :
                      <b>{{getControlesConcernesParTemplate(elemfactu)}}</b>
                    </small>
                    <br />
                    <small>
                      Statut du RDV :
                      <b>{{elemfactu.statut_rdv}}</b>
                    </small>
                    <br />
                    <div ng-if="elemfactu.parameters.annualisation.active">
                      <small >
                      Annualisation sur 
                      <b>{{elemfactu.parameters.annualisation.annuite}} année</b>
                    </small>
                    </div>
                  </div>
                </div>
              </td>
  
              <td class="col-xs-3 text-center" style="vertical-align: middle;">
                <div class="blocRecherche">
   
                  <div ng-if="elemfactu.tmp.res">
              
  
                    <span class="nbFacturables">
                      {{ elemfactu.tmp.res.totalFeatures ?
                      elemfactu.tmp.res.totalFeatures : 0 }}
                    </span>
                    <i class="refreshFacturables fa fa-refresh"
                      title="Rafraichir la liste des contrôles facturables"
                      ng-click="searchForFacturable(elemfactu)"
                    ></i>
  
                    <div
                      ng-if="elemfactu.tmp.nbErreurs>0"
                      class="elemFactuHasErreurs"
                    >
                      <i class="fa fa-warning"></i>
                      <span ng-if="elemfactu.tmp.nbErreurs==1"
                        >Un contrôle n'est pas facturable
                      </span>
                      <span ng-if="elemfactu.tmp.nbErreurs>1"
                        >{{elemfactu.tmp.nbErreurs}} contrôles ne sont pas
                        facturables
                      </span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
  
            <tr>
              <td
                ng-if="elemfactu.tmp.res && elemfactu.tmp.res.totalFeatures"
                colspan="3"
                ng-class="{ 'allItemsAreToggled' : elemfactu.toggle_all }"
              >
                <div class="checkbox toggleAllItems">
                  <label>
                    <input
                      type="checkbox"
                      ng-model="elemfactu.toggle_all"
                      ng-change="toggleAllItemsFacturation(elemfactu)"
                    />
                    Tout cocher
                  </label>
                  <input 
                      type="number"
                      ng-model="numberSelected"
                    />
                  <span
                    class="btn btn-primary"
                    ng-click="toggleNumberItemsFacturation(elemfactu,numberSelected)"
                    translate
                  >
                    common.select
                  </span>
                </div>
              </td>
            </tr>
  
            <tr
              ng-repeat-end
              ng-repeat="controle in elemfactu.tmp.res.features"
              ng-class="{'selected': aFacturer[elemfactu.facturationid][controle.id].active}"
              ng-if="tmpShowRes[elemfactu.facturationid]"
              class="detailItem"
            >
              <td class="text-center col-xs-1" style="vertical-align: middle;">
                <input
                  type="checkbox"
                  class="sitem"
                  ng-disabled="!controle.canCheck || controle.cannotCheckEcheance"
                  ng-click="toggleFacture(elemfactu,controle,1)"
                  ng-model="aFacturer[elemfactu.facturationid][controle.id].active"
                />
              
              </td>
              <td colspan="2" class="col-xs-11" style="padding: 0 !important;">
                <div class="iitem">
     
  
                  <div class="hitData">
                    <div class="sub dossier">
                      <div
                        class="btn btn-xs btn-default btnaction"
                        ng-click="openDossier(controle)"
                      >
                        <i class="fa fa-edit"></i> Dossier
                      </div>
  
                      <div class="ref" title="Référence du dossier">
                        {{ controle.properties.reference_dossier_originale }}
                      </div>
                      <div class="adresse" title="Adresse du dossier">
                        <i class="fa fa-map-marker"></i> {{
                        controle.properties.adresse_num_rue }} {{
                        controle.properties.adresse_rue }} {{
                        controle.properties.adresse_cp }} {{
                        controle.properties.adresse_ville }}
                      </div>
                    </div>
                    <div class="sub controle" ng-if="elemfactu.controles">
                      <div
                        class="btn btn-xs btn-default btnaction"
                        ng-click="openControle(controle)"
                      >
                        <i class="fa fa-edit"></i> Contrôle
                      </div>
  
                      <div class="ref">
                        {{ getControleName(controle) }}
                      </div>
                      <div>
                        <span title="Date">
                          <i class="fa fa-calendar"></i>{{
                          controle.dateDeReference | date:'dd-MM-yyyy' }}</span
                        >
                        <span title="Responsable">
                          <i class="fa fa-user"></i>
                          {{ controle.properties.responsable ?
                          controle.properties.responsable : '-' }}</span
                        >
                        <span title="Avis">
                          <i class="fa fa-list"></i>
                          {{ controle.properties.avis ? controle.properties.avis :
                          '-' }}</span
                        >
                      </div>
                      <div ng-if="controle.cannotCheckEcheance">
                        <span class="debiteurError">
                          <b>{{ controle.err.echeance }}.</b>
                        </span>
                      </div>
                      <div ng-if="controle.properties.echeanceEncours">
                        <span class="debiteurOk">
                          <b>Ce contrôle est en cours de facturation annuelle, la redevance de l'année en cours n'est pas encore facturée  
                          </b>
                        </span>
                      </div>
                    </div>
                    <div class="sub controle" ng-if="elemfactu.vidanges">
                      <div
                        class="btn btn-xs btn-default btnaction"
                        ng-click="openVidange(controle)"
                      >
                        <i class="fa fa-edit"></i> Vidange
                      </div>
  
                      <div class="ref">
                        <i class="fa fa-calendar"></i>{{ controle.dateDeReference
                        | date:'dd-MM-yyyy' }}
                      </div>
                    </div>
  
                    <div class="sub debiteurInfos">
                      <div>
                        {{elemfactu.labelDebiteur}} concerné
                        <span ng-if="elemfactu.debiteur!='demandeur'"
                          >à cette date</span
                        >
                        :
  
                        <span class="debiteurOk" ng-if="controle.canCheck">
                          <i class="fa fa-check"></i>
                          {{controle.libDebiteurDossier }}
                        </span>
                        <span class="debiteurError" ng-if="!controle.canCheck">
                          <i class="fa fa-times"></i>
                          <b>{{ controle.err.debiteur }}.</b>
                        </span>
                      </div>
                      <div
                        ng-if="elemfactu.controles && elemfactu.debiteur!='demandeur'"
                      >
                        Information saisie dans le contrôle :
                        {{controle.libDebiteurControle }}
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>


        <!-- <div class="col-xs-12" ng-if="!generation_filter.debut || !generation_filter.fin">
            <div class="alert alert-info">
                Veuillez renseigner la date de début et de fin pour la nouvelle période de facturation.
            </div>
        </div> -->


        <!-- <div ng-if="displayListeFacturable!='cache'">


            <div class="col-xs-12" ng-if="!elementsFacturationEligible.length">
                <div class="alert alert-info">
                    Aucun élément de facturation ne correspond aux critères saisis.
                </div>
            </div>
            <div class="col-xs-12" ng-if="elementsFacturationEligible.length">

                <table class="table facturables">
                    <tr>
                        <th class="col-xs-1"> </th>
                        <th> Modèles de facturation </th>
                        <th> </th>
                    </tr>
                    <tr ng-repeat-start="elemfactu in elementsFacturationEligible track by $index" class="elementFacturable" ng-class="{'selected': elemfactu.picked}">
                        <td class="checkTemplateFactu">
                            <input ng-disabled="!elemfactu.tmp.res.totalFeatures" type="checkbox" name="categorie_controle" ng-model="elemfactu.picked"
                                ng-change="toggleAllItemsFacturation(elemfactu)">
                        </td>

                        <td style="vertical-align: middle;">
                            <i class="fa fa-info-circle showDetailEle pull-right" title="Informations détaillées" ng-click="showDetailEle[$index]=!showDetailEle[$index]"></i>
                            <b>{{ elemfactu.nom }}</b>
                            <div class="detailEle" ng-show="showDetailEle[$index]">


                                <small> {{ elemfactu.description }} </small>
                                <br/>
                                <small> Débiteur :
                                    <b>{{ elemfactu.labelDebiteurOriginal }}</b>
                                </small>
                                <br/>
                                <small> Type(s) d'instructions(s) :
                                    <b>{{getControlesConcernesParTemplate(elemfactu)}}</b>
                                </small>
                                <br/>
                                <small> Statut du RDV :
                                    <b>{{elemfactu.statut_rdv}}</b>
                                </small>
                            </div>

                            <div class="typeFacturation">
                                Type de facturation :
                                <b> {{getLibelleTypeAssociation(elemfactu.associations.type)}}</b>
                                <div ng-if="elemfactu.associations.type=='simple'">
                                    Service associé :
                                    <b>{{getServiceInfo(elemfactu.associations.services)}}</b>
                                </div>
                                <div ng-if="elemfactu.associations.type=='modele'">
                                    Modèle associé :
                                    <b> {{elemfactu.associations.modele}}</b>
                                </div>
                            </div>

                        </td>





                        <td class="text-center" style="vertical-align: middle;">

                            <div>
                                <div class="searchForFacturable btn btn-default btn-sm" ng-click="searchForFacturable(elemfactu)">
                                    <i class="fa fa-search"></i> Rechercher
                                </div>
                            </div>

                            <div style="display:none;" res="elemfactu.tmp.res" elastic-filter filter-id="elemfactu.tmp.filterId" place="'widget'" save-original-properties="1"></div>

                            <div ng-show="elemfactu.tmp.res">



                                <span class="label" ng-class="{'label-default dimmed':!elemfactu.tmp.res.totalFeatures,'label-default':!aFacturerLength[elemfactu.facturationid],'label-primary':aFacturerLength[elemfactu.facturationid]}">
                                    <span ng-if="elemfactu.tmp.res.totalFeatures"> {{ aFacturerLength[elemfactu.facturationid] }} / </span>
                                    <span> {{ elemfactu.tmp.res.totalFeatures ? elemfactu.tmp.res.totalFeatures : 0 }} </span>

                                </span>


                                <div class="btn btn-default btn-xs" style="margin-left: 5px" ng-disabled="!elemfactu.tmp.res.totalFeatures" ng-click="tmpShowRes=!tmpShowRes">
                                    Détail
                                </div>

                                <div ng-if="elemfactu.tmp.nbErreurs>0" class="elemFactuHasErreurs">
                                    <i class="fa fa-warning"></i>
                                    <span ng-if="elemfactu.tmp.nbErreurs==1">Une instruction n'est pas facturable </span>
                                    <span ng-if="elemfactu.tmp.nbErreurs>1">{{elemfactu.tmp.nbErreurs}} instructions ne sont pas facturables </span>
                                </div>
                            </div>



                        </td>

                    </tr>

                    <tr ng-repeat-end ng-repeat="controle in elemfactu.tmp.res.features" ng-class="{'selected': aFacturer[elemfactu.facturationid][controle.id].active}"
                        ng-if="tmpShowRes" class="detailItem">

                        <td class="text-center" style="vertical-align: middle;">




                            <input type="checkbox" class="sitem" ng-disabled="!controle.canCheck" ng-click="toggleFacture(elemfactu,controle,1)" ng-model="aFacturer[elemfactu.facturationid][controle.id].active"
                            />
                        </td>
                        <td colspan="2" style="padding: 0 !important;">



                            <div class="iitem">


                                <div class="hitData">
                                    <div class="sub dossier">

                                        <div class="btn btn-xs btn-default btnaction" ng-click="openDossier(controle)">
                                            <i class="fa fa-edit"></i> Dossier
                                        </div>

                                        <div class="ref" title="Référence du dossier">
                                            {{ controle.properties.reference_dossier_originale }} </div>
                                        <div class="adresse" title="Adresse du dossier">
                                            <i class="fa fa-map-marker"></i> {{ controle.properties.adresse_num_rue }} {{ controle.properties.adresse_rue
                                            }} {{ controle.properties.adresse_cp }} {{ controle.properties.adresse_ville
                                            }} </div>
                                    </div>
                                    <div class="sub controle" ng-if="elemfactu.controles">

                                        <div class="btn btn-xs btn-default btnaction" ng-click="openControle(controle)">
                                            <i class="fa fa-edit"></i> Instruction </div>

                                        <div class="ref">
                                            {{ getControleName(controle) }}
                                        </div>
                                        <div>
                                            <span title='Date'>
                                                <i class="fa fa-calendar"></i>{{ controle.dateDeReference | date:'dd-MM-yyyy' }}</span>
                                            <span title='Responsable'>
                                                <i class="fa fa-user"></i> {{ controle.properties.responsable ? controle.properties.responsable : '-' }}</span>
                                            <span title='Avis'>
                                                <i class="fa fa-list"></i> {{ controle.properties.avis ? controle.properties.avis : '-' }}</span>
                                        </div>

                                    </div>
                                   

                                    <div class="sub debiteurInfos">

                                        <div>

                                            {{elemfactu.labelDebiteur}} concerné <span ng-if="elemfactu.debiteur!='demandeur'">à cette date</span> :


                                            <span class="debiteurOk" ng-if="controle.canCheck">
                                                <i class="fa fa-check"></i>
                                                {{controle.libDebiteurDossier }}
                                            </span>
                                            <span class="debiteurError" ng-if="!controle.canCheck">
                                                <i class="fa fa-times"></i>
                                                <b>{{ controle.err.debiteur }}.</b>
                                            </span>
                                        </div>
                                        <div ng-if="elemfactu.controles && elemfactu.debiteur!='demandeur'">
                                            Information saisie dans l'instruction : {{controle.libDebiteurControle }}
                                        </div>


                                    </div>

                                </div>





                            </div>
                        </td>
                    </tr>
                </table>


                <div class="col-xs-12" ng-if="displayListeFacturable=='pour_facturation'">
                    <div class="btn btn-default pull-right" ng-disabled="aFacturerLength.total==0" ng-click="generateFacturesv2()">
                        <i class="fa fa-play"></i> Générer les factures associées ({{aFacturerLength.total}})
                    </div>
                </div>

            </div>
        </div> -->

    </div>


    <!-- @TODO Ugly, needs to be removed as soon as the report modal and listedossiers are split -->
    <liste-dossiers-bac style='display:none' datatable-height="'10px'" external-dossier-filter="['kis_bac_dossier.0']" map="map"></liste-dossiers>

</div>