<div class="app-content content" style="background-color: #000000 !important">
  <div class="content-wrapper">
    <div class="content-header row mb-1">
      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
    </div>
    <div class="content-body">
      <div class="row">
        <div class="col-xl-3 col-md-6 col-12">
          <div class="card" style="background-color: #252525 !important">
            <div class="card-content">
              <div class="card-body">
                <div class="media d-flex">
                  <div class="media-body text-left">
                    <h5 style="color: #ffffff">Electricity</h5>
                    <h3 class="danger">{{ topCard?.kwh_consumption }} Kwh</h3>
                  </div>
                  <div class="align-self-center">
                    <i class="icon-energy danger font-large-2 float-right"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6 col-12">
          <div class="card" style="background-color: #252525 !important">
            <div class="card-content">
              <div class="card-body">
                <div class="media d-flex">
                  <div class="media-body text-left">
                    <h5 style="color: #ffffff">Water</h5>
                    <h3 class="success">{{ topCard?.water_consumption }}</h3>
                  </div>
                  <div class="align-self-center">
                    <i
                      class="icon-speedometer success font-large-2 float-right"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6 col-12">
          <div class="card" style="background-color: #252525 !important">
            <div class="card-content">
              <div class="card-body">
                <div class="media d-flex">
                  <div class="media-body text-left">
                    <h5 style="color: #ffffff">Device</h5>
                    <h3 class="warning">{{ topCard?.total_device }}</h3>
                  </div>
                  <div class="align-self-center">
                    <i class="icon-bulb warning font-large-2 float-right"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6 col-12">
          <div class="card" style="background-color: #252525 !important">
            <div class="card-content">
              <div class="card-body">
                <div class="media d-flex">
                  <div class="media-body text-left">
                    <h5 style="color: #ffffff">Room</h5>
                    <h3 class="info">{{ topCard?.total_room }}</h3>
                  </div>
                  <div class="align-self-center">
                    <i class="icon-map info font-large-2 float-right"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="card" style="background-color: #252525 !important">
            <div class="card-content">
              <div class="card-body">
                <canvas
                  style="
                    background-color: #252525 !important;
                    border-color: #252525;
                    color: #ffffff;
                  "
                  class="barchart"
                  height="328"
                  width="1900"
                  baseChart
                  [datasets]="barChartData"
                  [labels]="barChartLabels"
                  [options]="barChartOptions"
                  [legend]="barChartLegend"
                  chartType="bar"
                >
                </canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <div class="card" style="background-color: #252525 !important">
            <div
              class="card-header"
              style="background-color: #252525 !important"
            >
              <h4 class="card-title text-center" style="color: #ffffff">
                Summary Cost
              </h4>
              <hr
                style="
                  border-top: 4px solid #ffffff;
                  border-color: #ffffff !important;
                "
              />
            </div>
            <div class="card-body">
              <div class="card-block">
                <div class="text-center" style="height: 150px !important">
                  <h2 class="font-large-3 text-bold-400" style="color: #ffffff">
                    {{
                      summaryCost?.summary_cost
                        | currency : "Rp " : "symbol" : "1.0-0"
                    }}
                  </h2>
                  <p
                    class="blue-grey lighten-2 mb-0 mt-2"
                    style="color: #ffffff !important"
                  >
                    Based on the estimated costs you have
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card" style="background-color: #252525 !important">
            <div
              class="card-header"
              style="background-color: #252525 !important"
            >
              <h4 class="card-title text-center" style="color: #ffffff">
                Air Quality
              </h4>
              <hr
                style="
                  border-top: 4px solid #ffffff;
                  border-color: #ffffff !important;
                "
              />
            </div>
            <div class="card-body">
              <div class="card-block">
                <div class="donut-chart1" style="height: 150px !important">
                  <x-chartist
                    *ngIf="donutChart1"
                    [data]="donutChart1.data"
                    [type]="donutChart1.type"
                    [options]="donutChart1.options"
                    [responsiveOptions]="donutChart1.responsiveOptions"
                    [events]="donutChart1.events"
                  >
                  </x-chartist>
                </div>
                <div
                  class="text-center"
                  style="
                    position: absolute;
                    top: 80%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  "
                >
                  <h3
                    class="display-4 blue-grey darken-1"
                    style="font-size: 2em; color: #ffffff !important"
                  >
                    {{ airQuality }}
                  </h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card" style="background-color: #252525 !important">
            <div
              class="card-header"
              style="background-color: #252525 !important"
            >
              <h4 class="card-title text-center" style="color: #ffffff">
                Temperature and Humidity
              </h4>
              <hr
                style="
                  border-top: 4px solid #ffffff;
                  border-color: #ffffff !important;
                "
              />
            </div>
            <div class="card-body">
              <div class="card-block">
                <div class="donut-chart2" style="height: 150px !important">
                  <x-chartist
                    *ngIf="donutChart2"
                    [data]="donutChart2.data"
                    [type]="donutChart2.type"
                    [options]="donutChart2.options"
                    [responsiveOptions]="donutChart2.responsiveOptions"
                    [events]="donutChart2.events"
                  >
                  </x-chartist>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
          <div
            class="card overflow-hidden"
            style="background-color: #252525 !important"
          >
            <div class="card-content">
              <div class="card-body cleartfix">
                <div class="media align-items-stretch mb-2">
                  <div class="align-self-center">
                    <i
                      class="icon-bulb background-round info font-large-2 mr-2"
                      style="
                        color: #BFF264 !important;
                        background-color: #252525 !important;
                      "
                    ></i>
                  </div>
                  <div class="media-body">
                    <p style="color: #ffffff !important">
                      {{ item.category_device }}
                      <span
                        class="float-right text-bold-600"
                        style="color: #ffffff"
                        >{{ item.value }}%</span
                      >
                    </p>
                    <ngb-progressbar
                      height="7px"
                      [value]="item.value"
                    ></ngb-progressbar>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
