@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Nueva Venta</h2>
        <form class="ui form" id="add_form" method="post">
            <label for="fecha_venta">Fecha de Venta</label>
            <div class="inline field">
                <div class="ui calendar" id="fecha_venta_calendar">
                    <div class="ui icon input">
                        <input type="text" name="fecha_venta" id="fecha_venta" required />
                        <i class="calendar icon"></i>
                    </div>
                </div>
            </div>
            <h4 class="ui dividing header">PROPIETARIO</h4>
            <div class="inline fields">
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="persona_propietario" name="natural_uno" checked="checked" />
                        <label>Personal Natural</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="cantidad_propietario" name="natural_multiple" />
                        <label>Multiples Propietarios</label>
                    </div>
                </div>
            </div>
            <span id="propietario"></span>
            <h4 class="ui dividing header">PROPIEDAD</h4>
            <label for="proyecto">Proyecto</label>
            <div class="four wide field">
                <div class="ui fluid search selection dropdown" id="proyecto">
                    <input type="hidden" name="proyecto" />
                    <i class="dropdown icon"></i>
                    <div class="default text">Proyecto</div>
                    <div class="menu">
                        @foreach($proyectos as $proyecto)
                            <div class="item" data-value="{{$proyecto->id}}">{{$proyecto->descripcion}}</div>
                        @endforeach
                    </div>
                </div>
            </div>
            <button class="ui button" type="button" id="agregar_departamento" title="Agregar Departamento">
                <i class="plus icon"></i>
                <i class="building icon"></i>
                {{--Departamento--}}
            </button>
            <button class="ui button" type="button" id="agregar_estacionamiento" title="Agregar Estacionamiento">
                <i class="plus icon"></i>
                <i class="car icon"></i>
                {{--Estacionamiento--}}
            </button>
            <button class="ui button" type="button" id="agregar_bodega" title="Agregar Bodega">
                <i class="plus icon"></i>
                <i class="warehouse icon"></i>
                {{--Bodega--}}
            </button>
            <button class="ui button" type="button" id="agregar_terraza" title="Agregar Terraza">
                <i class="plus icon"></i>
                <i class="vector square icon"></i>

            </button>
            <div id="unidades" class="ui ordered list"></div>
            <h4 class="ui dividing header">FORMA DE PAGO</h4>
            <label for="valor">Valor</label>
            <div class="inline field">
                <div class="ui right labeled input">
                    <input type="text" name="valor" id="valor" required />
                    <div class="ui label">UF</div>
                </div>
            </div>
            <label for="has_pie">Pie</label>
            <div class="inline fields">
                <div class="ui checkbox">
                    <input type="checkbox" name="has_pie" id="has_pie" />
                    <label></label>
                </div>
                <span id="pie">
                    <div class="inline fields">
                        <div class="inline field">
                            <div class="ui right labeled input">
                                <input type="text" name="pie" />
                                <div class="ui label">UF</div>
                            </div>
                        </div>
                        <div class="four wide inline field">
                            <label for="cuotas">Cuotas</label>
                            <input type="text" name="cuotas" id="cuotas" />
                        </div>
                    </div>
                </span>
            </div>
            <label for="has_subsidio">Subsidio</label>
            <div class="inline fields">
                <div class="ui checkbox">
                    <input type="checkbox" name="has_subsidio" id="has_subsidio" />
                    <label></label>
                </div>
                <span id="subsidio">
                    <div class="inline fields">
                        <div class="inline field">
                            <div class="ui right labeled input">
                                <input type="text" name="subsidio" />
                                <div class="ui label">UF</div>
                            </div>
                        </div>
                        <div class="inline field">
                            <label for="ahorro">Ahorro</label>
                            <div class="ui right labeled input">
                                <input type="text" name="ahorro" id="ahorro" />
                                <div class="ui label">UF</div>
                            </div>
                        </div>
                    </div>
                </span>
            </div>
            <label for="has_credito">Crédito</label>
            <div class="inline fields">
                <div class="ui checkbox">
                    <input type="checkbox" name="has_credito" id="has_credito" />
                    <label></label>
                </div>
                <span id="credito">
                    <div class="ui right labeled input">
                        <input type="text" name="credito" />
                        <div class="ui label">UF</div>
                    </div>
                </span>
            </div>
            <h4 class="ui dividing header">OTRAS CONDICIONES</h4>
            <label for="has_bono_pie">Bono Pie</label>
            <div class="inline fields">
                <div class="ui checkbox">
                    <input type="checkbox" name="has_bono_pie" id="has_bono_pie" />
                    <label></label>
                </div>
                <span id="bono_pie">
                    <div class="ui right labeled input">
                        <input type="text" name="bono_pie" />
                        <div class="ui label">UF</div>
                    </div>
                </span>
            </div>

            <button class="ui button" type="submit">Agregar</button>
        </form>
    </div>
