@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">
            Cartola Diaria
        </h1>
        <div class="ui grid">
            <div class="right aligned sixteen wide column">
                <button class="ui green icon button" id="add_button">
                    Agregar
                    <i class="plus icon"></i>
                </button>
            </div>
        </div>
        <form class="ui form" id="cartola_form">
            <input type="hidden" id="fields" name="fields" value="0" />
        </form>
        <div class="ui two columns grid">
            <div class="column">
                <button class="ui icon button" id="process_button">
                    <i class="file excel icon"></i>
                    Procesar
                </button>
            </div>
            <div class="right aligned column">
                <div class="ui inline active loader" id="loader"></div>
            </div>
        </div>
        <table class="ui table" id="diferencia">
            <thead>
            <tr>
                <th>Sociedad</th>
                <th>Banco - Cuenta</th>
                <th>Hoy</th>
                <th>Último Saldo</th>
                <th>Saldo Actual</th>
                <th>Diferencia</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="ui fluid container">
        <table class="ui table" id="tabla_movimientos">
            <thead>
            <tr>
                <th>Sociedad</th>
                <th>Banco - Cuenta</th>
                <th>Fecha</th>
                <th>Glosa</th>
                <th class="right aligned">Cargo</th>
                <th class="right aligned">Abono</th>
                <th class="right aligned">Saldo</th>
                <th>Centro de Costo</th>
                <th>Detalle</th>
                <th>Orden</th>
            </tr>
            </thead>
            <tbody id="movimientos"></tbody>
        </table>
    </div>
    <div class="ui modal" id="manual_modal">
        <div class="content">
            <div class="header">
                Movimientos |
                <span id="modal_inmobiliaria"></span> |
                <span id="modal_cuenta"></span> |
                <span id="modal_fecha"></span>
            </div>
            <div class="ui one column grid">
                <div class="right aligned column">
                    <button class="ui green icon button" id="add_manual">
                        <i class="plus icon"></i>
                    </button>
                </div>
            </div>
            <form class="ui form" id="modal_form">
                <input type="hidden" name="movimientos" value="[1]" />
                <div id="modal_movimientos">
                    <div class="fields" data-movimiento="1">
                        <div class="field">
                            <label>Glosa</label>
                            <input type="text" name="glosa1" />
                        </div>
                        <div class="field">
                            <label>Cargo</label>
                            <div class="ui left labeled input">
                                <div class="ui basic label">$</div>
                                <input type="text" name="cargo1" />
                            </div>
                        </div>
                        <div class="field">
                            <label>Abono</label>
                            <div class="ui left labeled input">
                                <div class="ui basic label">$</div>
                                <input type="text" name="abono1" />
                            </div>
                        </div>
                        <div class="field">
                            <label>Saldo</label>
                            <div class="ui left labeled input">
                                <div class="ui basic label">$</div>
                                <input type="text" name="saldo1" />
                            </div>
                        </div>
                        <div class="field"></div>
                    </div>
                </div>
            </form>
            <div class="actions">
                <button class="ui approve button">
                    Procesar
                </button>
            </div>
        </div>
    </div>
@endsection

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

