@extends('proyectos.brokers.base')

@section('brokers_title')
    {{ $contract->broker->name }} - {{ $contract->project->descripcion }}
@endsection

@section('brokers_header')
    {{ $contract->broker->name }} - {{ $contract->project->descripcion }}
@endsection

@include('layout.body.scripts.stats')
@prepend('page_scripts')
    <script>
        class TableHandler {
            commission
            constructor(commission) {
                this.commission = commission
            }
            draw() {}
            prices(units) {
                return units.map(unit => {
                    let price = unit.valor ?? (unit.precio?.valor ?? 0)
                    const broker = price / (1 - this.commission)
                    const promotions = unit.promotions?.map(promotion => {
                        if (promotion.type === 1) {
                            return {
                                name: promotion.description,
                                type: promotion.type,
                                amount: promotion.amount,
                                final: broker + promotion.amount
                            }
                        }
                        return {
                            name: promotion.description,
                                type: promotion.type,
                            amount: promotion.amount,
                            final: broker / (1 - promotion.amount)
                        }
                    }) ?? []
                    return {
                        id: unit.id,
                        base: price,
                        commission: this.commission,
                        broker,
                        promotions
                    }
                })
            }
        }
        class GroupedTableHandler extends TableHandler {
            promotions = {
                names: new Set(),
                values: []
            }
            process() {
                return {
                    prices: prices => {
                        let promotions = {}
                        prices.map(price => price.promotions).forEach(promotionArray => {
                            promotionArray.forEach(p => {
                                if (!Object.hasOwn(promotions, p.name)) {
                                    promotions[p.name] = {
                                        name: p.name,
                                        type: p.type,
                                        amount: [],
                                        final: []
                                    }
                                }
                                promotions[p.name].amount.push(p.amount)
                                promotions[p.name].final.push(p.final)
                            })
                        })
                        return promotions
                    },
                    promotions: () => {
                        return {
                            names: promotions => {
                                Object.keys(promotions).forEach(name => {
                                    this.add().promotion().name(name)
                                })
                            },
                            values: ({promotions, formatters}) => {
                                const temp = Object.values(promotions)
                                if (temp.length > 0) {
                                    const data = temp.map(p => {
                                        return {
                                            name: p.name,
                                            type: p.type,
                                            amount: {
                                                min: Math.min(...p.amount),
                                                max: Math.max(...p.amount),
                                                desv: Stat.standardDeviation(p.amount),
                                                mean: Stat.mean(p.amount)
                                            },
                                            final: {
                                                min: Math.min(...p.final),
                                                max: Math.max(...p.final),
                                                desv: Stat.standardDeviation(p.final),
                                                mean: Stat.mean(p.final)
                                            }
                                        }
                                    })
                                    this.add().promotion().values({promotions: data, formatters})
                                    return
                                }
                                this.promotions.values.push([])
                            }
                        }
                    }
                }
            }
            add() {
                return {
                    promotion: () => {
                        return {
                            name: name => {
                                this.promotions.names.add(name)
                            },
                            values: ({promotions, formatters}) => {
                                this.promotions.values.push(promotions.map(promotion => {
                                    const amount_tooltip = [
                                        `Min: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.min) : formatters.percent.format(promotion.amount.min)}`,
                                        `Max: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.max) : formatters.percent.format(promotion.amount.max)}`,
                                        `Desv: ${promotion.type === 1 ? 'UF ' + formatters.ufs.format(promotion.amount.desv) : formatters.percent.format(promotion.amount.desv)}`
                                    ].join("\n").replaceAll(' ', '&nbsp;')
                                    const final_tooltip = [
                                        `Min: UF ${formatters.ufs.format(promotion.final.min)}`,
                                        `Max: UF ${formatters.ufs.format(promotion.final.max)}`,
                                        `Desv: UF ${formatters.ufs.format(promotion.final.desv)}`
                                    ].join("\n").replaceAll(' ', '&nbsp;')
                                    return {
                                        name: promotion.name,
                                        value: [
                                            `<td class="right aligned"><span data-tooltip="${amount_tooltip}" data-position="right center" data-variation="wide multiline">${promotion.type === 1 ? formatters.ufs.format(promotion.amount.mean) : formatters.percent.format(promotion.amount.mean)}</td>`,
                                            `<td class="right aligned"><span data-tooltip="${final_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(promotion.final.mean)}</td></td>`,
                                        ].join("\n")
                                    }
                                }))
                            }
                        }
                    }
                }
            }
            build() {
                return {
                    promotions: (table, tbody) => {
                        if (this.promotions.names.size > 0) {
                            const title = document.getElementById(this.ids.promotions)
                            title.innerHTML = this.promotions.names.size > 0 ? Array.from(this.promotions.names)[0] : ''
                            title.setAttribute('colspan', '2')
                            if (this.promotions.names.size > 1) {
                                const thead = table.querySelector('thead')
                                Array.from(this.promotions.names).slice(1).forEach(name => {
                                    thead.insertAdjacentHTML('beforeend', `<th class="right aligned" style="text-decoration: overline" colspan="2">${name}</th>`)
                                })
                            }
                            const trs = tbody.querySelectorAll('tr')
                            this.promotions.values.forEach((row, i) => {
                                const tr = trs[i]
                                const td = tr.querySelector('td.promotions')
                                if (row.length === 0) {
                                    td.setAttribute('colspan', 2 * this.promotions.names.size)
                                    return
                                }
                                td.remove()
                                this.promotions.names.forEach(name => {
                                    const index = row.findIndex(r => r.name === name)
                                    if (index === -1) {
                                        tr.insertAdjacentHTML('beforeend', '<td colspan="2"></td>')
                                        return
                                    }
                                    tr.insertAdjacentHTML('beforeend', row[index].value)
                                })
                            })
                        }
                    }
                }
            }
        }
    </script>
