@extends('layouts.user.app')

@section('title', 'Cadastrar medidor')

@section('head')
  <link rel="stylesheet" href="{{ asset('css/materialdesignicons.min.css') }}">
  <link rel="stylesheet" href="{{asset('css/jquery-ui.min.css')}}">
@endsection

@section('content')
  <div class="row">
    <div class="col-12 grid-margin">
      <div class="card">
        <div class="card-body">          
            @include('errors.lista')
            <form method="post" action="{{route('cadastrar.medidor')}}">
              {{ csrf_field() }}
              <div class="col-8 panel panel-default">
                <!-- Default panel contents -->
                <h3 class="card-title">Cadastrar medidor</h3>
                
                <div class="panel-body">
                  <div class="form-group">
                    {{-- NOME --}}
                    <label for="nome" class="pt-2 control-label">Nome:</label>
                    <input class="form-control input-sm" autofocus="autofocus" 
                                                         name="nome" 
                                                         type="text" 
                                                         id="nome" 
                                                         data-js="nome" 
                                                         value="{{old('nome')}}"
                                                         required>
                    {{-- CPF --}}
                    <label for="cpf" class="pt-2 control-label">CPF/CNPJ:</label>
                    <input class="form-control input-sm " name="cpf" 
                                                              type="text" 
                                                              id="cpf" 
                                                              data-js="cpf" 
                                                              value="{{old('cpf')}}"
                                                              required>
                    {{-- TELEFONE --}}
                    <label for="telefone" class="pt-2 control-label">Telefone:</label>
                    <input class="form-control input-sm mask" name="telefone" 
                                                              type="text" 
                                                              id="telefone" 
                                                              data-js="telefone" 
                                                              value="{{old('telefone')}}"
                                                              required>
                    {{-- ENDEREÇO --}}
                    <label for="cep" class="pt-2 control-label">CEP:</label>
                    <input class="form-control input-sm mask" name="cep" 
                                                              type="text" 
                                                              id="cep" 
                                                              data-js="cep" 
                                                              value="{{old('cep')}}"
                                                              required>

                    <label for="endereco" class="pt-2 control-label">Endereço:</label>
                    <input class="form-control input-sm" name="endereco" 
                                                         type="text" 
                                                         id="endereco" 
                                                         value="{{old('endereco')}}" 
                                                         readonly>
                    
                    <label for="numero" class="pt-2 control-label">Número:</label>
                    <input class="form-control input-sm mask" name="numero" 
                                                              data-js="numero" 
                                                              type="text" 
                                                              id="numero" 
                                                              value="{{old('numero')}}"
                                                              required>

                    <label for="complemento" class="pt-2 control-label">Complemento:</label>
                    <input class="form-control input-sm" name="complemento" 
                                                         type="text" 
                                                         id="complemento" 
                                                         value="{{old('complemento')}}">

                    <label for="cidade" class="pt-2 control-label">Cidade:</label>
                    <input class="form-control input-sm" name="cidade" 
                                                         type="text" 
                                                         id="cidade" 
                                                         value="{{old('cidade')}}" 
                                                         readonly>
                    
                    <label for="estado" class="pt-2 control-label">Estado:</label>
                    <input class="form-control input-sm" name="estado" 
                                                         type="text" 
                                                         id="estado" 
                                                         value="{{old('estado')}}" 
                                                         readonly>
                    {{-- CONCESSIONÁRIA --}}
                    <label for="concessionaria_id" class="pt-2">Selecione a concessionária:</label>
                    <select name="concessionaria_id" id="concessionaria_id" class="form-control" required>
                      <option value="" disable> Selecione </option>
                      @foreach($concessionarias as $concessionaria)
                        <option value="{{ $concessionaria->id }}" @if(old('concessionaria_id') == $concessionaria->id)selected @endif>
                          {{ $concessionaria->nome }}
                        </option>
                      @endforeach
                    </select>

                    <label for="codigo_instalacao" class="pt-2 control-label">Código Instalação:</label>
                    <input class="form-control input-sm mask" name="codigo_instalacao" 
                                                              data-js="codigo_instalacao" 
                                                              type="text" 
                                                              id="codigo_instalacao" 
                                                              value="{{old('codigo_instalacao')}}"
                                                              required>

                    <label for="dia_leitura" class="pt-2 control-label">Dia de previsão de leitura:</label>
                    <select name="dia_leitura" id="dia_leitura" class="form-control" required>
                      <option value="" disable> Selecione o dia </option>
                      @for ($i = 1; $i < 32; $i++)
                        <option value="{{$i}}" @if(old('dia_leitura') == $i)selected @endif>
                          {{$i}}
                        </option>
                      @endfor                      
                    </select>
                    
                    <label for="constante" class="pt-2 control-label">Constante:</label>
                    <input class="form-control input-sm mask" name="constante" 
                                                              data-js="constante" 
                                                              type="text" 
                                                              id="constante" 
                                                              value="{{old('constante')}}"
                                                              required>

                    <p style="margin-bottom:0;" class="pt-2">Possui produção fotovoltaica(Energia solar)?</p>
                    <div class="form-group row">
                      <div class="form-radio form-radio-flat ml-3">
                        <label class="form-check-label">
                          <input class="form-check-input" name="producao_fv" id="producao_fv_sim" value="1" type="radio">
                          Sim
                          <i class="input-helper"></i>
                        </label>
                      </div>
                      <div class="form-radio form-radio-flat-no ml-3">
                        <label class="form-check-label">
                          <input class="form-check-input" name="producao_fv" id="producao_fv_nao" value="0" type="radio">
                          Não
                          <i class="input-helper"></i>
                        </label>
                      </div>
                    </div>
                    <div id="medidorAntigo" style="display:none">

                      <label for="data_troca_medidor" class="pt-2 control-label">Data Troca Medidor:</label>
                      <input class="form-control input-sm mask date_calendar_medidor" name="data_troca_medidor" 
                                                                              data-js="data_troca_medidor" 
                                                                              type="text" 
                                                                              id="data_troca_medidor" 
                                                                              value="{{old('data_troca_medidor')}}"
                                                                              autocomplete="off">

                      <label for="leitura_medidor_anterior" class="pt-2 control-label">
                        Informe a medição do medidor no ato da troca: 
                        <i class="fas fa-info-circle" title="Essa informção é importante para calcular o resíduo de energia que ficou no relógio unidirecional que será cobrado nas primeiras contas com injeção de energia solar em formas de parcelas.Se não houver a medição do medidor anterior preencha com 0."></i>
                      </label>
                      <input class="form-control input-sm mask" name="leitura_medidor_anterior" 
                                                                data-js="leitura_medidor_anterior" 
                                                                type="text" id="leitura_medidor_anterior" 
                                                                value="{{old('leitura_medidor_anterior')}}">
                      
                      <label for="leitura_ultima_conta" class="pt-2 control-label">
                        Informe a última leitura emitida pela concessionária na sua conta antes da troca do medidor: 
                        <i class="fas fa-info-circle" title="Informe a leitura da última conta, pois essa informação é necessária para o cálculo do resíduo. Se não houver conta anterior preencha com 0."></i>
                      </label>
                      <input class="form-control input-sm mask" name="leitura_ultima_conta" 
                                                                data-js="leitura_ultima_conta" 
                                                                id="leitura_ultima_conta" 
                                                                value="{{old('leitura_ultima_conta')}}"
                                                                type="text">
                      
                      <label for="constante_ultima_conta" class="pt-2 control-label">
                        Constante Última Conta: 
                        <i class="fas fa-info-circle" title="Informe a constante da última conta, pois essa informação é necessária para o cálculo do resíduo. Se não houver conta anterior preencha com 0."></i>
                      </label>
                      <input class="form-control input-sm mask" name="constante_ultima_conta" 
                                                                data-js="constante_ultima_conta" 
                                                                id="constante_ultima_conta" 
                                                                value="{{old('constante_ultima_conta')}}"
                                                                type="text">                                          
                    </div>
                    <div id="creditosExcedentes" style="display:none">
                      <p style="margin-bottom:0;" class="pt-2">Receberá créditos excedentes?</p>
                      <div class="form-group row">
                        <div class="form-radio form-radio-flat ml-3">
                          <label class="form-check-label">
                            <input class="form-check-input" name="creditosExcedentes" id="creditos_excedentes_sim" value="1" type="radio">
                            Sim
                            <i class="input-helper"></i>
                          </label>
                        </div>
                        <div class="form-radio form-radio-flat-no ml-3">
                          <label class="form-check-label">
                            <input class="form-check-input" name="creditosExcedentes" id="creditos_excedentes_nao" value="0" type="radio">
                            Não
                            <i class="input-helper"></i>
                          </label>
                        </div>
                      </div>
                      <div id="creditosExcedentesPorcentagem" style="display:none">                        
                        <label for="medidor_fornecedor_id">Informe o medidor da instalação:</label>
                        <select name="medidor_fornecedor_id" id="medidor_fornecedor_id" class="form-control">
                          <option value="" disable> Selecione </option>
                          @foreach($medidores as $medidor)
                            <option value="{{ $medidor->id }}" data-js={{Carbon\Carbon::parse($medidor->data_troca_medidor)->format('d/m/Y')}}>
                              Cód. {{ $medidor->codigo_instalacao }} - {{ isset($medidor->address->endereco)?$medidor->address->endereco:"excluído" }}
                            </option>
                          @endforeach
                        </select>
                        
                        <label for="creditosRecebidos" class="pt-2 control-label">Qual a porcentagem dos créditos recebidos:</label>
                        <input class="form-control input-sm mask" name="creditosRecebidos" 
                                                                  data-js="creditosRecebidos" 
                                                                  type="text" 
                                                                  id="creditosRecebidos" 
                                                                  value="{{old('creditosRecebidos')}}">                                                                  
                      </div>
                    </div>
                    <div class="row pt-3" id="historicoContainer" style="display:none">
                      <div class="col-12">
                        <h4>Histórico</h4>
                      </div>
                      <div class="col-12" id="historico_texto">
                        <p></p>
                      </div>
                      {{-- Column 1 --}}
                      <div id="column1" class="col-md-6">  
                        &nbsp;
                      </div>
                      {{-- Column2 --}}
                      <div id="column2" class="col-md-6">  
                        &nbsp;
                      </div>
                    </div>

                  </div>
                </div>
                  <div class="mt-2 form-group">                    
                    <input class="btn btn-outline-success" type="submit" value="Cadastrar" id="btn-cadastrar">
                  </div>
              </div>                         
            </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <script src="{{ asset('js/jquery-ui.min.js') }}"></script>
  <script src="{{ asset('js/calendario.js') }}"></script>
  <script src="{{ asset('js/medidorAntigo.js') }}"></script> 
  <script src="{{ asset('js/creditosExcedentesPorcentagem.js') }}"></script> 
  <script src="{{ asset('js/tooltip.js') }}"></script> 
  <script src="{{ asset('js/validateDate.js') }}"></script> 
  <script src="{{ asset('js/inputHistoricoMedidor.js') }}"></script> 
  <script src="{{ asset('js/carregaCEP.js') }}"></script> 
  
  
  <script>
    const masks = {       
        cep(value){
            return value
                .replace(/\D/g,'')
                .replace(/(\d{5})(\d)/,'$1-$2')                    
                .replace(/(-\d{3})\d+?$/,'$1');
        },       
        cpf(value){
            return value
                .replace(/\D/g, '')
                .replace(/(\d{3})(\d)/, '$1.$2')
                .replace(/(\d{3})(\d)/, '$1.$2')
                .replace(/(\d{3})(\d{1,2})/, '$1-$2')
                .replace(/(-\d{2})\d+?$/, '$1')
        },       
        telefone(value){
            return value
                .replace(/\D/g, '')
                .replace(/(\d{2})(\d)/, '($1) $2')
                .replace(/(\d{4})(\d)/, '$1-$2')
                .replace(/(\d{4})-(\d)(\d{4})/, '$1$2-$3')
                .replace(/(-\d{4})\d+?$/, '$1')
        },       
        codigo_instalacao(value){
                          return value
                              .replace(/\D/g,'');
        },       
        dia_leitura(value){
                          return value
                              .replace(/\D/g,'')
                              .replace(/(\d{2})\d+?$/,'$1');
        },
        constante(value){
                          return value
                              .replace(/\D/g,'')
                              .replace(/(\d{2})\d+?$/,'$1');
        },
        numero(value){
                          return value
                              .replace(/\D/g,'');
        },
        leitura_medidor_anterior(value){
                          return value
                              .replace(/\D/g,'');
        },
        leitura_ultima_conta(value){
                          return value
                              .replace(/\D/g,'');
        },
        constante_ultima_conta(value){
                          return value
                              .replace(/\D/g,'');
        },
        creditosRecebidos(value){
                          return value
                              .replace(/\D/g,'');
        },
        data_troca_medidor(value){
            return value
                  .replace(/\D/g,'')
                  .replace(/(\d{2})(\d)/,'$1/$2')
                  .replace(/(\d{2})(\d)/,'$1/$2')
                  .replace(/(\d{4})\d+?$/,'$1');
                  //.replace(/[0-9]{2}[\/]{1}[0-9]{2}[\/]{1}[0-9]{4}$/g, '$1');
        },       
    }

    document.querySelectorAll('.mask').forEach(($input) => {
        const field = $input.dataset.js;
        
        $input.addEventListener('input', (e) => {
            e.target.value = masks[field](e.target.value);
        
            if((e.target.value.length == 9)&&(e.target.name=="cep")){
              let cep = e.target.value.replace("-","");
              let url = "{{env('APP_URL')}}";
              //console.log("URL:",url);
              carregaCEP(cep,url);
            }
        }, false);        
    });
    
    document.addEventListener("DOMContentLoaded", (e) => {  
      let elCep = document.getElementById("cep"); 
      let url = "{{env('APP_URL')}}";
      if(elCep.value != ""){      
        carregaCEP(elCep.value.replace("-",""),url);              
      }      
    }, false);

    

  </script>

@endsection