@extends('layouts.user.app')

@section('title', 'Relatórios')

@section('content')
  <div class="row">  
  @include('messages._error')  
    <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</h2>
          <form class="col-6 pt-2" method="POST" action="{{route('gerar.relatorio')}}">
            @csrf            
              <div class="form-group row text-left">
                <label class="pt-2 col-sm-4 col-form-label" for="medidor_id">Selecione o cliente</label>              
                <div class="col-sm-7">
                  <select name="medidor_id" id="medidor_id" class="form-control" required>
                    <option value="" disable> Selecione </option>
                    <option value="todos" @if(old('medidor_id')=="todos"){{'selected'}}@endif> Todos </option>
                    @foreach($medidores as $medidor_atual)
                      <option value="{{ $medidor_atual->id }}" @if(old('medidor_id')==$medidor_atual->id){{'selected'}}@endif>
                        {{ ucfirst($medidor_atual->nome)}}
                      </option>
                    @endforeach
                  </select>
                </div>
              </div>

              <div class="form-group row text-left">
                <label class="pt-2 col-sm-4 col-form-label" for="tipo">Selecione o tipo</label>     
                <div class="col-sm-7">         
                  <select name="tipo" id="tipo" class="form-control" required>
                    <option value="" disable> Selecione </option>
                    <option value="analitico" @if (old('tipo') == "analitico") {{ 'selected' }} @endif> Analítico </option>
                    <option value="sintetico" @if (old('tipo') == "sintetico") {{ 'selected' }} @endif> Sintético </option>
                  </select>
                </div>
              </div>              
              <div class="form-group row text-left">
                <label class="pt-2 col-sm-4 col-form-label" for="inversor">Inversor</label>     
                <div class="col-sm-7">         
                  <select name="inversor" id="inversor" class="form-control" required>
                    <option value="" disable> Selecione </option>
                    <option value="todos" @if(old('inversor')=="todos"){{'selected'}}@endif> Todos </option>
                    <option value="1" @if(old('inversor')=="1"){{'selected'}}@endif> Online </option>
                    <option value="2" @if(old('inversor')=="2"){{'selected'}}@endif> Offline </option>
                  </select>
                </div>
              </div>              
              <div class="form-group row text-left">
                <label class="pt-2 col-sm-4 col-form-label" for="data_inicial">Data inicial</label>              
                <div class="col-sm-7">
                  <div class="d-flex flex-row">
                    <select name="data_inicial_mes" id="data_inicial_mes" class="form-control col-3" required>
                      <option value="" disable>Mês</option>                    
                      <option value="1" @if(old('data_inicial_mes')=="1"){{'selected'}}@endif>Janeiro</option>                    
                      <option value="2" @if(old('data_inicial_mes')=="2"){{'selected'}}@endif>Fevereiro</option>                    
                      <option value="3" @if(old('data_inicial_mes')=="3"){{'selected'}}@endif>Março</option>                    
                      <option value="4" @if(old('data_inicial_mes')=="4"){{'selected'}}@endif>Abril</option>                    
                      <option value="5" @if(old('data_inicial_mes')=="5"){{'selected'}}@endif>Maio</option>                    
                      <option value="6" @if(old('data_inicial_mes')=="6"){{'selected'}}@endif>Junho</option>                    
                      <option value="7" @if(old('data_inicial_mes')=="7"){{'selected'}}@endif>Julho</option>                    
                      <option value="8" @if(old('data_inicial_mes')=="8"){{'selected'}}@endif>Agosto</option>                    
                      <option value="9" @if(old('data_inicial_mes')=="9"){{'selected'}}@endif>Setembro</option>                    
                      <option value="10" @if(old('data_inicial_mes')=="10"){{'selected'}}@endif>Outubro</option>                    
                      <option value="11" @if(old('data_inicial_mes')=="11"){{'selected'}}@endif>Novembro</option>                    
                      <option value="12" @if(old('data_inicial_mes')=="12"){{'selected'}}@endif>Dezembro</option>                    
                    </select>
                    <div class="col-1">&nbsp;</div>
                    <select name="data_inicial_ano" id="data_inicial_ano" class="form-control col-3" required>
                      <option value="" disable>Ano</option>
                      @for ($i = 2018; $i <= $date_now->year; $i++)
                        <option value="{{$i}}" @if(old('data_inicial_ano')==$i){{'selected'}}@endif>{{$i}}</option>
                      @endfor
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group row text-left">
                <label class="pt-2 col-sm-4 col-form-label" for="data_final">Data final(opcional)</label>              
                <div class="col-sm-7">
                  <div class="d-flex flex-row">
                    <select name="data_final_mes" id="data_final_mes" class="form-control col-3">
                      <option value="" disable>Mês</option>                    
                      <option value="1" @if(old('data_final_mes')=="1"){{'selected'}}@endif>Janeiro</option>                    
                      <option value="2" @if(old('data_final_mes')=="2"){{'selected'}}@endif>Fevereiro</option>                    
                      <option value="3" @if(old('data_final_mes')=="3"){{'selected'}}@endif>Março</option>                    
                      <option value="4" @if(old('data_final_mes')=="4"){{'selected'}}@endif>Abril</option>                    
                      <option value="5" @if(old('data_final_mes')=="5"){{'selected'}}@endif>Maio</option>                    
                      <option value="6" @if(old('data_final_mes')=="6"){{'selected'}}@endif>Junho</option>                    
                      <option value="7" @if(old('data_final_mes')=="7"){{'selected'}}@endif>Julho</option>                    
                      <option value="8" @if(old('data_final_mes')=="8"){{'selected'}}@endif>Agosto</option>                    
                      <option value="9" @if(old('data_final_mes')=="9"){{'selected'}}@endif>Setembro</option>                    
                      <option value="10" @if(old('data_final_mes')=="10"){{'selected'}}@endif>Outubro</option>                    
                      <option value="11" @if(old('data_final_mes')=="11"){{'selected'}}@endif>Novembro</option>                    
                      <option value="12" @if(old('data_final_mes')=="12"){{'selected'}}@endif>Dezembro</option>                   
                    </select>
                    <div class="col-1">&nbsp;</div>
                    <select name="data_final_ano" id="data_final_ano" class="form-control col-3">
                      <option value="" disable>Ano</option>
                      @for ($i = 2018; $i <= $date_now->year; $i++)
                        <option value="{{$i}}" @if(old('data_final_ano')==$i){{'selected'}}@endif>{{$i}}</option>
                      @endfor
                    </select>
                  </div>
                </div>
              </div>

              <div class="col-sm-10 pt-4 text-right">
                <button type="submit" class="btn btn-primary btn-fw">Gerar relatório</button>
              </div>               
          </form>
        </div>
      </div>      
    </div>
  </div>