@endprepend

@section('brokers_content')
    <div class="ui statistic">
        <div class="value">{{ $format->percent($contract->commission, 2, true) }}</div>
        <div class="label">
            Comisión desde {{ $contract->current()->date->format('d/m/Y') }}
        </div>
    </div>
    <br />
    <div class="ui card">
        <div class="content">
            <div class="header">
                Promociones Aplicadas
            </div>
            <div class="description">
                @if (count($contract->promotions()) === 0)
                    - Ninguna
                @else
                <div class="ui list">
                    @foreach ($contract->promotions() as $promotion)
                        <div class="item">
                            {{ $promotion->description }} {{ $format->percent($promotion->amount, 2, true) }} {{ ucwords($promotion->type->name()) }}
                        </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
    <div class="ui very basic segment">
        <div class="ui active inline loader" id="loader"></div>
        <div class="ui indicating progress" id="load_progress">
            <div class="bar">
                <div class="progress"></div>
            </div>
        </div>
    </div>
    <div id="results">
        <div class="ui top attached tabular menu">
            <a class="item active" data-tab="tipos">Tipos</a>
            <a class="item" data-tab="lineas">Líneas</a>
            <a class="item" data-tab="unidades">Unidades</a>
        </div>
        <div class="ui top attached indicating progress" id="values_progress">
            <div class="bar"></div>
        </div>
        <div class="ui bottom attached tab basic fitted segment active" data-tab="tipos">
            @include('proyectos.brokers.contracts.show.tipo')
        </div>
        <div class="ui bottom attached tab basic fitted segment" data-tab="lineas">
            @include('proyectos.brokers.contracts.show.linea')
        </div>
        <div class="ui bottom attached tab basic fitted segment" data-tab="unidades">
            @include('proyectos.brokers.contracts.show.unidades')
        </div>
    </div>
@endsection

@include('layout.body.scripts.datatables')
@include('layout.body.scripts.datatables.searchbuilder')
@include('layout.body.scripts.datatables.buttons')

