@extends('layout.base')

@section('page_title')
    Cierres - Reservas
@endsection

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Cierres - Reservas</h2>

        <div class="ui compact segment" id="projects">
            <div class="ui header">Proyectos</div>
            @if (count($projects) == 0)
                <div class="ui message">
                    No hay proyectos en venta.
                </div>
            @else
                <div class="ui link list">
                    @foreach ($projects as $project)
                        <div class="item link" data-id="{{ $project->id }}">
                            {{ $project->descripcion }}
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
        <div class="ui two column grid">
            <div class="column">
                <h3 class="ui header" id="project"></h3>
            </div>
            <div class="column">
                <div class="ui active inline loader" id="loader"></div>
            </div>
        </div>
        <div id="results">
            <div class="ui right aligned top attached basic segment" id="controls">
                <div class="ui tiny icon buttons">
                    <button class="ui button" id="up_button">
                        <i class="up arrow icon"></i>
                    </button>
                    <button class="ui button" id="refresh_button">
                        <i class="refresh icon"></i>
                    </button>
                    <button class="ui green icon button" id="add_button">
                        <i class="plus icon"></i>
                    </button>
                </div>
            </div>
            <div class="ui top attached tabular menu" id="tabs">
                <div class="yellow active item link" data-tab="pending">Pendientes</div>
                <div class="green item link" data-tab="active">Activas</div>
                <div class="red item link" data-tab="rejected">Rechazadas</div>
            </div>
            <div class="ui bottom attached tab fitted segment active" data-tab="pending">
                <table class="ui yellow striped table" id="pending_reservations">
                    <thead>
                    <tr>
                        <th>Unidades</th>
                        <th>Cliente</th>
                        <th>Fecha</th>
                        <th>Oferta</th>
                        <th>¿Valida?</th>
                        <th>Operador</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="ui bottom attached tab fitted segment" data-tab="active">
                <table class="ui green striped table" id="active_reservations">
                    <thead>
                    <tr>
                        <th>Unidades</th>
                        <th>Cliente</th>
                        <th>Fecha</th>
                        <th>Oferta</th>
                        <th>Operador</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="ui bottom attached tab fitted segment" data-tab="rejected">
                <table class="ui red striped table" id="rejected_reservations">
                    <thead>
                    <tr>
                        <th>Unidades</th>
                        <th>Cliente</th>
                        <th>Fecha</th>
                        <th>Oferta</th>
                        <th>Estado</th>
                        <th>Operador</th>
                        <th>Comentarios</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    @include('layout.body.scripts.rut')
    @include('ventas.reservations.modal.common.scripts.promotions')
    @include('ventas.reservations.modal.common.scripts.units')
    @include('ventas.reservations.modal.common.scripts.payments')
    @include('ventas.reservations.modal.common.scripts.modal')

    @include('ventas.reservations.modal.add')
    @include('ventas.reservations.modal.edit')
    @include('ventas.reservations.modal.comment')
@endsection

@push('page_styles')
    <style>
        .item.link {
            cursor: pointer !important;
            text-decoration: underline;
        }
    </style>
@endpush

