@extends('masterpage.masterpage')
@section('content')

  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Cockpit - Setup</h1>
        </div>       
      </div>
    </div>
  </section>
  <section class="content">
    <div class="container-fluid">
      @if(Session::has('flash_message'))
        <div class="alert alert-success alert-dismissible">
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
          {{ Session::get('flash_message')}}
        </div>
      @endif
      <div class="card card-default">
        <div class="card-header">
          <h3 class="card-title"><b><i>Cadastro</i></b></h3>
        </div>
        <div class="row">
          <form id="frmCockpit" action="{{ URL('cockpit/store') }}" method="post" role="form">
            <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
            <div class="card-body">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <label>Total de votos</label>
                    <input type="number" id="votos" name="votos" class="form-control" autofocus required>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label>Previsão de votos</label>
                    <input type="number" id="votos_previsao" name="votos_previsao" class="form-control" readonly>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Data inicial</label>
                    <input type="date" id="data_inicial" name="data_inicial" class="form-control" required>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Data final</label>
                    <input type="date" id="data_final" name="data_final" class="form-control" required onblur="diffDate()">
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Qtd. meses</label>
                    <input type="number" id="meses" name="meses" class="form-control" readonly>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Qtd. dias</label>
                    <input type="number" id="dias" name="dias" class="form-control" readonly>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Qtd. lideranças</label>
                    <input type="number" min="0" id="liderancas" name="liderancas" class="form-control" required onchange="projecaoEleitores()">
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Líder / lideranças</label>
                    <input type="number" min="0" id="meta_liderancas" name="meta_liderancas" class="form-control" required onchange="projecaoEleitores()">
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Eleitor / liderança</label>
                    <input type="number" min="0" id="meta_eleitores" name="meta_eleitores" class="form-control" required onchange="projecaoEleitores()">
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>% de descarte</label>
                    <input type="number" min="0" id="descarte" name="descarte" class="form-control" required onchange="projecaoEleitores()">
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Investimento</label>
                    <input type="number" value="0" min="0" id="investimento" name="investimento" class="form-control" required onchange="setInvestimento()">
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Investimento / mês</label>
                    <input type="number" id="investimento_mes" name="investimento_mes" class="form-control" readonly>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Investimento / líder</label>
                    <input type="number" id="investimento_lider" name="investimento_lider" class="form-control" readonly>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <label>Investimento / eleitor</label>
                    <input type="number" id="investimento_eleitor" name="investimento_eleitor" class="form-control" readonly>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <button type="button" onclick="submitForm()" class="btn btn-primary w-100">Iniciar campanha</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Cockpit - Sintético</h1>
        </div>       
      </div>
    </div>
  </section>
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">

          <div class="card card-default">
            <div class="card-header">
              @if (count($cockpit) > 0)
                <h3 class="card-title"><b><i>({{ $totalVotosAtual }} / {{ $cockpit[0]->votos_previsao }}) votos. 
                  Desempenho: {{ number_format($desempenhoVotos, 2, ',', '') }}%</i></b>
                </h3>
              @else
                <h3 class="card-title"><b><i>({{ $totalVotosAtual }} / 0) votos. Desempenho: 0,00%</i></b></h3>
              @endif
            </div>
            <div class="card-body">
              <div class="progress mb-3">
                <div id="progressCampanha" class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </div>
          </div>

          <div class="card card-default">
            <div class="card-header">
              @if (count($cockpit) > 0)
                <h3 class="card-title"><b><i>({{ $liderancas }} / {{ $liderancasMeta }}) lideranças. 
                  Desempenho: {{ number_format($desempenhoLideranca, 2, ',', '') }}%</i></b>
                </h3>
              @else
                <h3 class="card-title"><b><i>({{ $totalVotosAtual }} / 0) votos. Desempenho: 0,00%</i></b></h3>
              @endif
            </div>
            <div class="card-body">
              <div class="progress mb-3">
                <div id="progressLideranca" class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </div>
          </div>

          <div class="card card-default">
            <div class="card-header">
              @if (count($cockpit) > 0)
                <h3 class="card-title"><b><i>({{ $eleitores }} / {{ $eleitoresMeta }}) eleitores. 
                  Desempenho: {{ number_format($desempenhoEleitores, 2, ',', '') }}%</i></b>
                </h3>
              @else
                <h3 class="card-title"><b><i>({{ $totalVotosAtual }} / 0) votos. Desempenho: 0,00%</i></b></h3>
              @endif
            </div>
            <div class="card-body">
              <div class="progress mb-3">
                <div id="progressEleitores" class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </div>
          </div>

        </div>

        <!--
        <div class="col-md-6">

          <div class="card card-default">
            <div class="card-header">
              <h3 class="card-title"><b><i>Desempenho previsão de votos</i></b></h3> 
            </div>
            <div class="card-body">
              <div class="chart">
                <div class="chartjs-size-monitor">
                  <div class="chartjs-size-monitor-expand">
                    <div class=""></div>
                  </div>
                  <div class="chartjs-size-monitor-shrink">
                    <div class=""></div>
                  </div>
                </div>
                <canvas id="canvaPrevisaoVotos"
                  style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 562px;"
                  width="562" height="250" class="chartjs-render-monitor">
                </canvas>
              </div>
            </div>
          </div>

          <div class="card card-default">
            <div class="card-header">
              <h3 class="card-title"><b><i>Meta lideranças</i></b></h3> 
            </div>
            <div class="card-body">
              <div class="chartjs-size-monitor">
                <div class="chartjs-size-monitor-expand">
                  <div class=""></div>
                </div>
                <div class="chartjs-size-monitor-shrink">
                  <div class=""></div>
                </div>
              </div>
              <canvas id="canvaLiderancas"
                style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 562px;"
                width="562" height="250" class="chartjs-render-monitor">
              </canvas>
            </div>
          </div>
         
        </div>
       
        <div class="col-md-6">

          <div class="card card-default">
            <div class="card-header">
              <h3 class="card-title"><b><i>Meta eleitores</i></b></h3>
            </div>
            <div class="card-body">
              <div class="chartjs-size-monitor">
                <div class="chartjs-size-monitor-expand">
                  <div class=""></div>
                </div>
                <div class="chartjs-size-monitor-shrink">
                  <div class=""></div>
                </div>
              </div>
              <canvas id="canvaEleitores"
                style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 562px;"
                width="562" height="250" class="chartjs-render-monitor">
              </canvas>
            </div>
          </div>

          <div class="card card-default">
            <div class="card-header">
              <h3 class="card-title"><b><i>Meta de gastos</i></b></h3> 
            </div>
            <div class="card-body">
              <div class="chart">
                <div class="chartjs-size-monitor">
                  <div class="chartjs-size-monitor-expand">
                    <div class=""></div>
                  </div>
                  <div class="chartjs-size-monitor-shrink">
                    <div class=""></div>
                  </div>
                </div>
                <canvas id="lineChart"
                  style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 562px;"
                  width="562" height="250" class="chartjs-render-monitor">
                </canvas>
              </div>
            </div>
          </div>

        </div>
      -->
      </div>
    </div>
  </section>

