<table class="ui table" id="unidades">
    <thead>
    <tr>
        <th>Estado</th>
        <th>Tipo</th>
        <th>Tipo Order</th>
        <th class="right aligned">Unidad</th>
        <th>Unidad Orden</th>
        <th>Tipología</th>
        <th>Piso</th>
        <th>Orientación</th>
        <th>m&#0178; Interior</th>
        <th>m&#0178; Terraza</th>
        <th>m&#0178; Vendibles</th>
        <th>m&#0178; Total</th>
        <th class="right aligned">Precio Base</th>
        <th class="right aligned">Comisión</th>
        <th class="right aligned">Precio Operador</th>
        <th class="right aligned">UF/m²</th>
        <th class="center aligned" id="unit_promotions">Promociones</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

@push('page_scripts')
    <script>
        class UnitsTable extends TableHandler {
            ids = {
                units: 'unidades',
            }
            columns = [
                'estado',
                'tipo',
                'tipo_order',
                'unidad',
                'unidad_order',
                'tipologia',
                'piso',
                'orientacion',
                'metros_interior',
                'metros_terraza',
                'metros',
                'metros_total',
                'precio_base',
                'commission',
                'precio_operador',
                'UF/m²',
                'promociones',
            ]
            set = {
                table: false,
                titles: false
            }
            table
            constructor(commission) {
                super(commission)
            }
            setup() {
                return {
                    titles: promotions_names => {
                        if (this.set.titles || promotions_names.size === 0) {
                            return
                        }

                        const nameArray = Array.from(promotions_names)

                        this.columns.pop()
                        this.columns.push(`${nameArray[0].toLowerCase().replaceAll(' ', '_')}.amount`)
                        this.columns.push(`${nameArray[0].toLowerCase().replaceAll(' ', '_')}.final`)

                        const table = document.getElementById(this.ids.units)
                        const thead = table.querySelector('thead')
                        const tr = thead.querySelector('tr')
                        const th = tr.querySelector('th#unit_promotions')
                        th.innerHTML = `${nameArray[0]}<br />Porcentaje`
                        tr.insertAdjacentHTML('beforeend', `<th class="right aligned">${nameArray[0]}<br />Precio Final</th>`)

                        if (promotions_names.size > 1) {
                            nameArray.slice(1).forEach(name => {
                                this.columns.push(`${name.toLowerCase().replaceAll(' ', '_')}.amount`)
                                this.columns.push(`${name.toLowerCase().replaceAll(' ', '_')}.final`)

                                tr.insertAdjacentHTML('beforeend', `<th class="right aligned">${name}<br />Porcentaje</th>`)
                                tr.insertAdjacentHTML('beforeend', `<th class="right aligned">${name}<br />Precio Final</th>`)
                            })
                        }
                        this.set.titles = true
                    },
                    table: () => {
                        if (typeof this.table !== 'undefined' || this.set.table) {
                            return
                        }

                        const dto = structuredClone(datatables_defaults)
                        dto.pageLength = 100
                        dto.columnDefs = [
                            {
                                target: ['tipo_order', 'unidad_order', 'tipologia', 'piso', 'orientacion', 'metros'].map(column => this.columns.indexOf(column)),
                                visible: false
                            },
                            {
                                target: ['tipo'].map(column => this.columns.indexOf(column)),
                                orderData: ['tipo_order'].map(column => this.columns.indexOf(column)),
                            },
                            {
                                target: ['unidad'].map(column => this.columns.indexOf(column)),
                                orderData: ['unidad_order'].map(column => this.columns.indexOf(column)),
                            },
                            {
                                target: ['unidad', 'precio_base', 'commission', 'precio_operador', 'UF/m²', 'porcentaje', 'precio_final']
                                    .map(column => this.columns.indexOf(column)),
                                className: 'dt-right right aligned'
                            }
                        ]
                        dto.order = ['tipo_order', 'unidad_order'].map(column => [this.columns.indexOf(column), 'asc'])
                        dto.language.searchBuilder = searchBuilder
                        const exportColumns = ['tipo', 'unidad', 'tipologia', 'piso', 'orientacion', 'metros_interior', 'metros_terraza', 'metros', 'metros_total', 'precio_operador', 'promociones']
                        if (typeof this.columns['promotions'] === 'undefined') {
                            exportColumns.pop()
                            this.columns.slice(this.columns.indexOf('UF/m²')+1).forEach(name => {
                                exportColumns.push(name)
                            })
                        }
                        dto.layout = {
                            top1Start: {
                                searchBuilder: {
                                    columns: this.columns.filter(column => !['tipo_order', 'unidad_order'].includes(column))
                                        .map(column => this.columns.indexOf(column)),
                                }
                            },
                            top1End: {
                                buttons: [
                                    {
                                        extend: 'excelHtml5',
                                        className: 'green',
                                        text: 'Exportar a Excel <i class="file excel icon"></i>',
                                        title: 'Lista de Precios - {{ $contract->broker->name }} - {{ $contract->project->descripcion }} - {{ (new DateTime())->format('Y-m-d') }}',
                                        download: 'open',
                                        exportOptions: {
                                            columns: exportColumns
                                                .map(column => this.columns.indexOf(column)),
                                            rows: (idx, data, node) => {
                                                return data[this.columns.indexOf('estado')] === 'Libre'
                                            },
                                            format: {
                                                body: (data, row, columnIdx, node) => {
                                                    if (typeof data === 'string' && data.includes('<span')) {
                                                        return data.replace(/<span.*>(.*)<\/span>/, '$1')
                                                    }
                                                    if (typeof data === 'string' && data.includes('UF ')) {
                                                        return data.replace('UF ', '').replaceAll('.', '').replaceAll(',', '.')
                                                    }
                                                    const formatColumns = ['metros', 'metros_interior', 'metros_terraza', 'metros_total']
                                                    if (this.set.titles) {
                                                        this.columns.filter(column => column.includes('.amount') || column.includes('.final')).forEach(name => {
                                                            formatColumns.push(name)
                                                        })
                                                    }
                                                    if (formatColumns.map(column => this.columns.indexOf(column)).includes(columnIdx)) {
                                                        return data.replaceAll('.', '').replaceAll(',', '.')
                                                    }
                                                    return data
                                                }
                                            }
                                        },
                                    }
                                ]
                            }
                        }

                        this.table = $(`#${this.ids.units}`).DataTable(dto)

                        this.set.table = true
                    }
                }
            }
            draw({units, formatters}) {
                const prices = this.prices(units)

                const promotions_names = new Set()
                const tableData = []
                units.forEach(unidad => {
                    const tipo = unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
                    const price = prices.find(p => p.id === unidad.id)

                    let promotions = []
                    price.promotions.forEach(p => {
                        if (Object.hasOwn(promotions, p.name)) {
                            return
                        }
                        promotions[p.name] = {
                            name: p.name,
                            type: p.type,
                            amount: p.type === 1 ? 'UF ' + formatters.ufs.format(p.amount) : formatters.percent.format(p.amount),
                            final: `UF ${formatters.ufs.format(p.final)}`
                        }
                    })

                    Object.keys(promotions).forEach(name => {
                        promotions_names.add(name)
                    })
                    const temp = Object.values(promotions)

                    const data = [
                        unidad.sold ? `<span class="ui yellow text">Vendida</span>` : 'Libre',
                        tipo.charAt(0).toUpperCase() + tipo.slice(1),
                        unidad.proyecto_tipo_unidad.tipo_unidad.orden,
                        unidad.sold && unidad.venta ? `<a href="{{ $urls->base }}/venta/${unidad.venta?.id }" data-tooltip="Valor Promesa: UF ${formatters.ufs.format(unidad.venta?.valor ?? 0)}" data-position="left center">${unidad.descripcion}</a>` : unidad.descripcion,
                        unidad.descripcion.padStart(4, '0'),
                        unidad.proyecto_tipo_unidad.tipologia,
                        unidad.piso,
                        unidad.orientacion,
                        formatters.ufs.format(unidad.proyecto_tipo_unidad.util) ?? 0,
                        formatters.ufs.format(unidad.proyecto_tipo_unidad.terraza) ?? 0,
                        formatters.ufs.format(unidad.proyecto_tipo_unidad.vendible) ?? 0,
                        formatters.ufs.format(unidad.proyecto_tipo_unidad.superficie) ?? 0,
                        'UF ' + formatters.ufs.format(price.base ?? 0),
                        formatters.percent.format(price.commission ?? 0),
                        'UF ' + formatters.ufs.format(price.broker ?? 0),
                        formatters.ufs.format(price.broker / unidad.proyecto_tipo_unidad.vendible),
                        ''
                    ]

                    if (temp.length > 0) {
                        data.pop()
                        temp.forEach((p, i) => {
                            data.push(p.amount)
                            data.push(p.final)
                        })
                    } else {
                        if (promotions_names.size > 0) {
                            Array.from(promotions_names).forEach(name => {
                                data.push('')
                                data.push('')
                            })
                        }
                    }

                    tableData.push(data)
                })

                this.setup().titles(promotions_names)
                this.setup().table()

                const table = this.table
                table.clear()

                table.rows.add(tableData)
                table.draw()
            }
        }
    </script>
@endpush
