@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 fluid 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="fields" id="movimiento_data">
                    <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>RUT</label>
                        <div class="ui right labeled input">
                            <input type="text" name="rut" placeholder="RUT" />
                            <div class="ui basic label">-<span id="digito"></span></div>
                        </div>
                    </div>
                    <div class="field">
                        <label>Nombre</label>
                        <input type="text" name="nombre" placeholder="Nombre" />
                    </div>
                    <div class="field">
                        <label>Categoría</label>
                        <input type="text" name="categoria" placeholder="Categoría" />
                    </div>
                    <div class="field">
                        <label for="detalle">Detalle</label>
                        <div class="ui input">
                            <textarea id="detalle" name="detalle"></textarea>
                        </div>
                    </div>
                </div>
                <table class="ui table" id="auxiliares">
                    <thead>
                    <tr>
                        <th>Cargo</th>
                        <th>Abono</th>
                        <th>Centro Costo</th>
                        <th>RUT</th>
                        <th>Nombre</th>
                        <th>Categoría</th>
                        <th>Detalle</th>
                        <th class="right aligned">
                            <button class="ui green icon button" type="button" id="add_auxiliar">
                                <i class="plus icon"></i>
                            </button>
                        </th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </form>
        </div>
        <div class="actions">
            <div class="ui red cancel button">Cancelar</div>
            <div class="ui green 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')
@include('layout.body.scripts.rut')

@push('page_scripts')
    <script>
        class CentrosCostos {
            static data = []
            static get() {
                if (this.data.length === 0) {
                    this.data = JSON.parse('{!! json_encode($centros) !!}')
                }
                return this.data
            }
        }
    </script>
