@include('ventas.reservations.modal.common.modal', ['prefix' => 'add', 'modalTitle' => 'Agregar Cierre', 'okText' => 'Agregar'])

@push('page_scripts')
    <script>
        class AddModalPromotions extends ModalPromotions {
            constructor() {
                super('add')
            }
        }
        class AddModalUnits extends ModalUnits {
            constructor() {
                super({prefix: 'add', parent: null});
            }
        }
        class AddModalPayments extends ModalPayments {
            constructor() {
                super('add');
            }

        }
        class AddReservationModal extends ReservationModal {
            constructor(projects_id) {
                super({projects_id, prefix: 'add', components: {
                    promotions: new AddModalPromotions(),
                    units: new AddModalUnits(),
                    payments: new AddModalPayments()
                }});
            }

            add() {
                const url = '/api/ventas/reservation/add'
                const form = document.getElementById(this.ids.form)
                const body = new FormData(form)
                const date = this.components.$date.calendar('get date')
                body.set(`${this.prefix}_date`, [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
                body.set(`${this.prefix}_buyer_rut`, Rut.clean(this.components.rut.querySelector('input').value))
                body.set(`${this.prefix}_buyer_digit`, this.components.digit.textContent)
                body.set(`${this.prefix}_buyer_address_comuna_id`, this.components.$comuna.dropdown('get value'))
                body.set(`${this.prefix}_broker_rut`, Rut.clean(this.components.$broker.dropdown('get value')))
                body.set(`${this.prefix}_buyer_email`, form.querySelector(`input[name='${this.prefix}_buyer_email_name']`).value + '@' + form.querySelector(`input[name='${this.prefix}_buyer_email_domain']`).value)
                const birthdate = this.components.$birthdate.calendar('get date')
                body.set(`${this.prefix}_buyer_birthdate`, [birthdate.getFullYear(), birthdate.getMonth() + 1, birthdate.getDate()].join('-'))

                if (this.components.payments.components.pie.$checkbox.checkbox('is unchecked')) {
                    body.delete(`${this.prefix}_pie`)
                    body.delete(`${this.prefix}_cuotas`)
                }
                body.delete(`${this.prefix}_has_pie`)
                if (this.components.payments.components.credit.$checkbox.checkbox('is unchecked')) {
                    body.delete(`${this.prefix}_credit`)
                }
                body.delete(`${this.prefix}_has_credit`)

                body.delete('comuna')
                body.delete('region')
                body.delete('broker')
                body.delete(`${this.prefix}_broker`)
                body.delete('birthdate')
                body.delete(`${this.prefix}_buyer_email_name`)
                body.delete(`${this.prefix}_buyer_email_domain`)

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

                this.components.$modal.modal({
                    onApprove: () => {
                        this.add()
                    }
                })
                this.components.form.addEventListener('submit', event => {
                    event.preventDefault()
                    this.add()
                    return false
                })
            }
        }
        /*class AddReservationModal {
            ids = {
                modal: '',
                form: '',
                date: '',
                rut: '',
                digit: '',
                birthdate: '',
                comuna: '',
                region: '',
                broker: '',
                promotion_button: '',
                promotions: '',
                projects: '',
                project_name: '',
                unit_buttons: '',
                units: ''
            }
            components = {
                $modal: null,
                form: null,
                $date: null,
                $rut: null,
                rut: null,
                digit: null,
                $birthdate: null,
                $comuna: null,
                $region: null,
                $broker: null,
                promotion_button: null,
                promotions: null,
                projects: null,
                project_name: null,
                unit_buttons: null,
                units: null,
                payments: null,
                $loader: null
            }
            data = {
                current_project: null,
                comunas: {},
                brokers: {},
                promotions: {},
                unit_buttons: [],
                units: {},
                added_units: {},
                current_user: null
            }
            maps = {
                unit_types: {
                    departamento: 'building',
                    estacionamiento: 'car',
                    bodega: 'warehouse',
                    terraza: 'tree',
                }
            }
            constructor(projects_id) {
                this.ids = {
                    modal: 'add_reservation_modal',
                    form: 'add_reservation_form',
                    date: 'add_date',
                    rut: 'add_rut',
                    digit: 'add_digit',
                    birthdate: 'add_birthdate',
                    comuna: 'add_comuna',
                    region: 'add_region',
                    broker: 'add_broker',
                    promotion_button: 'add_promotion',
                    promotions: 'add_promotions',
                    projects: projects_id,
                    project_name: 'add_project_name',
                    unit_buttons: 'add_unit_buttons',
                    units: 'add_units',
                    loader: 'add_rut_loader'
                }
                this.setup()
            }
            load(project_id) {
                this.reset()
                this.data.current_project = project_id
                this.components.project_name.textContent = this.components.projects.querySelector(`.item[data-id="${project_id}"]`).textContent
                this.components.form.querySelector('input[name="add_project_id"]').value = project_id

                this.get.brokers(project_id)
                this.get.promotions(project_id).then(promotions => {
                    this.components.promotions.data.promotions = promotions.map(promotion => {
                        return {
                            text: promotion.description,
                            name: promotion.description,
                            value: promotion.id
                        }
                    })
                    this.components.promotions.draw.promotions()
                })
                this.get.units(project_id).then(unitTypes => {
                    Object.entries(unitTypes).map(([type, units]) => {
                        units = units.map(unit => {
                            return {
                                text: unit.descripcion,
                                name: unit.descripcion,
                                value: unit.id
                            }
                        })
                        units.sort((a, b) => {
                            return parseInt(a.text) - parseInt(b.text)
                        })
                        unitTypes[type] = units
                    })
                    this.components.units.data.types = unitTypes
                    this.components.units.draw.buttons()
                })
            }
            reset() {
                this.components.form.reset()
                this.components.promotions.reset()
                this.components.units.reset()
                this.components.payments.reset()
            }
            add() {
                const url = '/api/ventas/reservation/add'
                const form = document.getElementById(this.ids.form)
                const body = new FormData(form)
                const date = this.components.$date.calendar('get date')
                body.set('add_date', [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
                body.set('add_buyer_rut', Rut.clean(this.components.rut.querySelector('input').value))
                body.set('add_buyer_digit', this.components.digit.textContent)
                body.set('add_buyer_address_comuna_id', this.components.$comuna.dropdown('get value'))
                body.set('add_broker_rut', Rut.clean(this.components.$broker.dropdown('get value')))
                body.set('add_buyer_email', form.querySelector("input[name='add_buyer_email_name']").value + '@' + form.querySelector("input[name='add_buyer_email_domain']").value)
                const birthdate = this.components.$birthdate.calendar('get date')
                body.set('add_buyer_birthdate', [birthdate.getFullYear(), birthdate.getMonth() + 1, birthdate.getDate()].join('-'))

                if (this.components.payments.components.pie.$checkbox.checkbox('is unchecked')) {
                    body.delete('add_pie')
                    body.delete('add_cuotas')
                }
                body.delete('add_has_pie')
                if (this.components.payments.components.credit.$checkbox.checkbox('is unchecked')) {
                    body.delete('add_credit')
                }
                body.delete('add_has_credit')

                body.delete('comuna')
                body.delete('region')
                body.delete('broker')
                body.delete('add_broker')
                body.delete('birthdate')
                body.delete('add_buyer_email_name')
                body.delete('add_buyer_email_domain')

                const method = 'post'
                return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
                    if (json.success) {
                        window.location.reload()
                    }
                })
            }
            get = {
                comunas: region_id => {
                    if (region_id in this.data.comunas) {
                        this.components.$comuna.dropdown('change values', this.data.comunas[region_id])
                        if (this.data.current_user !== null && this.data.current_user?.direccion?.comuna !== null) {
                            this.components.$comuna.dropdown('set selected', this.data.current_user.direccion.comuna.id)
                        }
                        return
                    }
                    const uri = `/api/region/${region_id}/comunas`
                    return APIClient.fetch(uri).then(response => response.json()).then(json => {
                        if (json.comunas.length === 0) {
                            return
                        }
                        this.data.comunas[region_id] = json.comunas.map(comuna => {
                            return {
                                text: comuna.descripcion,
                                name: comuna.descripcion,
                                value: comuna.id
                            }
                        })
                        this.components.$comuna.dropdown('change values', this.data.comunas[region_id])

                        if (this.data.current_user !== null && this.data.current_user?.direccion?.comuna !== null) {
                            this.components.$comuna.dropdown('set selected', this.data.current_user.direccion.comuna.id)
                        }
                    })
                },
                brokers: project_id => {
                    if (project_id in this.data.brokers) {
                        return new Promise((resolve, reject) => {
                            resolve(this.data.brokers[project_id])
                        })
                    }
                    const uri = `/api/proyecto/${project_id}/brokers`
                    return 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 })
                        this.data.brokers[project_id] = json.contracts.map(contract => {
                            return {
                                id: contract.id,
                                broker_rut: contract.broker_rut,
                                commission: formatter.format(contract.commission),
                                name: '',
                                text: '',
                            }
                        })
                        const promises = []
                        json.contracts.forEach(contract => {
                            promises.push(this.get.broker(contract.broker_rut))
                        })

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

                        return this.data.units[project_id]
                    })
                },
                user: rut => {
                    if (this.data.current_user !== null && this.data.current_user?.rut === rut) {
                        return this.data.current_user
                    }
                    this.loader.show()
                    const uri = `/api/persona/${rut}`
                    return APIClient.fetch(uri).then(response => response.json()).then(json => {
                        this.loader.hide()
                        if (!json.success) {
                            return
                        }
                        this.data.current_user = json.persona
                        return json.persona
                    })
                }
            }
            fill = {
                user: user => {
                    if (typeof user === 'undefined' || user === null) {
                        return
                    }
                    const form = this.components.form
                    form.querySelector('input[name="add_buyer_name"]').value = user.nombres || ''
                    form.querySelector('input[name="add_buyer_last_name"]').value = user.apellidoPaterno || ''
                    form.querySelector('input[name="add_buyer_last_name2"]').value = user.apellidoMaterno || ''
                    form.querySelector('input[name="add_buyer_address_street"]').value = user.datos?.direccion?.calle || ''
                    form.querySelector('input[name="add_buyer_address_number"]').value = user.datos?.direccion?.numero || ''
                    form.querySelector('input[name="add_buyer_address_extra"]').value = user.datos?.direccion?.extra || ''
                    if (parseInt(this.components.$region.dropdown('get value')) !== user.datos?.direccion?.comuna?.provincia?.region?.id) {
                        this.components.$region.dropdown('set selected', user.datos?.direccion?.comuna?.provincia?.region?.id)
                    } else {
                        this.components.$comuna.dropdown('set selected', user.datos?.direccion?.comuna?.id)
                    }
                    form.querySelector('input[name="add_buyer_phone"]').value = user.datos?.telefono || ''
                    const email_parts = user.datos?.email?.split('@') || []
                    form.querySelector('input[name="add_buyer_email_name"]').value = email_parts[0] || ''
                    form.querySelector('input[name="add_buyer_email_domain"]').value = email_parts[1] || ''
                    if (user.datos !== null && 'estadoCivil' in user.datos) {
                        form.querySelector('input[name="add_buyer_marital_status"]').value = user.datos?.estadoCivil.charAt(0).toUpperCase() + user.datos?.estadoCivil.slice(1)
                    } else {
                        form.querySelector('input[name="add_buyer_marital_status"]').value = ''
                    }
                    if (user.datos !== null &&'ocupacion' in user.datos) {
                        form.querySelector('input[name="add_buyer_profession"]').value = user.datos?.ocupacion.charAt(0).toUpperCase() + user.datos?.ocupacion.slice(1).toLowerCase()
                    } else {
                        form.querySelector('input[name="add_buyer_profession"]').value = ''
                    }
                    if (user.datos !== null &&'fechaNacimiento' in user.datos) {
                        this.components.$birthdate.calendar('set date', user.datos?.fechaNacimiento)
                    }
                },
                brokers: () => {
                    this.components.$broker.dropdown('change values', this.data.brokers[this.data.current_project])
                },
                units: () => {
                    const buttons = []
                    Object.entries(this.maps.unit_types).forEach(([type, map]) => {
                        if (!(type in this.data.units[this.data.current_project])) {
                            return
                        }
                        buttons.push(`<div class="field"><div class="ui icon button" data-type="${type}" title="${type.charAt(0).toUpperCase() + type.slice(1)}"><i class="plus icon"></i><i class="${map} icon"></i></div></div>`)
                    })

                    this.components.unit_buttons.innerHTML = buttons.join('')
                    this.components.unit_buttons.querySelectorAll('.ui.icon.button').forEach(button => {
                        button.addEventListener('click', () => {
                            this.units.add(button.dataset.type)
                        })
                    })
                }
            }
            watch = {
                region: (value, text, $choice) => {
                    this.get.comunas(value)
                },
            }
            loader = {
                show: () => {
                    this.components.$loader.show()
                },
                hide: () => {
                    this.components.$loader.hide()
                }
            }
            show() {
                this.reset()
                this.components.$modal.modal('show')
            }
            setup() {
                this.components.$modal = $(`#${this.ids.modal}`)
                this.components.form = document.getElementById(this.ids.form)
                this.components.$date = $(`#${this.ids.date}`)
                this.components.rut = document.getElementById(this.ids.rut)
                this.components.digit = document.getElementById(this.ids.digit)
                this.components.$birthdate = $(`#${this.ids.birthdate}`)
                this.components.$comuna = $(`#${this.ids.comuna}`)
                this.components.$region = $(`#${this.ids.region}`)
                this.components.$broker = $(`#${this.ids.broker}`)
                this.components.promotions = new AddModalPromotions()
                this.components.projects = document.getElementById(this.ids.projects)
                this.components.project_name = document.getElementById(this.ids.project_name)
                this.components.units = new AddModalUnits(this)
                this.components.payments = new AddModalPayments()

                this.components.$modal.modal({
                    onApprove: () => {
                        this.add()
                    }
                })
                this.components.form.addEventListener('submit', event => {
                    event.preventDefault()
                    this.add()
                    return false
                })
                const cdo = structuredClone(calendar_date_options)
                cdo['initialDate'] = new Date()
                cdo['maxDate'] = new Date()
                this.components.$date.calendar(cdo)
                const rutInput = this.components.rut.querySelector('input')
                rutInput.addEventListener('input', event => {
                    const value = event.currentTarget.value.replace(/\D/g, '')
                    if (value.length <= 3) {
                        return
                    }
                    this.components.digit.textContent = Rut.digitoVerificador(value)
                })
                rutInput.addEventListener('blur', event => {
                    const value = event.currentTarget.value.replace(/\D/g, '')
                    if (value.length <= 3) {
                        return
                    }
                    event.currentTarget.value = Rut.format(value)
                    this.get.user(value).then(user => {
                        this.fill.user(user)
                    })
                })
                const cdo2 = structuredClone(cdo)
                cdo2['initialDate'].setFullYear(cdo2['initialDate'].getFullYear() - 18)
                cdo2['maxDate'].setFullYear(cdo2['maxDate'].getFullYear() - 18)
                this.components.$birthdate.calendar(cdo2)
                this.components.$region.dropdown({
                    fireOnInit: true,
                    onChange: this.watch.region
                })
                this.components.$region.dropdown('set selected', 13)
                this.components.$comuna.dropdown()
                this.components.$broker.dropdown()
                this.components.$loader = $(`#${this.ids.loader}`)
            }
        }*/
    </script>
@endpush