@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h1 class="ui header">
            Cuadratura de Cartola Mensual
        </h1>
        <form class="ui form" id="cuadratura_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"></div>
            <div class="right aligned column">
                <div class="ui inline active loader" id="loader"></div>
            </div>
        </div>
    </div>
    <div class="ui fluid container" id="movimientos"></div>
@endsection

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

@push('page_scripts')
    <script>
        class LibroMayor {
            props
            constructor(props) {
                this.props = props
            }
        }
        class Cartola {

        }
        const movimientos = {
            ids: {},
            data: {
                inmobiliaria: {
                    rut: '',
                    razon: ''
                },
                banco: {
                    id: '',
                    nombre: ''
                }
            },
            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.inputs.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.inputs.mes).calendar('set minDate', new Date(min))
                            })
                        })
                    }
                }
            },
            parse() {
                return {
                    cartola: submitEvent => {
                        submitEvent.preventDefault()
                        const body = new FormData(document.getElementById('asignar_form'))
                        body.set('mes', $(this.ids.inputs.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
                    }
                }
            },
            setup(ids) {
                this.ids = ids

                $(this.ids.inputs.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.inputs.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.inputs.mes).calendar(calendar_date_options)
                $(this.ids.form).submit(this.parse().cartola)
                //$(this.ids.button).click(this.export().cartola)
            }
        }
        $(document).ready(() => {
            movimientos.setup({
                movimientos: '#movimientos',
                form: '#cuadratura_form',
                loader: '#loader',
                inputs: {
                    inmobiliaria: '#inmobiliaria',
                    banco: '#banco',
                    mes: '#mes',
                    cartola: '#file'
                }
            })
        })
    </script>
@endpush