@endpush
@push('page_scripts')
    <script>
        class EventHandler {
            props
            constructor({movimientosHandler, modalHandler}) {
                this.props = {
                    movimientosHandler,
                    modalHandler
                }
            }
            get() {
                return {
                    movimientos: submitEvent => {
                        submitEvent.preventDefault()
                        submitEvent.data.handler.props.movimientosHandler.get().movimientos({
                            sociedades_ruts: $(submitEvent.data.sociedades_id).dropdown('get values'),
                            mes: $(submitEvent.data.mes_id).calendar('get date')
                        }).then(() => {
                            app.handlers.table.draw().table(app.handlers.results.props.parsed)
                        })
                        return false
                    }
                }
            }
            edit() {
                return {
                    movimiento: clickEvent => {
                        const id = $(clickEvent.currentTarget).data('id')
                        const index = $(clickEvent.currentTarget).data('index')
                        const type = $(clickEvent.currentTarget).data('type')
                        const movimiento = this.props.movimientosHandler.find().id(id)
                        clickEvent.data.handler.props.modalHandler.show({movimiento, type})
                    }
                }
            }
        }
        class LoadingHandler {
            props
            constructor({ids}) {
                this.props = {
                    ids
                }
            }
            show() {
                $(this.props.id).addClass('loading')
            }
            hide() {
                $(this.props.id).removeClass('loading')
            }
        }
        class ControlForm {
            props
            constructor({ids,}) {
                this.props = {
                    ids,
                }
            }
            setup() {
                $(this.props.ids.sociedades).dropdown()

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

                $(this.props.ids.form).on('submit', {
                    sociedades_id: this.props.ids.sociedades,
                    mes_id: this.props.ids.mes,
                    handler: app.handlers.event
                }, app.handlers.event.get().movimientos)
            }
        }
        class MovimientosTable {
            props
            constructor({ids, eventHandler}) {
                this.props = {
                    ids,
                    eventHandler,
                    movimientos: [],
                    formatters: {
                        number: new Intl.NumberFormat('es-CL'),
                        date: new Intl.DateTimeFormat('es-CL', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric'
                        }),
                    },
                }
            }
            draw() {
                return {
                    table: (movimientos) => {
                        this.props.table.clear().rows.add(this.draw().movimientos(movimientos)).draw()
                        $(this.props.ids.buttons.edit).on('click', {handler: this.props.eventHandler}, this.props.eventHandler.edit().movimiento)
                    },
                    movimientos: (movimientos) => {
                        const output = []
                        movimientos.forEach(movimiento => {
                            this.draw().movimiento({movimiento, output})
                        })
                        return output
                    },
                    movimiento: ({movimiento, output}) => {
                        const valor = movimiento.abono - movimiento.cargo
                        const fecha = movimiento.fecha
                        output.push([
                            movimiento.cuenta.inmobiliaria.sigla,//0
                            movimiento.cuenta.banco.nombre,//1
                            movimiento.cuenta.cuenta,//2
                            this.props.formatters.date.format(fecha),//3
                            [fecha.getFullYear(), fecha.getMonth() + 1, fecha.getDate()].join('-'),//4
                            fecha.getMonth() + 1,//5
                            fecha.getFullYear(),//6
                            this.props.formatters.number.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="' + movimiento.index + '" data-type="movimiento"><i class="edit icon"></i></button>',//12
                        ])
                    }
                }
            }
            setup() {
                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],
                                        format: {
                                            body: (data, row, column, node) => {
                                                if (column === 3) {
                                                    return data.split('-').reverse().join('-')
                                                }
                                                return data
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    },
                    data: this.props.movimientos,
                })
                this.props.table = new DataTable(this.props.ids.table, dtD)
            }
        }
        class EditModal {
            props
            constructor({ids, editForm}) {
                this.props = {
                    ids,
                    editForm,
                    movimientos: []
                }
            }
            reset() {
                $(this.props.ids.modal).find('.sociedad').text('')
                $(this.props.ids.modal).find('.banco').text('')
                $(this.props.ids.modal).find('.cuenta').text('')
                $(this.props.ids.modal).find('.fecha').text('')
                $(this.props.ids.modal).find('.valor').text('')
                this.props.editForm.reset()
            }
            show({movimiento, type}) {
                $(this.props.ids.modal).modal('show')
                $(this.props.ids.modal).find('.sociedad').text('Sociedad: ' + movimiento.cuenta.inmobiliaria.sigla)
                $(this.props.ids.modal).find('.banco').text('Banco: ' + movimiento.cuenta.banco.nombre)
                $(this.props.ids.modal).find('.cuenta').text('Cuenta: ' + movimiento.cuenta.cuenta)
                $(this.props.ids.modal).find('.fecha').text('Fecha: ' + movimiento.fecha)
                $(this.props.ids.modal).find('.valor').text('Valor: ' + (movimiento.abono - movimiento.cargo))
                this.props.editForm.show({modal: $(this.props.ids.modal), movimiento, type})
            }
            hide() {
                $(this.props.ids.modal).modal('hide')
                this.reset()
            }
        }
        class EditForm {
            props
            constructor({ids}) {
                this.props = {
                    ids,
                    movimientos: []
                }
            }
            reset() {
                $(this.props.ids.form).form('reset')
            }
            show({modal, movimiento, type}) {
                if (movimiento.detalles) {
                    modal.find('#movimiento_data').show()
                    modal.find('#auxiliares').hide()
                    modal.find("[name='centro_id']").dropdown('set selected', movimiento.detalles.centro_costo.id)
                    modal.find("[name='rut']").val(movimiento.detalles.rut)
                    modal.find("#digito").text(Rut.digitoVerificador(movimiento.detalles.rut))
                    modal.find("[name='nombre']").val(movimiento.detalles.nombre)
                    modal.find("[name='categoria']").val(movimiento.detalles.categoria)
                    modal.find("[name='detalle']").val(movimiento.detalles.detalle)
                } else {
                    modal.find('#movimiento_data').hide()
                    modal.find('#auxiliares').show()
                    const tbody = modal.find('#auxiliares tbody')
                    tbody.empty()
                    movimiento.auxiliares.forEach((auxiliar, i) => {
                        tbody.append(`<tr>
    <td><input type="text" name="cargo${i}" value="${auxiliar.cargo}" /></td>
    <td><input type="text" name="abono${i}" value="${auxiliar.abono}" /></td>
    <td>
        <div class="ui selection search dropdown">
            <input type="hidden" name="centro_costo${i}" />
            <i class="dropdown icon"></i>
            <div class="default text">Centro de Costo</div>
            <div class="menu">
                ${CentrosCostos.get().map(centroCosto => `<div class="item" data-value="${centroCosto.id}">${centroCosto.id} - ${centroCosto.descripcion}</div>`).join('')}
            </div>
        </div>
    </td>
    <td>
        <div class="ui right labeled input">
            <input type="text" name="rut${i}" value="${auxiliar.detalles.rut}" />
            <div class="ui basic label">-<span class="digito" data-index="${i}">${Rut.digitoVerificador(auxiliar.detalles.rut)}</span></div>
        </div>
    </td>
    <td><input type="text" name="nombre${i}" value="${auxiliar.detalles.nombre}" /></td>
    <td><input type="text" name="categoria${i}" value="${auxiliar.detalles.categoria}" /></td>
    <td><input type="text" name="detalle${i}" value="${auxiliar.detalles.detalle}" /></td>
    <td><button class="ui red icon button" type="button"><i class="trash icon"></i></button></td>
</tr>`)
                    })
                }
            }
        }
        class MovimientosHandler {
            props
            constructor({urls, loadingHandler, resultsHandler}) {
                this.props = {
                    urls,
                    loadingHandler,
                    resultsHandler
                }
            }
            get() {
                return {
                    movimientos: ({sociedades_ruts, mes}) => {
                        this.props.loadingHandler.show()
                        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('-'))
                        return APIClient.fetch(this.props.urls.get, {method, body}).then(response => {
                            if (!response) {
                                throw new Error('No se pudo obtener los movimientos')
                            }
                            return response.json().then(json => {
                                this.movimientos = json.movimientos
                                this.props.resultsHandler.props.movimientos = json.movimientos
                                this.props.resultsHandler.parse().movimientos()
                                return json.movimientos
                            })
                        }).catch(error => {
                            console.error(error)
                        }).finally(() => {
                            this.props.loadingHandler.hide()
                        })
                    }
                }
            }
            edit() {
                return {
                    movimiento: ({id, index, type, data}) => {
                        /*this.props.resultsHandler.parse().movimientos()
                        this.props.resultsHandler.props.movimientos.forEach((movimiento, i) => {
                            if (movimiento.id === id && movimiento.index === index) {
                                this.props.editModal.show({id, index, type})
                            }
                        })*/
                    }
                }
            }
            find() {
                return {
                    id: id => {
                        return this.props.resultsHandler.props.movimientos.find(movimiento => movimiento.id === id)
                    }
                }
            }
        }
        class ResultsHandler {
            props
            constructor() {
                this.props = {
                    movimientos: [],
                    timezone: ((new Date()).getTimezoneOffset()) / -60
                }
            }
            parse() {
                return {
                    movimientos: () => {
                        const movimientos = this.props.movimientos
                        const data = []
                        movimientos.forEach((movimiento, index) => {
                            this.parse().movimiento({data, movimiento, index})
                        })
                        this.props.parsed = data
                    },
                    movimiento: ({data, movimiento, index}) => {
                        const fecha = new Date(movimiento.fecha + 'Z' + this.props.timezone)
                        if (movimiento.auxiliares.length > 0) {
                            movimiento.auxiliares.forEach((auxiliar, indexAuxiliar) => {
                                data.push({
                                    tipo: 'auxiliar',
                                    id: auxiliar.id,
                                    index: index * 100000 + indexAuxiliar,
                                    cuenta: movimiento.cuenta,
                                    fecha,
                                    cargo: auxiliar.cargo,
                                    abono: auxiliar.abono,
                                    detalles: auxiliar.detalles,
                                    glosa: movimiento.glosa,
                                })
                            })
                            return
                        }
                        data.push({
                            tipo: 'movimiento',
                            id: movimiento.id,
                            index,
                            cuenta: movimiento.cuenta,
                            fecha,
                            cargo: movimiento.cargo,
                            abono: movimiento.abono,
                            glosa: movimiento.glosa,
                            detalles: movimiento.detalles,
                            auxiliares: movimiento.auxiliares,
                        })
                    }
                }
            }
        }

        /*const editForm = {
            id: '',
            data: {
                index: 0,
                id: 0,
                sociedad: '',
                banco: '',
                fecha: '',
                valor: 0,
                glosa: '',
            },
            fields: {
                centro_costo: '',
                rut: '',
                nombre: '',
                categoria: '',
                detalle: '',
            },
            auxiliares: [],
            show({type, index, id, sociedad, banco, cuenta, fecha, valor, glosa, centro_costo = '', rut = '', nombre = '', categoria = '', detalle = '', auxiliares = []}) {
                this.data = {
                    index,
                    id,
                    sociedad,
                    banco,
                    cuenta,
                    fecha,
                    valor,
                    glosa,
                }
                this.auxiliares = auxiliares
                $(this.id).find('.sociedad').text('Sociedad: ' + sociedad)
                $(this.id).find('.banco').text('Banco: ' + banco)
                $(this.id).find('.cuenta').text('Cuenta: ' + cuenta)
                $(this.id).find('.fecha').text('Fecha: ' + fecha)
                $(this.id).find('.valor').text('Valor: ' + valor)
                $(this.id).find('.glosa').text('Glosa: ' + glosa)
                if (auxiliares.length > 0) {
                    this.auxiliares = auxiliares
                    $(this.id).find('#movimiento_data').hide()
                    $(this.id).find('#auxiliares').show()
                    const tbody = $(this.id).find('#auxiliares tbody')
                    tbody.empty()
                    auxiliares.forEach((auxiliar, i) => {
                        this.draw().auxiliar({auxiliar, i})
                    })
                } else {
                    $(this.id).find('#movimiento_data').show()
                    if (type === 'auxiliar') {
                        $(this.id).find('#auxiliares').hide()
                    }
                    if (centro_costo !== '') {
                        $(this.id).find("[name='centro_costo']").dropdown('set selected', centro_costo)
                    }
                    $(this.id).find("[name='rut']").val(rut)
                    $(this.id).find("#digito").text(Rut.digitoVerificador(rut))
                    $(this.id).find("[name='nombre']").val(nombre)
                    $(this.id).find("[name='categoria']").val(categoria)
                    $(this.id).find("[name='detalle']").val(detalle)
                }
                $(this.id).modal('show')
            },
            draw() {
                return {
                    auxiliar: ({auxiliar, i}) => {
                        const tbody = $(this.id).find('#auxiliares tbody')
                        const menu = $('<div></div>').addClass('menu')
                        CentrosCostos.get().forEach(centroCosto => {
                            menu.append(`<div class="item" data-value="${centroCosto.id}">${centroCosto.id} - ${centroCosto.descripcion}</div>`)
                        })
                        const tr = $('<tr>')
                        if (typeof auxiliar !== 'undefined' && auxiliar.includes('cargo')) {
                            tr.append(`<td><input type="text" name="cargo${i}" value="${auxiliar.cargo}" /></td>`)
                        } else {
                            tr.append(`<td><input type="text" name="cargo${i}" /></td>`)
                        }
                        if (typeof auxiliar !== 'undefined' && auxiliar.includes('abono')) {
                            tr.append(`<td><input type="text" name="abono${i}" value="${auxiliar.abono}" /></td>`)
                        } else {
                            tr.append(`<td><input type="text" name="abono${i}" /></td>`)
                        }
                        tr.append(
                            $('<td>').append($('<div>').addClass('ui selection search dropdown').attr('data-index', i).append(
                                    `<input type="hidden" name="centro_costo${i} />`
                                ).append(
                                    `<i class="dropdown icon"></i>`
                                ).append(
                                    `<div class="default text">Centro de Costo</div>`
                                ).append(menu)
                            )
                        )
                        if (typeof auxiliar !== 'undefined' && auxiliar.includes('detalles') && auxiliar.detalles.includes('rut')) {
                            tr.append(`<td>
    <div class="ui right labeled input">
        <input type="text" name="rut${i}" value="${auxiliar.detalles.rut}" />
        <div class="ui basic label">-<span class="digito" data-index="${i}">${Rut.digitoVerificador(auxiliar.detalles.rut)}</span></div>
    </div>
</td>`)
                        } else {
                            tr.append(`<td>
    <div class="ui right labeled input">
        <input type="text" name="rut${i}" />
        <div class="ui basic label">-<span class="digito" data-index="${i}"></span></div>
    </div>
</td>`)
                        }
                        if (typeof auxiliar !== 'undefined' && auxiliar.includes('nombre')) {
                            tr.append(`<td><input type="text" name="nombre${i}" value="${auxiliar.nombre}" /></td>`)
                        } else {
                            tr.append(`<td><input type="text" name="nombre${i}" /></td>`)
                        }
                        if (typeof auxiliar !== 'undefined' && auxiliar.includes('categoria')) {
                            tr.append(`<td><input type="text" name="categoria${i}" value="${auxiliar.categoria}" /></td>`)
                        } else {
                            tr.append(`<td><input type="text" name="categoria${i}" /></td>`)
                        }
                        if (typeof auxiliar !== 'undefined' && auxiliar.includes('detalle')) {
                            tr.append(`<td><input type="text" name="detalle${i}" value="${auxiliar.detalle}" /></td>`)
                        } else {
                            tr.append(`<td><input type="text" name="detalle${i}" /></td>`)
                        }
                        tbody.append(tr)
                        $(this.id).find(`.dropdown[data-index='${i}']`).dropdown()
                        if (typeof auxiliar !== 'undefined' && auxiliar.detalles && auxiliar.detalles.centro_costo && auxiliar.detalles.centro_costo.id) {
                            $(this.id).find(`[name='centro_costo${i}']`).val(auxiliar.detalles.centro_costo.id)
                        }
                        $(this.id).find(`[name='rut${i}']`).on('input', inputEvent => {
                            inputEvent.currentTarget.value = Rut.format(inputEvent.currentTarget.value)
                            const index = $(inputEvent.currentTarget).data('index')
                            $(this.id).find(`.digito[data-index='${index}']`).text(Rut.digitoVerificador($(inputEvent.currentTarget).val()))
                        })
                    }
                }
            },
            submit() {
                const url = ''
                const method = 'post'
                const body = new FormData()
                const data = this.data
                data.centro_costo = $(this.id).find("[name='centro_costo']").dropdown('get value')
                data.rut = $(this.id).find("[name='rut']").val()
                data.nombre = $(this.id).find("[name='nombre']").val()
                data.categoria = $(this.id).find("[name='categoria']").val()
                data.detalle = $(this.id).find("[name='detalle']").val()
                console.debug(data)
            },
            setup(id) {
                this.id = id
                $(this.id).modal({
                    onApprove: $element => {
                        this.submit()
                    }
                })
                $(this.id).find('#centro_costo').dropdown()
                $(this.id).find("[name='rut']").on('input', inputEvent => {
                    $(this.id).find('#digito').text(Rut.digitoVerificador($(inputEvent.currentTarget).val()))
                })
                $(this.id).find('#digito').text(Rut.digitoVerificador($("[name='rut']").val()))
                $(this.id).find('#add_auxiliar').click(clickEvent => {
                    const i = this.auxiliares.length + 1
                    this.draw().auxiliar({i})
                })
            }
        }*/
        /*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 = '/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 tz = ((new Date()).getTimezoneOffset()) / -60
                        data.forEach((movimiento, index) => {
                            const fecha = new Date(movimiento.fecha + 'Z' + tz)
                            if (movimiento.auxiliares.length > 0) {
                                movimiento.auxiliares.forEach((auxiliar, indexAuxiliar) => {
                                    this.movimientos.push({
                                        tipo: 'auxiliar',
                                        id: auxiliar.id,
                                        index: index * 100 + indexAuxiliar,
                                        cuenta: movimiento.cuenta,
                                        fecha,
                                        cargo: auxiliar.cargo,
                                        abono: auxiliar.abono,
                                        detalles: auxiliar.detalles,
                                        glosa: movimiento.glosa,
                                    })
                                })
                                return
                            }
                            this.movimientos.push({
                                tipo: 'movimiento',
                                id: movimiento.id,
                                index,
                                cuenta: movimiento.cuenta,
                                fecha,
                                cargo: movimiento.cargo,
                                abono: movimiento.abono,
                                glosa: movimiento.glosa,
                                detalles: movimiento.detalles,
                                auxiliares: movimiento.auxiliares,
                            })
                        })
                    }
                }
            },
            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.draw().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})
                        })
                    },
                    movimientos: () => {
                        const output = []
                        this.movimientos.forEach(movimiento => {
                            this.draw().movimiento({movimiento, output})
                        })
                        return output
                    },
                    movimiento: ({movimiento, output}) => {
                        const formatter = new Intl.NumberFormat('es-CL')
                        const dateFormatter = new Intl.DateTimeFormat('es-CL', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric'
                        })
                        const valor = movimiento.abono - movimiento.cargo
                        const fecha = movimiento.fecha
                        output.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="' + movimiento.index + '" data-type="movimiento"><i class="edit icon"></i></button>',//12
                        ])
                    },
                    edit: ({id, index, type}) => {
                        const idx = this.movimientos.findIndex(movimiento => movimiento.index === index)
                        editForm.show({
                            type,
                            id,
                            index,
                            sociedad: this.movimientos[idx].cuenta.inmobiliaria.sigla,
                            banco: this.movimientos[idx].cuenta.banco.nombre,
                            cuenta: this.movimientos[idx].cuenta.cuenta,
                            fecha: this.movimientos[idx].fecha,
                            valor: this.movimientos[idx].abono - this.movimientos[idx].cargo,
                            glosa: this.movimientos[idx].glosa,
                            centro_costo: (this.movimientos[idx].detalles !== null && typeof this.movimientos[idx].detalles.centro_costo) ? this.movimientos[idx].detalles.centro_costo.id : '',
                            rut: (this.movimientos[idx].detalles !== null) ? this.movimientos[idx].detalles.rut : '',
                            nombre: (this.movimientos[idx].detalles !== null) ? this.movimientos[idx].detalles.nombre : '',
                            categoria: (this.movimientos[idx].detalles !== null) ? this.movimientos[idx].detalles.categoria : '',
                            detalle: (this.movimientos[idx].detalles !== null) ? this.movimientos[idx].detalles.detalle : '',
                            auxiliares: this.movimientos[idx].auxiliares,
                        })
                    }
                }
            },
            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 = '/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],
                                        format: {
                                            body: (data, row, column, node) => {
                                                if (column === 3) {
                                                    return data.split('-').reverse().join('-')
                                                }
                                                return data
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    },
                    data: this.movimientos,
                })
                this.table = new DataTable(this.ids.table, dtD)

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

        const app = {
            handlers: {},
            setup() {
                this.handlers.results = new ResultsHandler()
                this.handlers.loading = new LoadingHandler({id: '#movimientos_form'})
                this.handlers.movimientos = new MovimientosHandler({urls: {get: '{{$urls->api}}/contabilidad/movimientos/sociedad/mes', edit: '{{$urls->api}}/contabilidad/movimientos/edit'}, loadingHandler: this.handlers.loading, resultsHandler: this.handlers.results})
                this.handlers.forms = {}
                this.handlers.forms.edit = new EditForm({ids: {modal: '#movimientos_modal', form: '#movimientos_edit',}})
                this.handlers.modals = {}
                this.handlers.modals.edit = new EditModal({ids: {modal: '#movimientos_modal'}, editForm: this.handlers.forms.edit})
                this.handlers.events = new EventHandler({movimientosHandler: this.handlers.movimientos, modalHandler: this.handlers.modals.edit})
                this.handlers.table = new MovimientosTable({ids: {table: '#tabla_movimientos', buttons: {edit: '.edit_button'}}, eventHandler: this.handlers.events})
                this.handlers.forms.control = new ControlForm({
                    ids: {form: '#movimientos_form', sociedades: '#sociedades', mes: '#mes',},
                })
                this.handlers.table.setup()
                this.handlers.forms.control.setup()
            }
        }
        $(document).ready(() => {
            app.setup()
            /*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