<div id="destacados">
  <div class="ui container">
    <div class="ui header titulo">
      PROYECTOS DESTACADOS
    </div>
    <div class="ui four columns stackable grid" id="proyectos">
      @for ($i = 0; $i < min(4, count($destacados)); $i ++)
        <div class="column">
          <div class="ui card ficha">
            <div class="content">
              <div class="header titulo">
                Proyecto
              </div>
              <div class="meta">
                <div class="right floated">
                  Segmento
                </div>
                Comuna
              </div>
            </div>
            <div class="image">
              <div class="ui placeholder">
                <div class="square image"></div>
              </div>
            </div>
            <div class="content">
              Detalles
            </div>
          </div>
        </div>
      @endfor
    </div>
    @if (count($destacados) > 4)
      <div class="ui grid" id="paging">
      </div>
    @endif
  </div>
</div>

@push('scripts')
  <script type="text/javascript">
    var destacados = {
      curr_page: 1,
      max_page: {{ceil(count($destacados) / 4)}},
      id: '#destacados',
      buildCard: (div, id) => {
        $.ajax({
          url: '{{$urls->base}}/proyecto/' + id + '/ficha',
          success: function(data) {
            div.append(data)
          }
        })
      },
      fillCards: (data) => {
        var proyectos = $(destacados.id).find('#proyectos')
        proyectos.html('')
        $.each(data, function(i, el) {
          var div = $('<div></div>').attr('class', 'column')
          proyectos.append(
            div
          )
          destacados.buildCard(div, el)
        })
      },
      movePage: (page) => {
        if (page == 'prev') {
          page = Math.max(1, parseInt(destacados.curr_page) - 1)
        }
        if (page == 'next') {
          page = Math.min(destacados.max_page, parseInt(destacados.curr_page) + 1)
        }
        destacados.findPage(page)
      },
      buildPaging: () => {
        var paging = $(destacados.id).find('#paging')
        paging.html('')
        paging.append(
          $('<div></div>').attr('class', 'column')
        )
        var ini = destacados.curr_page - 1
        if (destacados.curr_page == 1) {
          ini = 1
        }
        if (destacados.curr_page == destacados.max_page) {
          ini = destacados.curr_page - 2
        }
        if (destacados.curr_page > 1) {
          paging.append(
            $('<div></div>').attr('class', 'column').append(
              $('<span></span>').attr('class', 'pagina').attr('data-page', 'prev').append(
                $('<i></i>').attr('class', 'angle left icon')
              )
            )
          )
        }
        var max = Math.min(destacados.max_page, ini + 2)
        for (var i = ini; i <= max; i ++) {
          var span = $('<span></span>').attr('class', 'pagina').attr('data-page', i).html(i)
          if (i == destacados.curr_page) {
            span.addClass('active')
          }
          paging.append(
            $('<div></div>').attr('class', 'column').append(span)
          )
        }
        if (destacados.curr_page < destacados.max_page) {
          paging.append(
            $('<div></div>').attr('class', 'column').append(
              $('<span></span>').attr('class', 'pagina').attr('data-page', 'next').append(
                $('<i></i>').attr('class', 'angle right icon')
              )
            )
          )
        }
        $(destacados.id).find('.pagina:not(.active)').css('cursor', 'pointer').click(function() {
          var page = $(this).attr('data-page')
          destacados.movePage(page)
        })
      },
      findPage: (page) => {
        $.getJSON('{{$urls->base}}/proyectos/destacados/' + page, function(data) {
          $('#destacados').find('.pagina.active').removeClass('.active')
          destacados.curr_page = data.information.page
          destacados.buildPaging()
          destacados.fillCards(data.destacados)
        })
      },
      setup: () => {
        destacados.buildPaging()
        destacados.findPage(destacados.curr_page)
      }
    }
    $(document).ready(function() {
      destacados.setup()
    })
  </script>
@endpush
