<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" style="padding: 0 25px;">
    <div class="col-lg-6 col-sm-4 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===organizationId" [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">
                  <span class="green-skin"><i class="fas fa-hand-holding-usd"></i></span>
                  <h5 *ngIf="eProduced">
                    300
                    <small>$</small>
                  </h5>
                </div>
              </div>
          </div>
      </div>
    -->
    </div>
    <!-- Weather card -->
    <div class="col-lg-6 col-sm-8 p-1">
      <div class="row">
        <div class="col-lg-12">
          <app-weather-card></app-weather-card>
        </div>
      </div>
    </div>

  </div>

  <!-- Basic stats cards -->
  <div class="row align-container" style="padding: 0 25px;">

    <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>kW</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">
      <div class="widget">
        <div class="mini-stats">

          <p class="align-right">Seleccione el tipo de visualización</p>
      
          <div class=" action-buttons">
            <button [ngClass]="[chartActive[0]==true ? 'btn  btn-success' : 'btn btn-dark']"  (click)="changeGraphicType('bar')"> 
              <i class="fa fa-chart-bar"></i>
              Barra
            </button>
            <button [ngClass]="[chartActive[1]==true ? 'btn  btn-success' : 'btn btn-dark']" (click)="changeGraphicType('line')"> 
              <i class="fa fa-chart-line"></i>
              Linea
            </button>
            <button [ngClass]="[chartActive[2]==true ? 'btn  btn-success' : 'btn btn-dark']" (click)="changeGraphicType('radar')"> 
              <i class="fa fa-chart-area"></i>
              Area
            </button>
            <button [ngClass]="[chartActive[3]==true ? 'btn  btn-success' : 'btn btn-dark']" (click)="changeToTable()"> 
              <i class="fa fa-table"></i>
              Tabla
            </button>    
          </div>

          <div class="chart-container" id="chart-wrapper">
            <canvas id="canvas">{{ chart1 }}</canvas>
          </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('xlsx', {fileName:'data-Medidores', sheet: 'sheet_name', Props: {Author: 'INVERLEC'}})">
                    <i class="fas fa-file-excel"></i>
                    EXCEL
                  </button>
                  <button class="btn btn-primary btn-sm" mat-raised-button (click)="exporter.exportTable('csv', {fileName:'data-Medidores', Props: {Author: 'INVERLEC'}})">
                    <i class="fas fa-file-csv"></i>
                    CSV
                  </button>
                  <button class="btn btn-primary btn-sm" mat-raised-button (click)="exporter.exportTable('json', {fileName:'data-Medidores', sheet: 'sheet_name', Props: {Author: 'INVERLEC'}})">
                    <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] " [length]="dataSource.data.length" [pageIndex]="0" [pageSize]="5"></mat-paginator>
          </div>

          <p>Seleccione un rango de visualización</p>

          <button class="btn" [class.btn-success]='isActive[0]' (click)="onMeasureClickRange('day')">Día</button>
          <button class="btn" [class.btn-success]='isActive[1]' (click)="onMeasureClickRange('week')">7 días</button>
          <button class="btn" [class.btn-success]='isActive[2]' (click)="onMeasureClickRange('month')">30 días</button>
          <button class="btn" [class.btn-success]='isActive[3]' (click)="onMeasureClickRange('year')">Año</button>
          <div class="input-box-container">
            <input class="input-box" placeholder="Click to select a date" 
              angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" 
              [(ngModel)]="model" [options]="myDpOptions" (dateChanged)="onDateChanged($event)" 
              #dp="angular-mydatepicker"/>
          </div>
        </div>
      </div>

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

    <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 petroleo crudo producidos en 1 año.
          </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>

  <br>
  <br>

</div>
