Se avanza en la pagina de inicio, falta los indicadores

resources/views/home.blade.php

@@ -2,9 +2,14 @@
 
 @section('page_content')
   @include('home.banner')
-  @include('home.segmentos')
+  @include('home.aviso')
   @include('home.destacados')
+  @include('home.segmentos')
   @include('home.resumen')
   @include('home.indicadores')
-  @include('home.confianza')
+  @include('home.contacto')
 @endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/home.css" />
+@endpush

resources/views/home/aviso.blade.php

@@ -0,0 +1,57 @@
+@if (isset($aviso) and $aviso)
+  <div id="aviso">
+    <div class="ui container">
+      <div class="ui center aligned grid">
+        <div class="ten wide column">
+          <div class="ui header">
+            BENEFICIOS COVID 19
+          </div>
+          Bono Pie 10%
+        </div>
+        <div class="row">
+          @foreach ($avisos as $i => $av)
+            <i class="circle outline tiny icon" data-id="{{$i + 1}}"></i>
+          @endforeach
+        </div>
+      </div>
+    </div>
+  </div>
+@endif
+
+@push('scripts')
+  <script type="text/javascript">
+    var avisos = {
+      avisos: [
+        @foreach ($avisos as $av)
+          {
+            titulo: '{{$av->titulo}}',
+            contenido: '{{$av->contenido}}'
+          },
+        @endforeach
+      ],
+      id: '#aviso',
+      curr_page: 1,
+      setup: () => {
+        avisos.movePage(avisos.curr_page)
+      },
+      movePage: (page) => {
+        var aviso = avisos.avisos[page - 1]
+        $(avisos.id).find('.grid .column').html('').append(
+          $('<div></div>').attr('class', 'ui header').html(aviso.titulo)
+        ).append(aviso.contenido)
+        $(avisos.id).find('.circle.icon').addClass('outline').css('cursor', 'pointer').click(function() {
+          var id = $(this).attr('data-id')
+          if (id == avisos.curr_page) {
+            return
+          }
+          avisos.movePage(id)
+        })
+        $(avisos.id).find('.circle.icon:nth-child(' + page + ')').removeClass('outline').css('cursor', 'default')
+        avisos.curr_page = page
+      }
+    }
+    $(document).ready(function() {
+      avisos.setup()
+    })
+  </script>
+@endpush

resources/views/home/banner.blade.php

@@ -1,16 +1,25 @@
 <div id="banner">
   <div class="ui container">
     <div class="ui center aligned grid">
-      <div class="eight wide column">
+      <div class="ten wide column">
         <div id="mensaje">
           <div class="ui header">
             DISEÑA EL FUTURO, ACT&Uacute;A EN EL PRESENTE
           </div>
-          <button class="ui inverted brand button">
-            PROYECTOS
-          </button>
+          "Comienza a Invertir Hoy"
         </div>
+        <button class="ui inverted brand big button">
+          PROYECTOS
+        </button>
       </div>
     </div>
   </div>
 </div>
+
+@push('styles')
+  <style type="text/css">
+    #banner {
+      background-image: url('{{$urls->images}}/banner.jpg');
+    }
+  </style>
+@endpush

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

resources/views/home/destacados/ficha.blade.php

@@ -0,0 +1,56 @@
+<div class="ui card ficha">
+  <div class="content">
+    <div class="header">
+      {{$proyecto->edificio}}
+    </div>
+    <div class="right floated meta">
+      {{$proyecto->segmento}}
+    </div>
+    <div class="descripcion">
+      {{$proyecto->comuna}}
+    </div>
+  </div>
+  <div class="medium image">
+    @if ($proyecto->destacado)
+      <div class="overlay">Destacado</div>
+    @endif
+    <img src="{{$urls->images}}/{{$proyecto->imagen}}" />
+  </div>
+  <div class="content">
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->valor}} UF
+      </span>
+      Valor depto
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->bono}} UF
+      </span>
+      Bono Pie
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->rentabilidad}}%
+      </span>
+      Rentabilidad
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->cuota}} UF
+      </span>
+      Valor cuota
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->entrega}}
+      </span>
+      Entrega Estimada
+    </div>
+    <span class="right floated">
+      <button class="ui inverted brand button">
+        Ver
+      </button>
+    </span>
+  </div>
+</div>

resources/views/home/indicadores.blade.php

