<div id="indicadores">
  <div class="ui container">
    <div class="slideshow ui center aligned grid">
    </div>
  </div>
</div>

@push('scripts')
  <script type="text/javascript">
    var slideshow = {
      slides: [],
      id: '.slideshow',
      slide_id: '.slide',
      current: 0,
      speed: 1,
      delay: 10,
      move: () => {
        var ini = parseInt($(slideshow.id).find(slideshow.slide_id + ':first-child').css('left'))
        if (isNaN(ini)) {
          ini = 0
        }
        console.debug(ini)
        $(slideshow.id).find(slideshow.slide_id + ':first-child').css('left', ini - slideshow.speed)
        var w = parseInt($(slideshow.id).find(slideshow.slide_id + ':first-child').css('width'))
        var p0 = 0
        var p = parseInt($(slideshow.id).find(slideshow.slide_id + ':first-child').css('left'))
        if (p + w < p0) {
          slideshow.addNext()
        }
        setTimeout(slideshow.move, slideshow.delay)
      },
      addNext: () => {
        var data = [
          $(slideshow.id).find(slideshow.slide_id + ':first-child').attr('class'),
          $(slideshow.id).find(slideshow.slide_id + ':first-child').html()
        ]
        var c = slideshow.current + 1
        if (c >= slideshow.slides.length) {
          c = 0
        }
        $(slideshow.id).find(slideshow.slide_id + ':first-child').remove()
        slideshow.slides.shift()
        var div = $('<div></div>').attr('class', data[0]).attr('data-title', data[1]).attr('data-content', data[2]).html(
          data[3]
        )
        $(slideshow.id).append(
          div
        )
        div.popup(9)
        slideshow.slides.push(div)
        slideshow.current = c
      },
      setup: () => {
        $(slideshow.id).parent().css('overflow', 'hidden')
        $(slideshow.id).find(slideshow.slide_id).each((i, el) => {
          slideshow.slides.push($(el).html())
        })
        var w = $(slideshow.id).find(slideshow.slide_id + ':first-child').css('width')
        var div = $('<div></div>').attr('class', 'slide').html(slideshow.slides[0])
        $(slideshow.id).append(div)
        setTimeout(slideshow.move, slideshow.delay)
      }
    }
    var indicadores = {
      indicadores: [
        @foreach ($indicadores as $indicador => $titulo)
        {
          sim: '{{$indicador}}',
          titulo: '{{$titulo}}'
        },
        @endforeach
      ],
      id: '#indicadores',
      current: {{count($indicadores)}},
      findIndicador: (i) => {
        var indicador = indicadores.indicadores[i]
        return $.ajax({
          url: '{{$urls->base}}/indicador/' + indicador.sim,
          success: (data) => {
            var div = $('<div></div>').attr('class', 'two wide column slide').append(
              $('<div></div>').attr('class', 'ui header').attr('data-title', 'Fecha').attr('data-content', data.valor.fecha).append(indicador.titulo).append(
                $('<div></div>').attr('class', 'sub header').html(data.valor.valor)
              )
            )
            div.find('.header').popup(9)
            $(indicadores.id).find('.slideshow').append(div)
          }
        })
      },
      setup: () => {
        var promises = []
        promise = null
        $.each(indicadores.indicadores, (i, el) => {
          promise = indicadores.findIndicador(i)
          promises.push(promise)
        })
        Promise.all(promises).then(() => {
          //slideshow.setup()
        })
      }
    }
    $(document).ready(() => {
      indicadores.setup()
    })
  </script>
@endpush