@push('page_scripts')
    <script>
        const units = {
            ids: {
                units: '',
                loader: '',
                progress: '',
                load_progress: ''
            },
            data: {
                project_id: {{ $contract->project->id }},
                commission: {{ $contract->commission }},
                units: []
            },
            formatters: {
                ufs: new Intl.NumberFormat('es-CL', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }),
                percent: new Intl.NumberFormat('es-CL', { style: 'percent', minimumFractionDigits: 2 })
            },
            handlers: {
                tipo: null,
                linea: null,
                unit: null
            },
            get() {
                return {
                    units: () => {
                        const url = `{{ $urls->api }}/proyecto/${units.data.project_id}/unidades`
                        return APIClient.fetch(url).then(response => response.json()).then(json => {
                            if (json.unidades.length === 0) {
                                console.error(json.errors)
                                return
                            }
                            units.data.units = []
                            Object.entries(json.unidades).forEach(([tipo, unidades]) => {
                                units.data.units = [...units.data.units, ...unidades]
                            })
                        })
                    },
                    promotions: progress_bar => {
                        const chunkSize = 100
                        const chunks = []
                        for (let i = 0; i < units.data.units.length; i += chunkSize) {
                            chunks.push(units.data.units.slice(i, i + chunkSize).map(u => u.id))
                        }
                        const promises = []
                        const url = `{{ $urls->api }}/proyectos/broker/{{ $contract->broker->rut }}/contract/{{ $contract->id }}/promotions`
                        const method = 'post'
                        chunks.forEach(chunk => {
                            const body = new FormData()
                            chunk.forEach(id => body.append('unidad_ids[]', id))
                            promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
                                progress_bar.progress('increment', json.input.unidad_ids.length)
                                if (json.unidades.length === 0) {
                                    return
                                }
                                json.unidades.forEach(unidad => {
                                    const idx = units.data.units.findIndex(u => u.id === parseInt(unidad.id))
                                    units.data.units[idx].promotions = unidad.promotions
                                })
                            }))
                        })
                        return Promise.all(promises)
                    },
                    prices: progress_bar => {
                        const unsold = [...units.data.units.filter(unit => !unit.sold), ...units.data.units.filter(unit => unit.sold && unit.proyecto_tipo_unidad.tipo_unidad.descripcion !== 'departamento')]
                        const current_total = progress_bar.progress('get total')
                        progress_bar.progress('set total', current_total + unsold.length)

                        const chunkSize = 100
                        const chunks = []
                        for (let i = 0; i < unsold.length; i += chunkSize) {
                            chunks.push(unsold.slice(i, i + chunkSize).map(u => u.id))
                        }
                        const promises = []
                        const url = `{{ $urls->api }}/proyecto/{{ $contract->project->id }}/unidades/precios`
                        const method = 'post'
                        chunks.forEach(chunk => {
                            const body = new FormData()
                            chunk.forEach(id => body.append('unidad_ids[]', id))
                            promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
                                progress_bar.progress('increment', json.input.unidad_ids.length)
                                if (json.precios.length === 0) {
                                    return
                                }
                                json.precios.forEach(unidad => {
                                    const idx = units.data.units.findIndex(u => u.id === parseInt(unidad.id))
                                    units.data.units[idx].precio = unidad.precio
                                })
                            }))
                        })
                        return Promise.all(promises)
                    },
                    values: progress_bar => {
                        const sold = units.data.units.filter(unit => unit.sold && unit.proyecto_tipo_unidad.tipo_unidad.descripcion === 'departamento')
                        progress_bar.progress('set total', sold.length)

                        const chunkSize = 10
                        const chunks = []
                        for (let i = 0; i < sold.length; i += chunkSize) {
                            chunks.push(sold.slice(i, i + chunkSize).map(u => u.id))
                        }
                        const promises = []
                        const url = `{{ $urls->api }}/ventas/by/unidades`
                        const method = 'post'
                        chunks.forEach(chunk => {
                            const body = new FormData()
                            chunk.forEach(id => body.append('unidad_ids[]', id))
                            promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
                                progress_bar.progress('increment', json.input.unidad_ids.length)
                                if (json.ventas.length === 0) {
                                    return
                                }
                                json.ventas.forEach(({unidad_id, venta}) => {
                                    const unidades = venta.propiedad.unidades
                                    const otras_unidades = unidades.filter(unit => unit.id !== parseInt(unidad_id) && unit.proyecto_tipo_unidad.tipo_unidad.descripcion !== 'departamento')
                                    const departamentos = unidades.filter(unit => unit.proyecto_tipo_unidad.tipo_unidad.descripcion === 'departamento' && unit.id !== parseInt(unidad_id))
                                    const precios = otras_unidades.map(unit => {
                                        const idx = units.data.units.findIndex(u => u.id === unit.id)
                                        return units.data.units[idx].precio?.valor ?? 0
                                    }).reduce((sum, precio) => sum + precio, 0)
                                    if (departamentos.length === 0) {
                                        const idx = units.data.units.findIndex(unit => unit.id === parseInt(unidad_id))
                                        units.data.units[idx].valor = venta.valor - precios
                                        units.data.units[idx].venta = venta
                                        return
                                    }
                                    const sum_precios = departamentos.map(departamento => {
                                        return departamento.valor
                                    }).reduce((sum, precio) => sum + precio, 0)
                                    departamentos.forEach(departamento => {
                                        const idx = units.data.units.findIndex(unit => unit.id === departamento.id)
                                        const saldo = venta.valor - precios
                                        units.data.units[idx].valor = saldo / sum_precios * departamento.valor
                                        units.data.units[idx].venta = venta
                                    })
                                })
                            }))
                        })
                        return Promise.all(promises)
                    },
                    sold: progress_bar => {
                        const chunkSize = 100
                        const chunks = []
                        for (let i = 0; i < units.data.units.length; i += chunkSize) {
                            chunks.push(units.data.units.slice(i, i + chunkSize).map(u => u.id))
                        }
                        const promises = []
                        const url = `{{ $urls->api }}/proyecto/{{ $contract->project->id }}/unidades/estados`
                        const method = 'post'
                        chunks.forEach(chunk => {
                            const body = new FormData()
                            chunk.forEach(id => body.append('unidad_ids[]', id))
                            promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
                                progress_bar.progress('increment', json.input.unidad_ids.length)
                                if (json.estados.length === 0) {
                                    return
                                }
                                json.estados.forEach(unidad => {
                                    const idx = units.data.units.findIndex(u => u.id === parseInt(unidad.id))
                                    units.data.units[idx].sold = unidad.sold
                                })
                            }))
                        })
                        return Promise.all(promises)
                    },
                }
            },
            draw() {
                return {
                    units: () => {
                        units.handlers.units.draw({units: units.data.units, formatters: units.formatters})
                    },
                    tipos: () => {
                        units.handlers.tipo.draw({units: units.data.units, formatters: units.formatters})
                    },
                    lineas: () => {
                        units.handlers.lineas.draw({units: units.data.units, formatters: units.formatters})
                    }
                }
            },
            setup(ids) {
                units.ids = ids

                units.handlers.tipo = new TipoTable(units.data.commission)
                units.handlers.lineas = new LineasTable(units.data.commission)
                units.handlers.units = new UnitsTable(units.data.commission)

                $(`#${units.ids.results}`).find('.tabular.menu .item').tab({
                    onVisible: function(tabPath) {
                        if (tabPath !== 'unidades') {
                            return
                        }
                        $(this.querySelector('table')).DataTable().columns.adjust().draw()
                        this.querySelector('table').style.width = ''
                    }
                })
                document.getElementById(units.ids.results).style.visibility = 'hidden'
                document.getElementById(units.ids.progress).style.visibility = 'hidden'
                document.getElementById(units.ids.load_progress).style.visibility = 'hidden'

                const loader = $(`#${units.ids.loader}`)

                units.get().units().then(() => {
                    document.getElementById(units.ids.load_progress).style.visibility = 'visible'

                    const units_length = units.data.units.length
                    const progress_bar = $(`#${units.ids.load_progress}`)
                    progress_bar.progress({ total: units_length * 2 })

                    loader.hide()

                    units.get().promotions(progress_bar).then(() => {
                        units.get().sold(progress_bar).then(() => {
                            units.get().prices(progress_bar).then(() => {
                                document.getElementById(units.ids.results).style.visibility = 'visible'

                                loader.parent().remove()

                                units.draw().units()
                                units.draw().tipos()
                                units.draw().lineas()

                                document.getElementById(units.ids.progress).style.visibility = 'visible'
                                const progress_bar = $(`#${units.ids.progress}`)
                                progress_bar.progress()

                                units.get().values(progress_bar).then(() => {
                                    document.getElementById(units.ids.progress).remove()

                                    units.draw().units()
                                    units.draw().tipos()
                                    units.draw().lineas()
                                })
                            })
                        })
                    })
                })
            }
        }
        $(document).ready(function () {
            units.setup({results: 'results', loader: 'loader', progress: 'values_progress', load_progress: 'load_progress'})
        })
    </script>
@endpush