@@ -0,0 +1,63 @@
+<div id="indicadores">
+  <div class="ui container">
+    <div class="ui grid">
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    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 center aligned column').append(
+              $('<div></div>').attr('class', 'ui header').append(indicador.titulo).append(
+                $('<div></div>').attr('class', 'sub header').html(data.valor)
+              )
+            )
+            $(indicadores.id).find('.grid').append(
+              div
+            )
+          }
+        })
+      },
+      findNext: () => {
+        console.log('Next call')
+        next = indicadores.current + 1
+        if (next > indicadores.indicadores.length) {
+          next = 0
+        }
+        indicadores.findIndicador(next).done(() => {
+          $(indicadores.id).find('.grid').find('.column:first-child').remove()
+          indicadores.current = next
+          setTimeout(indicadores.findNext(), 30000)
+        })
+      },
+      setup: () => {
+        var promises = []
+        $.each(indicadores.indicadores, (i, el) => {
+          promises.push(indicadores.findIndicador(i))
+        })
+        Promise.all(promises).then(() => {
+          setTimeout(indicadores.findNext(), 30000)
+        })
+      }
+    }
+    $(document).ready(() => {
+      indicadores.setup()
+    })
+  </script>
+@endpush

resources/views/home/resumen.blade.php

@@ -0,0 +1,63 @@
+<div id="resumen">
+  <div class="ui container">
+    <div class="ui center aligned grid">
+      <div class="three wide column">
+        <div class="ui inverted circular segment">
+          <div class="ui big header">
+            123
+            <div class="sub header">
+              Negocios Cerrados
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="column"></div>
+      <div class="three wide column">
+        <div class="ui inverted circular segment">
+          <div class="ui big header">
+            12
+            <div class="sub header">
+              Proyectos Publicados
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="column"></div>
+      <div class="three wide column">
+        <div class="ui inverted circular segment">
+          <div class="ui big header">
+            10
+            <div class="sub header">
+              Texto Relleno
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+@push('styles')
+  <style type="text/css">
+    #resumen {
+      background-image: url('{{$urls->images}}/indicadores.jpg');
+    }
+  </style>
+@endpush
+
+@push('scripts')
+  <script type="text/javascript">
+    var max_width = 0
+    $(document).ready(function() {
+      $('#resumen .circular.segment').each(function(i, el) {
+        var width = $(this).css('width')
+        var w = parseInt(width)
+        if (w > max_width) {
+          max_width = w
+        }
+        $(this).css('width', max_width + 'px')
+        $(this).css('height', max_width + 'px')
+      })
+    })
+  </script>
+@endpush

resources/views/home/segmentos.blade.php

@@ -2,20 +2,11 @@
   <div class="ui header">
     SEGMENTOS DE NEGOCIO
   </div>
-  <div class="ui center aligned stacked four columns grid">
-    <div class="column">
-      <div class="ui basic card">
-        <div class="ui placeholder">
-          <div class="image">
-            <!-- <img src="#" /> -->
-          </div>
-        </div>
-        Oficinas
+  <div class="ui center aligned stackable grid">
+    @foreach ($segmentos as $segmento)
+      <div class="three wide column">
+        @include('home.segmentos.ficha')
       </div>
-      <div class="ui basic card">
-        <div class="image">
-        </div>
-      </div>
-    </div>
+    @endforeach
   </div>
 </div>

resources/views/home/segmentos/ficha.blade.php

@@ -0,0 +1,8 @@
+<div class="ui basic segment">
+  <div class="ui medium image">
+    {!!$segmento->imagen!!}
+  </div>
+  <div class="ui small header">
+    {{$segmento->titulo}}
+  </div>
+</div>

resources/views/layout/footer.blade.php

@@ -1,4 +1,4 @@
-<footer class="inverted brand">
+<footer>
   <div class="ui container">
     <div class="ui tiny text menu">
       <div class="item">
@@ -8,7 +8,7 @@
       <div class="right menu">
         <div class="item">
           N° Visitas
-          <div class="ui brand label">
+          <div class="ui label" >
             <i class="users icon"></i>
             {{$visitas}}
           </div>

resources/views/layout/header/menu.blade.php

@@ -1,22 +1,22 @@
 <div class="ui container">
   <nav class="ui massive text menu">
     <a class="item logo" href="{{$urls->base}}">
-      <strong>
-        Capital<span class="brand">Investments</span>
-      </strong>
+      <div class="ui title image">
+        <img src="{{$urls->images}}/logo.png" alt="Capital Investments" title="Capital Investments" />
+      </div>
     </a>
     <div class="right menu">
       <a class="item">
-        Nosotros
+        NOSOTROS
       </a>
       <a class="item">
-        Productos
+        PRODUCTOS
       </a>
       <a class="item">
-        PPFF
+        FAQs
       </a>
       <a class="item">
-        Contacto
+        CONTACTO
       </a>
     </div>
   </nav>