@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" />
            {{--<div class="fields">
                <div class="six wide field">
                    <label for="inmobiliaria">Sociedad</label>
                    <div class="ui search selection dropdown" id="inmobiliaria">
                        <input type="hidden" name="inmobiliaria_rut" />
                        <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_id"/>
                        <i class="dropdown icon"></i>
                        <div class="default text">Banco</div>
                        <div class="menu"></div>
                    </div>
                </div>
                <div class="four wide field">
                    <label for="fecha">Fecha</label>
                    <div class="ui calendar" id="fecha">
                        <div class="ui left icon input">
                            <i class="calendar icon"></i>
                            <input type="text" name="fecha" />
                        </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>--}}
        </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>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>
        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
                            })
                        })
                    }
                }
            }
            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)
                        )
                        const file_field = $('<div></div>').addClass('field').append(
                            $('<label></label>').attr('for', 'file' + this.idx).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')
                        )
                        fields.append(file_field)
                        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)

                        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
                            }
                        })

                        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']
                        fecha_calendar.calendar(cdo)
                    },
                    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></td>').html(this.inmobiliaria.razon)
                                ).append(
                                    $('<td></td>').html(this.cuenta.descripcion)
                                ).append(
                                    $('<td></td>').html(dateFormatter.format(row.fecha))
                                ).append(
                                    $('<td></td>').html(row.glosa)
                                ).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>').addClass('right aligned').html(row.saldo === 0 ? '' : numberFormatter.format(row.saldo))
                                ).append(
                                    $('<td></td>').html(idx + 1)
                                )
                            )
                        })
                    },
                }
            }
        }
        @php
        $columns = [
            'sociedad',
            'cuenta',
            'fecha',
            'glosa',
            'cargo',
            'abono',
            'saldo',
            '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']);})))}}],
                        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]))
                                    entry[1].movimientos.forEach((row, idx) => {
                                        const fecha = new Date(row.fecha)
                                        fecha.setDate(fecha.getDate() + 1)
                                        this.data.cartolas[cartolaIdx].movimientos[idx] = {
                                            fecha: fecha,
                                            glosa: row.glosa,
                                            documento: row.documento,
                                            cargo: row.cargo,
                                            abono: row.abono,
                                            saldo: row.saldo
                                        }
                                    })
                                    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()
            }
        }
        $(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'
            })
        })
    </script>
@endpush