@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h4 class="ui header">Bienvenid@ {{$user->name}}</h4>
        <div class="ui basic fitted segment">
            <span id="cuotas_hoy"></span>
            <span id="cuotas_pendientes"></span>
        </div>
        <div class="ui two column grid">
            <div class="column">
                @include('home.cuotas_por_vencer')
                @include('home.cierres_vigentes')
            </div>
            <div class="column">
                @include('home.alertas')
            </div>
        </div>
    </div>
@endsection

@push('page_scripts')
    <script type="text/javascript">
        const cuotas = {
            get: function() {
                return {
                    hoy: () => {
                        const span = $('#cuotas_hoy')
                        return fetchAPI('{{$urls->api}}/ventas/cuotas/hoy').then(response => {
                            span.html('')
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            let output = 'Existe'
                            if (data.cuotas > 1) {
                                output += 'n'
                            }
                            output += ' ' + data.cuotas + ' deposito'
                            if (data.cuotas > 1) {
                                output += 's'
                            }
                            output += ' para hoy.<br />'
                            span.html(output)
                        })
                    },
                    pendiente: () => {
                        const span = $('#cuotas_pendientes')
                        return fetchAPI('{{$urls->api}}/ventas/cuotas/pendiente').then(response => {
                            span.html('')
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            const link = $('<a></a>').attr('href', '{{$urls->base}}/ventas/cuotas/pendientes')
                            let output = 'Existe'
                            if (data.cuotas > 1) {
                                output += 'n'
                            }
                            output += ' ' + data.cuotas + ' cuota'
                            if (data.cuotas > 1) {
                                output += 's'
                            }
                            output += ' pendiente'
                            if (data.cuotas > 1) {
                                output += 's'
                            }
                            output += ' por cobrar. <i class="right arrow icon"></i>'
                            link.html(output)
                            span.html(link)
                        })
                    }
                }
            },
            run: function() {
                this.get().hoy()
                this.get().pendiente()
            }
        }
        $(document).ready(() => {
            cuotas.run()
        })
    </script>
@endpush