@extends('admin.template.layout')

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

@section('_head')
  <link href="{{ url('admin/css/pages/jogos.css') }}" rel="stylesheet">
  <script src="{{ url('admin/js/plugins/moment/moment.min.js')}}"></script>
@endsection

@section('content')
  <div class="container-fluid py-4">

    <div class="row mt-5">
      <div class="col-12">
        <div class="card card-relatorio">
          <div class="card-header">
            <div class="d-flex justify-content-between align-items-end mb-2">
              <h5 class="card-title m-0">Relatório de resultados</h5>
              <div class="nav-wrapper position-relative ms-auto me-3">
                <ul class="nav nav-pills nav-fill p-1 flex-row" role="tablist">
                  <li class="nav-item" role="presentation">
                    <a class="nav-link mb-0 px-5 py-1 active" data-bs-toggle="tab" href="#relatorio-blaze" role="tab" aria-controls="relatorio-blaze" aria-selected="true">
                      Blaze
                    </a>
                  </li>
                  {{-- <li class="nav-item" role="presentation">
                    <a class="nav-link mb-0 px-5 py-1" data-bs-toggle="tab" href="#relatorio-smash" role="tab" aria-controls="relatorio-smash" aria-selected="false" tabindex="-1">
                      Smash
                    </a>
                  </li> --}}
                  <li class="nav-item" role="presentation">
                    <a class="nav-link mb-0 px-5 py-1" data-bs-toggle="tab" href="#relatorio-jonbet" role="tab" aria-controls="relatorio-jonbet" aria-selected="false" tabindex="-1">
                      JonBET
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="d-flex align-items-end">
              <div class="form-group m-0" style="width: 200px">
                <label class="form-label">Período</label>
                <div class="input-group">
                  <span class="input-group-text" id="prefixId"><i class="fas fa-calendar"></i></span>
                  <select class="form-control" id="limite-relatorio">
                    {{-- <option value="hora">Última hora</option> --}}
                    <option value="hoje">Hoje</option>
                    <option value="semana">Esta semana</option>
                    <option value="mes">Este mês</option>
                    <option value="custom">Personalizado</option>
                  </select>
                </div>
              </div>
              <div class="datas-custom ms-3" style="display: none">
                <div class="row">
                  <div class="col-4">
                    <div class="form-group m-0">
                      <label class="form-label">Data inicial</label>
                      <input type="datetime-local" name="data_inicial" class="form-control">
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="form-group m-0">
                      <label class="form-label">Data final</label>
                      <input type="datetime-local" name="data_final" class="form-control">
                    </div>
                  </div>
                  <div class="col-4 mt-auto mb-2">
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="faixa_horario" name="faixa_horario" value="1">
                      <label class="form-check-label" for="faixa_horario">Faixa de horário</label>
                    </div>
                  </div>
                </div>
              </div>
              <a onclick="update_relatorio()" class="btn btn-secondary mt-auto mb-0 ms-3" data-bs-toggle="tooltip" data-bs-title="Atualizar"><i class="fas fa-sync"></i></a>
            </div>
          </div>
          <div class="card-body pt-0">
            <div class="tab-content" id="v-pills-tabContent">
              <div class="tab-pane fade position-relative active show" style="background-color: #212121" id="relatorio-blaze" role="tabpanel" aria-labelledby="cam1">
                <div class="relatorio">
                  <div class="head">
                    <div class="coluna">00</div>
                    <div class="coluna">01</div>
                    <div class="coluna">02</div>
                    <div class="coluna">03</div>
                    <div class="coluna">04</div>
                    <div class="coluna">05</div>
                    <div class="coluna">06</div>
                    <div class="coluna">07</div>
                    <div class="coluna">08</div>
                    <div class="coluna">09</div>
                  </div>
                  <div class="results"></div>
                </div>
              </div>
              {{-- <div class="tab-pane fade position-relative" style="background-color: #212121" id="relatorio-smash" role="tabpanel" aria-labelledby="cam1">
                <div class="relatorio">
                  <div class="head">
                    <div class="coluna">00</div>
                    <div class="coluna">01</div>
                    <div class="coluna">02</div>
                    <div class="coluna">03</div>
                    <div class="coluna">04</div>
                    <div class="coluna">05</div>
                    <div class="coluna">06</div>
                    <div class="coluna">07</div>
                    <div class="coluna">08</div>
                    <div class="coluna">09</div>
                  </div>
                  <div class="results"></div>
                </div>
              </div> --}}
              <div class="tab-pane fade position-relative" style="background-color: #212121" id="relatorio-jonbet" role="tabpanel" aria-labelledby="cam1">
                <div class="relatorio">
                  <div class="head">
                    <div class="coluna">00</div>
                    <div class="coluna">01</div>
                    <div class="coluna">02</div>
                    <div class="coluna">03</div>
                    <div class="coluna">04</div>
                    <div class="coluna">05</div>
                    <div class="coluna">06</div>
                    <div class="coluna">07</div>
                    <div class="coluna">08</div>
                    <div class="coluna">09</div>
                  </div>
                  <div class="results"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
@endsection