@push('page_scripts')
    <script>
        class Cartola {
            idx
            inmobiliaria = {
                rut: 0,
                razon: ''
            }
            cuenta = {
                id: 0,
                descripcion: ''
            }
            fecha = ''
            bancos = []
            movimientos = []
            saldo = 0
            ayer = 0

            constructor(idx) {
                this.idx = idx
            }

            get() {
                return {
                    bancos: () => {
                        const url = '{{$urls->api}}/inmobiliaria/' + this.inmobiliaria.rut + '/cuentas'
                        diaria.loader().show()
                        return fetchAPI(url).then(response => {
                            diaria.loader().hide()
                            if (!response) {
                                this.bancos = []
                                return
                            }
                            return response.json().then(json => {
                                if (json.cuentas.length === 0) {
                                    this.bancos = []
                                    return
                                }
                                this.bancos = json.cuentas.map(cuenta => {
                                    return {
                                        value: cuenta.id,
                                        text: cuenta.banco.nombre + ' - ' + cuenta.cuenta,
                                        name: cuenta.banco.nombre + ' - ' + cuenta.cuenta
                                    }
                                })
                            })
                        })
                    },
                    ayer: (fecha) => {
                        const url = '{{$urls->api}}/contabilidad/cartola/diaria/ayer'
                        const body = new FormData()
                        body.set('cuenta_id', this.cuenta.id)
                        body.set('fecha', fecha.toISOString())
                        return fetchAPI(url, {method: 'post', body}).then(response => {
                            if (!response) {
                                return
                            }
                            return response.json().then(json => {
                                if (json.cartola.length === 0) {
                                    return
                                }
                                this.ayer = json.cartola.saldo
                            })
                        })
                    }
                }
            }
            update() {
                return {
                    centro: (idx, centro_id) => {
                        const id = this.movimientos[idx].id
                        const url = '{{$urls->api}}/contabilidad/movimiento/' + id + '/detalles'
                        const body = new FormData()
                        body.set('centro_id', centro_id)
                        return fetchAPI(url, {method: 'post', body}).then(response => {
                            if (!response) {
                                return
                            }
                            response.json().then(json => {
                                if (!json.status) {
                                    return
                                }
                                const dropdown = $(".dropdown[data-idx='" + idx + "']")
                                dropdown.dropdown('set selected', json.centro.id, true)
                            })
                        })
                    },
                    detalle: (idx, detalle) => {
                        const id = this.movimientos[idx].id
                        const url = '{{$urls->api}}/contabilidad/movimiento/' + id + '/detalles'
                        const body = new FormData()
                        body.set('detalle', detalle)
                        return fetchAPI(url, {method: 'post', body}).then(response => {
                            if (!response) {
                                return
                            }
                            response.json().then(json => {
                                if (!json.status) {
                                    return
                                }
                                const input = $("input[data-idx='" + idx + "']")
                                input.val(json.detalle)
                            })
                        })
                    }
                }
            }
            draw() {
                return {
                    form: ($form, inmobiliarias, first = false) => {
                        const $fields = $('<div></div>').addClass('fields cartola').attr('data-cartola', this.idx)
                        const $inmobiliarias_menu = $('<div></div>').addClass('menu')
                        inmobiliarias.forEach(inmobiliaria => {
                            $inmobiliarias_menu.append(
                                $('<div></div>').addClass('item').attr('data-value', inmobiliaria.rut).html(inmobiliaria.razon)
                            )
                        })
                        const $inmobiliarias_dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('id', 'inmobiliaria' + this.idx).append(
                            $('<input />').attr('type', 'hidden')//.attr('name', 'inmobiliaria_rut' + this.idx)
                        ).append(
                            $('<i></i>').addClass('dropdown icon')
                        ).append(
                            $('<div></div>').addClass('default text').html('Inmobiliaria')
                        ).append($inmobiliarias_menu)
                        $fields.append(
                            $('<div></div>').addClass('six wide field').append(
                                $('<label></label>').attr('for', 'inmobiliaria' + this.idx).html('Sociedad')
                            ).append($inmobiliarias_dropdown)
                        )
                        const $cuentas_dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('id', 'cuenta' + this.idx).append(
                            $('<input />').attr('type', 'hidden').attr('name', 'cuenta_id' + this.idx)
                        ).append(
                            $('<i></i>').addClass('dropdown icon')
                        ).append(
                            $('<div></div>').addClass('default text').html('Banco - Cuenta')
                        ).append(
                            $('<div></div>').addClass('menu')
                        )
                        $fields.append(
                            $('<div></div>').addClass('four wide field').append(
                                $('<label></label>').html('Banco - Cuenta')
                            ).append($cuentas_dropdown)
                        )
                        const $fecha_calendar = $('<div></div>').addClass('ui calendar').attr('id', 'fecha' + this.idx).append(
                            $('<div></div>').addClass('ui left icon input').append(
                                $('<i></i>').addClass('calendar icon')
                            ).append(
                                $('<input />').attr('type', 'text')
                            )
                        )
                        $fields.append(
                            $('<div></div>').addClass('three wide field').append(
                                $('<label></label>').attr('for', 'fecha' + this.idx).html('Fecha')
                            ).append($fecha_calendar)
                        )
                        $fields.append(
                            $('<div></div>').addClass('field').append(
                                $('<label></label>').html('Cartola')
                            ).append(
                                $('<input />').addClass('ui invisible file input').attr('type', 'file').attr('name', 'file' + this.idx).attr('id', 'file' + this.idx)
                            ).append(
                                $('<label></label>').addClass('ui icon button').attr('for', 'file' + this.idx).append(
                                    $('<i></i>').addClass('file icon')
                                ).append('Cargar')
                            )
                        )
                        const $manual_checkbox = $('<div></div>').addClass('ui invisible checkbox').append(
                            $('<input />').attr('type', 'checkbox').attr('name', 'manual' + this.idx).attr('id', 'manual' + this.idx)
                        ).append(
                            $('<label></label>').addClass('image').attr('for', 'manual' + this.idx).append(
                                $('<i></i>').addClass('large orange keyboard icon')
                            )
                        )

                        $fields.append($('<div></div>').addClass('field').append(
                            $('<label></label>').html('Manual')
                        ).append($manual_checkbox))
                        if (!first) {
                            $fields.append(
                                $('<div></div>').addClass('field').append(
                                    $('<label></label>').html('Eliminar')
                                ).append(
                                    $('<button></button>').addClass('ui red icon button').attr('data-cartola', this.idx).append(
                                        $('<i></i>').addClass('remove icon')
                                    ).click(event => {
                                        const idx = $(event.currentTarget).data('cartola')
                                        diaria.cartolas().remove(idx)
                                    })
                                )
                            )
                        }
                        $form.append($fields)

                        const cdo = JSON.parse(JSON.stringify(calendar_date_options))
                        cdo['initialDate'] = new Date()
                        cdo['maxDate'] = cdo['initialDate']
                        cdo['onChange'] = (date, text, mode) => {
                            this.fecha = date
                        }
                        this.fecha = cdo['initialDate']

                        $inmobiliarias_dropdown.dropdown({
                            fireOnInit: true,
                            onChange: (value, text, $choice) => {
                                this.inmobiliaria.rut = value
                                this.inmobiliaria.razon = text
                                this.get().bancos(value).then(() => {
                                    $cuentas_dropdown.dropdown('change values', this.bancos)
                                })
                            },
                        })
                        $cuentas_dropdown.dropdown({
                            fireOnInit: true,
                            onChange: (value, text, $choice) => {
                                this.cuenta.id = value
                                this.cuenta.descripcion = text
                            }
                        })
                        $fecha_calendar.calendar(cdo)
                        $manual_checkbox.change(event => {
                            const $element = $(event.currentTarget)
                            const status = $element.checkbox('is checked')
                            const $field = $element.parent().parent()
                            const $file = $field.find('#file' + this.idx).parent()
                            if (status) {
                                $file.find('input').attr('type', 'hidden')
                                $file.hide()

                                manual.data.inmobiliaria = $inmobiliarias_dropdown.dropdown('get text')
                                manual.data.cuenta = $cuentas_dropdown.dropdown('get text')
                                const fecha = $fecha_calendar.calendar('get date')
                                manual.data.fecha = [fecha.getDate(), (fecha.getMonth()+1).toString().padStart(2, '0'), fecha.getFullYear()].join('-')
                                manual.data.field = this.idx
                                manual.$modal.modal('show')
                                return
                            }
                            $file.find('input').attr('type', 'file')
                            $file.show()
                        })
                    },
                    diferencia: ($tbody, dateFormatter, numberFormatter) => {
                        $tbody.append(
                            $('<tr></tr>').append(
                                $('<td></td>').html(this.inmobiliaria.razon)
                            ).append(
                                $('<td></td>').html(this.cuenta.descripcion)
                            ).append(
                                $('<td></td>').html(dateFormatter.format(this.fecha))
                            ).append(
                                $('<td></td>').html(numberFormatter.format(this.ayer))
                            ).append(
                                $('<td></td>').html(numberFormatter.format(this.saldo))
                            ).append(
                                $('<td></td>').html(numberFormatter.format(this.saldo - this.ayer))
                            )
                        )
                    },
                    cartola: ($tbody, dateFormatter, numberFormatter) => {
                        this.movimientos.forEach((row, idx) => {
                            $tbody.append(
                                $('<tr></tr>').append(
                                    '<td>' + this.inmobiliaria.razon + '</td>' + "\n"
                                    + '<td>' + this.cuenta.descripcion + '</td>' + "\n"
                                    + '<td>' + dateFormatter.format(row.fecha) + '</td>' + "\n"
                                    + '<td>' + row.glosa + '</td>' + "\n"
                                    + '<td class="right aligned">' + (row.cargo === 0 ? '' : numberFormatter.format(row.cargo)) + '</td>' + "\n"
                                    + '<td class="right aligned">' + (row.abono === 0 ? '' : numberFormatter.format(row.abono)) + '</td>' + "\n"
                                    + '<td class="right aligned">' + (row.saldo === 0 ? '' : numberFormatter.format(row.saldo)) + '</td>' + "\n"
                                ).append(
                                    $('<td></td>').append(
                                        this.draw().centroCosto(idx)
                                    )
                                ).append(
                                    $('<td></td>').append(
                                        this.draw().detalle(idx)
                                    )
                                ).append(
                                    $('<td></td>').html(idx + 1)
                                )
                            )
                        })
                    },
                    centroCosto: idx => {
                        const centros = JSON.parse('{!! json_encode($centrosCostos) !!}')
                        const menu = $('<div></div>').addClass('menu')
                        centros.forEach(centro => {
                            menu.append(
                                '<div class="item" data-value="' + centro.id + '">'
                                    + centro.id + ' - ' + centro.descripcion
                                + '</div>'
                            )
                        })
                        const dropdown = $('<div></div>').addClass('ui search selection dropdown').attr('data-idx', idx).html(
                            '<input type="hidden" name="centro" />' + "\n" +
                            '<i class="dropdown icon"></i>' + "\n" +
                            '<div class="default text">Centro de Costo</div>' + "\n"
                        ).append(menu)
                        dropdown.dropdown({
                            onChange: (value, text, $element) => {
                                const idx = $element.parent().parent().data('idx')
                                this.update().centro(idx, value)
                            }
                        })

                        if (this.movimientos[idx].centro !== '') {
                            const cid = centros.findIndex(centro => centro.descripcion === this.movimientos[idx].centro)
                            dropdown.dropdown('set selected', centros[cid].id, true)
                        }
                        return dropdown
                    },
                    detalle: idx => {
                        const detalle = document.createElement('input')
                        detalle.type = 'text'
                        detalle.name = 'detalle' + idx
                        detalle.placeholder = 'Detalle'
                        detalle.setAttribute('data-idx', idx)
                        const input = document.createElement('div')
                        input.className = 'ui input'
                        input.appendChild(detalle)
                        if (this.movimientos[idx].detalle !== '') {
                            detalle.value = this.movimientos[idx].detalle
                        }
                        detalle.addEventListener('blur', event => {
                            const idx = event.currentTarget.dataset['idx']
                            this.update().detalle(idx, event.currentTarget.value)
                        })
                        return $(input)
                    }
                }
            }
        }
        @php
        $columns = [
            'sociedad',
            'cuenta',
            'fecha',
            'glosa',
            'cargo',
            'abono',
            'saldo',
            'centro',
            'detalle',
            'orden'
        ];
        @endphp
        const diaria = {
            ids: {},
            data: {
                inmobiliarias: JSON.parse('{!! json_encode($inmobiliarias) !!}'),
                cartolasIdx: [],
                cartolas: [],
            },
            dataTableConfig: {
                order: [[{{array_search('orden', $columns)}}, 'asc']],
                columnDefs: [
                    {
                        targets: [{{implode(',', array_keys(array_filter($columns, function($column) {return in_array($column, ['fecha', 'cargo', 'abono', 'saldo']);})))}}],
                        width: '{{round((1/(count($columns) + 3 - 1)) * 100,2)}}%'
                    },
                    {
                        targets: [{{implode(',', array_keys(array_filter($columns, function($column) {return in_array($column, ['sociedad', 'cuenta', 'glosa', 'centro', 'detalle']);})))}}],
                        width: '{{round((1/(count($columns) + 3 - 1)) * 2 * 100, 2)}}%'
                    },
                    {
                        targets: [{{array_search('orden', $columns)}}],
                        visible: false
                    }
                ],
            },
            loaderStatus: true,
            loader() {
                return {
                    show: () => {
                        if (!this.loaderStatus) {
                            $(this.ids.loader).show()
                            this.loaderStatus = true
                        }
                    },
                    hide: () => {
                        if (this.loaderStatus) {
                            $(this.ids.loader).hide()
                            this.loaderStatus = false
                        }
                    }
                }
            },
            cartolas() {
                return {
                    add: () => {
                        let first = false
                        if (this.data.cartolas.length === 0) {
                            first = true
                        }
                        const idx = this.data.cartolas.reduce((prev, cartola) => Math.max(prev, cartola.idx), 0) + 1
                        const cartola = new Cartola(idx)
                        this.data.cartolas.push(cartola)
                        this.data.cartolasIdx.push(idx)
                        const form = $(this.ids.form)
                        cartola.draw().form(form, this.data.inmobiliarias, first)
                        $(this.ids.fields).attr('value', JSON.stringify(this.data.cartolasIdx))
                    },
                    remove: idx => {
                        if (this.data.cartolas.length === 1) {
                            return
                        }
                        const i = this.data.cartolasIdx.findIndex(value => value === idx)
                        const cartolaIdx = this.data.cartolas.findIndex(cartola => cartola.idx === idx)
                        $("div.cartola[data-cartola='" + idx + "']").remove()
                        this.data.cartolasIdx.splice(i,1)
                        this.data.cartolas.splice(cartolaIdx,1)
                        $(this.ids.fields).attr('value', JSON.stringify(this.data.cartolasIdx))
                    }
                }
            },
            draw() {
                return {
                    empty: () => {
                        Object.values(this.ids.table).forEach(id => $(id).find('tbody').html(''))
                    },
                    diferencia: () => {
                        const $table = $(this.ids.table.diferencia)
                        const $tbody = $table.find('tbody')
                        $tbody.html('')
                        const dateFormatter = new Intl.DateTimeFormat('es-CL', {
                            year: 'numeric',
                            month: 'numeric',
                            day: 'numeric'
                        })
                        const numberFormatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
                        this.data.cartolas.forEach(cartola => {
                            cartola.draw().diferencia($tbody, dateFormatter, numberFormatter)
                        })
                    },
                    cartola: () => {
                        const $table = $(this.ids.table.base)
                        $table.DataTable().clear()
                        $table.DataTable().destroy()
                        const $tbody = $(this.ids.table.body)
                        $tbody.html('')
                        const dateFormatter = new Intl.DateTimeFormat('es-CL', {
                            year: 'numeric',
                            month: 'numeric',
                            day: 'numeric'
                        })
                        const numberFormatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 0, maximumFractionDigits: 0})
                        this.data.cartolas.forEach(cartola => {
                            cartola.draw().cartola($tbody, dateFormatter, numberFormatter)
                        })
                        $table.DataTable(this.dataTableConfig)
                    },
                }
            },
            parse() {
                return {
                    cartola: event => {
                        const body = new FormData($(this.ids.form)[0])
                        this.data.cartolas.forEach(cartola => {
                            body.set('fecha' + cartola.idx, [cartola.fecha.getFullYear(), cartola.fecha.getMonth()+1, cartola.fecha.getDate()].join('-'))
                        })
                        const url = '{{$urls->api}}/contabilidad/cartola/diaria/procesar'
                        diaria.loader().show()
                        fetchAPI(url, {method: 'post', body}).then(response => {
                            diaria.loader().hide()
                            this.draw().empty()
                            if (!response) {
                                return
                            }
                            return response.json().then(json => {
                                if (json.cartolas.length === 0) {
                                    return
                                }
                                Object.entries(json.cartolas).forEach(entry => {
                                    const cartolaIdx = this.data.cartolas.findIndex(cartola => cartola.idx === parseInt(entry[0]))
                                    this.data.cartolas[cartolaIdx].movimientos = []
                                    entry[1].movimientos.forEach((row, idx) => {
                                        const fecha = new Date(row.fecha)
                                        fecha.setDate(fecha.getDate() + 1)
                                        this.data.cartolas[cartolaIdx].movimientos[idx] = {
                                            id: row.id,
                                            fecha: fecha,
                                            glosa: row.glosa,
                                            documento: row.documento,
                                            cargo: row.cargo,
                                            abono: row.abono,
                                            saldo: row.saldo,
                                            centro: row.detalles?.centro_costo.descripcion ?? '',
                                            detalle: row.detalles?.detalle ?? ''
                                        }
                                    })
                                    const ayer = new Date(this.data.cartolas[cartolaIdx].fecha.getTime())
                                    ayer.setDate(this.data.cartolas[cartolaIdx].fecha.getDate() - 1)
                                    this.data.cartolas[cartolaIdx].saldo = entry[1].cartola.saldo
                                    this.data.cartolas[cartolaIdx].get().ayer(ayer)
                                })
                                this.draw().diferencia()
                                this.draw().cartola()
                            })
                        })
                        return false
                    }
                }
            },
            setup(ids) {
                this.ids = ids

                this.loader().hide()

                $(this.ids.form).submit(event => {
                    event.preventDefault()
                    return false
                })
                $(this.ids.buttons.add).click(event => {
                    this.cartolas().add()
                })
                $(this.ids.buttons.process).click(this.parse().cartola)
                $(this.ids.table.base).DataTable(this.dataTableConfig)

                this.cartolas().add()
            }
        }
        const manual = {
            ids: {},
            $modal: null,
            data: {
                inmobiliaria: '',
                cuenta: '',
                fecha: '',
                field: 0,
                movimientos: [
                    {idx: 1}
                ]
            },
            get movimientosIdx() {
                const $movimientosIdx = $(this.ids.form).find("[name='movimientos']")
                return JSON.parse($movimientosIdx.val())
            },
            set movimientosIdx(list) {
                const $movimientosIdx = $(this.ids.form).find("[name='movimientos']")
                $movimientosIdx.val(JSON.stringify(list))
            },
            update() {
                return {
                    file: movimientos => {
                        const $file = $("[name='file" + this.data.field + "']")
                        $file.val(JSON.stringify(movimientos))
                    }
                }
            },
            parse() {
                return {
                    movimientos: () => {
                        const $fields = $(this.ids.movimientos).find('.fields')
                        const movimientos = []
                        $fields.each((i, fields) => {
                            const idx = $(fields).data('movimiento')
                            const inputs = [
                                'glosa',
                                'cargo',
                                'abono',
                                'saldo'
                            ]
                            const data = {}
                            inputs.forEach(name => {
                                data[name] = $(fields).find("[name='"+name+idx+"']").val()
                                if (name !== 'glosa') {
                                    data[name] = parseInt(data[name]) || 0
                                }
                            })

                            movimientos.push(data)
                        })
                        this.update().file(movimientos)
                    }
                }
            },
            movimiento() {
                return {
                    add: () => {
                        const idx = this.data.movimientos.reduce((prev, movimiento) => Math.max(prev, movimiento.idx), 0) + 1
                        const movimiento = {
                            idx
                        }
                        this.data.movimientos.push(movimiento)
                        const movimientosidx = this.movimientosIdx
                        movimientosidx.push(idx)
                        this.movimientosIdx = movimientosidx
                        this.draw().movimiento(idx)
                    },
                    remove: idx => {
                        const movimientosIdx = this.movimientosIdx
                        const i = movimientosIdx.findIndex(n => n === idx)
                        movimientosIdx.splice(i, 1)
                        const movimientoIdx = this.data.movimientos.findIndex(movimiento => movimiento.idx === idx)
                        this.data.movimientos.splice(movimientoIdx, 1)
                        $(this.ids.movimientos).find("[data-idx='"+idx+"']").parent().parent().remove()
                        this.movimientosIdx = movimientosIdx
                    }
                }
            },
            draw() {
                return {
                    movimiento: idx => {
                        $(this.ids.movimientos).append(
                            $('<div></div>').addClass('fields').attr('data-movimiento', idx).append(
                                '<div class="field">' + "\n"
                                    + '<label>Glosa</label>' + "\n"
                                    + '<input type="text" name="glosa' + idx + '" />' + "\n"
                                + '</div>' + "\n" +
                                '<div class="field">' + "\n"
                                    + '<label>Cargo</label>' + "\n"
                                    + '<div class="ui left labeled input">' + "\n"
                                        + '<div class="ui basic label">$</div>' + "\n"
                                        + '<input type="text" name="cargo' + idx + '" />' + "\n"
                                    + '</div>' + "\n"
                                + '</div>' + "\n" +
                                '<div class="field">' + "\n"
                                    + '<label>Abono</label>' + "\n"
                                    + '<div class="ui left labeled input">' + "\n"
                                        + '<div class="ui basic label">$</div>' + "\n"
                                        + '<input type="text" name="abono' + idx + '" />' + "\n"
                                    + '</div>' + "\n"
                                + '</div>' + "\n" +
                                '<div class="field">' + "\n"
                                    + '<label>Saldo</label>' + "\n"
                                    + '<div class="ui left labeled input">' + "\n"
                                        + '<div class="ui basic label">$</div>' + "\n"
                                        + '<input type="text" name="saldo' + idx + '" />' + "\n"
                                    + '</div>' + "\n"
                                + '</div>'
                            ).append(
                                $('<div></div>').addClass('field').append(
                                    $('<label></label>').html('Eliminar')
                                ).append(
                                    $('<button></button>').addClass('ui red icon button').attr('type', 'button').attr('data-idx', idx).append(
                                        $('<i></i>').addClass('remove icon')
                                    ).click(event => {
                                        const idx = $(event.currentTarget).data('idx')
                                        manual.movimiento().remove(idx)
                                    })
                                )
                            )
                        )
                    }
                }
            },
            setup(ids) {
                this.ids = ids

                $(this.ids.modal).modal({
                    onShow: () => {
                        $(this.ids.inmobiliaria).html(this.data.inmobiliaria)
                        $(this.ids.cuenta).html(this.data.cuenta)
                        $(this.ids.fecha).html(this.data.fecha)
                        this.movimientos = []
                        $(this.ids.form).trigger('reset')
                    },
                    onApprove: $element => {
                        this.parse().movimientos()
                    },
                    onHide: $element => {
                        this.parse().movimientos()
                    }
                })
                this.$modal = $(this.ids.modal)
                $(this.ids.button).click(event => {
                    this.movimiento().add()
                })
                $(this.ids.form).submit(event => {
                    event.preventDefault()
                    this.$modal.modal('hide')
                    return false
                })
            }
        }
        $(document).ready(() => {
            diaria.setup({
                table: {
                    base: '#tabla_movimientos',
                    body: '#movimientos',
                    diferencia: '#diferencia'
                },
                form: '#cartola_form',
                fields: '#fields',
                buttons: {
                    add: '#add_button',
                    process: '#process_button'
                },
                loader: '#loader'
            })
            manual.setup({
                modal: '#manual_modal',
                button: '#add_manual',
                inmobiliaria: '#modal_inmobiliaria',
                cuenta: '#modal_cuenta',
                fecha: '#modal_fecha',
                form: '#modal_form',
                movimientos: '#modal_movimientos'
            })
        })
    </script>
@endpush