<table class="ui table" id="lineas">
    <thead>
    <tr>
        <th>Tipo</th>
        <th class="center aligned">Línea</th>
        <th class="center aligned">Orientación</th>
        <th class="center aligned">Cantidad</th>
        <th class="right aligned" style="text-decoration: overline">Precio Base</th>
        <th class="right aligned" style="text-decoration: overline">Comisión</th>
        <th class="right aligned" style="text-decoration: overline">Precio Operador</th>
        <th class="center aligned" style="text-decoration: overline" id="linea_promociones">Promociones</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

@push('page_scripts')
    <script>
        class LineasTable extends GroupedTableHandler {
            ids = {
                lineas: 'lineas',
                promotions: 'linea_promociones'
            }
            constructor(commission) {
                super(commission)
            }
            draw({units, formatters}) {
                const table = document.getElementById(this.ids.lineas)
                const tbody = table.querySelector('tbody')
                tbody.innerHTML = ''
                const lineas = Object.groupBy(units, unit => {
                    return [unit.proyecto_tipo_unidad.tipo_unidad.descripcion, unit.proyecto_tipo_unidad.nombre, unit.orientacion]
                })
                this.promotions.names = new Set()
                this.promotions.values = []
                Object.entries(lineas).sort(([linea1, unidades1], [linea2, unidades2]) => {
                    const split1 = linea1.split(',')
                    const split2 = linea2.split(',')
                    const ct = unidades1[0].proyecto_tipo_unidad.tipo_unidad.orden - unidades2[0].proyecto_tipo_unidad.tipo_unidad.orden
                    if (ct === 0) {
                        const cl = split1[1].localeCompare(split2[1])
                        if (cl === 0) {
                            return split1[2].localeCompare(split2[2])
                        }
                        return cl
                    }
                    return ct
                }).forEach(([linea, unidades]) => {
                    const parts = linea.split(',')
                    const tipo = parts[0]
                    const orientacion = parts[2]
                    const prices = this.prices(unidades)

                    const base_tooltip = [
                        `Min: UF ${formatters.ufs.format(Math.min(...prices.map(p => p.base)))}`,
                        `Max: UF ${formatters.ufs.format(Math.max(...prices.map(p => p.base)))}`,
                        `Desv: UF ${formatters.ufs.format(Stat.standardDeviation(prices.map(p => p.base)))}`
                    ].join("\n").replaceAll(' ', '&nbsp;')
                    const commission_tooltip = [
                        `Min: ${formatters.percent.format(Math.min(...prices.map(p => p.commission)))}`,
                        `Max: ${formatters.percent.format(Math.max(...prices.map(p => p.commission)))}`,
                        `Desv: ${formatters.percent.format(Stat.standardDeviation(prices.map(p => p.commission)))}`
                    ].join("\n").replaceAll(' ', '&nbsp;')
                    const broker_tooltip = [
                        `Min: ${formatters.ufs.format(Math.min(...prices.map(p => p.broker)))}`,
                        `Max: ${formatters.ufs.format(Math.max(...prices.map(p => p.broker)))}`,
                        `Desv: ${formatters.ufs.format(Stat.standardDeviation(prices.map(p => p.broker)))}`
                    ].join("\n").replaceAll(' ', '&nbsp;')

                    const promotions = this.process().prices(prices)
                    this.process().promotions().names(promotions)
                    this.process().promotions().values({promotions, formatters})

                    tbody.innerHTML += [
                        `<tr>`,
                            `<td>${tipo.charAt(0).toUpperCase() + tipo.slice(1)}</td>`,
                            `<td class="center aligned"><span data-tooltip="${unidades[0].proyecto_tipo_unidad.tipologia}" data-position="right center">${parts[1]}</span></td>`,
                            `<td class="center aligned">${orientacion}</td>`,
                            `<td class="center aligned">${unidades.length}</td>`,
                            `<td class="right aligned"><span data-tooltip="${base_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.base)))}</span></td>`,
                            `<td class="right aligned"><span data-tooltip="${commission_tooltip}" data-position="right center" data-variation="wide multiline">${formatters.percent.format(Stat.mean(prices.map(p => p.commission)))}</span></td>`,
                            `<td class="right aligned"><span data-tooltip="${broker_tooltip}" data-position="right center" data-variation="wide multiline">UF ${formatters.ufs.format(Stat.mean(prices.map(p => p.broker)))}</span></td>`,
                            `<td class="right aligned promotions"></td>`,
                        `</tr>`
                    ].join("\n")
                })
                this.build().promotions(table, tbody)
            }
        }
    </script>
@endpush
