@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">Movimientos Contables</h1>
    </div>
    <table id="tabla_movimientos" class="ui table">
        <thead>
        <tr>
            <th>Sociedad</th>
            <th>Banco - Cuenta</th>
            <th>Fecha</th>
            <th>ISO Fecha</th>
            <th class="right aligned">Valor</th>
            <th>Valor</th>
            <th>Centro de Costo</th>
            <th>Glosa</th>
            <th>Detalle</th>
        </tr>
        </thead>
        <tbody id="movimientos"></tbody>
    </table>
@endsection

@include('layout.head.styles.datatables')
@include('layout.head.styles.datatables.searchbuilder')
@include('layout.head.styles.datatables.buttons')

@include('layout.body.scripts.datatables')
@include('layout.body.scripts.datatables.searchbuilder')
@include('layout.body.scripts.datatables.buttons')

@push('page_scripts')
    <script>
        function getData(table_id, from, amount) {
            const url = '{{$urls->api}}/contabilidad/movimientos'
            const movimientos = []
            return fetchAPI(url).then(response => {
                if (!response) {
                    return
                }
                response.json().then(json => {
                    if (json.movimientos.length === 0) {
                        return
                    }
                    const formatter = new Intl.NumberFormat('es-CL')
                    const dateFormatter = new Intl.DateTimeFormat('es-CL', {day: '2-digit', month: '2-digit', year: 'numeric'})
                    json.movimientos.forEach(movimiento => {
                        const fecha = new Date(movimiento.fecha)
                        const valor = movimiento.abono - movimiento.cargo
                        movimientos.push([
                            movimiento.cuenta.inmobiliaria.razon,
                            movimiento.cuenta.banco.nombre + ' - ' + movimiento.cuenta.cuenta,
                            dateFormatter.format(fecha),
                            fecha.toISOString(),
                            formatter.format(valor),
                            valor,
                            (movimiento.detalles) ? movimiento.detalles.centro_costo.id + ' - ' + movimiento.detalles.centro_costo.descripcion : '',
                            movimiento.glosa,
                            (movimiento.detalles) ? movimiento.detalles.detalle : ''
                        ])
                    })
                }).then(() => {
                    const table = new DataTable(table_id, {
                        columnDefs: [
                            {targets: 3, visible: false},
                            {targets: 4, className: 'dt-right'},
                            {targets: 5, visible: false}
                        ],
                        order: [[3, 'asc']],
                        language: {
                            info: 'Mostrando página _PAGE_ de _PAGES_',
                            infoEmpty: 'No hay cuotas ingresadas',
                            infoFiltered: '(filtrado de _MAX_ cuotas)',
                            lengthMenu: 'Mostrando de a _MENU_ cuotas',
                            zeroRecords: 'No se encotró cuotas con ese criterio',
                            search: 'Buscar: ',
                            searchBuilder: {
                                add: 'Filtrar',
                                condition: 'Comparador',
                                clearAll: 'Resetear',
                                delete: 'Eliminar',
                                deleteTitle: 'Eliminar Titulo',
                                data: 'Columna',
                                left: 'Izquierda',
                                leftTitle: 'Titulo Izquierdo',
                                logicAnd: 'Y',
                                logicOr: 'O',
                                right: 'Derecha',
                                rightTitle: 'Titulo Derecho',
                                title: {
                                    0: 'Filtros',
                                    _: 'Filtros (%d)'
                                },
                                value: 'Opciones',
                                valueJoiner: 'y'
                            }
                        },
                        layout: {
                            top1: {
                                searchBuilder: {
                                    columns: [0, 1, 2, 4, 6, 7, 8]
                                }
                            },
                            top1End: {
                                buttons: [
                                    {
                                        extend: 'excelHtml5',
                                        className: 'green',
                                        text: 'Exportar a Excel <i class="file excel icon"></i>',
                                        title: 'Movimientos Contables',
                                        download: 'open',
                                        exportOptions: {
                                            columns: [0, 1, 2, 5, 6, 7, 8]
                                        }
                                    }
                                ]
                            }
                        },
                        data: movimientos,
                    })
                })
            })
        }
        function updateTable(table, from, amount) {
            const url = '{{$urls->api}}/contabilidad/movimientos'
            return fetchAPI(url).then(response => {
                if (!response) {
                    return
                }
                response.json().then(json => {
                    if (json.movimientos.length === 0) {
                        return
                    }
                    table.clear()
                    const formatter = new Intl.NumberFormat('es-CL')
                    const dateFormatter = new Intl.DateTimeFormat('es-CL', {day: '2-digit', month: '2-digit', year: 'numeric'})
                    json.movimientos.forEach(movimiento => {
                        const fecha = new Date(movimiento.fecha)
                        table.row.add([
                            movimiento.cuenta.inmobiliaria.razon,
                            movimiento.cuenta.banco.nombre + ' - ' + movimiento.cuenta.cuenta,
                            dateFormatter.format(fecha),
                            fecha.toISOString(),
                            formatter.format(movimiento.abono - movimiento.cargo),
                            (movimiento.detalles) ? movimiento.detalles.centro_costo.id + ' - ' + movimiento.detalles.centro_costo.descripcion : '',
                            movimiento.glosa,
                            (movimiento.detalles) ? movimiento.detalles.detalle : ''
                        ])
                    })
                }).then(() => {
                    table.draw()
                })
            })
        }
        $(document).ready(() => {
            getData('#tabla_movimientos', 0, 100)
        })
    </script>
@endpush