@extends('layout.base')

@section('page_title')
    Pagos Pendientes
@endsection

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Pagos Pendientes</h2>
        <div class="ui basic segment" id="pendientes"></div>
        <h2 class="ui header">Para Abonar<span id="total_abonar"></span></h2>
        <div class="ui basic segment" id="abonar"></div>
        <h2 class="ui header">Pagos Devueltos<span id="total_devueltos"></span></h2>
        <div class="ui basic segment" id="devueltos"></div>
    </div>
@endsection

@include('layout.body.scripts.chartjs')
@include('layout.head.styles.datatables')
@include('layout.body.scripts.datatables')

@push('page_scripts')
    <script type="text/javascript">
        const historicos = {
            id: '',
            data: {
                total: {
                    pendientes: 0,
                    depositados: 0
                },
                graph: {}
            },
            get: function() {
                return {
                    pagos: () => {
                        const uri = '{{$urls->api}}/ventas/pagos/pendientes'
                        return fetchAPI(uri).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.data.total.pendientes = data.pagos.historicos
                            this.data.total.depositados = data.abonos.historicos
                            this.data.graph = data

                            this.draw().all()
                        })
                    }
                }
            },
            draw: function() {
                return {
                    all: () => {
                        const parent = $(this.id)
                        parent.append(this.draw().table())
                        this.draw().graph(parent)
                    },
                    table: () => {
                        return $('<table></table>').append(
                            $('<tr></tr>').append(
                                $('<td></td>').attr('rowspan', 2).html('Históricos')
                            ).append(
                                $('<td></td>').html('Pendientes')
                            ).append(
                                $('<td></td>').append(
                                    $('<a></a>').attr('href', '{{$urls->base}}/ventas/cuotas/pendientes').html(this.data.total.pendientes)
                                )
                            )
                        ).append(
                            $('<tr></tr>').append(
                                $('<td></td>').html('Depositadas')
                            ).append(
                                $('<td></td>').append(
                                    $('<a></a>').attr('href', '{{$urls->base}}/ventas/cuotas/abonar').html(this.data.total.depositados)
                                )
                            )
                        )
                    },
                    graph: parent => {
                        const canvas = $('<canvas></canvas>').attr('id', 'pagos_historicos')
                        parent.append(canvas)
                        const chart = new Chart(canvas, {
                            type: 'bar',
                            data: {
                                labels: this.data.graph.fechas,
                                datasets: [
                                    {
                                        label: 'Pagos',
                                        data: this.data.graph.pagos.data,
                                        backgroundColor: this.data.graph.pagos.backgroundColor
                                    },
                                    {
                                        label: 'Abonos',
                                        data: this.data.graph.abonos.data,
                                        backgroundColor: this.data.graph.abonos.backgroundColor
                                    }
                                ]
                            },
                            options: {
                                legend: {
                                    display: false
                                },
                                scales: {
                                    x: [
                                        {
                                            stacked: true
                                        }
                                    ],
                                    y: [
                                        {
                                            stacked: true
                                        }
                                    ]
                                },
                                plugins: {
                                    chartJSPluginBarchartBackground: {
                                        color: 'rgb(100, 100, 100)'
                                    }
                                }
                            }
                        })
                    }
                }
            },
            setup: function(id) {
                this.id = id
                this.get().pagos()
            }
        }
        const depositados = {
            ids: {
                data: '',
                total: ''
            },
            data: [],
            total: 0,
            get: function() {
                return {
                    pendientes: () => {
                        const uri = '{{$urls->api}}/ventas/pagos/abonar'
                        return fetchAPI(uri).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.data = data.pagos
                            this.total = data.total
                            this.draw().all()
                        })
                    }
                }
            },
            draw: function() {
                return {
                    all: () => {
                        this.draw().total()
                        this.draw().table($(this.ids.data))
                    },
                    total: () => {
                        $(this.ids.total).html(' [' + this.total + ']')
                    },
                    table: parent => {
                        const header_row = $('<tr></tr>')
                        ['Proyecto', 'Departamento', 'Propietario', 'Tipo', 'Fecha Deposito', 'Valor'].forEach(title => {
                            header_row.append(
                                $('<th></th>').html(title)
                            )
                        })
                        const tbody = $('<tbody></tbody>')
                        this.data.forEach(pago => {
                            tbody.append(
                                $('<tr></tr>').append(
                                    $('<td></td>').html(pago.proyecto)
                                ).append(
                                    $('<td></td>').html(pago.departamento)
                                ).append(
                                    $('<td></td>').html(pago.propietario)
                                ).append(
                                    $('<td></td>').html(pago.tipo)
                                ).append(
                                    $('<td></td>').html(pago.fecha)
                                ).append(
                                    $('<td></td>').html(pago.valor)
                                )
                            )
                        })
                        const table = $('<table></table>').attr('id', 'pendientes_table').append(
                            $('<thead></thead>').append(header_row)
                        ).append(tbody)
                        parent.append(table)
                        const dt = new DataTable('#pendientes_table', {
                            language: {
                                info: 'Mostrando página _PAGE_ de _PAGES_',
                                infoEmpty: 'No hay cuotas depositadas por abonar',
                                infoFiltered: '(filtrado de _MAX_ cuotas)',
                                lengthMenu: 'Mostrando de a _MENU_ cuotas',
                                zeroRecords: 'No se encotró cuotas con ese criterio',
                                search: 'Buscar: '
                            },
                        })
                    }
                }
            },
            setup: function(id, total_id) {
                this.ids.data = id
                this.ids.total = total_id
                this.get().pendientes()
            }
        }
        const devueltos = {
            ids: {
                data: '',
                total: ''
            },
            data: [],
            total: 0,
            get: function() {
                return {
                    devueltos: () => {
                        const uri = '{{$urls->api}}/ventas/pagos/rebotes'
                        return fetchAPI(uri).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.data = data.pagos
                            this.total = data.total
                            this.draw().all()
                        })
                    }
                }
            },
            draw: function() {
                return {
                    all: () => {
                        this.draw().total()
                        this.draw().table($(this.ids.data))
                    },
                    total: () => {
                        $(this.ids.total).html(' [' + this.total + ']')
                    },
                    table: parent => {}
                }
            },
            setup: function(id, total_id) {
                this.ids.data = id
                this.ids.total = total_id
                this.get().devueltos()
            }
        }
        $(document).ready(() => {
            historicos.setup('#pendientes')
            depositados.setup('#abonar', '#total_abonar')
            devueltos.setup('#devueltos', '#total_devueltos')
        })
    </script>
@endpush