oficial/app/resources/views/proyectos/brokers/contracts/show/unidades.blade.php

<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="right aligned">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',
            ]
            constructor(commission) {
                super(commission)

                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
                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: ['tipo', 'unidad', 'tipologia', 'piso', 'orientacion', 'metros_interior', 'metros_terraza', 'metros', 'metros_total', 'precio_operador', 'promociones']
                                        .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 (['metros'].map(column => this.columns.indexOf(column)).includes(columnIdx)) {
                                                return data.replaceAll('.', '').replaceAll(',', '.')
                                            }
                                            return data
                                        }
                                    }
                                },
                            }
                        ]
                    }
                }
                $(`#${this.ids.units}`).DataTable(dto)
            }
            draw({units, formatters}) {
                const table = $(`#${this.ids.units}`).DataTable()
                table.clear()
                const tableData = []
                const prices = this.prices(units)
                units.forEach(unidad => {
                    const tipo = unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
                    const price = prices.find(p => p.id === unidad.id)

                    let subTable = false

                    if (price.promotions.length > 0) {
                        subTable = document.createElement('table')
                        subTable.className = 'ui table'
                        const subTHead = document.createElement('thead')
                        price.promotions.forEach(p => {
                            subTHead.insertAdjacentHTML('beforeend', [
                                '<tr>',
                                '<th class="center aligned">Nombre</th>',
                                '<th class="center aligned">Forma</th>',
                                '<th class="right aligned">Precio Final</th>',
                                '</tr>'
                            ].join("\n"))
                        })
                        const subTBody = document.createElement('tbody')
                        price.promotions.forEach(p => {
                            subTBody.insertAdjacentHTML('beforeend', [
                                '<tr>',
                                `<td class="center aligned">${p.name}</td>`,
                                `<td class="right aligned">${p.type === 1 ? 'UF ' + formatters.ufs.format(p.amount) : formatters.percent.format(p.amount)}</td>`,
                                `<td class="right aligned">UF ${formatters.ufs.format(p.final)}</td>`,
                                '</tr>'
                            ].join("\n"))
                        })
                        subTable.appendChild(subTHead).appendChild(subTBody)
                    }

                    tableData.push([
                        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),
                        subTable ? subTable.outerHTML : 'UF ' + formatters.ufs.format(price.broker ?? 0),
                    ])
                })
                table.rows.add(tableData)
                table.draw()
            }
        }
    </script>
@endpush