<h4 class="ui dividing header">Cierres Vigentes</h4>
<div class="ui divided list" id="cierres_vigentes"></div>

@push('page_scripts')
    <script type="text/javascript">
        const cierres_vigentes = {
            get: function() {
                const list = $('#cierres_vigentes')
                list.html('')
                list.append(
                    $('<div><div>').addClass('ui inline active loader')
                )
                fetch('{{$urls->api}}/ventas/cierres/vigentes').then(response => {
                    list.html('')
                    if (response.ok) {
                        return response.json()
                    }
                }).then(data => {
                    this.draw(data.cierres)
                })
            },
            draw: function(cierres) {
                const list = $('#cierres_vigentes')
                Object.entries(cierres).forEach(([proyecto, estados]) => {
                    const item = $('<div></div>').addClass('item')
                    const feed = $('<div></div>').addClass('ui feed')
                    feed.append(
                        $('<div></div>').addClass('date').append(
                            $('<strong></strong>').html(proyecto).append('[' + estados['total'] + ']')
                        )
                    ).append(
                        $('<div></div>').addClass('event').append(
                            $('<div></div>').addClass('content').html('Promesados')
                        ).append(
                            $('<div></div>').addClass('meta').html(estados['promesados'])
                        )
                    ).append(
                        $('<div></div>').addClass('event').append(
                            $('<div></div>').addClass('content').html('Pendientes')
                        ).append(
                            $('<div></div>').addClass('meta').html(estados['pendientes'])
                        )
                    ).append(
                        $('<div></div>').addClass('event').append(
                            $('<div></div>').addClass('content').html('Rechazados')
                        ).append(
                            $('<div></div>').addClass('meta').html(estados['rechazados'])
                        )
                    )
                    item.append(feed)
                    list.append(item)
                })
            }
        }
        $(document).ready(() => {
            cierres_vigentes.get()
        })
    </script>
@endpush
