oficial/app/resources/views/contabilidad/movimientos.blade.php

@extends('layout.base')

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

@push('page_styles')
    <style>
        #table_container {
            margin-left: 1rem;
            margin-right: 1rem;
        }
    </style>
@endpush

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">Movimientos Contables</h1>
        <form class="ui form" id="movimientos_form">
            <div class="fields">
                <div class="six wide field">
                    <label for="sociedad">Sociedad</label>
                    <div class="ui selection search multiple dropdown" id="sociedades">
                        <input type="hidden" name="sociedad[]"/>
                        <i class="dropdown icon"></i>
                        <div class="default text">Sociedad</div>
                        <div class="menu">
                            @foreach($sociedades as $sociedad)
                                <div class="item" data-value="{{$sociedad->rut}}">{{$sociedad->razon}}</div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="three wide field">
                    <label for="mes">Mes</label>
                    <div class="ui calendar" id="mes">
                        <div class="ui right icon input">
                            <input type="month" name="mes"/>
                            <i class="calendar icon"></i>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label></label>
                    <button class="ui circular icon button">
                        <i class="sync alternate icon"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div id="table_container">
        <table id="tabla_movimientos" class="ui table">
            <thead>
            <tr>
                <th>Sigla</th>
                <th>Banco</th>
                <th>Cuenta</th>
                <th>Fecha</th>
                <th>ISO Fecha</th>
                <th>Mes</th>
                <th>Año</th>
                <th class="right aligned">Valor</th>
                <th>Valor</th>
                <th>Centro de Costo</th>
                <th>Glosa</th>
                <th>Detalle</th>
                <th>Editar</th>
            </tr>
            </thead>
            <tbody id="movimientos"></tbody>
        </table>
    </div>
    <div class="ui modal" id="movimientos_modal">
        <div class="content">
            <h3 class="header">
                Editar Movimiento
            </h3>
            <div class="ui grid">
                <div class="five columns row">
                    <div class="column sociedad"></div>
                    <div class="column banco"></div>
                    <div class="column cuenta"></div>
                    <div class="column fecha"></div>
                    <div class="column valor"></div>
                </div>
                <div class="one columns row">
                    <div class="column glosa"></div>
                </div>
            </div>
            <div class="ui divider"></div>
            <form class="ui form" id="movimientos_edit">
                <input type="hidden" name="index"/>
                <input type="hidden" name="id"/>
                <div class="field">
                    <label for="centro_costo">Centro de Costo</label>
                    <div class="ui selection search dropdown" id="centro_costo">
                        <input type="hidden" name="centro_id"/>
                        <i class="dropdown icon"></i>
                        <div class="default text">Centro de Costo</div>
                        <div class="menu">
                            @foreach($centros as $centroCosto)
                                <div class="item" data-value="{{$centroCosto->id}}">{{$centroCosto->id}} - {{$centroCosto->descripcion}}</div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label for="detalle">Detalle</label>
                    <div class="ui input">
                        <textarea id="detalle" name="detalle"></textarea>
                    </div>
                </div>
            </form>
        </div>
        <div class="actions">
            <div class="ui cancel button">Cancelar</div>
            <div class="ui approve success button">Guardar</div>
        </div>
    </div>
@endsection

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

