@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">Asignar Centros de Costos</h1>
        <form class="ui form" id="asignar_form">
            <div class="ui grid">
                <div class="fourteen wide column">
                    <div class="fields">
                        <div class="five wide field">
                            <label>Inmobiliaria</label>
                            <div class="ui selection search dropdown" id="inmobiliaria">
                                <input type="hidden" name="inmobiliaria"/>
                                <i class="dropdown icon"></i>
                                <div class="default text">Inmobiliaria</div>
                                <div class="menu">
                                    @foreach ($inmobiliarias as $inmobiliaria)
                                        <div class="item"
                                             data-value="{{$inmobiliaria->rut}}">{{$inmobiliaria->razon}}</div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="two wide field">
                            <label>Banco</label>
                            <div class="ui selection search dropdown" id="banco">
                                <input type="hidden" name="banco"/>
                                <i class="dropdown icon"></i>
                                <div class="default text">Banco</div>
                                <div class="menu"></div>
                            </div>
                        </div>
                        <div class="field">
                            <label>Mes</label>
                            <div class="ui calendar" id="mes">
                                <div class="ui icon input">
                                    <i class="calendar icon"></i>
                                    <input type="text" name="mes"/>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <label for="file">Cartola</label>
                            <input type="file" name="file" id="file" class="ui invisible file input"/>
                            <label for="file" class="ui icon button">
                                <i class="file icon"></i>
                                Cargar
                            </label>
                        </div>
                    </div>
                </div>
                <div class="two wide middle aligned column">
                    <button class="ui icon button">
                        Procesar
                        <i class="sync icon"></i>
                    </button>
                </div>
            </div>
        </form>
        <div class="ui two columns grid">
            <div class="column">
                <button class="ui icon button" id="export_button">
                    <i class="file excel icon"></i>
                    Exportar
                </button>
            </div>
            <div class="right aligned column">
                <div class="ui inline active loader" id="loader"></div>
            </div>
        </div>
    </div>
    <div class="ui fluid container">
        <table class="ui table" id="tabla_movimientos">
            <thead>
            <tr>
                <th>Fecha</th>
                <th>Glosa</th>
                <th>Documento</th>
                <th class="right aligned">Cargo</th>
                <th class="right aligned">Abono</th>
                <th>Centro de Costo</th>
                <th>Detalle</th>
                <th>Orden</th>
            </tr>
            </thead>
            <tbody id="movimientos"></tbody>
        </table>
    </div>
@endsection

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

