<h2 class="floating-title">{{title}}</h2>
<div class="main-content">
  <div class="row align-container">
    <div class="col-12">    
      <label for="sel3">Plantas</label>
    </div>
  </div>
  <div class="row align-container" >
    <div class="col-lg-6 col-sm-6 p-1">
      <div class="row">
        <div class="col-lg-12 col-sm-12">
          <select class="custom-select" (change)="onChangeObj($event)" name="sel3">
            <option *ngFor="let item of listAssets" [selected]="item.id===assetID" [value]="item.id" >{{item.name}}</option>
          </select>
        
        </div>
      </div>

    <div class="row">
      <div class="col-lg-12">
        <div class="widget environment-meters">
          <div class="mini-stats">
            <!--<i class="fas fa-money-check-alt"></i> <i class="fas fa-hand-holding-usd"></i>-->
            <span class="savings-skin"><i class="fas fa-money-check-alt"></i></span>
            <div class="savings">
              <h4>Ahorro total </h4>
              <h3 *ngIf="eProduced">
                 ${{total_savings}}
              </h3>
            </div>
            <div class="savings-last-24h">
              <i class="material-icons">
                trending_up
              </i>
              Ahorro últimas 24hrs. <span>${{last_day_savings}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    </div>
    <!-- Weather card -->
    <div class="col-lg-6 col-sm-6 p-1">
      <div class="row">
        <div class="col-lg-12">
          <app-weather-card [city]="city"></app-weather-card>
        </div>
      </div>
    </div>

  </div>

  <div class="row align-container" *ngIf="!metersInstalled">
    <div class="col-12 p-1">
      <br>
      <div class="alert alert-danger" role="alert">
        <h4 class="card-text">
          <i class="fas fa-exclamation-circle"></i>
          La planta no tiene medidores asignados
        </h4>
      </div>
    </div>
  </div>

  <!-- Basic stats cards -->
  <div class="row align-container" *ngIf="metersInstalled">

    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="sky-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="eProduced">
            {{energyDay}}
            <small>kWh</small>
          </h3>
          <p>Ultimo dia</p>
        </div>
      </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="eProduced">
            {{energyWeek}}
            <small>MWh</small>
          </h3>
          <p>Ultima semana</p>
        </div>
      </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="yellow-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="eProduced">
            {{energyMonth}}
            <small>MWh</small>
          </h3>
          <p>Ultimos 30 días</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="green-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="eProduced">
            {{energyYear}}
            <small>MWh</small>
          </h3>
          <p>Total</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Chartjs potency generation graphic -->
  <div class="row align-container">
    <div class="col-lg-12 col-md-12 col-sm-12 p-1">
      <div class="widget">
        <div class="mini-stats">

          <div class="row" *ngIf="metersInstalled">
            <div class="col-12">
              <p class="align-right">Seleccione un rango y un tipo de visualización</p>
                
              <div class="visualization">
                <div class=" action-buttons">
                  <button class="btn btn-link" [class.btn-success]='isActive[0]' (click)="getMeasureRangeChart('day')">1D</button>
                  <button class="btn btn-link" [class.btn-success]='isActive[1]' (click)="getMeasureRangeChart('week')">7D</button>
                  <button class="btn btn-link" [class.btn-success]='isActive[2]' (click)="getMeasureRangeChart('WTD')">WTD</button>
                  <button class="btn btn-link" [class.btn-success]='isActive[3]' (click)="getMeasureRangeChart('month')">1M</button>
                  <button class="btn btn-link" [class.btn-success]='isActive[4]' (click)="getMeasureRangeChart('MTD')">MTD</button>
                  <button class="btn btn-link" [class.btn-success]='isActive[5]' (click)="getMeasureRangeChart('3m')">3M</button>
                  <button class="btn btn-link" [class.btn-success]='isActive[6]' (click)="getMeasureRangeChart('12m')">12M</button>
                  <button class="btn btn-link" [class.btn-success]='isActive[7]' (click)="getMeasureRangeChart('YTD')">YTD</button>
                  <button class="btn btn-link" [class.btn-success]='isActive[8]' (click)="getMeasureRangeChart('total')">TOTAL</button>
               
                  
                  <div class="input-box-container">
                    <div>
                      <p>
                        <i class="far fa-calendar" aria-hidden="true"></i>
                      </p>
                      <input class="input-box form-control" placeholder="Seleccione una fecha" 
                        angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" 
                        [(ngModel)]="model" [options]="myDpOptions" (dateChanged)="onDateChanged($event)" 
                        #dp="angular-mydatepicker"/>
                    </div>
                  </div>
                </div>
                <div class=" action-buttons">
                  <button title="Barra" [ngClass]="[chartActive[0]==true ? 'btn  btn-success' : 'btn btn-dark']"  (click)="changeGraphicType('bar')"> 
                    <i class="fa fa-chart-bar"></i>
                  </button>
                  <button title="Línea" [ngClass]="[chartActive[1]==true ? 'btn  btn-success' : 'btn btn-dark']" (click)="changeGraphicType('line')"> 
                    <i class="fa fa-chart-area"></i>
                  </button>
                  <!--
                  <button title="Area" [ngClass]="[chartActive[2]==true ? 'btn  btn-success' : 'btn btn-dark']" (click)="changeGraphicType('radar')"> 
                    <i class="fa fa-chart-area"></i>
                  </button>-->
                  <button title="Tabla" [ngClass]="[chartActive[3]==true ? 'btn  btn-success' : 'btn btn-dark']" (click)="changeToTable()"> 
                    <i class="fa fa-table"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="chart-container" id="chart-wrapper">
            <canvas id="canvas">{{ chart1 }}</canvas>
          </div>
          <div class="no-data">
            <h2>
              Información no disponible
            </h2>
          </div>
          <div id="toogleTable">
            <ng-container class="example-container mat-elevation-z8" *ngIf="showTable" >
              <div class="example-table-container">
          
                <div class="action-buttons">
                  <button class="btn btn-primary btn-sm" mat-raised-button (click)="exporter.exportTable(exportExcel, ExcelOptions)">
                    <i class="fas fa-file-excel"></i>
                    EXCEL
                  </button>
                  <button class="btn btn-primary btn-sm" mat-raised-button (click)="exporter.exportTable(exportCSV, CSVOptions)">
                    <i class="fas fa-file-csv"></i>
                    CSV
                  </button>
                  <button class="btn btn-primary btn-sm" mat-raised-button (click)="exporter.exportTable(exportJSON, JSONOptions)">
                    <i class="fas fa-file-alt"></i>
                    JSON
                  </button>
                  <button class="btn btn-primary btn-sm" mat-raised-button (click)="printTable()">
                    <i class="fas fa-file-alt"></i>
                    IMPRIMIR
                  </button>
                </div>

                <mat-table  matTableExporter #table [dataSource]="dataSource"  #exporter="matTableExporter" id="measuresTable">
                  <div *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
                    <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
                    <mat-cell *matCellDef="let element"> {{element[colIndex]}}
                    </mat-cell>
                  </div>
          
                  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                </mat-table>
              </div>
            </ng-container>
            <mat-paginator class="hiddenonload" [pageSizeOptions]="[5, 10, 25, dataSource.data.length] " [length]="dataSource.data.length" [pageIndex]="0" [pageSize]="10"></mat-paginator>
          </div>

        </div>
      </div>

    </div>
  </div>
  
  <!-- Enviromental cool stats cards -->
  <div class="row align-container" *ngIf="metersInstalled">

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/barrels2.png" alt="">
          </div>
          <div class="enviromental-text">
            <span>{{environmentFuel}}</span>
            Barriles de petróleo crudo producidos.
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/car2-icon.png" alt="">
          </div>
          <div class="enviromental-text">
            <span>{{environmentCO2}}Kg.</span>
            De gases CO2 evitados.
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/poweredhouse.png" alt="">
          </div>
          <div class="enviromental-text">
            La energía que demandan 
            <span>{{environmentHouse}}</span>
            hogares durante 1 año.
          </div>
           
        </div>
      </div>
    </div>

  </div>

</div>
