@extends('layout.base')

@section('page_title')
    Proyecto {{$proyecto->descripcion}}
@endsection

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">
            Proyecto {{$proyecto->descripcion}} - {{$proyecto->inmobiliaria()->razon}}
        </h2>
        @php
        $today = new DateTimeImmutable();
        @endphp
        <table class="ui striped table">
            <tr>
                <td>Dirección</td>
                <td>{{$proyecto->direccion()}}</td>
            </tr>
            <tr>
                <td>Inmobiliaria</td>
                <td>{{$proyecto->inmobiliaria()->nombreCompleto()}}</td>
            </tr>
            <tr>
                <td>Inicio</td>
                <td>
                    {{$proyecto->estados()[0]->tipoEstadoProyecto->descripcion}}
                    [{{$proyecto->estados()[0]->tipoEstadoProyecto->etapa->descripcion}}]
                    ({{$proyecto->estados()[0]->fecha->format('d-m-Y')}})
                    ({{$today->diff($proyecto->estados()[0]->fecha)->format('%y años antes')}})
                </td>
            </tr>
            <tr>
                <td>Estado</td>
                <td>
                    {{$proyecto->currentEstado()->tipoEstadoProyecto->descripcion}}
                    [{{$proyecto->currentEstado()->tipoEstadoProyecto->etapa->descripcion}}]
                    ({{$proyecto->currentEstado()->fecha->format('d-m-Y')}})
                    ({{$today->diff($proyecto->currentEstado()->fecha)->format('%y años antes')}})
                    <span class="ui blue text" id="estados_avanzar" style="cursor: pointer;">
                        <i class="right chevron icon"></i>
                    </span>
                </td>
            </tr>
            <tr>
                <td>Terreno</td>
                <td>
                    <table class="ui very basic striped table">
                        <tr>
                            <td>
                                {{$format->number($proyecto->terreno->superficie, 2)}}m&#0178;
                            </td>
                            <td>
                                {{$format->pesos($proyecto->terreno->valor)}} ({{$proyecto->terreno->fecha?->format('d-m-Y')}})
                            </td>
                            <td>
                                <a href="{{$urls->base}}/proyecto/{{$proyecto->id}}/terreno">
                                    <i class="edit icon"></i>
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>Superficies</td>
                <td>
                    <table class="ui very basic striped table">
                        <tr>
                            <td>
                                <strong>
                                    Total
                                </strong>
                            </td>
                            <td>
                                <strong>
                                    {{$format->number($proyecto->superficie->total(), 2)}}m&#0178;
                                </strong>
                            </td>
                            <td rowspan="6" id="chart_superficies" class="six wide"></td>
                        </tr>
                        <tr>
                            <td>Bajo Nivel</td>
                            <td>{{$format->number($proyecto->superficie->bajo_nivel, 2)}}m&#0178;</td>
                        </tr>
                        <tr>
                            <td>Sobre Nivel</td>
                            <td>{{$format->number($proyecto->superficie->sobre_nivel, 2)}}m&#0178;</td>
                        </tr>
                        <tr>
                            <td>
                                <strong>
                                    Vendible
                                </strong>
                            </td>
                            <td>
                                <strong id="superficie_vendible"></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>Vendido</td>
                            <td id="superficie_vendido"></td>
                        </tr>
                        <tr>
                            <td>Por Vender</td>
                            <td id="superficie_por_vender"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>Unidades</td>
                <td id="unidades"></td>
            </tr>
            <tr>
                <td>Ventas</td>
                <td id="ventas"></td>
            </tr>
            <tr>
                <td>Stock</td>
                <td id="stock"></td>
            </tr>
            <tr>
                <td>Proyección</td>
                <td id="proyeccion"></td>
            </tr>
            <tr>
                <td colspan="2" id="chart_venta_general"></td>
            </tr>
            <tr>
                <td colspan="2" id="chart_venta_tipologias"></td>
            </tr>
            <tr>
                <td colspan="2" id="chart_venta_velocidad"></td>
            </tr>
        </table>
    </div>
@endsection

@include('layout.body.scripts.chartjs')