@push('page_scripts')
    <script>
        class Projects {
            display = {
                projects: '',
                project: ''
            }
            component_id = ''
            component = null
            current_project = null
            title_id = ''
            title_component = null

            constructor({component_id, title_id}) {
                this.component_id = component_id
                this.component = document.getElementById(this.component_id)
                this.display.projects = this.component.style.display
                this.title_id = title_id
                this.title_component = document.getElementById(this.title_id)
                this.display.project = this.title_component.style.display

                this.show()
                this.watch()
            }

            select(event) {
                event.preventDefault()

                const project_id = event.currentTarget.dataset.id
                reservations.show.results()
                reservations.update.url(project_id)

                if (project_id === this.current_project) {
                    this.hide()
                    this.title_component.innerHTML = event.currentTarget.innerHTML

                    reservations.action.reservations()

                    return
                }
                this.current_project = project_id

                reservations.get.reservations(project_id)
                reservations.components.modals.add.load(project_id)
                reservations.components.modals.edit.load(project_id)
                this.hide()

                this.title_component.innerHTML = event.currentTarget.innerHTML
            }

            watch() {
                this.component.querySelectorAll('.item.link').forEach(item => {
                    item.addEventListener('click', this.select.bind(this))
                })
            }

            load(project_id) {
                this.component.querySelector(`.item.link[data-id="${project_id}"]`).click()
            }

            show() {
                this.component.style.display = this.display.projects
                this.title_component.style.display = 'none'
            }

            hide() {
                this.component.style.display = 'none'
                this.title_component.style.display = this.display.project
            }
        }

        class Controls {
            display = {
                up: '',
                reset: '',
            }
            component_id = ''
            component = null

            buttons = {
                up: null,
                reset: null,
                add: null
            }

            constructor({component_id}) {
                this.component_id = component_id
                this.component = document.getElementById(this.component_id)
                const buttons = this.component.querySelectorAll('button')
                this.buttons.up = buttons[0]
                this.buttons.reset = buttons[1]
                this.buttons.add = buttons[2]
                this.display.up = buttons[0].style.display
                this.display.reset = buttons[1].style.display

                this.watch()
                this.hide()
            }

            watch() {
                Object.entries(this.buttons).forEach(([key, value]) => {
                    const name = key.replace('_button', '')
                    value.addEventListener('click', this.action[name].bind(this))
                })
            }

            hide() {
                this.buttons.up.style.display = this.display.up
                this.buttons.reset.style.display = this.display.reset
            }

            show() {
                this.buttons.up.style.display = 'none'
                this.buttons.reset.style.display = 'none'
            }

            action = {
                reset: event => {
                    event.preventDefault()
                    reservations.action.reset(event)
                    return false
                },
                up: event => {
                    event.preventDefault()
                    reservations.action.up(event)
                    return false
                },
                add: event => {
                    event.preventDefault()
                    reservations.action.add(event)
                    return false
                }
            }
        }

        class Reservations {
            display = {
                reservations: '',
            }
            component_id = ''
            component = null
            formatters = {
                date: null,
                ufs: null
            }
            columnNames = []
            reservations = []

            constructor({component_id, formatters = {date, ufs}}) {
                this.component_id = component_id
                this.component = document.getElementById(this.component_id)
                this.display.reservations = this.component.style.display

                this.formatters = formatters

                this.set.columnNames()

                this.hide()
            }

            set = {
                reservations: reservations => {
                    this.reservations = reservations
                    return this
                },
                columnNames: () => {
                    const tds = this.component.querySelector('thead tr').querySelectorAll('th')
                    this.columnNames = []
                    tds.forEach(td => {
                        let name = td.innerHTML.toLowerCase()
                        if (name === '') {
                            return
                        }
                        if (name.includes('?')) {
                            name = name.replaceAll(/[¿?]/g, '')
                        }
                        this.columnNames.push(name)
                    })
                    return this
                }
            }

            get columnsData() {
                const columnValues = {
                    id: reservation => reservation.id,
                    unidades: reservation => reservation.summary,
                    cliente: reservation => reservation.buyer.nombreCompleto,
                    fecha: reservation => this.formatters.date.format(new Date(Date.parse(reservation.date) + 24 * 60 * 60 * 1000)),
                    oferta: reservation => `${this.formatters.ufs.format(reservation.offer)} UF`,
                    valida: reservation => reservation.valid ? '<span class="ui green text">Si</span>' : '<span class="ui red text">No</span>',
                    operador: reservation => reservation.broker?.name ?? '',
                }
                const tooltipVariation = 'very wide multiline'
                const tooltips = this.draw().tooltip()
                return this.reservations.map(reservation => {
                    const data = {}
                    Object.entries(columnValues).forEach(([key, value]) => {
                        if (key in tooltips) {
                            const processor = tooltips[key]
                            const content = processor(reservation)//.replaceAll(' ', '&nbsp;')
                            data[key] = `data-html="${content}" data-variation="${tooltipVariation}">${value(reservation)}`
                            return
                        }
                        data[key] = value(reservation)
                    })
                    return data
                })
            }

            draw() {
                return {
                    tbody: () => {
                        if (this.reservations.length === 0) {
                            this.empty()
                            return
                        }
                        const tbody = this.component.querySelector('tbody')
                        tbody.innerHTML = ''
                        this.columnsData.forEach(column => {
                            const tr = document.createElement('tr')
                            const contents = []
                            const id = column.id
                            this.columnNames.forEach(name => {
                                let td = `<td>${column[name]}</td>`
                                if (column[name].includes('data-content') || column[name].includes('data-html')) {
                                    td = `<td ${column[name]}</td>`
                                }
                                contents.push(td)
                            })
                            const actions = this.draw().actions(id)
                            if (actions !== '') {
                                contents.push(actions)
                            }
                            tr.innerHTML = contents.join("\n")
                            tbody.appendChild(tr)
                        })
                        this.show()

                        $(this.component).find('[data-content],[data-html]').popup()

                        this.watch()
                    },
                    actions: id => {
                        return [
                            '<td class="right aligned">',
                            this.draw().actionButtons().edit(id),
                            this.draw().actionButtons().approve(id),
                            this.draw().actionButtons().reject(id),
                            '</td>'
                        ].join("\n")
                    },
                    actionButtons: () => {
                        return {
                            edit: id => {
                                return [
                                    `<button class="ui blue mini icon button edit" data-id="${id}" title="Editar">`,
                                    '<i class="edit icon"></i>',
                                    '</button>'
                                ].join("\n")
                            },
                            approve: id => {
                                return [
                                    `<button class="ui green mini icon button approve" data-id="${id}" title="Aprobar">`,
                                    '<i class="check icon"></i>',
                                    '</button>'
                                ].join("\n")
                            },
                            reject: id => {
                                return [
                                    `<button class="ui red mini icon button reject" data-id="${id}" title="Rechazar">`,
                                    '<i class="trash icon"></i>',
                                    '</button>'
                                ].join("\n")
                            }
                        }
                    },
                    tooltip: () => {
                        return {
                            oferta: reservation => {
                                const formatter = new Intl.NumberFormat('es-CL', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                })

                                const output = []
                                const table = ['<table>']
                                reservation.units.forEach(unit => {
                                    const type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
                                    table.push(`<tr><td>${type.charAt(0).toUpperCase() + type.slice(1)} ${unit.unit.descripcion}:</td><td align='right'>${formatter.format(unit.value)} UF</td></tr>`)
                                })
                                if (reservation.broker !== null) {
                                    table.push('<tr><td>-----</td></tr>')
                                    let commission = reservation.broker.commission
                                    table.push(`<tr><td>Broker:</td><td align='right'>${reservation.broker.name}</td><td align='right'>(${commission})</td></tr>`)
                                }
                                if (reservation.promotions.length > 0) {
                                    table.push('<tr><td>-----</td></tr>')
                                    reservation.promotions.forEach(promotion => {
                                        let value = 0
                                        switch (promotion.type) {
                                            case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
                                                value = `${formatter.format(promotion.amount)} UF`
                                                break
                                            case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
                                                value = `${formatter.format(promotion.amount * 100)} %`
                                                break
                                        }
                                        table.push(`<tr><td>${promotion.description}:</td><td align='right'>${value}</td></tr>`)
                                    })
                                }
                                table.push('</table>')
                                output.push(table.join(''))
                                return output.join("<br />")
                            },
                            cliente: reservation => {
                                const formatter = new Intl.NumberFormat('es-CL', {
                                    minimumFractionDigits: 0,
                                    maximumFractionDigits: 0
                                })
                                return [
                                    `RUT: ${formatter.format(reservation.buyer.rut)}-${reservation.buyer.digito}`
                                ].join("<br />")
                            }
                        }
                    }
                }
            }

            watch() {
                if (Object.keys(this.actions).length === 0) {
                    return
                }
                const actionNames = Object.keys(this.actions)
                const tbody = this.component.querySelector('tbody')
                const trs = tbody.querySelectorAll('tr')
                trs.forEach(tr => {
                    actionNames.forEach(actionName => {
                        const button = tr.querySelector(`button.${actionName}`)
                        if (!button) {
                            return
                        }
                        button.addEventListener('click', this.actions[actionName].bind(this))
                    })
                })
            }

            empty() {
                const tbody = this.component.querySelector('tbody')
                tbody.innerHTML = ''
                const col_span = this.columnNames.length + 1
                const tr = document.createElement('tr')
                tr.innerHTML = `<td colspan="${col_span}">No hay cierres</td>`
                tbody.appendChild(tr)

                this.show()
            }

            show() {
                this.component.style.display = this.display.reservations
            }

            hide() {
                this.component.style.display = 'none'
            }

            find(id) {
                return this.reservations.find(reservation => reservation.id === parseInt(id))
            }

            send = {
                get(url) {
                    return APIClient.fetch(url).then(response => response.json()).then(json => {
                        if (json.success) {
                            window.location.reload()
                        }
                    })
                },
                post(url, body) {
                    const method = 'post'
                    return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
                        if (json.success) {
                            window.location.reload()
                        }
                    })
                },
            }
            actions = {}
        }

        class ActiveReservations extends Reservations {
            constructor({component_id, formatters = {date, ufs}}) {
                super({component_id, formatters})
            }

            get columnsData() {
                const data = super.columnsData
                return data.map(row => {
                    delete (row['valida'])
                    return row
                })
            }

            draw() {
                const draw = super.draw()
                const actionButtons = draw.actionButtons()
                draw.actionButtons = () => {
                    actionButtons['promise'] = id => {
                        return [
                            `<button class="ui green mini icon button promise" data-id="${id}" title="Promesar">`,
                            '<i class="right chevron icon"></i>',
                            '</button>'
                        ].join("\n")
                    }
                    actionButtons['remove'] = id => {
                        return [
                            `<button class="ui red mini icon button remove" data-id="${id}" title="Abandonar">`,
                            '<i class="trash icon"></i>',
                            '</button>'
                        ].join("\n")
                    }
                    return actionButtons
                }
                draw.actions = (id) => {
                    return [
                        '<td class="right aligned">',
                        this.draw().actionButtons().edit(id),
                        this.draw().actionButtons().promise(id),
                        this.draw().actionButtons().remove(id),
                        '</td>'
                    ].join("\n")
                }
                return draw
            }

            actions = {
                edit: event => {
                    event.preventDefault()
                    const id = event.currentTarget.dataset.id
                    reservations.components.modals.edit.show({type: 'active', reservation_id: id})
                    return false
                },
                promise: event => {
                    event.preventDefault()
                    const reservationId = event.currentTarget.dataset.id
                    const reservation = this.find(reservationId)
                    
                    // Create a form to submit the data via POST
                    const form = document.createElement('form')
                    form.method = 'POST'
                    form.action = '{{ $urls->base }}/ventas/add'
                    
                    // Add CSRF token
                    const csrfToken = Math.random().toString(36).substring(2)
                    const csrfInput = document.createElement('input')
                    csrfInput.type = 'hidden'
                    csrfInput.name = '_token'
                    csrfInput.value = csrfToken
                    form.appendChild(csrfInput)
                    
                    // Add reservation data
                    const addInput = (name, value) => {
                        if (value) {
                            const input = document.createElement('input')
                            input.type = 'hidden'
                            input.name = name
                            input.value = value
                            form.appendChild(input)
                        }
                    }
                    
                    addInput('from_reservation', 'true')
                    addInput('reservation_id', reservationId)
                    
                    if (reservation.cliente) {
                        addInput('cliente_nombre', reservation.cliente.nombre)
                        addInput('cliente_rut', reservation.cliente.rut)
                        addInput('cliente_email', reservation.cliente.email)
                        addInput('cliente_telefono', reservation.cliente.telefono)
                    }
                    
                    if (reservation.propiedad) {
                        addInput('proyecto_id', reservation.propiedad.proyecto_id)
                        // Add other property-related parameters as needed
                    }
                    
                    if (reservation.oferta) {
                        addInput('valor', reservation.oferta.valor)
                        // Add other offer-related parameters as needed
                    }
                    
                    // Submit the form
                    document.body.appendChild(form)
                    form.submit()
                    return false
                },
                remove: event => {
                    event.preventDefault()
                    const reservation_id = event.currentTarget.dataset.id
                    const url = `{{ $urls->api }}/ventas/reservation/${reservation_id}/remove`
                    const method = 'delete'
                    const action = 'Cancelar'
                    const reservation_data = this.find(reservation_id)
                    reservations.components.modals.comment.show({reservation_id, action, url, method, reservation_data})
                    return false
                }
            }
        }

        class PendingReservations extends Reservations {
            constructor({component_id, formatters = {date, ufs}}) {
                super({component_id, formatters})
            }

            draw() {
                const draw = super.draw()
                const tooltip = draw.tooltip()
                tooltip['valida'] = reservation => {
                    const formatter = new Intl.NumberFormat('es-CL', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    })

                    const output = []
                    const table = [
                        '<table>',
                        '<thead>',
                        '<tr>',
                        '<th></th>',
                        '<th>Base Oferta</th>',
                        '<th>Precio</th>',
                        '</thead>'
                    ]
                    const rowAlters = [
                        '',
                        " align='right'",
                        " align='right'",
                        " align='right'"
                    ]
                    reservation.units.forEach(unit => {
                        let type = unit.unit.proyecto_tipo_unidad.tipo_unidad.descripcion
                        type = type.charAt(0).toUpperCase() + type.slice(1)
                        const base = unit.base ?? (unit.value ?? 0)
                        const price = unit.unit.current_precio?.valor ?? 0
                        const diff = (base - price) / price * 100
                        const rowsData = [
                            [
                                `${type} ${unit.unit.descripcion}`,
                                `${formatter.format(base)} UF`,
                                `${formatter.format(price)} UF`,
                                `(${formatter.format(diff)} %)`
                            ]
                        ]
                        const rowContent = []
                        rowsData.forEach(row => {
                            const content = []
                            row.forEach((cell, idx) => {
                                content.push(`<td${rowAlters[idx]}>${cell}</td>`)
                            })
                            rowContent.push(`<tr>${content.join('')}</tr>`)
                        })
                        table.push(rowContent.join(''))
                    })
                    if (reservation.broker !== null) {
                        table.push('<tr><td>-----</td></tr>')
                        let commission = reservation.broker.commission
                        table.push(`<tr><td>Broker:</td><td align='right'>${reservation.broker.name}</td><td align='right'>(${commission})</td></tr>`)
                    }
                    reservation.promotions.forEach(promotion => {
                        let value = 0
                        switch (promotion.type) {
                            case {{ \Incoviba\Model\Venta\Promotion\Type::FIXED }}:
                                value = `${formatter.format(promotion.amount)} UF`
                                break
                            case {{ \Incoviba\Model\Venta\Promotion\Type::VARIABLE }}:
                                value = `${formatter.format(promotion.amount * 100)} %`
                                break
                        }
                        table.push(`<tr><td>${promotion.description}:</td><td align='right'>${value}</td></tr>`)
                    })
                    table.push('</table>')
                    output.push(table.join(''))
                    return output.join("<br />")
                }
                draw['tooltip'] = () => {
                    return tooltip
                }
                return draw
            }

            actions = {
                edit: event => {
                    event.preventDefault()
                    const id = event.currentTarget.dataset.id
                    reservations.components.modals.edit.show({type: 'pending', reservation_id: id})
                    return false
                },
                approve: event => {
                    event.preventDefault()
                    const id = event.currentTarget.dataset.id
                    const url = `{{ $urls->api }}/ventas/reservation/${id}/approve`
                    this.send.get(url)
                    return false
                },
                reject: event => {
                    event.preventDefault()
                    const reservation_id = event.currentTarget.dataset.id
                    const url = `{{ $urls->api }}/ventas/reservation/${reservation_id}/reject`
                    const method = 'delete'
                    const action = 'Rechazar'
                    const reservation_data = this.find(reservation_id)
                    reservations.components.modals.comment.show({reservation_id, action, url, method, reservation_data})
                    return false
                }
            }
        }

        class RejectedReservations extends Reservations {
            constructor({component_id, formatters = {date, ufs}}) {
                super({component_id, formatters})
            }

            get columnsData() {
                const data = super.columnsData
                return this.reservations.map((reservation, idx) => {
                    data[idx]['estado'] = this.mapState(reservation.current_state)
                    data[idx]['comentarios'] = reservation.comments ?? ''
                    return data[idx]
                })
            }

            draw() {
                const draw = super.draw()
                draw.actions = (id) => {
                    return ''
                }
                return draw
            }

            watch() {
            }

            mapState(state) {
                return {
                    'canceled': 'Cancelado',
                    'rejected': 'Rechazado'
                }[state.toLowerCase()]
            }
        }

        const reservations = {
            components: {
                projects: null,
                loader: null,
                results: null,
                controls: null,
                reservations: {
                    active: null,
                    pending: null,
                    rejected: null
                },
                modals: {
                    add: null,
                    comment: null,
                }
            },
            display: {
                loader: '',
                results: '',
            },
            data: {
                comunas: {},
                brokers: {},
                promotions: {},
                units: {}
            },
            locks: {
                comunas: null,
                brokers: null,
                promotions: null,
                units: null
            },
            get: {
                send: (project_id, url_segment, component) => {
                    const url = `/api/ventas/reservations/project/${project_id}/${url_segment}`
                    return APIClient.fetch(url).then(response => response.json()).then(json => {
                        if (json.reservations.length > 0) {
                            component.set.reservations(json.reservations)
                        }
                        component.draw().tbody()
                    })
                },
                active: project_id => {
                    return reservations.get.send(project_id, 'active', reservations.components.reservations.active)
                },
                pending: project_id => {
                    return reservations.get.send(project_id, 'pending', reservations.components.reservations.pending)
                },
                rejected: project_id => {
                    return reservations.get.send(project_id, 'rejected', reservations.components.reservations.rejected)
                },
                reservations: project_id => {
                    reservations.loading.show()

                    const promises = []

                    promises.push(reservations.get.active(project_id))
                    promises.push(reservations.get.pending(project_id))
                    promises.push(reservations.get.rejected(project_id))

                    return Promise.any(promises).then(() => {
                        reservations.loading.hide()
                    })
                },
                pathname: project_id => {
                    const current_url = new URL(window.location.href)
                    if (project_id === null) {
                        if (current_url.pathname.includes('project')) {
                            return current_url.pathname.replace(/\/project\/\d+/, '')
                        }
                        return current_url.pathname
                    }
                    if (current_url.pathname.includes('project')) {
                        return current_url.pathname.replace(/project\/\d+/, `project/${project_id}`)
                    }
                    return `${current_url.pathname}/project/${project_id}`
                },
                comunas: region_id => {
                    if (region_id in reservations.data.comunas) {
                        reservations.locks.comunas = null
                        return new Promise(resolve => {
                            resolve(reservations.data.comunas[region_id])
                        })
                    }
                    if (reservations.locks.comunas !== null) {
                        return reservations.locks.comunas
                    }
                    const uri = `/api/region/${region_id}/comunas`
                    reservations.locks.comunas = APIClient.fetch(uri).then(response => response.json()).then(json => {
                        if (json.comunas.length === 0) {
                            return
                        }
                        reservations.data.comunas[region_id] = json.comunas.map(comuna => {
                            return {
                                text: comuna.descripcion,
                                name: comuna.descripcion,
                                value: comuna.id
                            }
                        })
                        return reservations.data.comunas[region_id]
                    })
                    return reservations.locks.comunas
                },
                brokers: project_id => {
                    if (project_id in reservations.data.brokers) {
                        reservations.locks.brokers = null
                        return new Promise((resolve, reject) => {
                            resolve(reservations.data.brokers[project_id])
                        })
                    }
                    if (reservations.locks.brokers !== null) {
                        return reservations.locks.brokers
                    }
                    const uri = `/api/proyecto/${project_id}/brokers`
                    reservations.locks.brokers = APIClient.fetch(uri).then(response => response.json()).then(json => {
                        if (json.contracts.length === 0) {
                            return
                        }
                        const formatter = new Intl.NumberFormat('es-CL', { style: 'percent', minimumFractionDigits: 2 })
                        reservations.data.brokers[project_id] = json.contracts.map(contract => {
                            return {
                                id: contract.id,
                                broker_rut: contract.broker_rut,
                                commission: formatter.format(contract.commission),
                                name: '',
                                text: '',
                                value: contract.broker_rut
                            }
                        })
                        const promises = []
                        json.contracts.forEach(contract => {
                            promises.push(reservations.get.broker(contract.broker_rut))
                        })

                        return Promise.all(promises).then(data => {
                            data.forEach(broker => {
                                if (!('rut' in broker)) {
                                    return
                                }
                                const idx = reservations.data.brokers[project_id].findIndex(contract => contract.broker_rut === broker.rut)
                                const text = reservations.data.brokers[project_id][idx].text = `${broker.name} - ${reservations.data.brokers[project_id][idx].commission}`
                                reservations.data.brokers[project_id][idx].name = text
                                reservations.data.brokers[project_id][idx].text = text
                            })
                        })
                    })
                    return reservations.locks.brokers
                },
                broker: (broker_rut) => {
                    const uri = `/api/proyectos/broker/${broker_rut}`
                    return APIClient.fetch(uri).then(response => response.json()).then(json => {
                        if (!('broker' in json)) {
                            return []
                        }
                        return json.broker
                    })
                },
                promotions: project_id => {
                    if (project_id in reservations.data.promotions) {
                        reservations.locks.promotions = null
                        return new Promise((resolve, reject) => {
                            resolve(this.data.promotions[project_id])
                        })
                    }
                    if (reservations.locks.promotions !== null) {
                        return reservations.locks.promotions
                    }
                    const uri = `/api/proyecto/${project_id}/promotions`
                    reservations.locks.promotions = APIClient.fetch(uri).then(response => response.json()).then(json => {
                        if (json.promotions.length === 0) {
                            return reservations.data.promotions[project_id] = []
                        }
                        return reservations.data.promotions[project_id] = json.promotions
                    })
                    return reservations.locks.promotions
                },
                units: project_id => {
                    if (project_id in reservations.data.units) {
                        reservations.locks.units = null
                        return new Promise((resolve, reject) => {
                            resolve(reservations.data.units[project_id])
                        })
                    }
                    if (reservations.locks.units !== null) {
                        return reservations.locks.units
                    }
                    const uri = `/api/proyecto/${project_id}/unidades/disponibles`
                    reservations.locks.units = APIClient.fetch(uri).then(response => response.json()).then(json => {
                        if (json.unidades.length === 0) {
                            reservations.data.units[project_id] = {}
                            return reservations.data.units[project_id]
                        }
                        if (!(project_id in reservations.data.units)) {
                            reservations.data.units[project_id] = {}
                        }
                        json.unidades.forEach(unit => {
                            const type = unit.proyecto_tipo_unidad.tipo_unidad.descripcion
                            if (!(type in reservations.data.units[project_id])) {
                                reservations.data.units[project_id][type] = []
                            }
                            reservations.data.units[project_id][type].push(unit)
                        })

                        return reservations.data.units[project_id]
                    })
                    return reservations.locks.units
                },
            },
            loading: {
                show: () => {
                    reservations.components.loader.style.display = reservations.display.loader
                },
                hide: () => {
                    reservations.components.loader.style.display = 'none'
                }
            },
            update: {
                url: project_id => {
                    window.history.pushState(null, '', reservations.get.pathname(project_id))
                }
            },
            action: {
                reset: event => {
                    event.preventDefault()
                    reservations.components.projects.current_project = null
                    Object.entries(reservations.components.reservations).forEach(([key, value]) => {
                        reservations.components.reservations[key].reservations = []
                        reservations.components.reservations[key].hide()
                    })
                    reservations.show.projects()
                    reservations.update.url(null)
                    return false
                },
                up: event => {
                    event.preventDefault()
                    Object.values(reservations.components.reservations).forEach(reservations => reservations.hide())
                    reservations.show.projects()
                    reservations.update.url(null)
                    return false
                },
                add: event => {
                    event.preventDefault()
                    reservations.components.modals.add.show()
                    return false
                },
                reservations: () => {
                    Object.values(reservations.components.reservations).forEach(reservations => {
                        reservations.draw()
                    })
                }
            },
            show: {
                projects: () => {
                    reservations.components.projects.show()
                    reservations.components.results.style.display = 'none'
                },
                results: () => {
                    reservations.components.projects.hide()
                    reservations.components.results.style.display = reservations.display.results
                    Object.values(reservations.components.reservations).forEach(reservations => reservations.draw())
                }
            },
            setup(configuration) {
                const formatters = {
                    date: new Intl.DateTimeFormat('es-CL', {year: 'numeric', month: 'long', day: 'numeric'}),
                    ufs: new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
                }
                this.components.loader = document.getElementById(configuration.ids.loader)
                this.components.projects = new Projects({
                    component_id: configuration.ids.projects,
                    title_id: configuration.ids.project
                })
                this.components.controls = new Controls({component_id: configuration.ids.controls})
                this.components.reservations.active = new ActiveReservations({
                    component_id: configuration.ids.active,
                    formatters
                })
                this.components.reservations.pending = new PendingReservations({
                    component_id: configuration.ids.pending,
                    formatters
                })
                this.components.reservations.rejected = new RejectedReservations({
                    component_id: configuration.ids.rejected,
                    formatters
                })

                this.display.loader = this.components.loader.style.display
                this.loading.hide()

                $(`#${configuration.ids.tabs} .item`).tab()
                this.components.results = document.getElementById(configuration.ids.results)
                this.display.results = this.components.results.style.display
                this.show.projects()

                this.components.modals.add = new AddReservationModal(configuration.ids.projects)
                this.components.modals.edit = new EditReservationModal(configuration.ids.projects)
                this.components.modals.comment = new CommentModal()

                const project_id = {{ $project_id ?? 'null' }};
                if (project_id !== null) {
                    reservations.components.projects.load(project_id)
                }
            }
        }

        $(document).ready(() => {
            reservations.setup({
                ids: {
                    projects: 'projects',
                    project: 'project',
                    results: 'results',
                    loader: 'loader',
                    controls: 'controls',
                    tabs: 'tabs',
                    active: 'active_reservations',
                    pending: 'pending_reservations',
                    rejected: 'rejected_reservations',
                }
            })
        })
    </script>
@endpush