<table class="ui table" id="tipos">
    <thead>
    <tr>
        <th>Tipo</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="tipo_promociones">Promociones</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

@push('page_scripts')
    <script>
        class TipoTable extends GroupedTableHandler {
            ids = {
                tipos: 'tipos',
                promotions: 'tipo_promociones'
            }
            constructor(commission) {
                super(commission)
            }
            draw({units, formatters}) {
                const table = document.getElementById(this.ids.tipos)
                const tbody = table.querySelector('tbody')
                tbody.innerHTML = ''
                const groups = Object.groupBy(units, unit => {
                    return unit.proyecto_tipo_unidad.tipo_unidad.descripcion
                })
                this.promotions.names = new Set()
                this.promotions.values = []
                Object.entries(groups).forEach(([tipo, unidades]) => {
                    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">${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
