@extends('layouts.user.app')

@section('title', 'Relatórios - Resultado')
@section('head')
  <style>
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      text-align: center;
    }
    table{
      width:95%;
    }
    .rowStyle1{
      border-top:1px solid white;
      border-left:1px solid white;
    }
    .rowStyle2{
      border-bottom:1px solid white;
      border-right:1px solid white;
    }
    .title{
      width:270px;
      text-align: left;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts" charset="utf-8"></script>
@endsection
@section('content')
  <div class="row">  
    <div class="col-12 grid-margin">

      <div class="card">
        <div class="card-body">
          <a href="{{ config('app.url') }}/monitoramento/relatorios" class="btn btn-outline-primary float-right" role="button">              
              < Voltar
          </a> 
          <h2 class="page-header">Relatórios resultado</h2>
        </div>
      </div>      
      @if(!$checkProducoes)
        <div class="card">
          <div class="card-body">
            <div class="alert alert-warning" role="alert">
              Nenhuma produção cadastrada no(s) cliente(s) e período selecionado.
            </div>
          </div>
        </div>
      @endif
      @foreach($medidores as $medidor)
        @if($medidor->producoes->isNotEmpty())
          <div>&nbsp;</div>
          <div class="card">
            <div class="card-body">
              <h4 class="m-2">Cliente: <span class="btn btn-dark p-2" style="cursor:default;"><b>{{ucfirst($medidor->nome)}}</b></span></h4>

              {{-- STATUS --}}
              <div class="col-6 alert alert-{{$medidor->media['producao_status'][1]}} mx-auto mt-3" role="alert">
                <h6 class="alert-heading text-center font-weight-bold">STATUS</h6>
                <hr>
                <p class="mb-0 text-center">
                  {{$medidor->media['producao_status'][0]}}
                </p>
              </div>

              {{-- TABLE PRODUÇÃO REAL, ESTIMADA E MÊS A MÊS --}}
              <table class="mt-5">
                <thead>
                  <tr>
                    <th class="rowStyle1"></th>                
                    @foreach($medidor->producoes as $producao)
                      <th>{{substr(strtoupper(Carbon\Carbon::parse($producao->data_medicao)->locale('pt_BR')->monthName), 0, 3)}}</th>
                    @endforeach
                    <th class="table-warning">Média</th>                
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="title">Produção real</td>                
                    @foreach($medidor->producoes as $producao)
                      <td>{{$producao->qtd_kwh_produzido}}</td>
                    @endforeach
                    <td class="table-warning">{{$medidor->media['producao_real']}}</td>                
                  </tr>
                  <tr>
                    <td class="title">Produção estimada</td>
                    @foreach($medidor->producoes as $producao)
                      <td>{{$producao->previsao_kwh_gerado}}</td>
                    @endforeach
                    <td class="table-warning">{{$medidor->media['producao_estimada']}}</td>                
                  </tr>
                  <tr>
                    <td class="title">Capacidade de produção mês a mês</td>                
                    @foreach($medidor->producoes as $producao)
                      <td><label class="badge badge-{{$producao->statusColor}}">{{$producao->capacidade}}%</label></td>
                    @endforeach
                    <td class="table-warning">
                      <label class="badge badge-{{$medidor->media['producao_status'][1]}}">
                        {{$medidor->media['producao_media']}}%
                      </label>
                    </td>                                 
                  </tr>                                   
                </tbody>
              </table>

              {{-- QUANTIDADE PRODUÇÃO ESTIMADA --}}
              <ul class="col-6 list-group mt-5 mx-auto">
                <li class="list-group-item d-flex justify-content-between align-items-center bg-primary text-white">
                  Quantidade de meses com produção abaixo do esperado
                  <span class="badge badge-danger badge-pill">{{$medidor->media['producao_negativa']}}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center bg-primary text-white">
                  Quantidade de meses com produção esperada
                  <span class="badge badge-success badge-pill">{{$medidor->media['producao_positiva']}}</span>
                </li>            
              </ul>

              {{-- GRÁFICOS --}}
              @if($medidor->graficoComparacao)
                <div class="col-10 align-items-center mt-5 mx-auto">
                  <div id="chartComparacao_{{$medidor->id}}"></div>
                </div>
                <div class="col-10 align-items-center mt-5 mx-auto">
                  <div id="chartCapacidadeProducao_{{$medidor->id}}"></div>
                </div>
                @include('admin.monitoramento.relatorios.charts.graficoComparacaoScript')
                @include('admin.monitoramento.relatorios.charts.graficoCapacidadeProducaoScript')
              @endif

            </div>
          </div>  
        @endif
      @endforeach
    </div>
  </div>
@endsection