Se avanza en la pagina de inicio, falta los indicadores

resources/views/home/destacados.blade.php

@@ -0,0 +1,137 @@
+<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