@include('ventas.reservations.modal.common.modal', ['prefix' => 'edit', 'modalTitle' => 'Editar Reserva', 'okText' => 'Guardar Cambios'])

@push('page_scripts')
    <script>
        class EditModalPromotions extends ModalPromotions {
            constructor() {
                super('edit');
            }
        }
        class EditModalUnits extends ModalUnits {
            constructor(parent) {
                super({prefix: 'edit', parent})
            }
        }
        class EditModalPayments extends ModalPayments {
            constructor() {
                super('edit');
            }
        }
        class EditReservationModal extends ReservationModal {
            reservation = null

            constructor(projects_id) {
                super({projects_id, prefix: 'edit', components: {
                    promotions: new EditModalPromotions(),
                    units: new EditModalUnits(),
                    payments: new EditModalPayments()
                }});
            }

            show({type, reservation_id}) {
                const reservation = reservations.components.reservations[type].reservations.find(r => r.id === parseInt(reservation_id))
                super.show()
                this.fillReservation(reservation)
            }
            reset() {
                super.reset()
                this.reservation = null
            }

            async fillReservation(reservation) {
                this.reservation = reservation
                this.components.form.querySelector(`#${this.prefix}_reservation_id`).value = reservation.id
                const date = new Date(reservation.date)
                date.setDate(date.getDate() + 1)
                this.components.$date.calendar('set date', date)
                this.components.rut.querySelector(`input[name="${this.prefix}_buyer_rut"]`).value = Rut.format(reservation.buyer.rut) || ''
                this.components.digit.textContent = reservation.buyer.digito || ''
                this.components.form.querySelector(`[name="${this.prefix}_buyer_name"]`).value = reservation.buyer.nombres || ''
                this.components.form.querySelector(`[name="${this.prefix}_buyer_last_name"]`).value = reservation.buyer.apellidoPaterno || ''
                this.components.form.querySelector(`[name="${this.prefix}_buyer_last_name2"]`).value = reservation.buyer.apellidoMaterno || ''
                if ('datos' in reservation.buyer && reservation.buyer.datos !== null) {
                    if ('direccion' in reservation.buyer.datos && reservation.buyer.datos.direccion !== null) {
                        this.components.form.querySelector(`[name="${this.prefix}_buyer_address_street"]`).value = reservation.buyer.datos.direccion.calle
                        this.components.form.querySelector(`[name="${this.prefix}_buyer_address_number"]`).value = reservation.buyer.datos.direccion.numero
                        this.components.form.querySelector(`[name="${this.prefix}_buyer_address_extra"]`).value = reservation.buyer.datos.direccion.extra
                        this.components.$region.dropdown('set selected', reservation.buyer.datos.direccion.comuna.provincia.region.id)
                        const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
                        const waitComuna = async () => {
                            await delay(500)
                            this.components.$comuna.dropdown('set selected', reservation.buyer.datos.direccion.comuna.id)
                        }
                        await waitComuna()
                    }
                    this.components.form.querySelector(`[name="${this.prefix}_buyer_phone"]`).value = reservation.buyer.datos.telefono || ''
                    if ('email' in reservation.buyer.datos && reservation.buyer.datos.email !== null && reservation.buyer.datos.email.includes('@') && reservation.buyer.datos.email.length > 1) {
                        const parts = reservation.buyer.datos.email.split('@')
                        this.components.form.querySelector(`[name="${this.prefix}_buyer_email_name"]`).value = parts[0]
                        this.components.form.querySelector(`[name="${this.prefix}_buyer_email_domain"]`).value = parts[1]
                    }
                    this.components.form.querySelector(`[name="${this.prefix}_buyer_marital_status"]`).value = reservation.buyer.datos.estadoCivil || ''
                    this.components.form.querySelector(`[name="${this.prefix}_buyer_profession"]`).value = reservation.buyer.datos.ocupacion || ''
                    if ('fechaNacimiento' in reservation.buyer.datos) {
                        const birthdate = new Date(reservation.buyer.datos.fechaNacimiento)
                        birthdate.setDate(birthdate.getDate() + 1)
                        this.components.$birthdate.calendar('set date', birthdate)
                    }
                }

                if (reservation.broker !== null) {
                    if (reservations.locks.brokers === null) {
                        await reservations.locks.brokers
                    }
                    this.components.$broker.dropdown('set selected', reservation.broker.rut)
                }
                if (reservation.promotions.length > 0) {
                    this.components.promotions.fill(reservation.promotions)
                }
                if (reservation.units.length > 0) {
                    this.components.units.fill(reservation.units)
                }
                if ('payment' in reservation && reservation.payment !== null) {
                    this.components.payments.fill(reservation.payment)
                }
            }
            edit() {
                const id = this.components.form.querySelector(`#${this.prefix}_reservation_id`).value
                const url = `/api/ventas/reservation/${id}/edit`
                const form = document.getElementById(this.ids.form)
                let body = new FormData(form)
                body.delete(`${this.prefix}_reservation_id`)
                body.delete(`${this.prefix}_project_id`)

                const date = this.components.$date.calendar('get date')
                body.set(`${this.prefix}_date`, [
                    date.getFullYear(),
                    (date.getMonth() + 1).toString().padStart(2, '0'),
                    date.getDate().toString().padStart(2, '0')].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'))
                let email = form.querySelector(`input[name='${this.prefix}_buyer_email_name']`).value + '@' + form.querySelector(`input[name='${this.prefix}_buyer_email_domain']`).value
                if (email !== '@') {
                    body.set(`${this.prefix}_buyer_email`, email)
                }
                const birthdate = this.components.$birthdate.calendar('get date')
                body.set(`${this.prefix}_buyer_birthdate`, [
                    birthdate.getFullYear(),
                    (birthdate.getMonth() + 1).toString().padStart(2, '0'),
                    birthdate.getDate().toString().padStart(2, '0')].join('-'))
                body.set(`${this.prefix}_broker_rut`, Rut.clean(this.components.$broker.dropdown('get value')))

                if (!this.components.payments.components.pie.$checkbox.is(':checked')) {
                    body.delete(`${this.prefix}_payment_pie`)
                    body.delete(`${this.prefix}_payment_cuotas`)
                }
                body.delete(`${this.prefix}_payment_has_pie`)
                if (!this.components.payments.components.credit.$checkbox.is(':checked')) {
                    body.delete(`${this.prefix}_payment_credit`)
                }
                body.delete(`${this.prefix}_payment_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 keys = body.keys().toArray()
                keys.forEach(key => {
                    if (body.get(key) === '' || body.get(key) === null) {
                        body.delete(key)
                    }
                })

                body = this.validateBody(body)
                if (body.keys().toArray().length === 0) {
                    alert('No hay cambios.')
                    return
                }

                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.edit()
                    }
                })
                this.components.form.addEventListener('submit', event => {
                    event.preventDefault()
                    this.edit()
                    return false
                })
                const idInput = document.createElement('input')
                idInput.type = 'hidden'
                idInput.id = `${this.prefix}_reservation_id`
                idInput.name = `${this.prefix}_reservation_id`
                this.components.form.appendChild(idInput)
            }
        }
    </script>
@endpush