@extends('layout.base')


@section('page_title')
    Cierres - Listado
@endsection

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Listado de Cierres</h2>
        <table class="ui striped table" id="cierres">
            <thead>
                <tr>
                    <th colspan="5">Proyecto</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
@endsection

@push('page_styles')
    <style>
        .proyecto, .estado-cierres {
            cursor: pointer;
        }
    </style>
@endpush

@push('page_scripts')
    <script type="text/javascript">
        class Cierre {
            id
            proyecto_id
            estado = {
                id: 0,
                descripcion: '',
                titulo: ''
            }
            departamento
            tipologia
            vendible
            fecha
            valor

            unitario() {
                return this.valor / this.vendible
            }

            draw(formatter) {
                const date = new Date(this.fecha)
                const dateFormatter = new Intl.DateTimeFormat('es-CL')
                const estado = this.estado.titulo.charAt(0).toUpperCase() + this.estado.titulo.slice(1)
                return $('<tr></tr>').addClass('cierre ' + this.estado.descripcion).attr('data-proyecto', this.proyecto_id).attr('data-estado', this.estado.id).append(
                    $('<td></td>')
                ).append(
                    $('<td></td>').append(
                        $('<a></a>').attr('href', '{{$urls->base}}/ventas/cierre/' + this.id).html(this.departamento + ' (' + this.tipologia + ')')
                    )
                ).append(
                    $('<td></td>').html(dateFormatter.format(date))
                ).append(
                    $('<td></td>').html(formatter.format(this.valor) + ' UF (' + formatter.format(this.unitario()) + ' UF/m²)')
                ).append(
                    $('<td></td>').html(estado)
                )
            }
        }
        class Estado {
            id
            proyecto_id
            title
            descripcion
            cierres = []
            total = 0

            proporcion() {
                return this.cierres.length / this.total * 100
            }
            add(data) {
                let cierre = this.cierres.find(cierre => cierre.id === data.id)
                if (typeof cierre !== 'undefined') {
                    return
                }
                cierre = new Cierre()
                cierre.id = data.id
                cierre.proyecto_id = this.proyecto_id
                cierre.departamento = ''
                cierre.tipologia = ''
                cierre.vendible = 0
                const departamento  = data.unidades.filter(unidad => unidad.proyecto_tipo_unidad.tipo_unidad.descripcion === 'departamento')[0]
                if (typeof departamento !== 'undefined') {
                    cierre.departamento = departamento.descripcion
                    cierre.tipologia = departamento.proyecto_tipo_unidad.abreviacion
                    cierre.vendible = departamento.proyecto_tipo_unidad.vendible
                }
                cierre.fecha = data.date_time
                cierre.valor = data.precio
                cierre.estado.id = this.id
                cierre.estado.descripcion = this.descripcion
                cierre.estado.titulo = data.estado_cierre.tipo_estado_cierre.descripcion
                this.cierres.push(cierre)
            }
            draw(tbody, formatter) {
                tbody.append(
                    $('<tr></tr>').addClass('estado-cierres ' + this.descripcion).attr('data-proyecto', this.proyecto_id).attr('data-estado', this.id).attr('data-status', 'closed').append(
                        $('<th></th>')
                    ).append(
                        $('<th></th>').attr('colspan', 4).html(this.title).append(
                            $('<i></i>').addClass('right caret icon')
                        ).append(' [' + this.cierres.length + '] ' + formatter.format(this.proporcion()) + '%')
                    )
                )
                tbody.append(
                    $('<tr></tr>').addClass('cierre').attr('data-proyecto', this.proyecto_id).attr('data-estado', this.id).append(
                        $('<th></th>')
                    ).append(
                        $('<th></th>').html('Departamento')
                    ).append(
                        $('<th></th>').html('Fecha')
                    ).append(
                        $('<th></th>').html('Valor')
                    ).append(
                        $('<th></th>').html('Estado')
                    )
                )
                this.cierres.forEach(cierre => {
                    tbody.append(cierre.draw(formatter))
                })
            }
        }
        class Proyecto {
            id
            descripcion
            total = 0
            estados

            constructor({id, descripcion}) {
                this.id = id
                this.descripcion = descripcion
                this.estados = {
                    aprobado: new Estado(),
                    promesado: new Estado(),
                    rechazado: new Estado()
                }
                this.estados.aprobado.id = 1
                this.estados.aprobado.proyecto_id = this.id
                this.estados.aprobado.title = 'Aprobado'
                this.estados.aprobado.descripcion = 'warning'

                this.estados.promesado.id = 2
                this.estados.promesado.proyecto_id = this.id
                this.estados.promesado.title = 'Promesado'
                this.estados.promesado.descripcion = 'positive'

                this.estados.rechazado.id = 3
                this.estados.rechazado.proyecto_id = this.id
                this.estados.rechazado.title = 'Abandonado/Rechazado'
                this.estados.rechazado.descripcion = 'error'
            }

            add(data) {
                if (data.proyecto.id !== this.id) {
                    return
                }
                this.total ++
                if (['revisado', 'aprobado'].includes(data.estado_cierre.tipo_estado_cierre.descripcion)) {
                    return this.estados.aprobado.add(data)
                }
                if (['vendido', 'promesado'].includes(data.estado_cierre.tipo_estado_cierre.descripcion)) {
                    return this.estados.promesado.add(data)
                }
                this.estados.rechazado.add(data)
            }
            draw(tbody, formatter) {
                tbody.append(
                    $('<tr></tr>').append(
                        $('<td></td>').addClass('proyecto').attr('data-proyecto', this.id).attr('data-status', 'closed').attr('colspan', 5).html(this.descripcion).append(
                            $('<i></i>').addClass('right caret icon')
                        ).append(' [' + this.total + ']')
                    )
                )
                Object.keys(this.estados).forEach(key => {
                    this.estados[key].total = this.total
                    this.estados[key].draw(tbody, formatter)
                })
            }
        }
        const cierres = {
            ids: {
                table: '',
            },
            data: {
                proyectos: []
            },
            get: function() {
                return {
                    proyectos: () => {
                        this.data.proyectos = []

                        this.draw().loading()

                        return fetch('{{$urls->api}}/proyectos').then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            const promises = []
                            if (data.total > 0) {
                                data.proyectos.forEach(proyecto => {
                                    promises.push(this.get().cierres(proyecto.id))
                                })
                                return promises
                            }
                        }).then(promises => {
                            Promise.all(promises).then(() => {
                                this.data.proyectos.sort((a, b) => {
                                    return a.descripcion.localeCompare(b.descripcion)
                                })
                                this.draw().proyectos()
                            })
                        })
                    },
                    cierres: proyecto_id => {
                        return fetch('{{$urls->api}}/ventas/cierres',
                            {method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({proyecto_id})}).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            if (data.total > 0) {
                                data.cierres.forEach(cierre => {
                                    this.add().cierre(cierre)
                                })
                            }
                        })
                    },
                }
            },
            add: function() {
                return {
                    cierre: data => {
                        let proyecto = this.data.proyectos.find(proyecto => proyecto.id === data.proyecto.id)
                        if (this.data.proyectos.length === 0 || typeof proyecto === 'undefined') {
                            proyecto = new Proyecto({
                                id: data.proyecto.id,
                                descripcion: data.proyecto.descripcion
                            })
                            this.data.proyectos.push(proyecto)
                        }
                        proyecto.add(data)
                    }
                }
            },
            draw: function() {
                return {
                    proyectos: () => {
                        const parent = $(this.ids.table)
                        const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
                        const tbody = parent.find('tbody')

                        tbody.html('')
                        this.data.proyectos.forEach(proyecto => {
                            proyecto.draw(tbody, formatter)
                        })
                        tbody.find('.estado-cierres, .cierre').hide()
                        tbody.find('.proyecto').click(this.actions().proyectos().toggle)
                        tbody.find('.estado-cierres').click(this.actions().estados().toggle)
                    },
                    loading: () => {
                        const parent = $(this.ids.table)
                        const tbody = parent.find('tbody')
                        tbody.append(
                            $('<tr></tr>').append(
                                $('<td></td>').attr('colspan', 5).append(
                                    $('<div></div>').addClass('ui basic segment').append(
                                        $('<div></div>').addClass('ui active dimmer').append(
                                            $('<div></div>').addClass('ui loader')
                                        )
                                    ).append(
                                        $('<div></div>').addClass('ui fluid placeholder').append(
                                            $('<div></div>').addClass('image')
                                        )
                                    )
                                )
                            )
                        )
                    }
                }
            },
            actions: function() {
                return {
                    proyectos: () => {
                        return {
                            open: event => {
                                const th = $(event.currentTarget)
                                const proyecto_id = th.data('proyecto')
                                th.find('.icon').removeClass('right').addClass('down')
                                $(".estado-cierres[data-proyecto='" + proyecto_id + "']").show()
                                th.attr('data-status', 'open')
                            },
                            close: event => {
                                const th = $(event.currentTarget)
                                const proyecto_id = th.data('proyecto')
                                th.find('.icon').removeClass('down').addClass('right')
                                $(".estado-cierres[data-proyecto='" + proyecto_id + "']").hide()
                                $(".cierre[data-proyecto='" + proyecto_id + "']").hide()
                                th.attr('data-status', 'closed')
                            },
                            toggle: event => {
                                const th = $(event.currentTarget)
                                const status = th.attr('data-status')
                                if (status === 'closed') {
                                    return this.actions().proyectos().open(event)
                                }
                                return this.actions().proyectos().close(event)
                            }
                        }
                    },
                    estados: () => {
                        return {
                            open: event => {
                                const tr = $(event.currentTarget)
                                const proyecto_id = tr.data('proyecto')
                                const estado_id = tr.data('estado')
                                tr.find('.icon').removeClass('right').addClass('down')
                                $(".cierre[data-proyecto='" + proyecto_id + "'][data-estado='" + estado_id + "']").show()
                                tr.attr('data-status', 'open')
                            },
                            close: event => {
                                const tr = $(event.currentTarget)
                                const proyecto_id = tr.data('proyecto')
                                const estado_id = tr.data('estado')
                                tr.find('.icon').removeClass('down').addClass('right')
                                $(".cierre[data-proyecto='" + proyecto_id + "'][data-estado='" + estado_id + "']").hide()
                                tr.attr('data-status', 'closed')
                            },
                            toggle: event => {
                                const tr = $(event.currentTarget)
                                const status = tr.attr('data-status')
                                if (status === 'closed') {
                                    return this.actions().estados().open(event)
                                }
                                return this.actions().estados().close(event)
                            }
                        }
                    }
                }
            },
            setup: function() {
                this.get().proyectos()
            }
        }

        $(document).ready(() => {
            cierres.ids.table = '#cierres'
            cierres.setup()
        })
    </script>
@endpush