oficial/app/resources/views/ventas/reservations/modal/common/scripts/units.blade.php

@push('page_scripts')
<script>
    class ModalUnits {
        prefix
        parent = null
        ids = {
            buttons_holder: '',
            units: ''
        }
        data = {
            button_map: {},
            types: {},
            units: [],
        }
        components = {
            buttons_holder: null,
            units: null,
        }

        constructor({parent, prefix}) {
            this.prefix = prefix
            this.parent = parent
            this.ids = {
                buttons_holder: `${this.prefix}_unit_buttons`,
                units: `${this.prefix}_units`
            }
            this.data.button_map = {
                'departamento': 'building',
                'estacionamiento': 'car',
                'bodega': 'warehouse',
                'terraza': 'vector square'
            }
            this.setup()
        }
        get promotions() {
            return this.parent.data.promotions[this.parent.data.current_project]
        }
        draw = {
            button: type => {
                return [
                    '<div class="field">',
                    `<button class="ui icon button" type="button" data-type="${type}" title="${type.charAt(0).toUpperCase() + type.slice(1)}">`,
                    '<i class="plus icon"></i>',
                    `<i class="${this.data.button_map[type]} icon"></i>`,
                    '</button>',
                    '</div>'
                ].join('')
            },
            buttons: () => {
                const keys = Object.keys(this.data.types)
                if (keys.length === 0) {
                    return
                }
                this.components.buttons_holder.innerHTML = keys.map(type => {
                    return this.draw.button(type)
                }).join('')
                this.components.buttons_holder.querySelectorAll('.button').forEach(button => {
                    button.addEventListener('click', () => {
                        const type = button.dataset.type
                        this.add(type)
                    })
                })
            },
            units: () => {
                if (this.data.units.length === 0) {
                    this.components.units.innerHTML = ''
                    return
                }
                this.components.units.innerHTML = this.data.units.map(unit => {
                    return this.draw.unit(unit)
                }).join('')
                this.components.units.querySelectorAll(`.dropdown.${this.prefix}_units`).forEach(dropdown => {
                    $(dropdown).dropdown({
                        onChange: (value, text, $selectedItem) => {
                            const unitPromotions = this.promotions.filter(promotion => promotion.units.length > 0)
                            const promotions = unitPromotions.filter(promotion => promotion.units.filter(unit => unit.id === parseInt(value)).length > 0)
                            $selectedItem.parent().parent().parent().parent().find(`.${this.prefix}_promotions_unit`)
                                .dropdown('change values', promotions.map(promotion => {
                                    return {
                                        value: promotion.id,
                                        name: promotion.description,
                                        text: promotion.description,
                                    }
                                }))
                        }
                    })
                })
                this.components.units.querySelectorAll(`.dropdown.${this.prefix}_promotions_unit`).forEach(dropdown => {
                    $(dropdown).dropdown()
                })
                this.components.units.querySelectorAll('.remove_unit').forEach(button => {
                    button.addEventListener('click', () => {
                        const idx = Number(button.dataset.id)
                        this.remove(idx)
                    })
                })
            },
            unit: unit => {
                let promotions = ''
                if (unit.type === 'departamento') {
                    if (this.promotions.filter(promotion => promotion.units.length > 0).length > 0) {
                        promotions = [
                            '<div class="three wide field">',
                            '<label>Promociones</label>',
                            `<div class="ui multiple search selection dropdown ${this.prefix}_promotions_unit">`,
                            `<input type="hidden" name="${this.prefix}_units_promotions[]" />`,
                            '<i class="dropdown icon"></i>',
                            '<div class="default text">Promociones</div>',
                            '<div class="menu">',
                            '</div>',
                            '</div>',
                            '</div>'
                        ].join('')
                    }
                }
                return [
                    '<div class="fields">',
                    '<div class="four wide field">',
                    `<label>${unit.type.charAt(0).toUpperCase() + unit.type.slice(1)}</label>`,
                    `<div class="ui search selection dropdown ${this.prefix}_units">`,
                    `<input type="hidden" name="${this.prefix}_units[]" />`,
                    '<i class="dropdown icon"></i>',
                    `<div class="default text">${unit.type.charAt(0).toUpperCase() + unit.type.slice(1)}</div>`,
                    '<div class="menu">',
                    this.data.types[unit.type].map(unit => {
                        return `<div class="item" data-value="${unit.value}">${unit.name}</div>`
                    }).join(''),
                    '</div>',
                    '</div>',
                    '</div>',
                    '<div class="three wide field">',
                    '<label>Valor</label>',
                    '<div class="ui right labeled input">',
                    `<input type="text" name="${this.prefix}_units_value[]" placeholder="Valor" />`,
                    '<div class="ui basic label">UF</div>',
                    '</div>',
                    '</div>',
                    promotions,
                    '<div class="field">',
                    '<label></label>',
                    `<button class="ui red tiny icon button remove_unit" type="button" data-id="${unit.idx}"><i class="trash icon"></i></button>`,
                    '</div>',
                    '</div>',
                ].join('')
            }
        }
        reset() {
            this.data.units = []
            this.draw.units()
        }
        add(type) {
            const idx = Math.max(this.data.units.length, 0, Math.max(...this.data.units.map(unit => unit.idx)) + 1)
            this.data.units.push({idx, type})
            this.draw.units()
        }
        remove(idx) {
            this.data.units = this.data.units.filter(unit => unit.idx !== idx)
            this.draw.units()
        }
        setup() {
            this.components.buttons_holder = document.getElementById(this.ids.buttons_holder)
            this.components.units = document.getElementById(this.ids.units)
            this.draw.buttons()
        }
    }
</script>
@endpush