@extends('layout.base')


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

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Listado de Precios</h2>
        <div id="list">
            <h4 class="ui dividing header">
                <div class="ui two column grid">
                    <div id="list_title" class="column"></div>
                    <div class="right aligned column">
                        <div class="ui tiny icon buttons">
                            <button class="ui button" id="up_button">
                                <i class="up arrow icon"></i>
                            </button>
                            <button class="ui button" id="refresh_button">
                                <i class="refresh icon"></i>
                            </button>
                        </div>
                        <button class="ui tiny green icon button" id="add_button">
                            <i class="plus icon"></i>
                        </button>
                    </div>
                </div>
            </h4>
            <div class="ui link selection list" id="proyectos"></div>
            <table class="ui table" id="list_data"></table>
        </div>
    </div>
    <div class="ui modal" id="list_modal">
        <div class="header">
            Actualizar <span id="modal_title"></span>
            <button class="ui right floated icon button"><i class="close icon"></i></button>
        </div>
        <div class="content">
            <div class="ui form">
                <input type="hidden" name="type" value="" />
                <input type="hidden" name="id" value="" />
                <div class="inline field">
                    <label for="fecha">Fecha</label>
                    <div class="ui calendar" id="fecha">
                        <div class="ui input left icon">
                            <i class="calendar icon"></i>
                            <input type="text" placeholder="Fecha" />
                        </div>
                    </div>
                </div>
                <div class="inline field">
                    <label for="valor">Valor</label>
                    <div class="ui right labeled input">
                        <input type="text" id="valor" name="valor" />
                        <div class="ui basic label">UF</div>
                    </div>
                </div>
                <button class="ui button" id="send">
                    Actualizar
                </button>
            </div>
        </div>
    </div>
@endsection

@push('page_styles')
    <style>
        .show-unidades, .linea {
            cursor: pointer;
        }
    </style>
@endpush

