@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) {
                const prices = []
                units.forEach(unit => {
                    const price = unit.precio?.valor ?? 0
                    let amount = 1
                    unit.promotions?.forEach(promotion => {
                        amount /= 1/(1 - promotion.amount)
                    })
                    amount /= 1/(1 - this.commission)
                    amount = 1 - amount
                    prices.push({
                        id: unit.id,
                        base: price,
                        amount,
                        final: price / (1 - amount)
                    })
                })
                return prices
            }
        }
    </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 active inline loader"></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 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: ''
            },
            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: () => {
                        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 = []
                        chunks.forEach(chunk => {
                            const url = `{{ $urls->api }}/proyectos/broker/{{ $contract->broker->rut }}/contract/{{ $contract->id }}/promotions`
                            const method = 'post'
                            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 => {
                                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: () => {
                        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 = []
                        chunks.forEach(chunk => {
                            const url = `{{ $urls->api }}/proyecto/{{ $contract->project->id }}/unidades/precios`
                            const method = 'post'
                            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 => {
                                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)
                    },
                    sold: () => {
                        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 = []
                        chunks.forEach(chunk => {
                            const url = `{{ $urls->api }}/proyecto/{{ $contract->project->id }}/unidades/estados`
                            const method = 'post'
                            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 => {
                                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'

                units.get().units().then(() => {
                    units.get().prices().then(() => {
                        units.get().promotions().then(() => {
                            units.get().sold().then(() => {
                                $(units.ids.loader).hide()

                                document.getElementById(units.ids.results).style.visibility = 'visible'

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