@endsection

@include('layout.body.scripts.rut')

@push('page_scripts')
    <script>
        const regiones = [
            @foreach ($regiones as $region)
            '<div class="item" data-value="{{$region->id}}">{{$region->numeral}} - {{$region->descripcion}}</div>',
            @endforeach
        ]

        class RutHandler {
            ids
            patterns
            valid

            constructor({id, alert_id, valid}) {
                this.ids = {
                    input: id,
                    alert: alert_id
                }
                this.patterns = {
                    like: /^(\d{0,2})\.?(\d{3})\.?(\d{3})-?(\d|k)$/gi,
                    suspicious: /^(\d)\1?\.?(\1{3})\.?(\1{3})-?(\d|k)?$/gi
                }
                this.valid = valid

                $(this.ids.alert).hide()
                $(this.ids.input).change(event => {
                    this.verify(event)
                })
            }
            is() {
                return {
                    like: rut => this.patterns.like.test(rut),
                    suspicious: rut => this.patterns.suspicious.test(rut)
                }
            }
            clean() {
                return {
                    rut: rut => rut.includes('-') || rut.includes('.') ? rut.replaceAll('-', '').replaceAll('.', '') : rut
                }
            }
            get() {
                return {
                    digits: rut => this.clean().rut(rut).slice(0, -1),
                    verifier: rut => this.clean().rut(rut).slice(-1)
                }
            }
            calculate() {
                return {
                    verifier: digits => {
                        let sum = 0
                        let mul = 2
                        let i = digits.length
                        while (i--) {
                            sum = sum + parseInt(digits.charAt(i)) * mul;
                            (mul % 7 === 0) ? mul = 2 : mul++
                        }
                        const res = sum % 11

                        switch (res) {
                            case 0:
                            case 1:
                                return res.toString()
                            default:
                                return `${11 - res}`
                        }
                    }
                }
            }
            validate(rut, not_suspicious = true) {
                if (!this.is().like(rut) || (not_suspicious && this.is().suspicious(rut))) {
                    return false
                }
                return Rut.validar(this.get().digits(rut), this.get().verifier(rut))
            }
            verify(event) {
                this.alert().valid()
                const input = $(event.currentTarget)
                const val = input.val()
                let new_val = this.clean().rut(val)
                if (new_val.length < 3) {
                    return
                }
                new_val = [this.get().digits(new_val), this.get().verifier(new_val)].join('-')
                input.val(new_val)
                if (!this.validate(new_val)) {
                    this.alert().invalid()
                    return
                }
                this.valid(new_val)
            }
            alert() {
                return {
                    valid: () => {
                        $(this.ids.alert).hide()
                    },
                    invalid: () => {
                        $(this.ids.alert).show()
                    }
                }
            }
        }
        class Comuna {
            id
            data

            constructor(id) {
                this.id = id
                this.data = {
                    region: 0,
                    provincias: []
                }

                $(this.id).dropdown({
                    forceSelection: true
                })
            }

            get() {
                return {
                    provincias: () => {
                        const uri = '{{$urls->api}}/region/' + this.data.region + '/provincias'
                        return fetchAPI(uri).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.data.provincias = data.provincias
                            const promises = []
                            this.data.provincias.forEach(provincia => {
                                promises.push(this.get().comunas(provincia.id))
                            })
                            Promise.all(promises).then(() => {
                                this.draw().comunas()
                            })
                        })
                    },
                    comunas: provincia_id => {
                        const uri = '{{$urls->api}}/provincia/' + provincia_id + '/comunas'
                        return fetchAPI(uri).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            const i = this.data.provincias.findIndex(provincia => provincia.id === data.provincia_id)
                            this.data.provincias[i].comunas = data.comunas
                        })
                    }
                }
            }
            draw() {
                return {
                    comunas: () => {
                        const dropdown = $(this.id)
                        const menu = dropdown.find('.menu')
                        menu.html('')
                        this.data.provincias.forEach(provincia => {
                            menu.append(
                                $('<div></div>').addClass('header').html(provincia.descripcion)
                            )
                            menu.append(
                                $('<div></div>').addClass('divider')
                            )
                            provincia.comunas.forEach(comuna => {
                                menu.append(
                                    $('<div></div>').addClass('item').attr('data-value', comuna.id).html(comuna.descripcion)
                                )
                            })
                        })
                        dropdown.dropdown('refresh')
                    }
                }
            }
        }
        class Region {
            id
            comuna

            constructor({id, comuna}) {
                this.id = id
                this.comuna = comuna

                const dd = $(this.id)
                dd.dropdown({
                    fireOnInit: true,
                    forceSelection: true,
                    onChange: value => {
                        this.comuna.data.region = value
                        this.comuna.get().provincias()
                    }
                })
                dd.dropdown('set selected', 13)
            }
        }
        class PersonaNatural {
            valid
            constructor({valid}) {
                this.valid = valid
            }
            draw() {
                const lines = [
                    '<label for="rut">RUT</label>',
                    '<div class="inline field">',
                        '<input type="text" id="rut" name="rut" placeholder="00000000-0" required />',
                        '<span class="ui error message" id="alert_rut">',
                            '<i class="exclamation triangle icon"></i>',
                            'RUT Inválido',
                        '</span>',
                    '</div>',
                    '<label for="nombres">Nombre</label>',
                    '<div class="inline fields">',
                        '<div class="field">',
                            '<input type="text" name="nombres" id="nombres" placeholder="Nombre(s)" required />',
                        '</div>',
                        '<div class="field">',
                            '<input type="text" name="apellido_paterno" placeholder="Apellido Paterno" required />',
                        '</div>',
                        '<div class="field">',
                            '<input type="text" name="apellido_materno" placeholder="Apellido Materno" required />',
                        '</div>',
                    '</div>',
                    '<label for="calle">Dirección</label>',
                    '<div class="inline fields">',
                        '<div class="eight wide field">',
                            '<input type="text" name="calle" id="calle" size="16" placeholder="Calle" required />',
                        '</div>',
                        '<div class="field">',
                            '<input type="text" name="numero" size="5" placeholder="Número" required />',
                        '</div>',
                        '<div class="field">',
                            '<input type="text" name="extra" placeholder="Otros Detalles" />',
                        '</div>',
                    '</div>',
                    '<div class="inline fields">',
                        '<div class="two wide field"></div>',
                        '<div class="four wide field">',
                            '<div class="ui fluid search selection dropdown" id="comuna">',
                                '<input type="hidden" name="comuna" />',
                                '<i class="dropdown icon"></i>',
                                '<div class="default text">Comuna</div>',
                                '<div class="menu"></div>',
                            '</div>',
                        '</div>',
                        '<div class="six wide field">',
                            '<div class="ui fluid search selection dropdown" id="region">',
                                '<input type="hidden" name="region" />',
                                '<i class="dropdown icon"></i>',
                                '<div class="default text">Región</div>',
                                '<div class="menu">',
                                    ...regiones,
                                '</div>',
                            '</div>',
                        '</div>',
                    '</div>',
                    '<label>Otros Datos</label>',
                    '<div class="inline fields">',
                        '<div class="four wide field">',
                            '<input type="email" name="email" placeholder="Email" />',
                        '</div>',
                        '<div class="field">',
                            '<input type="text" name="telefono" placeholder="Teléfono" />',
                        '</div>',
                    '</div>'
                ]
                return lines.join("\n")
            }
            activate() {
                new RutHandler({id: '#rut', alert_id: '#alert_rut', valid: this.valid})
                const comuna = new Comuna('#comuna')
                new Region({id: '#region', comuna})
            }
        }
        class PersonaTributaria {
            persona
            constructor({valid}) {
                this.persona = new PersonaNatural({valid})
            }
            draw() {
                const lines = [
                    '<label for="rut">RUT Sociedad</label>',
                    '<div class="inline field">',
                    '<input type="text" id="rut_sociedad" name="rut_sociedad" required />',
                    '<span class="ui error message" id="alert_rut_sociedad">',
                    '<i class="exclamation triangle icon"></i>',
                    'RUT Inválido',
                    '</span>',
                    '</div>',
                    '<label for="razon_social">Razón Social</label>',
                    '<div class="field">',
                    '<input type="text" name="razon_social" id="razon_social" required />',
                    '</div>',
                    '<label for="calle_comercial">Dirección Comercial</label>',
                    '<div class="inline fields">',
                    '<div class="eight wide field">',
                    '<input type="text" name="calle_comercial" id="calle_comercial" size="16" required />',
                    '</div>',
                    '<div class="field">',
                    '<input type="text" name="numero_comercial" size="5" required />',
                    '</div>',
                    '<div class="field">',
                    '<input type="text" name="extra_comercial" />',
                    '</div>',
                    '</div>',
                    '<div class="inline fields">',
                    '<div class="two wide field"></div>',
                    '<div class="four wide field">',
                    '<div class="ui fluid search selection dropdown" id="comuna_sociedad">',
                    '<input type="hidden" name="comuna_sociedad" />',
                    '<i class="dropdown icon"></i>',
                    '<div class="default text">Comuna</div>',
                    '<div class="menu"></div>',
                    '</div>',
                    '</div>',
                    '<div class="six wide field">',
                    '<div class="ui fluid search selection dropdown" id="region_sociedad">',
                    '<input type="hidden" name="region_sociedad" />',
                    '<i class="dropdown icon"></i>',
                    '<div class="default text">Región</div>',
                    '<div class="menu">',
                    ...regiones,
                    '</div>',
                    '</div>',
                    '</div>',
                    '</div>',
                    '<div>Representante Legal</div>',
                    '<div class="ui divider"></div>',
                    this.persona.draw()
                ]
                return lines.join("\n")
            }
            activate() {
                new RutHandler({id: '#rut_sociedad', alert_id: '#alert_rut_sociedad'})
                const comuna = new Comuna('#comuna_sociedad')
                new Region({id: '#region_sociedad', comuna})
                this.persona.activate()
            }
        }
        class MultiplesPersonas {
            persona
            constructor({valid}) {
                this.persona = new PersonaNatural({valid})
            }

            draw() {
                let lines = [
                    this.persona.draw(),
                    '<div class="ui divider"></div>',
                    '<label for="rut">RUT Otro</label>',
                    '<div class="inline field">',
                    '<input type="text" id="rut_otro" name="rut_otro" required />',
                    '<span class="ui error message" id="alert_rut_otro">',
                    '<i class="exclamation triangle icon"></i>',
                    'RUT Inválido',
                    '</span>',
                    '</div>',
                    '<label for="nombres_otro">Nombre Otro</label>',
                    '<div class="inline fields">',
                    '<div class="field">',
                    '<input type="text" name="nombres_otro" id="nombres_otro" required />',
                    '</div>',
                    '<div class="field">',
                    '<input type="text" name="apellido_paterno_otro" required />',
                    '</div>',
                    '<div class="field">',
                    '<input type="text" name="apellido_materno_otro" required />',
                    '</div>',
                    '</div>',
                    '<label for="calle_otro">Dirección Otro</label>',
                    '<div class="inline fields">',
                    '<div class="eight wide field">',
                    '<input type="text" name="calle_otro" id="calle_otro" size="16" required />',
                    '</div>',
                    '<div class="field">',
                    '<input type="text" name="numero_otro" size="5" required />',
                    '</div>',
                    '<div class="field">',
                    '<input type="text" name="extra_otro" />',
                    '</div>',
                    '</div>',
                    '<div class="inline fields">',
                    '<div class="two wide field"></div>',
                    '<div class="four wide field">',
                    '<div class="ui fluid search selection dropdown" id="comuna_otro">',
                    '<input type="hidden" name="comuna_otro" />',
                    '<i class="dropdown icon"></i>',
                    '<div class="default text">Comuna</div>',
                    '<div class="menu"></div>',
                    '</div>',
                    '</div>',
                    '<div class="six wide field">',
                    '<div class="ui fluid search selection dropdown" id="region_otro">',
                    '<input type="hidden" name="region_otro" />',
                    '<i class="dropdown icon"></i>',
                    '<div class="default text">Región</div>',
                    '<div class="menu">',
                    ...regiones,
                    '</div>',
                    '</div>',
                    '</div>',
                    '</div>',
                    '<label>Otros Datos para Otro</label>',
                    '<div class="inline fields">',
                    '<div class="four wide field">',
                    '<input type="email" name="email_otro" placeholder="Email" />',
                    '</div>',
                    '<div class="field">',
                    '<input type="text" name="telefono_otro" placeholder="Teléfono" />',
                    '</div>',
                    '</div>'
                ]
                return lines.join("\n")
            }
            activate() {
                this.persona.activate()
                new RutHandler({id: '#rut_otro', alert_id: '#alert_rut_otro'})
                const comuna = new Comuna('#comuna_otro')
                new Region({id: '#region_otro', comuna})
            }
        }
        class Propietario {
            ids

            constructor({id, id_tipo, id_cantidad}) {
                this.ids = {
                    span: id,
                    tipo: id_tipo,
                    cantidad: id_cantidad
                }

                document.getElementById(this.ids.tipo).onchange = event => {
                    const cantidad = document.getElementById(this.ids.cantidad)
                    cantidad.disabled = !event.currentTarget.checked;
                    this.draw()
                }
                document.getElementById(this.ids.cantidad).onchange = event => {
                    this.draw()
                }
                document.getElementById(this.ids.cantidad).disabled = !document.getElementById(this.ids.tipo).checked

                this.draw()

                $(this.ids.span).find('#rut')
            }
            get tipo() {
                return document.getElementById(this.ids.tipo).checked ? (document.getElementById(this.ids.cantidad).checked ? 2 : 0) : 1
            }
            get() {
                return {
                    propietario: tipo => {
                        const map = {
                            0: new PersonaNatural({valid: rut => this.fetch().propietario(rut)}),
                            1: new PersonaTributaria({valid: () => {}}),
                            2: new MultiplesPersonas({valid: () => {}})
                        }
                        return map[tipo]
                    }
                }
            }
            fetch() {
                return {
                    propietario: rut => {
                        const uri = '{{$urls->api}}/ventas/propietario/' + rut.split('-')[0]
                        return fetchAPI(uri).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            if (data.propietario !== null) {
                                const parent = $(this.ids.span)
                                parent.find("[name='nombres']").val(data.propietario.nombres)
                                parent.find("[name='apellido_paterno']").val(data.propietario.apellidos.paterno)
                                parent.find("[name='apellido_materno']").val(data.propietario.apellidos.materno)
                                parent.find("[name='calle']").val(data.propietario.direccion.calle)
                                parent.find("[name='numero']").val(data.propietario.direccion.numero)
                                parent.find("[name='extra']").val(data.propietario.direccion.extra)
                                parent.find('#region').dropdown('set selected', data.propietario.direccion.comuna.provincia.region.id)
                                parent.find('#comuna').dropdown('set selected', data.propietario.direccion.comuna.id)
                                parent.find("[name='email']").val(data.propietario.email)
                                parent.find("[name='telefono']").val(data.propietario.telefono)

                                if (data.propietario.representante !== '') {
                                    document.getElementById(this.ids.tipo).trigger('check')
                                } else {
                                    if (data.propietario.otro) {
                                        document.getElementById(this.ids.cantidad).trigger('check')
                                    }
                                }
                            }
                        })
                    }
                }
            }
            draw() {
                const propietario = this.get().propietario(this.tipo)
                $(this.ids.span).html(propietario.draw())
                propietario.activate()
            }
        }

        class Proyecto {
            ids
            data
            unidades
            added

            constructor({unidades_id, proyecto_id}) {
                this.ids = {
                    proyecto: proyecto_id,
                    unidades: unidades_id,
                    buttons: []
                }
                this.data = {id: 0}
                this.unidades = []
                this.added = []

                $(this.ids.proyecto).dropdown({
                    fireOnInit: true,
                    forceSelection: true,
                    onChange: (value, text, $choice) => {
                        this.data.id = value
                        this.ids.buttons.forEach(button => {
                            $(button).prop('disabled', true)
                        })
                        this.reset()
                        this.fetch().unidades().then(() => {
                            Object.keys(this.unidades).forEach(name => {
                                if (this.unidades[name].length > 0) {
                                    $(`#agregar_${name}`).prop('disabled', false)
                                }
                            })
                        })
                    }
                })
                const buttons = [
                    'departamento',
                    'estacionamiento',
                    'bodega',
                    'terraza'
                ]
                buttons.forEach(name => {
                    const id = `#agregar_${name}`
                    this.ids.buttons.push(id)
                    $(id).click(event => {
                        this.add(name)
                    })
                })
            }
            fetch() {
                return {
                    unidades: () => {
                        const uri = '{{$urls->api}}/proyecto/' + this.data.id + '/unidades'
                        return fetchAPI(uri).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            if (data.total === 0) {
                                return
                            }
                            this.unidades = data.unidades
                        })
                    }
                }
            }
            add(tipo) {
                const number = Math.floor(Math.random() * 1000)
                const unidad = new Unidad({number})
                this.added.push(unidad)
                $(this.ids.unidades).append(
                    $('<div></div>').addClass('item').attr('data-number', number).append(
                        $('<div></div>').addClass('content').append(tipo.charAt(0).toUpperCase() + tipo.slice(1) + ' ').append(
                            unidad.draw(this.unidades[tipo])
                        ).append(
                            $('<button></button>').addClass('ui basic red icon button').attr('type', 'button').attr('data-number', number).append(
                                $('<i></i>').addClass('remove icon')
                            ).click(event => {
                                const number = $(event.currentTarget).attr('data-number')
                                this.remove(number)
                            })
                        )
                    )
                )
            }
            remove(number) {
                number = parseInt(number)
                const index = this.added.findIndex(unidad => unidad.number === number)
                if (index === -1) {
                    return
                }
                $(this.ids.unidades).find("div.item[data-number='" + number + "']").remove()
                this.added.splice(index, 1)
            }
            reset() {
                this.added = []
                $(this.ids.unidades).html('')
            }
        }
        class Unidad{
            number
            constructor({number}) {
                this.number = number
            }

            draw(unidades) {
                const dropdown = $('<div></div>').addClass('ui search selection dropdown')
                const tipo = unidades[0].proyecto_tipo_unidad.tipo_unidad.descripcion
                dropdown.append(
                    $('<input />').attr('type', 'hidden').attr('name', 'unidad' + this.number)
                ).append(
                    $('<div></div>').addClass('default text').html(tipo.charAt(0).toUpperCase() + tipo.slice(1))
                ).append(
                    $('<i></i>').addClass('dropdown icon')
                )
                const menu = $('<div></div>').addClass('menu')
                unidades.forEach(unidad => {
                    menu.append(
                        $('<div></div>').addClass('item').attr('data-value', unidad.id).html(unidad.descripcion)
                    )
                })
                dropdown.append(menu)
                dropdown.dropdown()
                return dropdown
            }
        }

        class Payment {
            ids

            constructor({id, checkbox_id}) {
                this.ids = {
                    base: id,
                    checkbox: checkbox_id
                }

                document.getElementById(this.ids.checkbox).onchange = event => {
                    this.toggle()
                }
                this.toggle()
            }

            get status() {
                return document.getElementById(this.ids.checkbox).checked
            }
            toggle() {
                if (this.status) {
                    $(this.ids.base).show()
                    return
                }
                $(this.ids.base).hide()
            }
        }

        function showErrors(errors) {
            console.error(errors)
        }

        $(document).ready(() => {
            const cdo = structuredClone(calendar_date_options)
            cdo['maxDate'] = new Date()
            $('#fecha_venta_calendar').calendar(cdo)
            new Propietario({id: '#propietario', id_tipo: 'persona_propietario', id_cantidad: 'cantidad_propietario'})
            new Proyecto({unidades_id: '#unidades', proyecto_id: '#proyecto'})

            const payments = [
                'pie',
                'subsidio',
                'credito',
                'bono_pie'
            ]
            payments.forEach(payment => {
                new Payment({
                    id: '#' + payment,
                    checkbox_id: 'has_' + payment
                })
            })

            $('#add_form').submit(event => {
                event.preventDefault()
                const button = $(event.currentTarget).find(".ui.button[type='submit']")
                button.prop('disabled', true)
                button.css('cursor', 'wait')
                const body = new FormData(event.currentTarget)
                const unidades = event.currentTarget.querySelectorAll("[name^='unidad']")
                const emptyUnidades = []
                unidades.forEach(unidad => {
                    if (unidad.value.trim() === '') {
                        emptyUnidades.push(unidad)
                        body.delete(unidad.name)
                    }
                })
                if (unidades.length === emptyUnidades.length) {
                    alert("No hay unidades seleccionadas")
                    return;
                }
                const uri = '{{$urls->api}}/ventas/add'
                return fetchAPI(uri, {method: 'post', body}).then(response => {
                    if (!response) {
                        return false
                    }
                    return response.json().then(data => {
                        if (data.status) {
                            window.location = '{{$urls->base}}/venta/' + data.venta_id
                            return true
                        }
                        button.prop('disabled', false)
                        button.css('cursor', 'pointer')
                        showErrors(data.errors)
                        return false
                    })
                })
            })
        })
    </script>
@endpush