@stop  

@section('scripts')

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js" integrity="sha512-Rdk63VC+1UYzGSgd3u2iadi0joUrcwX0IWp2rTh6KXFoAmgOjRS99Vynz1lJPT8dLjvo6JZOqpAHJyfCEZ5KoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>

    $(document).ready(function() {

      var investimento = 0
      var investimento_mes = 0
      var investimento_lider = 0
      var investimento_eleitor = 0
      var diffMonths = 0
      var qtdLiderancas = 0
      var metaLiderancas = 0
      var metaEleitores = 0

      var cockpit = {!! json_encode($cockpit) !!}     
      if (cockpit.length > 0) {
        var elitoresAtuais = {!! json_encode($eleitores) !!}
        var liderancasAtuais = {!! json_encode($liderancas) !!}
        var totalVotosAtual = {!! json_encode($totalVotosAtual) !!}
        var desempenhoEleitores = {!! json_encode($eleitores) !!} * 100 / {!! json_encode($eleitoresMeta) !!}
        var desempenhoLideranca = {!! json_encode($liderancas) !!} * 100 / {!! json_encode($liderancasMeta) !!}
        var desempenhoVotos = {!! json_encode($desempenhoVotos) !!}
        document.getElementById('progressCampanha').style.width = {!! json_encode($totalVotosAtual) !!} * 100 / cockpit[0].votos_previsao +'%';
        document.getElementById('progressLideranca').style.width = desempenhoLideranca +'%';
        document.getElementById('progressEleitores').style.width = desempenhoEleitores +'%';

        /*
        const ctx = document.getElementById('canvaPrevisaoVotos').getContext('2d');
        const myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['Previsto', 'Realizado'],
            datasets: [{
              axis: 'y',
              label: 'Previsto vs Realizado',
              data: [cockpit[0].votos_previsao, totalVotosAtual],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)'
              ],
              borderWidth: 1
            }]
          },
          options: {
            indexAxis: 'y',
          }
        });

        const ctxLider = document.getElementById('canvaLiderancas').getContext('2d');
        const myChartLider = new Chart(ctxLider, {
          type: 'bar',
          data: {
              labels: ['Previsto', 'Realizado'],
              datasets: [{
                  label: 'Previsto vs Realizado',
                  data: [cockpit[0].meta_liderancas, liderancasAtuais],
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)'
                  ],
                  borderColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)'
                  ],
                  borderWidth: 1
              }]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }]
            }
          }
        });

        const ctxEleitor = document.getElementById('canvaEleitores').getContext('2d');
        const myChartEleitor = new Chart(ctxEleitor, {
          type: 'bar',
          data: {
              labels: ['Previsto', 'Realizado'],
              datasets: [{
                  label: 'Previsto vs Realizado',
                  data: [cockpit[0].meta_eleitores, elitoresAtuais],
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)'
                  ],
                  borderColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)'
                  ],
                  borderWidth: 1
              }]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }]
            }
          }
        });
        */

        document.getElementById('votos').value = cockpit[0].votos
        document.getElementById('data_inicial').value = cockpit[0].data_inicial
        document.getElementById('data_final').value = cockpit[0].data_final
        diffDate()
        document.getElementById('liderancas').value = cockpit[0].liderancas
        document.getElementById('meta_liderancas').value = cockpit[0].meta_liderancas
        document.getElementById('meta_eleitores').value = cockpit[0].meta_eleitores
        document.getElementById('descarte').value = cockpit[0].descarte
        projecaoEleitores()
        document.getElementById('investimento').value = cockpit[0].investimento
        setInvestimento()
      }
    });

    async function diffDate() {
      var dataInicial = new Date(document.getElementById('data_inicial').value)
      var dataFinal = new Date(document.getElementById('data_final').value)
      const diffTime = Math.abs(dataFinal - dataInicial);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      document.getElementById('dias').value = diffDays
      diffMonths = (dataFinal.getFullYear() - dataInicial.getFullYear())*12 + (dataFinal.getMonth() - dataInicial.getMonth());
      document.getElementById('meses').value = diffMonths
      if (document.getElementById('votos_previsao').value != '') {
        await projecaoEleitores()
      }
    }

    async function projecaoEleitores() {
      if (document.getElementById('liderancas').value != '' && document.getElementById('meta_liderancas').value != '' &&
        document.getElementById('meta_eleitores').value != '' && document.getElementById('descarte').value != '') {
        qtdLiderancas = document.getElementById('liderancas').value
        metaLiderancas = document.getElementById('meta_liderancas').value
        metaEleitores = document.getElementById('meta_eleitores').value
        var descarte = document.getElementById('descarte').value
        var eleitoresValidos = (qtdLiderancas * (2 ** metaLiderancas) +  qtdLiderancas * (2 ** metaLiderancas) * metaEleitores) - (((qtdLiderancas * (2 ** metaLiderancas)) +  qtdLiderancas * (2 ** metaLiderancas) * metaEleitores) * (descarte / 100))
        document.getElementById('votos_previsao').value = eleitoresValidos
        if (investimento == 0 || document.getElementById('investimento').value != '') {
          await setInvestimento()
        }
      }
    }

    async function setInvestimento() {
      if (document.getElementById('dias').value != '' && document.getElementById('votos_previsao').value != '') {
        investimento = document.getElementById('investimento').value
        investimento_mes = investimento / diffMonths
        document.getElementById('investimento_mes').value = investimento_mes
        investimento_lider = investimento / (qtdLiderancas * (2 ** metaLiderancas))
        document.getElementById('investimento_lider').value = investimento_lider
        investimento_eleitor = (investimento - investimento_lider) / (qtdLiderancas * (2 ** metaLiderancas) * metaEleitores)
        document.getElementById('investimento_eleitor').value = investimento_eleitor
      } else {
        Swal.fire(
          'Atenção!',
          'Todos os campos devem ser preenchidos para calcular a projeção financeira.',
          'info'
        )
      }
    }

    function submitForm() {
      if (document.getElementById('investimento').value == '') {
        Swal.fire(
          'Atenção!',
          'O campo investimento não pode ser vazio.',
          'info'
        )
      } else {
        document.getElementById('frmCockpit').submit()
      }
    }

  </script>

@stop