@push('page_scripts')
    <script type="text/javascript">
        class Unidad {
            id
            nombre
            fecha
            precio
            superficie
            tipo
            linea

            constructor({id, nombre, fecha, precio, superficie, tipo, linea}) {
                this.id = id
                this.nombre = nombre
                this.fecha = fecha
                this.precio = precio
                this.superficie = superficie
                this.tipo = tipo
                this.linea = linea
            }

            get unitario() {
                return this.precio / this.superficie
            }
            draw(formatter) {
                const date = new Date(this.fecha)
                const dateFormatter = new Intl.DateTimeFormat('es-CL')
                return $('<tr></tr>').addClass('unidad').attr('data-linea', this.linea).append(
                    $('<td></td>').html(this.nombre)
                ).append(
                    $('<td></td>')
                ).append(
                    $('<td></td>').html(dateFormatter.format(date))
                ).append(
                    $('<td></td>').html(formatter.format(this.precio) + ' UF')
                ).append(
                    $('<td></td>').html(formatter.format(this.unitario) + ' UF/m²')
                ).append(
                    $('<td></td>').append(
                        $('<button></button>').addClass('ui tiny green icon button add_unidad')
                            .attr('data-id', this.id)
                            .attr('data-tipo', this.tipo)
                            .attr('data-unidad', this.nombre).append(
                            $('<i></i>').addClass('plus icon')
                        ).click(precios.actions().add().unidad)
                    )
                )
            }
        }
        class Linea {
            id
            nombre
            orientacion
            superficie

            unidades

            constructor({id, nombre, orientacion, superficie}) {
                this.id = id
                this.nombre = nombre
                this.orientacion = orientacion
                this.superficie = superficie
                this.unidades = []
            }

            get precio() {
                let sum = 0
                this.unidades.forEach(unidad => {
                    sum += unidad.precio
                })
                return sum / this.unidades.length
            }
            get unitario() {
                return this.precio / this.superficie
            }
            add(data) {
                if (this.id !== data.unidad.subtipo) {
                    return
                }
                let unidad = this.unidades.find(unidad => unidad.id === data.unidad.id)
                if (typeof unidad !== 'undefined') {
                    return
                }
                const tipo = data.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
                unidad = new Unidad({
                    id: data.unidad.id,
                    nombre: data.unidad.descripcion,
                    fecha: data.estado_precio.fecha,
                    precio: data.valor,
                    superficie: this.superficie,
                    tipo: tipo.charAt(0).toUpperCase() + tipo.slice(1),
                    linea: this.id
                })
                this.unidades.push(unidad)
            }
            draw(formatter) {
                const row1 = $('<tr></tr>').attr('data-id', this.id).attr('data-status', 'closed').append(
                    $('<td></td>').addClass('linea').append($('<strong></strong>').html(this.nombre)).append(
                        $('<i></i>').addClass('right caret icon')
                    )
                ).append(
                    $('<td></td>').addClass('linea').append($('<strong></strong>').html(this.orientacion))
                ).append(
                    $('<td></td>').addClass('linea')
                ).append(
                    $('<td></td>').addClass('linea').append($('<strong></strong>').html(formatter.format(this.precio) + ' UF'))
                ).append(
                    $('<td></td>').addClass('linea').append($('<strong></strong>').html(formatter.format(this.unitario) + ' UF/m²'))
                ).append(
                    $('<td></td>').append(
                        $('<button></button>').addClass('ui tiny green icon button add_linea').attr('data-id', this.id).append(
                            $('<i></i>').addClass('plus icon')
                        ).click(precios.actions().add().linea)
                    )
                )
                const output = [
                    row1
                ]
                this.unidades.forEach(unidad => {
                    output.push(unidad.draw(formatter))
                })
                return output
            }

        }
        class Tipologia {
            id
            tipo
            nombre
            descripcion
            lineas

            superficie

            constructor({id, tipo, nombre, descripcion, superficie}) {
                this.id = id
                this.tipo = tipo
                this.nombre = nombre
                this.descripcion = descripcion
                this.superficie = superficie

                this.lineas = []
            }
            get count() {
                return this.lineas.reduce((sum, linea) => {
                    return sum + linea.unidades.length
                }, 0)
            }
            get precio() {
                let sum = 0
                this.lineas.forEach(linea => {
                    sum += linea.precio
                })
                return sum / this.lineas.length
            }
            get unitario() {
                return this.precio / this.superficie
            }
            add(data) {
                if (this.id !== data.unidad.proyecto_tipo_unidad.id) {
                    return
                }
                let linea = this.lineas.find(linea => linea.id === data.unidad.subtipo)
                if (this.lineas.length === 0 || typeof linea === 'undefined') {
                    linea = new Linea({
                        id: data.unidad.subtipo,
                        nombre: 'Linea ' + data.unidad.subtipo,
                        orientacion: data.unidad.orientacion,
                        superficie: data.unidad.proyecto_tipo_unidad.vendible
                    })
                    this.lineas.push(linea)
                }
                linea.add(data)
            }
            draw(formatter) {
                const output = []
                const row1 = $('<tr></tr>').attr('data-status', 'closed').attr('data-id', this.id)
                row1.append(
                    $('<td></td>').addClass('show-unidades').html(this.tipo).append(
                        $('<i></i>').addClass('right caret icon')
                    )
                ).append(
                    $('<td></td>').addClass('show-unidades').html(this.nombre)
                ).append(
                    $('<td></td>').addClass('show-unidades').html(this.descripcion)
                ).append(
                    $('<td></td>').addClass('show-unidades').html(this.lineas.map(linea => linea.id).sort((a, b) => parseInt(a) - parseInt(b)).join(' - '))
                ).append(
                    $('<td></td>').addClass('show-unidades').html(formatter.format(this.superficie) + ' m²')
                ).append(
                    $('<td></td>').addClass('show-unidades').html(this.count)
                ).append(
                    $('<td></td>').addClass('show-unidades').html(formatter.format(this.precio) + ' UF')
                ).append(
                    $('<td></td>').addClass('show-unidades').html(formatter.format(this.unitario) + ' UF/m²')
                ).append(
                    $('<td></td>').append(
                        $('<button></button>').addClass('ui tiny green icon button add_tipologia').attr('data-id', this.id).attr('data-tipologia', this.nombre).append(
                            $('<i></i>').addClass('plus icon')
                        ).click(precios.actions().add().tipologia)
                    )
                )
                const row2 = $('<tr></tr>').addClass('unidades').attr('data-tipo', this.id)
                const tbody = $('<tbody></tbody>')
                this.lineas.forEach(linea => {
                    linea.draw(formatter).forEach(row => {
                        tbody.append(row)
                    })
                })
                const table = $('<table></table>').addClass('ui striped table')
                table.append(
                    $('<thead></thead>').append(
                        $('<tr></tr>').append(
                            $('<th></th>').html('Unidad')
                        ).append(
                            $('<th></th>').html('Orientación')
                        ).append(
                            $('<th></th>').html('Desde')
                        ).append(
                            $('<th></th>').html('Precio')
                        ).append(
                            $('<th></th>').html('UF/m²')
                        ).append(
                            $('<th></th>')
                        )
                    )
                ).append(tbody)
                row2.append(
                    $('<td></td>')
                ).append(
                    $('<td></td>').attr('colspan', 8).append(table)
                )
                output.push(row1)
                output.push(row2)
                return output
            }
        }

        const precios = {
            ids: {
                list: '',
                proyectos: '',
                buttons: {
                    add: '',
                    up: '',
                    refresh: ''
                }
            },
            data: {
                id: 0,
                proyecto: '',
                proyectos: JSON.parse('{!! json_encode($proyectos)  !!}'),
                precios: []
            },
            table: null,
            loading: {
                precios: false
            },
            get: function() {
                return {
                    proyectos: () => {
                        this.data.proyectos = []
                        this.data.id = 0
                        this.data.proyecto = ''

                        $(this.ids.buttons.add).hide()

                        return fetchAPI('{{$urls->api}}/proyectos').then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            if (data.total > 0) {
                                data.proyectos.forEach(proyecto => {
                                    this.data.proyectos.push({
                                        id: proyecto.id,
                                        descripcion: proyecto.descripcion
                                    })
                                })
                                this.draw().proyectos()
                            }
                        })
                    },
                    precios: proyecto_id => {
                        this.data.precios = []
                        return fetchAPI('{{$urls->api}}/ventas/precios',
                            {method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({proyecto_id})}
                        ).then(response => {
                            $('.item.proyecto').css('cursor', 'default')
                            this.loading.precios = false
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            if (data.total > 0) {
                                this.data.id = data.precios[0].unidad.proyecto_tipo_unidad.proyecto.id
                                this.data.proyecto = data.precios[0].unidad.proyecto_tipo_unidad.proyecto.descripcion
                                data.precios.forEach(precio => {
                                    this.add().precio(precio)
                                })
                                this.draw().precios()
                            }
                        })
                    }
                }
            },
            add: function() {
                return {
                    precio: data => {
                        let tipologia = this.data.precios.find(tipologia => tipologia.id === data.unidad.proyecto_tipo_unidad.id)
                        if (this.data.precios.length === 0 || typeof tipologia === 'undefined') {
                            const tipo = data.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
                            tipologia = new Tipologia({
                                id: data.unidad.proyecto_tipo_unidad.id,
                                tipo: tipo.charAt(0).toUpperCase() + tipo.slice(1),
                                nombre: data.unidad.proyecto_tipo_unidad.nombre,
                                descripcion: data.unidad.proyecto_tipo_unidad.abreviacion,
                                superficie: data.unidad.proyecto_tipo_unidad.vendible
                            })
                            this.data.precios.push(tipologia)
                        }
                        tipologia.add(data)
                    }
                }
            },
            draw: function() {
                return {
                    proyectos: () => {
                        const parent = $(this.ids.list)
                        const header = parent.find('#list_title')
                        const list = parent.find('.list')
                        const table = parent.find('table.table')

                        $(this.ids.buttons.add).hide()
                        $(this.ids.buttons.add).attr('data-id', '')
                        $(this.ids.buttons.add).attr('data-proyecto', '')

                        header.html('Proyectos')
                        table.hide()
                        list.html('')

                        this.data.proyectos.forEach(proyecto => {
                            list.append(
                                $('<div></div>').addClass('item proyecto').attr('data-proyecto', proyecto.id).html(proyecto.descripcion).css('cursor', 'pointer')
                            )
                        })
                        list.show()
                        $('.item.proyecto').click(event => {
                            if (this.loading.precios) {
                                return false
                            }
                            const element = $(event.currentTarget)
                            $('.item.proyecto').css('cursor', 'wait')
                            this.loading.precios = true
                            const proyecto_id = element.data('proyecto')
                            this.get().precios(proyecto_id)
                        })
                    },
                    precios: () => {
                        const parent = $(this.ids.list)
                        const header = parent.find('#list_title')
                        const list = parent.find('.list')
                        const table = parent.find('table.table')

                        $(this.ids.buttons.add).attr('data-id', this.data.id)
                        $(this.ids.buttons.add).attr('data-proyecto', this.data.proyecto)
                        $(this.ids.buttons.add).show()

                        header.html('Precios de ' + this.data.proyecto)
                        list.hide()
                        table.html('')

                        table.append(this.draw().header())
                        const tbody = $('<tbody></tbody>')
                        const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
                        this.data.precios.forEach(tipologia => {
                            tipologia.draw(formatter).forEach(row => {
                                tbody.append(row)
                            })
                        })
                        table.append(tbody)
                        table.show()

                        $('.show-unidades').click(this.actions().toggle().tipologia)
                        $('.unidades').hide()
                        $('.linea').click(this.actions().toggle().linea)
                        $('.unidad').hide()
                    },
                    header: () => {
                        return $('<thead></thead>').append(
                            $('<tr></tr>').append(
                                $('<th></th>').html('Tipo')
                            ).append(
                                $('<th></th>').html('Nombre')
                            ).append(
                                $('<th></th>').html('Tipología')
                            ).append(
                                $('<th></th>').html('Líneas')
                            ).append(
                                $('<th></th>').html('m² Vendibles')
                            ).append(
                                $('<th></th>').html('#')
                            ).append(
                                $('<th></th>').html('Precio Promedio')
                            ).append(
                                $('<th></th>').html('UF/m²')
                            ).append(
                                $('<th></th>')
                            )
                        )
                    }
                }
            },
            actions: function() {
                return {
                    toggle: () => {
                        return {
                            tipologia: event => {
                                const th = $(event.currentTarget)
                                const row = th.parent()
                                const id = row.data('id')
                                const status = row.attr('data-status')
                                const unidades = $(".unidades[data-tipo='" + id + "']")
                                if (status === 'closed') {
                                    unidades.show()

                                    row.attr('data-status', 'open')
                                    row.find('.caret.icon').removeClass('right').addClass('down')
                                    return
                                }
                                unidades.find('.linea').parent().attr('data-status', 'closed')
                                unidades.find('.linea').find('.caret.icon').removeClass('down').addClass('right')
                                unidades.find('.unidad').hide()
                                unidades.hide()

                                row.attr('data-status', 'closed')
                                row.find('.caret.icon').removeClass('down').addClass('right')
                            },
                            linea: event => {
                                const th = $(event.currentTarget)
                                const row = th.parent()
                                const id = row.data('id')
                                const status = row.attr('data-status')
                                const unidades = $(".unidad[data-linea='" + id + "']")
                                if (status === 'closed') {
                                    unidades.show()

                                    row.attr('data-status', 'open')
                                    row.find('.caret.icon').removeClass('right').addClass('down')
                                    return
                                }
                                unidades.hide()

                                row.attr('data-status', 'closed')
                                row.find('.caret.icon').removeClass('down').addClass('right')
                            }
                        }
                    },
                    up: event => {
                        this.draw().proyectos()
                    },
                    refresh: event => {
                        const list = $(this.ids.proyectos)
                        if (list.is(':hidden')) {
                            this.get().precios(this.data.id)
                        } else {
                            this.draw().proyectos()
                        }
                    },
                    add: () => {
                        return {
                            list: event => {
                                const button = $(event.currentTarget)
                                const id = button.data('id')
                                const proyecto = button.data('proyecto')
                                list_modal.data.title = 'Precios del Proyecto ' + proyecto
                                list_modal.data.type = 'proyecto'
                                list_modal.data.id = id
                                list_modal.actions().open()
                            },
                            tipologia: event => {
                                const button = $(event.currentTarget)
                                const id = button.data('id')
                                const tipologia = button.data('tipologia')
                                list_modal.data.title = 'Precios de Tipología ' + tipologia
                                list_modal.data.type = 'tipologia'
                                list_modal.data.id = id
                                list_modal.actions().open()
                            },
                            linea: event => {
                                const button = $(event.currentTarget)
                                const id = button.data('id')
                                list_modal.data.title = 'Precios de la Línea ' + id
                                list_modal.data.type = 'linea'
                                list_modal.data.id = id
                                list_modal.actions().open()
                            },
                            unidad: event => {
                                const button = $(event.currentTarget)
                                const id = button.data('id')
                                const tipo = button.data('tipo')
                                const unidad = button.data('unidad')
                                list_modal.data.title = 'Precio de ' + tipo + ' ' + unidad
                                list_modal.data.type = 'unidad'
                                list_modal.data.id = id
                                list_modal.actions().open()
                            }
                        }
                    },
                }
            },
            setup: function({list, proyectos, buttons_up, buttons_refresh, buttons_add}) {
                this.ids.list = list
                this.ids.proyectos = proyectos
                this.ids.buttons.up = buttons_up
                this.ids.buttons.refresh = buttons_refresh
                this.ids.buttons.add = buttons_add

                $(this.ids.buttons.up).click(this.actions().up)
                $(this.ids.buttons.refresh).click(this.actions().refresh)
                $(this.ids.buttons.add).click(this.actions().add().list)

                this.draw().proyectos()
            }
        }
        const list_modal = {
            ids: {
                modal: '',
                title: '',
                fields: {
                    type: '',
                    id: '',
                    calendar: '',
                    valor: ''
                },
                button: ''
            },
            data: {
                title: '',
                type: '',
                id: 0
            },
            actions: function() {
                return {
                    reset: () => {
                        this.data.title = ''
                        this.data.type = ''
                        this.data.id = 0

                        $(this.ids.fields.calendar).calendar('refresh')
                        $(this.ids.fields.valor).val('')
                    },
                    open: event => {
                        this.draw()
                        $(this.ids.modal).modal('show')
                    },
                    close: event => {
                        $(this.ids.modal).modal('hide')
                        this.actions().reset()
                    },
                    send: event => {
                        const data = {
                            type: $(this.ids.fields.type).val(),
                            id: $(this.ids.fields.id).val(),
                            fecha: $(this.ids.fields.calendar).calendar('get date'),
                            valor: $(this.ids.fields.valor).val()
                        }
                        return fetchAPI('{{$urls->api}}/precios/update',
                            {method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
                        ).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            precios.get().precios(precios.data.proyecto)
                        })
                    }
                }
            },
            draw: function() {
                $(this.ids.title).html(this.data.title)
                $(this.ids.modal).find("input[name='type']").val(this.data.type)
                $(this.ids.modal).find("input[name='id']").val(this.data.id)
            },
            setup: function({modal, title, fields_type, fields_id, fields_calendar, fields_valor, button}) {
                this.ids.modal = modal
                this.ids.title = title
                this.ids.fields.type = fields_type
                this.ids.fields.id = fields_id
                this.ids.fields.calendar = fields_calendar
                this.ids.fields.valor = fields_valor
                this.ids.button = button

                $(this.ids.modal).modal('hide')
                $(this.ids.modal).find('.icon.button').find('.close.icon').parent().click(this.actions().close)

                $(this.ids.fields.calendar).calendar({
                    type: 'date'
                })
                $(this.ids.button).click(this.actions().send)
            }
        }

        $(document).ready(() => {
            precios.setup({
                list: '#list',
                proyectos: '#proyectos',
                buttons_up: '#up_button',
                buttons_refresh: '#refresh_button',
                buttons_add: '#add_button'
            })
            list_modal.setup({
                modal: '#list_modal',
                title: '#modal_title',
                fields_type: "input[name='type']",
                fields_id: "input[name='id']",
                fields_calendar: '#fecha',
                fields_valor: '#valor',
                button: '#send'
            })
        })
    </script>
@endpush