@push('page_scripts')
    <script>
        const movimientos = {
            ids: {
                form: {
                    id: '',
                    sociedades: '',
                    mes: '',
                },
                table: '',
            },
            movimientos: [],
            table: null,
            amount: null,
            get() {
                return {
                    movimientos: () => {
                        const sociedades_ruts = $(this.ids.forms.search.sociedades).dropdown('get values')
                        const mes = $(this.ids.forms.search.mes).calendar('get date')

                        const url = '{{$urls->api}}/contabilidad/movimientos/sociedad/mes'
                        const method = 'post'
                        const body = new FormData()
                        sociedades_ruts.forEach(sociedad_rut => {
                            body.append('sociedades_ruts[]', sociedad_rut)
                        })
                        body.set('mes', [mes.getFullYear(), mes.getMonth() + 1, mes.getDate()].join('-'))
                        if (this.amount !== null) {
                            body.set('amount', this.amount)
                        }
                        this.movimientos = []
                        return fetchAPI(url, {method, body}).then(response => {
                            $(this.ids.forms.search.id).removeClass('loading')
                            if (!response) {
                                return
                            }
                            response.json().then(json => {
                                this.add().movimientos(json.movimientos)
                            }).then(() => {
                                this.draw().table()
                            })
                        })
                    }
                }
            },
            add() {
                return {
                    movimientos: data => {
                        if (data.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'
                        })
                        const tz = ((new Date()).getTimezoneOffset()) / -60
                        data.forEach((movimiento, index) => {
                            const fecha = new Date(movimiento.fecha + 'Z' + tz)
                            const valor = movimiento.abono - movimiento.cargo
                            this.movimientos.push([
                                movimiento.cuenta.inmobiliaria.sigla,//0
                                movimiento.cuenta.banco.nombre,//1
                                movimiento.cuenta.cuenta,//2
                                dateFormatter.format(fecha),//3
                                [fecha.getFullYear(), fecha.getMonth() + 1, fecha.getDate()].join('-'),//4
                                fecha.getMonth() + 1,//5
                                fecha.getFullYear(),//6
                                formatter.format(valor),//7
                                valor,//8
                                (movimiento.detalles) ? movimiento.detalles.centro_costo.id : '',//9
                                movimiento.glosa,//10
                                (movimiento.detalles) ? movimiento.detalles.detalle : '',//11
                                '<button class="ui icon button edit_button" data-id="' + movimiento.id + '" data-index="' + index + '"><i class="edit icon"></i></button>',//12
                            ])
                        })
                    }
                }
            },
            update() {
                return {
                    movimiento: ({index, movimiento}) => {
                        const formatter = new Intl.NumberFormat('es-CL')
                        const dateFormatter = new Intl.DateTimeFormat('es-CL', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric'
                        })
                        const tz = ((new Date()).getTimezoneOffset()) / -60
                        const fecha = new Date(movimiento.fecha + 'Z' + tz)
                        const valor = movimiento.abono - movimiento.cargo
                        this.movimientos[index] = [
                            movimiento.cuenta.inmobiliaria.sigla,//0
                            movimiento.cuenta.banco.nombre,//1
                            movimiento.cuenta.cuenta,//2
                            dateFormatter.format(fecha),//3
                            [fecha.getFullYear(), fecha.getMonth() + 1, fecha.getDate()].join('-'),//4
                            fecha.getMonth() + 1,//5
                            fecha.getFullYear(),//6
                            formatter.format(valor),//7
                            valor,//8
                            movimiento.detalles.centro_costo.id,//9
                            movimiento.glosa,//10
                            movimiento.detalles.detalle,//11
                            '<button class="ui icon button edit_button" data-id="' + movimiento.id + '" data-index="' + index + '"><i class="edit icon"></i></button>',//12
                        ]
                        this.draw().table()
                    }
                }
            },
            draw() {
                return {
                    table: () => {
                        this.table.clear().rows.add(this.movimientos).draw()
                        $(this.ids.buttons.edit).click(clickEvent => {
                            const id = $(clickEvent.currentTarget).data('id')
                            const index = $(clickEvent.currentTarget).data('index')
                            this.draw().edit({id, index})
                        })
                    },
                    edit: ({id, index}) => {
                        const form = $('#' + this.ids.forms.edit.id)
                        form.find("[name='id']").val(id)
                        form.find("[name='index']").val(index)
                        $(this.ids.modals.edit).find('.sociedad').text('Sociedad: ' + this.movimientos[index][0])
                        $(this.ids.modals.edit).find('.banco').text('Banco: ' + this.movimientos[index][1])
                        $(this.ids.modals.edit).find('.cuenta').text('Cuenta: ' + this.movimientos[index][2])
                        $(this.ids.modals.edit).find('.fecha').text('Fecha: ' + this.movimientos[index][3])
                        $(this.ids.modals.edit).find('.valor').text('Valor: ' + this.movimientos[index][7])
                        $(this.ids.modals.edit).find('.glosa').text('Glosa: ' + this.movimientos[index][10])
                        form.find("[name='centro_costo']").dropdown('set selected', this.movimientos[index][9])
                        form.find("[name='detalle']").val(this.movimientos[index][11])

                        $(this.ids.modals.edit).modal('show')
                    }
                }
            },
            submit(submitEvent) {
                submitEvent.preventDefault()
                $(submitEvent.currentTarget).addClass('loading')
                movimientos.get().movimientos()
                return false
            },
            edit() {
                const body = new FormData(document.getElementById('movimientos_edit'))
                const id = body.get('id')
                const index = body.get('index')
                body.delete('id')
                body.delete('index')
                const url = '{{$urls->api}}/contabilidad/movimiento/' + id + '/detalles'
                const method = 'post'
                return fetchAPI(url, {method, body}).then(response => {
                    if (!response) {
                        return
                    }
                    return response.json().then(json => {
                        this.update().movimiento({index, movimiento: json.movimiento})
                    })
                })
            },
            setup(ids) {
                this.ids = ids

                $(this.ids.forms.search.sociedades).dropdown()

                const cdo = structuredClone(calendar_date_options)
                cdo['type'] = 'month'
                cdo['maxDate'] = new Date()
                $(this.ids.forms.search.mes).calendar(cdo)

                $(this.ids.forms.search.id).submit(this.submit)

                let dtD = structuredClone(datatables_defaults)
                dtD = Object.assign(dtD, {
                    columnDefs: [
                        {targets: [0, 5, 9, 12], width: '5%', type: 'string'},
                        {targets: [1, 2, 3, 6, 10], width: '10%', type: 'string'},
                        {targets: [11], width: '20%', type: 'string'},
                        {targets: 4, visible: false},
                        {targets: 7, className: 'dt-right', width: '10%'},
                        {targets: 8, visible: false, type: 'num'}
                    ],
                    order: [[4, 'asc']],
                    language: Object.assign(dtD.language, {
                        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, 3, 5, 6, 8, 9, 10, 11]
                                    }
                                }
                            ]
                        }
                    },
                    data: this.movimientos,
                })
                this.table = new DataTable(this.ids.table, dtD)

                $(this.ids.modals.edit).modal({
                    onApprove: $element => {
                        this.edit()
                    }
                })
                $('#' + this.ids.forms.edit.id).find('#centro_costo').dropdown()
            }
        }

        $(document).ready(() => {
            movimientos.setup({
                forms: {
                    search: {
                        id: '#movimientos_form',
                        sociedades: '#sociedades',
                        mes: '#mes',
                    },
                    edit: {
                        id: 'movimientos_edit',
                    }
                },
                table: '#tabla_movimientos',
                modals: {
                    edit: '#movimientos_modal'
                },
                buttons: {
                    edit: '.edit_button'
                }
            })
        })
    </script>
@endpush