<div class="facturesSyntheseList">
  <div class="row" ng-if="!periodesFacturation.length">
    <div class="col-xs-12">
      <div class="alert alert-danger">
        Aucune période de facturation n'a été générée.
      </div>
    </div>
  </div>
  <div class="row" ng-if="periodesFacturation.length">
    <div class="col-xs-12">
      <h3>Factures</h3>

      <div class="facturesFilter ">
        <div class="row spbrow">
          <div class="col-xs-9">
            <label> Période de facturation </label>
            <select
              class="form-control"
              ng-model="synthese_filter.periode"
              ng-options="o as ('du '+(o.properties.debut|date)+' au '+(o.properties.fin|date)) for o in periodesFacturation"
            ></select>
          </div>
          <div class="col-xs-3">
            <label> </label>
            <div
              class="btn btn-default"
              ng-click="refreshListePourSyntheseFacture()"
              style="display:block;"
              ng-disabled="!synthese_filter.periode"
            >
              Rechercher
            </div>
          </div>
        </div>
      </div>

      <div class="facturesActions" ng-if="factureFilter">
        <div class="row spbrow">
          <div class="col-xs-12">
            <div
              class="btn btn-success pull-right"
              ng-disabled="!selectedFactures.liste.length"
              ng-click="changeStatutFactures('regle')"
            >
              Régler ces factures ({{selectedFactures.liste.length}})
            </div>
            <div
              class="btn btn-danger pull-right"
              ng-disabled="!selectedFactures.liste.length"
              ng-click="changeStatutFactures('annule')"
            >
              Annuler ces factures ({{selectedFactures.liste.length}})
            </div>

            <div
              class="btn btn-default pull-right"
              data-placement="bottom"
              data-template="js/XG/widgets/ancapp/main/views/admin/popover/facturePopover.html"
              data-animation="am-fade-and-scale"
              data-auto-close="true"
              ng-disabled="!selectedFactures.liste.length"
              bs-popover
            >
              Télécharger ces factures ({{selectedFactures.liste.length}})
            </div>
          </div>
        </div>
      </div>

      <div>
        <div
          ng-if="factureFilter"
          fti="facturesFti"
          attributes="factureAttributes"
          buttonactions="factureButtonActions"
          res="selectedFactures.liste"
          height="400px"
          where="factureFilter.where"
          date-format="dd-MM-yyyy"
          no-default-action="true"
          rendu-colonnes="renderFacturesCol"
          evaluate="actionFromListeFactures(expr)"
          export-csv="facture_anc.csv"
          gcdata-datatable
        ></div>
      </div>
    </div>
  </div>

  <div ng-show="factureFilter">
    <div class="row">
      <div class="col-xs-12">
        <h3>Statistiques de facturation</h3>
      </div>

      <div class="col-xs-8">
        <label> Graphique </label>

        <div class="ct-chart"></div>
      </div>
      <div class="col-xs-4">
        <label> Table </label>
        <table class="table table-bordered totauxFacturation">
          <tr>
            <th></th>
            <th>Facturé</th>
            <th>Réglé</th>
            <th>Annulé</th>
          </tr>
          <tr ng-repeat="cfg in controleCfg">
            <td class="text-right">{{ cfg.type }}</td>
            <td class="text-right">{{ montantsData[cfg.type].facture }} €</td>
            <td class="text-right">{{ montantsData[cfg.type].regle }} €</td>
            <td class="text-right">{{ montantsData[cfg.type].annule }} €</td>
          </tr>
          <tr>
            <td class="text-right">Total TTC</td>
            <td class="text-right">{{totauxData.facture}} €</td>
            <td class="text-right">{{totauxData.regle}} €</td>
            <td class="text-right">{{totauxData.annule}} €</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