@section('_foot')
  
  <script src="{{ url('admin/js/jogos.js') }}"></script>
  <script>

    let results = {
      // smash: 0,
      blaze: 0,
      jonbet: 0
    }

    var interval = null;
    
    let last_linha = null; let first = false; let need_insert_day = false;
    function _get(limite, dti, dtf, faixa_horario, offset = 0) {

      return new Promise(function (resolve, reject) {
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          url: "{{ route('admin.relatorio.update') }}",
          data: {
            limite, dti, dtf, faixa_horario, offset
          },
          success: function (res) {
            if (res.success) {
              let total = 0;
              $.each(res.list, function (plataforma, list) {
                let container = $(`#relatorio-${plataforma} .relatorio .results`);

                // container.html('');
                for (let item of list) {
                  let jogos = [];

                  for (let jogo of item.results) {
                    let cor = 'white';
                    if (jogo.num > 0 && jogo.num < 8) {
                      cor = 'red';
                    } else if (jogo.num >= 8) {
                      cor = 'black';
                    }

                    jogos.push(`<div class="result ${cor}" data-bs-toggle="tooltip" data-bs-title="${jogo.data} - ${jogo.hora}">${jogo.num} <span>${jogo.hora}</span></div>`);
                    total++;
                  }

                  let insert_linha = function (inicio, final, jogos) {
                    let linha = `
                      <div class="linha">
                        <div class="time">
                          <span>${inicio}</span>
                          <span class="small">até</span>
                          <span>${final}</span>
                        </div>
                        <div class="jogos">
                          ${jogos.join('')}
                        </div>
                      </div>
                    `;

                    let el = $(linha).appendTo(container);
                    return el;
                  }

                  let el = null;
                  if (last_linha == null) {
                    first = true;
                    el = insert_linha(item.inicio, item.final, jogos);
                    
                    last_linha = {
                      inicio: item.inicio,
                      final: item.final,
                      el: el
                    }

                  } else {
                    if (item.inicio == last_linha.inicio) {
                      el = $(last_linha.el);
                      el.find('.jogos').append(jogos.join(''));
                    } else {
                      if (!faixa_horario || jogos.length > 0) {
                        el = insert_linha(item.inicio, item.final, jogos);
                      
                        last_linha = {
                          inicio: item.inicio,
                          final: item.final,
                          el: el
                        }
                      }

                    }
                  }

                  if (item.inicio == '00:00' || first == true || need_insert_day == true) {
                    if (jogos[0] != undefined) {
                      let data = $(jogos[0]).attr('data-bs-title').split('-');
                      data = data[0].split('/');
                      let dia = moment(data[2].trim() + '-' + data[1] + '-' + data[0]);
                      
                      $(`<div class="data">${dia.format('DD/MM')}</div>`).insertBefore(last_linha.el);
                      first = false;
                      need_insert_day = false;
                    } else {
                      need_insert_day = true;
                    }
                  }

                  if (el != undefined) {
                    $(el.find('[data-bs-toggle="tooltip"]')).each(function (index, e) {
                      new bootstrap.Tooltip(e);
                    });
                  }
                }
              });

              resolve({
                offset: res.offset,
                total: total
              });
            }
          }
        })
      })
    }
    
    async function update_relatorio() {
      let offsets = [];

      let btn = $('a[onclick="update_relatorio()"]');
      let limite = $('#limite-relatorio').val();
      let dti = $('.datas-custom input[name="data_inicial"]').val();
      let dtf = $('.datas-custom input[name="data_final"]').val();
      let faixa_horario = $('#faixa_horario').prop('checked');

      if (limite == 'custom' && (dti == '') || dtf == '') {
        return;
      }

      btn.addClass('disabled').attr('disabled', true);
      btn.find('i').addClass('fa-spin');

      $(`.relatorio .results`).each(function (index, el) {
        $(el).find('[data-bs-toggle="tooltip"]').each(function (index, e) {
          let t = bootstrap.Tooltip.getInstance(e);
          t.dispose();

        });
        $(el).html('');
      });     
      
      offsets.push(0);
      let run = await _get(limite, dti, dtf, faixa_horario);
      if (interval !== null) clearInterval(interval);

      interval = setInterval(async () => {
        if (!offsets.includes(run.offset)) {
          offsets.push(run.offset);
          run = await _get(limite, dti, dtf, faixa_horario, run.offset);
          if (!run.total > 0) {
            clearInterval(interval);
            btn.removeClass('disabled').removeAttr('disabled');
            btn.find('i').removeClass('fa-spin');
          }
        }
      }, 2000);
    }

    $(document).ready(function () {
      update_relatorio();
      $('#limite-relatorio').change(function () {
        if ($(this).val() == 'custom') {
          $('.datas-custom').fadeIn();
        } else {
          $('.datas-custom').fadeOut();
        }

        // update_relatorio();
      });

      // let timeout = null;
      // $('.datas-custom input[name="data_inicial"], .datas-custom input[name="data_final"], #faixa_horario').blur(function () {
      //   if (timeout !== null) clearTimeout(timeout);

      //   setTimeout(() => {
      //     timeout = update_relatorio();
      //   }, 2000);
      // });

    });
  </script>
@endsection