Separar datos inicio

app/resources/views/home/cuotas_por_vencer.blade.php

@@ -1,22 +1,52 @@
 <h4 class="ui dividing header">Cuotas Por Vencer</h4>
-<div class="ui divided list">
-    @foreach ($cuotas_por_vencer as $date => $proyectos)
-    <div class="item">
-        <div class="ui feed">
-            <div class="date">
-                <strong>{{$format->localDate($date, "EEE. dd 'de' MMMM 'de' yyyy", true)}}</strong>
-            </div>
-            @foreach ($proyectos as $proyecto => $cuotas)
-            <div class="event">
-                <div class="content">
-                    <span class="ui small text">
-                        {{$proyecto}}
-                    </span>
-                </div>
-                <div class="meta">{{$cuotas}}</div>
-            </div>
-            @endforeach
-        </div>
-    </div>
-    @endforeach
-</div>
+<div class="ui divided list" id="cuotas_por_vencer"></div>
+
+@push('page_scripts')
+    <script type="text/javascript">
+        const cuotas_por_vencer = {
+            get: function() {
+                const list = $('#cuotas_por_vencer')
+                list.html('')
+                list.append(
+                    $('<div><div>').addClass('ui inline active loader')
+                )
+                return fetch('{{$urls->api}}/ventas/cuotas/vencer').then(response => {
+                    list.html('')
+                    if (response.ok) {
+                        return response.json()
+                    }
+                }).then(data => {
+                    this.draw(data.cuotas)
+                })
+            },
+            draw: function(cuotas) {
+                const list = $('#cuotas_por_vencer')
+                Object.entries(cuotas).forEach(([fecha, proyectos]) => {
+                    const item = $('<div></div>').addClass('item')
+                    const feed = $('<div></div>').addClass('ui feed')
+                    feed.append(
+                        $('<div></div>').addClass('date').append(
+                            $('<strong></strong>').html(fecha)
+                        )
+                    )
+                    Object.entries(proyectos).forEach(([proyecto, cuotas]) => {
+                        const event = $('<div></div>').addClass('event')
+                        event.append(
+                            $('<div></div>').addClass('content').append(
+                                $('<span></span>').addClass('ui small text').html(proyecto)
+                            )
+                        ).append(
+                            $('<div></div>').addClass('meta').html(cuotas)
+                        )
+                        feed.append(event)
+                    })
+                    item.append(feed)
+                    list.append(item)
+                })
+            }
+        }
+        $(document).ready(() => {
+            cuotas_por_vencer.get()
+        })
+    </script>
+@endpush