@endsection
@section('scripts')
  <script>
    const selectClientElement = document.querySelector('#medidor_id');
    const url = '{{env('APP_URL')}}/api/monitoramento-datas';    
    
    // Altera o dropdown Data_inicial
    selectClientElement.addEventListener('change', (event) => {     

      let dropdownDataInicial = document.getElementById('data_inicial');
      dropdownDataInicial.length = 0;

      let defaultOptionDataInicial = document.createElement('option');
      defaultOptionDataInicial.text = 'Selecione a data inicial';

      dropdownDataInicial.add(defaultOptionDataInicial);
      dropdownDataInicial.selectedIndex = 0;
      
      axios.post(url, {'medidor_id':event.target.value, 'data_inicial': 'null'})
        .then(response => {            
            if(response.data.length === 0){ 
              optionDataInicial = document.createElement('option');             
              optionDataInicial.text = "Nenhuma produção cadastrada para esse cliente no momento.";
              optionDataInicial.value = 0;
              dropdownDataInicial.add(optionDataInicial);                                          
            }else{ 
              response.data.forEach((value, index) => {            
                optionDataInicial = document.createElement('option');    
                optionDataInicial.text = value.dataFormated;
                optionDataInicial.value = value.data_medicao;
                dropdownDataInicial.add(optionDataInicial);                  
              });            
            }            
        })
        .catch(error => {
            console.log("Erro!" + error);                    
        });
    });

    const dataInicialElement = document.querySelector('#data_inicial');

    dataInicialElement.addEventListener('change', (event) => {     

      let dropdown = document.getElementById('data_final');
      dropdown.length = 0;

      let defaultOption = document.createElement('option');
      defaultOption.text = 'Selecione a data final';

      dropdown.add(defaultOption);
      dropdown.selectedIndex = 0;

      axios.post(url, {'medidor_id': selectClientElement.options[selectClientElement.selectedIndex].value ,'data_inicial':event.target.value})
        .then(response => {            
            if(response.data.length === 0){
              option = document.createElement('option');
              option.text = "Nenhuma produção cadastrada para esse cliente no momento.";
              option.value = 0;
              dropdown.add(option);                                          
            }else{                 
                response.data.forEach((value, index) => {
                  option = document.createElement('option');
                  option.text = value.dataFormated;
                  option.value = value.data_medicao;
                  dropdown.add(option);                  
                });            
            }            
        })
        .catch(error => {
            console.log("Erro!" + error);                    
        });
    });
  </script>
  <script src="{{ asset('js/alertDismiss.js') }}"></script>
@endsection