@push('page_scripts')
    <script>
        const cartola = {
            ids: {
                table: {
                    base: '',
                    body: ''
                },
                form: {
                    base: '',
                    inmobiliaria: '',
                    banco: '',
                    mes: '',
                },
                button: '',
                loader: '',
            },
            data: {
                inmobiliaria: {
                    rut: 0,
                    razon: ''
                },
                banco: {
                    id: 0,
                    nombre: ''
                },
                mes: '',
                movimientos: [],
                centrosCostos: {
                    ingresos: JSON.parse('{!! json_encode(array_values(array_map(function(\Incoviba\Model\Contabilidad\CentroCosto $centroCosto) {
                            return [
                                'id' => $centroCosto->id,
                                'descripcion' => $centroCosto->descripcion
                            ];
                        }, array_filter($centrosCostos, function(\Incoviba\Model\Contabilidad\CentroCosto $centroCosto) {
                            return $centroCosto->tipoCentro->descripcion === 'Ingreso';
                        })))) !!}'),
                    egresos: JSON.parse('{!! json_encode(array_values(array_map(function(\Incoviba\Model\Contabilidad\CentroCosto $centroCosto) {
                            return [
                                'id' => $centroCosto->id,
                                'descripcion' => $centroCosto->descripcion
                            ];
                        }, array_filter($centrosCostos, function(\Incoviba\Model\Contabilidad\CentroCosto $centroCosto) {
                            return $centroCosto->tipoCentro->descripcion === 'Egreso';
                        })))) !!}'),
                }
            },
            dataTableConfig: {
                pageLength: 100,
                order: [[7, 'asc']],
                columnDefs: [
                    {
                        targets: [0, 2, 3, 4],
                        width: '10%'
                    },
                    {
                        targets: [1],
                        width: '20%'
                    },
                    {
                        targets: [7],
                        visible: false
                    }
                ],
            },
            get() {
                return {
                    bancos: inmobiliaria_rut => {
                        const url = '{{$urls->api}}/inmobiliaria/' + inmobiliaria_rut + '/cuentas'
                        $(this.ids.loader).show()
                        return fetchAPI(url).then(response => {
                            $(this.ids.loader).hide()
                            if (!response) {
                                return
                            }
                            return response.json().then(json => {
                                if (json.cuentas.length === 0) {
                                    return
                                }
                                $(this.ids.form.banco).dropdown('change values', json.cuentas.map(cuenta => {
                                    return {
                                        value: cuenta.banco.id,
                                        text: cuenta.banco.nombre,
                                        name: cuenta.banco.nombre
                                    }
                                })).dropdown('refresh')
                            })
                        })
                    },
                    firstDate: inmobiliaria_rut => {
                        const url = '{{$urls->api}}/inmobiliaria/' + inmobiliaria_rut + '/proyectos'
                        $(this.ids.loader).show()
                        return fetchAPI(url).then(response => {
                            $(this.ids.loader).hide()
                            if (!response) {
                                return
                            }
                            return response.json().then(json => {
                                if (json.proyectos.length === 0) {
                                    return
                                }
                                const min = json.proyectos.reduce((min, proyecto) => {
                                    const date = new Date(proyecto.current_estado.fecha.date)
                                    if (min > date.getTime()) {
                                        return date.getTime()
                                    }
                                    return min
                                }, (new Date()).getTime())
                                $(this.ids.form.mes).calendar('set minDate', new Date(min))
                            })
                        })
                    }
                }
            },
            parse() {
                return {
                    cartola: event => {
                        event.preventDefault()
                        const body = new FormData(document.getElementById('asignar_form'))
                        body.set('mes', $('#mes').calendar('get date').toISOString())
                        const url = '{{$urls->api}}/contabilidad/cartolas/procesar'
                        $(this.ids.loader).show()
                        fetchAPI(url, {method: 'post', body}).then(response => {
                            $(this.ids.loader).hide()
                            if (!response) {
                                return
                            }
                            return response.json().then(json => {
                                if (json.movimientos.length === 0) {
                                    return
                                }
                                this.data.movimientos = []
                                json.movimientos.forEach((row, idx) => {
                                    const fecha = new Date(row.fecha)
                                    fecha.setDate(fecha.getDate() + 1)
                                    this.data.movimientos[idx] = {
                                        fecha: fecha,
                                        glosa: row.glosa,
                                        documento: row.documento,
                                        cargo: row.cargo,
                                        abono: row.abono,
                                    }
                                })
                                this.draw().cartola()
                            })
                        })
                        return false
                    }
                }
            },
            export() {
                return {
                    cartola: event => {
                        const url = '{{$urls->api}}/contabilidad/cartola/exportar'
                        const body = new FormData()
                        body.set('inmobiliaria', $(this.ids.form.inmobiliaria).dropdown('get value'))
                        body.set('banco', $(this.ids.form.banco).dropdown('get value'))
                        body.set('mes', $(this.ids.form.mes).calendar('get date').toISOString())
                        const movimientos = this.data.movimientos.map((movimiento, idx) => {
                            const temp = structuredClone(movimiento)
                            temp.fecha = movimiento.fecha.toISOString()
                            let centro = $(".centro[data-index='" + (idx + 1) + "']").dropdown('get value')
                            if (centro.length === 0) {
                                centro = ''
                            }
                            temp.centro_costo = centro
                            let detalle = $("[name='detalle" + (idx + 1) + "']").val()
                            if (typeof detalle === 'undefined') {
                                detalle = ''
                            }
                            temp.detalle = detalle
                            return temp
                        })
                        body.set('movimientos', JSON.stringify(movimientos))
                        $(this.ids.loader).show()
                        fetchAPI(url, {method: 'post', body}).then(response => {
                            $(this.ids.loader).hide()
                            if (!response) {
                                return
                            }
                            response.json().then(json => {
                                if (json.filename === '') {
                                    return
                                }
                                const anchor = document.createElement('a')
                                anchor.href = ['/uploads/', json.filename].join('/')
                                anchor.download = 'Cartola ' + this.data.banco.nombre + ' - ' + this.data.inmobiliaria.razon + ' - ' + this.data.mes + '.xlsx'
                                document.body.appendChild(anchor)
                                anchor.click()
                                anchor.remove()
                            })
                        })
                    }
                }
            },
            draw() {
                return {
                    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.movimientos.forEach((row, idx) => {
                            tbody.append(
                                $('<tr></tr>').append(
                                    $('<td></td>').html(dateFormatter.format(row.fecha))
                                ).append(
                                    $('<td></td>').html(row.glosa)
                                ).append(
                                    $('<td></td>').html(row.documento)
                                ).append(
                                    $('<td></td>').addClass('right aligned').html(row.cargo === 0 ? '' : numberFormatter.format(row.cargo))
                                ).append(
                                    $('<td></td>').addClass('right aligned').html(row.abono === 0 ? '' : numberFormatter.format(row.abono))
                                ).append(
                                    $('<td></td>').append(this.draw().centrosDropdown(idx + 1, row.cargo === 0))
                                ).append(
                                    $('<td></td>').append(
                                        $('<div></div>').addClass('ui fluid input').append(
                                            $('<input />').attr('type', 'text').attr('name', 'detalle' + (idx + 1))
                                        )
                                    )
                                ).append(
                                    $('<td></td>').html(idx + 1)
                                )
                            )
                        })
                        table.DataTable(this.dataTableConfig)
                    },
                    centrosDropdown: (idx, ingreso = true) => {
                        const menu = $('<div></div>').addClass('menu')
                        let centros = this.data.centrosCostos.ingresos
                        if (!ingreso) {
                            centros = this.data.centrosCostos.egresos
                        }
                        centros.forEach(centro => {
                            menu.append(
                                $('<div></div>').addClass('item').attr('data-value', centro.id).html(centro.id + ' - ' + centro.descripcion)
                            )
                        })
                        return $('<div></div>').addClass('ui selection search dropdown centro').attr('data-index', idx).css('width', '80%').append(
                            $('<input />').attr('type', 'hidden').attr('name', 'centro' + idx)
                        ).append(
                            $('<i></i>').addClass('dropdown icon')
                        ).append(
                            $('<div></div>').addClass('default text').html('Centro de Costos')
                        ).append(menu).dropdown()
                    }
                }
            },
            setup({ids}) {
                this.ids = ids
                $(this.ids.form.inmobiliaria).dropdown({
                    fireOnInit: true,
                    onChange: (value, text, $choice) => {
                        this.data.inmobiliaria.rut = value
                        this.data.inmobiliaria.razon = text
                        this.get().bancos(value)
                        this.get().firstDate(value)
                    },
                })
                $(this.ids.form.banco).dropdown({
                    fireOnInit: true,
                    onChange: (value, text, $choice) => {
                        this.data.banco.id = value
                        this.data.banco.nombre = text
                    }
                })
                $(this.ids.loader).hide()

                calendar_date_options['type'] = 'month'
                const lastMonth = new Date()
                lastMonth.setDate(0)
                calendar_date_options['maxDate'] = lastMonth
                calendar_date_options['onChange'] = (date, text, mode) => {
                    this.data.mes = text
                }
                $(this.ids.form.mes).calendar(calendar_date_options)
                $(this.ids.form.base).submit(this.parse().cartola)
                $(this.ids.table.base).DataTable(this.dataTableConfig)

                $(this.ids.button).click(this.export().cartola)
            }
        }
        $(document).ready(() => {
            cartola.setup({
                ids: {
                    table: {
                        base: '#tabla_movimientos',
                        body: '#movimientos'
                    },
                    form: {
                        base: '#asignar_form',
                        inmobiliaria: '#inmobiliaria',
                        banco: '#banco',
                        mes: '#mes',
                    },
                    button: '#export_button',
                    loader: '#loader'
                }
            })
        })
    </script>
@endpush