@push('page_scripts')
    <script type="text/javascript">
        const superficies = {
            ids: {
                vendible: '',
                vendido: '',
                por_vender: '',
                chart: ''
            },
            data: {},
            chart_obj: null,
            get: function() {
                return {
                    superficies: () => {
                        const url = '{{$urls->api}}/proyecto/{{$proyecto->id}}/superficies/vendible'
                        return fetchAPI(url).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.data = data
                            this.fill()
                            this.chart()
                        })
                    }
                }
            },
            fill: function() {
                $(this.ids.vendible).html(this.data.formatted.vendible)
                $(this.ids.vendido).html(this.data.formatted.vendido)
                $(this.ids.por_vender).html(this.data.formatted.por_vender)
            },
            chart: function() {
                const container = $(this.ids.chart)
                container.html('')
                this.chart_obj = null
                const ctx = $('<canvas></canvas>').attr('width', '100')
                container.append(ctx)
                const data = {
                    labels: [
                        'Vendida',
                        'Por Vender'
                    ],
                    datasets: [
                        {
                            label: 'Superficies',
                            data: [
                                this.data.superficies.vendido,
                                this.data.superficies.por_vender
                            ],
                            backgroundColor: [
                                'green',
                                'red'
                            ]
                        }
                    ]
                }
                const options = {
                    type: 'pie',
                    data
                }

                this.chart_obj = new Chart(ctx, options)
            },
            setup: function({id_vendible, id_vendido, id_por_vender, id_chart}) {
                this.ids.vendible = id_vendible
                this.ids.vendido = id_vendido
                this.ids.por_vender = id_por_vender
                this.ids.chart = id_chart

                this.get().superficies()
            }
        }
        const unidades = {
            id: '',
            data: {},
            get: function() {
                const url = '{{$urls->api}}/proyecto/{{$proyecto->id}}/unidades'
                return fetchAPI(url).then(response => {
                    if (response.ok) {
                        return response.json()
                    }
                }).then(data => {
                    this.data = data
                    this.draw()
                })
            },
            draw: function() {
                const parent = $(this.id)
                const table = $('<table></table>').addClass('ui very basic striped table')
                Object.entries(this.data.unidades).forEach(([tipo, unidades]) => {
                    tipo = tipo.charAt(0).toUpperCase() + tipo.slice(1) + 's'
                    table.append(
                        $('<tr></tr>').append(
                            $('<td></td>').html(tipo)
                        ).append(
                            $('<td></td>').html(unidades.length)
                        )
                    )
                })
                parent.append(table)
            },
            setup: function(id) {
                this.id = id
                this.get()
            }
        }
        const ventas = {
            ids: {
                ventas: '',
                stock: '',
                proyeccion: '',
                charts: {
                    general: '',
                    tipologias: '',
                    velocidad: ''
                }
            },
            data: {
                ventas: {
                    unidades: {},
                    valores: {
                        total: 0,
                        promedio: 0,
                        bonos: 0,
                        promociones: 0,
                        operadores: 0,
                        metro: 0,
                    },
                    superficies: {
                        total: 0,
                        promedio: 0
                    }
                },
                stock: {
                    unidades: {},
                    valores: {
                        total: 0,
                        promedio: 0,
                        bonos: 0,
                        promociones: 0,
                        operadores: 0,
                        metro: 0,
                    },
                    superficies: {
                        total: 0,
                        promedio: 0
                    }
                }
            },
            get: function() {
                return {
                    ventas: () => {
                        const url = '{{$urls->api}}/ventas'
                        return fetchAPI(url, {method: 'post', headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify({proyecto_id: '{{$proyecto->id}}'})}).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            const promises = []
                            data.ventas.forEach(venta_id => {
                                promises.push(this.get().venta(venta_id))
                            })
                            return Promise.all(promises).then(() => {
                                const cantidad_total = Object.values(this.data.ventas.unidades).reduce((sum, cantidad) => sum + cantidad, 0)
                                this.data.ventas.valores.promedio = this.data.ventas.valores.total / cantidad_total
                                this.data.ventas.superficies.promedio = this.data.ventas.superficies.total / cantidad_total
                                this.data.ventas.valores.metro = this.data.ventas.valores.total / this.data.ventas.superficies.total
                                this.draw().ventas()
                            })
                        })
                    },
                    stock: () => {
                        const url = '{{$urls->api}}/proyecto/{{$proyecto->id}}/unidades/disponibles'
                        return fetchAPI(url).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            const promises = []
                            data.unidades.forEach(unidad => {
                                this.add().unidad(unidad)
                                promises.push(this.get().precio(unidad.id))
                            })
                            return Promise.all(promises).then(() => {
                                const cantidad_total = Object.values(this.data.stock.unidades).reduce((sum, cantidad) => sum + cantidad, 0)
                                this.data.stock.valores.promedio = this.data.stock.valores.total / cantidad_total
                                this.data.stock.superficies.promedio = this.data.stock.superficies.total / cantidad_total
                                this.data.stock.valores.metro = this.data.stock.valores.total / this.data.stock.superficies.total
                                this.draw().stock()
                            })
                        })
                    },
                    venta: venta_id => {
                        const url = '{{$urls->api}}/venta/' + venta_id
                        return fetchAPI(url).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.add().venta(data.venta)
                        })
                    },
                    precio: unidad_id => {
                        const url = '{{$urls->api}}/ventas/precio/unidad/' + unidad_id
                        return fetchAPI(url).then(response => {
                            if (response.ok) {
                                if (response.status === 204) {
                                    return null
                                }
                                return response.json()
                            }
                        }).then(data => {
                            if (data === null) {
                                return
                            }
                            this.add().precio(data.precio)
                        })
                    }
                }
            },
            add: function() {
                return {
                    venta: venta => {
                        Object.entries(venta.propiedad).forEach(([tipo, unidades]) => {
                            if (tipo === 'summary') {
                                return
                            }
                            tipo = tipo.charAt(0).toUpperCase() + tipo.slice(1)
                            if (typeof this.data.ventas.unidades[tipo] === 'undefined') {
                                this.data.ventas.unidades[tipo] = 0
                            }
                            this.data.ventas.unidades[tipo] ++
                            this.data.ventas.superficies.total += unidades.reduce((sum, unidad) => sum + unidad.proyecto_tipo_unidad.vendible, 0)
                            this.data.ventas.valores.total += venta.valor
                            if (venta.forma_pago.bono_pie !== null) {
                                this.data.ventas.valores.bonos += venta.forma_pago.bono_pie
                            }
                        })
                    },
                    unidad: unidad => {
                        let tipo = unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
                        tipo = tipo.charAt(0).toUpperCase() + tipo.slice(1) + 's'
                        if (typeof this.data.stock.unidades[tipo] === 'undefined') {
                            this.data.stock.unidades[tipo] = 0
                        }
                        this.data.stock.unidades[tipo] ++
                        this.data.ventas.superficies.total += unidad.proyecto_tipo_unidad.vendible
                    },
                    precio: precio => {
                        this.data.stock.valores.total += precio.valor
                    }
                }
            },
            draw: function() {
                return {
                    loading: parent => {
                        parent.html('')
                        parent.append(
                            $('<div></div>').addClass('ui active inline loader')
                        )
                    },
                    ventas: () => {
                        const parent = $(this.ids.ventas)
                        parent.html('')
                        this.draw().table(parent, this.data.ventas)
                    },
                    stock: () => {
                        const parent = $(this.ids.stock)
                        parent.html('')
                        this.draw().table(parent, this.data.stock)
                    },
                    proyeccion: () => {

                    },
                    table: (parent, data) => {
                        const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
                        const table = $('<table></table>').addClass('ui very basic striped table')
                        let row = $('<tr></tr>')
                        let row2 = $('<tr></tr>')
                        Object.entries(data.unidades).forEach(([tipo, cantidad]) => {
                            row.append(
                                $('<td></td>').html(tipo)
                            )
                            row2.append(
                                $('<td></td>').html(cantidad)
                            )
                        })
                        table.append(row).append(row2)
                        row = $('<tr></tr>').append(
                            $('<td></td>').html('Valor Total [UF]')
                        ).append(
                            $('<td></td>').html('Valor Promedio [UF]')
                        ).append(
                            $('<td></td>').html('Valor Metro [UF/m²]')
                        )
                        table.append(row)
                        row = $('<tr></tr>').append(
                            $('<td></td>').html(formatter.format(data.valores.total))
                        ).append(
                            $('<td></td>').html(formatter.format(data.valores.promedio))
                        ).append(
                            $('<td></td>').html(formatter.format(data.valores.metro))
                        )
                        table.append(row)
                        parent.append(table)
                    }
                }
            },
            chart: function() {
                return {
                    general: () => {},
                    tipologias: () => {},
                    velocidad: () => {}
                }
            },
            setup: function({id_ventas, id_stock, id_proyeccion, id_chart_general, id_chart_tipologias, id_chart_velocidad}) {
                this.ids.ventas = id_ventas
                this.ids.stock = id_stock
                this.ids.proyeccion = id_proyeccion
                this.ids.charts.general = id_chart_general
                this.ids.charts.tipologias = id_chart_tipologias
                this.ids.charts.velocidad = id_chart_velocidad

                const promises = []
                promises.push(this.get().ventas())
                promises.push(this.get().stock())
                Promise.all(promises).then(() => {
                    this.draw().proyeccion()
                    this.chart().general()
                    this.chart().tipologias()
                    this.chart().velocidad()
                })
            }
        }
        $(document).ready(() => {
            $('#estados_avanzar').click(event => {
                alert('Avanzar')
            })
            superficies.setup({id_vendible: '#superficie_vendible', id_vendido: '#superficie_vendido',
                id_por_vender: '#superficie_por_vender', id_chart: '#chart_superficies'})
            unidades.setup('#unidades')
            ventas.setup({id_ventas: '#ventas', id_stock: '#stock', id_proyeccion: '#proyeccion',
                id_chart_general: '#chart_venta_general', id_chart_tipologias: '#chart_venta_tipologia',
                id_chart_velocidad: '#chart_venta_velocidad'})
        })
    </script>
@endpush