@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">
            Facturación -
            <a href="{{$urls->base}}/proyecto/{{$venta->proyecto()->id}}">
                {{$venta->proyecto()->descripcion}}<span class="ui tiny text"><sub><i
                                class="search icon"></i></sub></span>
            </a>
            -
            <a href="{{$urls->base}}/venta/{{$venta->id}}">
                {{$venta->propiedad()->summary()}}
            </a>
        </h2>
        <div class="ui grid">
            <div class="three wide column">
                <div class="ui very segment">
                    Valor Venta: {{$format->ufs($venta->valor)}}
                </div>
            </div>
        </div>
        <form id="venta_form" class="ui form">
            <div class="fields">
                @foreach ($venta->propiedad()->unidades as $unidad)
                    <div class="three wide field">
                        <label for="precio{{$unidad->pu_id}}">Precio<br /> {{ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion)}} {{$unidad->descripcion}}</label>
                        <div class="ui right labeled input" id="input{{$unidad->pu_id}}">
                            <input class="price" type="text" name="precio{{$unidad->pu_id}}" id="precio{{$unidad->pu_id}}" data-id="{{$unidad->pu_id}}" value="{{($unidad->valor > 0) ? $unidad->valor : $unidad->precio($venta->currentEstado()->fecha)->valor}}" />
                            <div class="ui basic label">UF</div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="fields">
                @foreach($venta->propiedad()->unidades as $unidad)
                    <div class="three wide field">
                    @if ($unidad->prorrateo === 0.0)
                        <label for="prorrateo{{$unidad->id}}">Prorrateo<br /> {{ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion)}} {{$unidad->descripcion}}</label>
                        <div class="ui right labeled input" id="prorrateo{{$unidad->id}}">
                            <input class="prorrateo" type="text" data-id="{{$unidad->id}}" value="{{$unidad->prorrateo}}" />
                            <div class="ui basic label">%</div>
                        </div>
                    @endif
                    </div>
                @endforeach
            </div>
            <div class="ui very basic segment" id="total_unidades"></div>
            @php $lastDic = new DateTimeImmutable((new DateTimeImmutable())->sub(new DateInterval('P1Y'))->format('Y-12-31')); @endphp
            @if (!isset($terreno->fecha) or $terreno->fecha->getTimestamp() < 0 or $terreno->fecha < $lastDic)
                <div class="four wide field">
                    <label for="terreno">Valor Terreno al {{$lastDic->format('d-m-Y')}}</label>
                    <div class="ui left labeled input">
                        <div class="ui basic label">$</div>
                        <input type="number" id="terreno" />
                    </div>
                </div>
            @endif
            <div class="two wide field">
                <label for="propietarios">Propietarios</label>
                <input type="number" name="cantidad_propietarios" id="cantidad_propietarios" min="1" value="1" />
            </div>
            <div id="propietarios">
                <div class="fields" data-index="1">
                    <div class="two wide field">
                        <label for="proporcion1">Proporción Factura</label>
                        <div class="ui right labeled input">
                            <input type="number" name="proporcion1" id="proporcion1" value="100" max="100" min="0"/>
                            <div class="ui basic icon label">
                                <i class="percent icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="three wide field">
                        <label for="rut1">RUT</label>
                        <div class="ui input">
                            <input type="text" name="rut1" id="rut1" value="{{$venta->propietario()->rut()}}" />
                        </div>
                    </div>
                    <div class="five wide field">
                        <label for="propietario1">Propietario</label>
                        <div class="ui input">
                            <input type="text" name="propietario1" id="propietario1" value="{{$venta->propietario()->nombreCompleto()}}" />
                        </div>
                    </div>
                    <div class="six wide field">
                        <label for="direccion_propietario1">Dirección</label>
                        <div class="ui input">
                            <input type="text" name="direccion_propietario1" id="direccion_propietario1" value="{{$venta->propietario()->datos->direccion->simple()}}" />
                        </div>
                    </div>
                    <div class="two wide field">
                        <label for="comuna_propietario1">Comuna</label>
                        <input type="text" name="comuna_propietario1" id="comuna_propietario1" value="{{$venta->propietario()->datos->direccion->comuna->descripcion}}" />
                    </div>
                </div>
            </div>
            <div id="propietarios" class="fields"></div>
        </form>
        @if ($venta->currentEstado()->fecha->sub(new DateInterval('P1M')) > $venta->proyecto()->terreno->fecha
            and $IPC->get($venta->proyecto()->terreno->fecha, $venta->currentEstado()->fecha->sub(new DateInterval('P1M'))) === 0.0)
            <div class="ui compact icon error message">
                <i class="exclamation triangle icon"></i>
                <div class="content">
                    IPC no disponible para este mes.
                </div>
            </div>
        @endif
        <div id="facturas"></div>
        {{--<div id="factura">
            <div class="ui compact grid">
                <div class="two columns row">
                    <div class="twelve wide column">
                        <strong>
                            {{mb_strtoupper($venta->proyecto()->inmobiliaria()->nombreCompleto())}}
                        </strong><br/>
                        GIRO: <br/>
                        Dirección: {{$venta->proyecto()->direccion()->simple()}}
                    </div>
                    <div class="four wide column">
                        <div class="ui center aligned red segment">
                            <strong>
                                RUT: {{$venta->proyecto()->inmobiliaria()->rut()}}<br/>
                                FACTURA ELECTRÓNICA<br/>
                                N° #
                            </strong>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <table class="ui table">
                        <tr>
                            <td class="grey"><strong>Señor(es)</strong></td>
                            <td>{{$venta->propietario()->nombreCompleto()}}</td>
                            <td class="grey"><strong>RUT</strong></td>
                            <td>{{$venta->propietario()->rut()}}</td>
                        </tr>
                        <tr>
                            <td class="grey"><strong>Giro</strong></td>
                            <td>Otras Actividades Profesionales</td>
                            <td class="grey"><strong>Fecha Emisión</strong></td>
                            <td>{{(new IntlDateFormatter('es-CL', IntlDateFormatter::LONG, IntlDateFormatter::NONE))->format($venta->currentEstado()->fecha)}}</td>
                        </tr>
                        <tr>
                            <td class="grey"><strong>Dirección</strong></td>
                            <td>{{$venta->propietario()->datos->direccion->simple()}}</td>
                            <td class="grey"><strong>Comuna</strong></td>
                            <td>{{mb_strtoupper($venta->propietario()->datos->direccion->comuna->descripcion)}}</td>
                        </tr>
                    </table>
                </div>
                <div class="row">
                    <table class="ui celled table">
                        <thead>
                            <tr class="grey">
                                <th class="center aligned" colspan="6">DETALLES</th>
                            </tr>
                            <tr class="grey">
                                <th>N°</th>
                                <th class="center aligned">Descripción</th>
                                <th class="center aligned">Cant/Unidad</th>
                                <th class="center aligned">Prec. Unit.</th>
                                <th class="center aligned">Ind</th>
                                <th class="center aligned">Total</th>
                            </tr>
                        </thead>
                        <tbody id="unidades"></tbody>
                        <tfoot>
                            <tr>
                                <td colspan="6">
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <div class="row">
                    <div class="ten wide column"></div>
                    <div class="six wide column">
                        <table class="ui celled very compact table">
                            <thead>
                            <tr>
                                <th class="center aligned grey" colspan="2">TOTALES</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="grey">Monto Neto</td>
                                <td class="right aligned" id="neto"></td>
                            </tr>
                            <tr>
                                <td class="grey">Monto Exento</td>
                                <td class="right aligned" id="exento"></td>
                            </tr>
                            <tr>
                                <td class="grey">19% IVA</td>
                                <td class="right aligned" id="iva"></td>
                            </tr>
                            <tr>
                                <td class="grey">Monto Total</td>
                                <td class="right aligned"><strong id="total"></strong></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>--}}
@endsection

@push('page_scripts')
    <script>
        class Factura
        {
            props

            constructor(props) {
                this.props = props
            }

            draw({parentDiv, inmobiliaria, proyecto, propietario, unidades, venta, estadoVenta, uf, formatters = {date, pesos, ufs, percent}}) {
                const output = [
                    '<div class="ui divider"></div>'+
                    '<div class="factura">'+
                    '<div class="ui compact grid">'+
                    '<div class="two columns row">'+
                    '<div class="twelve wide column">'+
                    '<strong>'+inmobiliaria.nombre+'</strong><br/>'+
                    'GIRO: <br/>'+
                    'Dirección:'+proyecto.direccion+
                    '</div>'+
                    '<div class="four wide column">'+
                    '<div class="ui center aligned red segment">'+
                    '<strong>'+
                    'RUT:'+inmobiliaria.rut+'<br/>'+
                    'FACTURA ELECTRÓNICA<br/>'+
                    'N° #'+
                    '</strong>'+
                    '</div>'+
                    '</div>'+
                    '</div>'+
                    '<div class="row">'+
                    '<table class="ui table">'+
                    '<tr>'+
                    '<td class="grey"><strong>Señor(es)</strong></td>'+
                    '<td>'+propietario.nombre+'</td>'+
                    '<td class="grey"><strong>RUT</strong></td>'+
                    '<td>'+propietario.rut+'</td>'+
                    '</tr>'+
                    '<tr>'+
                    '<td class="grey"><strong>Giro</strong></td>'+
                    '<td>Otras Actividades Profesionales</td>'+
                    '<td class="grey"><strong>Fecha Emisión</strong></td>'+
                    '<td>'+formatters.date.format(estadoVenta.fecha)+'</td>'+
                    '</tr>'+
                    '<tr>'+
                    '<td class="grey"><strong>Dirección</strong></td>'+
                    '<td>'+propietario.direccion+'</td>'+
                    '<td class="grey"><strong>Comuna</strong></td>'+
                    '<td>'+propietario.comuna.toUpperCase()+'</td>'+
                    '</tr>'+
                    '</table>'+
                    '</div>'+
                    '<div class="row">'+
                    '<table class="ui celled table">'+
                    '<thead>'+
                    '<tr class="grey">'+
                    '<th class="center aligned" colspan="6">DETALLES</th>'+
                    '</tr>'+
                    '<tr class="grey">'+
                    '<th>N°</th>'+
                    '<th class="center aligned">Descripción</th>'+
                    '<th class="center aligned">Cant/Unidad</th>'+
                    '<th class="center aligned">Prec. Unit.</th>'+
                    '<th class="center aligned">Ind</th>'+
                    '<th class="center aligned">Total</th>'+
                    '</tr>'+
                    '</thead>'
                ]
                const unidadesData = []

                let c = 1
                const classes = [
                    '',
                    '',
                    'center aligned',
                    'right aligned',
                    'center aligned',
                    'right aligned'
                ]
                unidades.forEach(unidad => {
                    const descuento = parseFloat(proyecto.terreno) * parseFloat(unidad.prorrateo)
                    const bruto = parseFloat(unidad.base)  - descuento
                    const neto = bruto / 1.19
                    const data = [
                        c ++,
                        unidad.descripcion + ' (UF ' + formatters.ufs.format(unidad.precio * this.props.proporcion) + ')',
                        '1 UNID',
                        formatters.pesos.format(neto * this.props.proporcion),
                        'AF',
                        formatters.pesos.format(neto * this.props.proporcion)
                    ]

                    const row = ['<tr>']
                    data.forEach((value, i) => {
                        const cell = ['<td']
                        if (classes[i] !== '') {
                            cell.push(' class="'+classes[i]+'"')
                        }
                        cell.push('>'+value+'</td>')
                        row.push(cell.join(''))
                    })
                    row.push('</tr>')
                    unidadesData.push(row.join(''))
                })

                const emptyTerreno = '<div class="ui tiny red horizontal circular label">0</div>'
                const data = [
                    c,
                    'Valor con Terreno ' + formatters.pesos.format((venta.base + venta.terreno) * this.props.proporcion) + ' - Menos valor terreno ' + ((venta.terreno > 0) ? formatters.pesos.format(-venta.terreno * this.props.proporcion) : emptyTerreno) + '<br />' +
                        'Base imponible ' + formatters.pesos.format(venta.base * this.props.proporcion) + '<br />' +
                        'IVA ' + formatters.pesos.format(venta.iva * this.props.proporcion) + '<br />' +
                        'SUBTOTAL ' + formatters.pesos.format(venta.subtotal * this.props.proporcion) + '<br />' +
                        'Mas valor terreno ' + ((venta.terreno > 0) ? formatters.pesos.format(venta.terreno * this.props.proporcion) : emptyTerreno) + '<br />' +
                        'TOTAL ' + formatters.pesos.format(venta.total * this.props.proporcion) + ';' + formatters.ufs.format(venta.totalUF * this.props.proporcion) + ' UF<br /><br />' +
                        'Descuento Terreno: ' + ((venta.terreno > 0) ? formatters.percent.format(venta.prorrateo * 100) : emptyTerreno) + '%<br /><br />' +
                        'UF: ' + formatters.ufs.format(uf),
                    '1 UNID',
                    formatters.pesos.format(venta.terreno * this.props.proporcion),
                    'EX',
                    formatters.pesos.format(venta.terreno * this.props.proporcion)
                ]

                const row = ['<tr class="top aligned">']
                data.forEach((value, i) => {
                    const cell = ['<td']
                    if (classes[i] !== '') {
                        cell.push(' class="'+classes[i]+'"')
                    }
                    cell.push('>'+value+'</td>')
                    row.push(cell.join(''))
                })
                unidadesData.push(row.join(''))

                output.push('<tbody id="unidades">'+unidadesData.join('')+'</tbody>')
                output.push(
                    '<tfoot>'+
                    '<tr>'+
                    '<td colspan="6">'+
                    '<br />'+
                    '<br />'+
                    '<br />'+
                    '<br />'+
                    '</td>'+
                    '</tr>'+
                    '</tfoot>'+
                    '</table>'+
                    '</div>'+
                    '<div class="row">'+
                    '<div class="ten wide column"></div>'+
                    '<div class="six wide column">'+
                    '<table class="ui celled very compact table">'+
                    '<thead>'+
                    '<tr>'+
                    '<th class="center aligned grey" colspan="2">TOTALES</th>'+
                    '</tr>'+
                    '</thead>'+
                    '<tbody>'+
                    '<tr>'+
                    '<td class="grey">Monto Neto</td>'+
                    '<td class="right aligned" id="neto">'+formatters.pesos.format(venta.base * this.props.proporcion)+'</td>'+
                    '</tr>'+
                    '<tr>'+
                    '<td class="grey">Monto Exento</td>'+
                    '<td class="right aligned" id="exento">'+formatters.pesos.format(venta.terreno * this.props.proporcion)+'</td>'+
                    '</tr>'+
                    '<tr>'+
                    '<td class="grey">19% IVA</td>'+
                    '<td class="right aligned" id="iva">'+formatters.pesos.format(venta.iva * this.props.proporcion)+'</td>'+
                    '</tr>'+
                    '<tr>'+
                    '<td class="grey">Monto Total</td>'+
                    '<td class="right aligned"><strong id="total">'+formatters.pesos.format(venta.total * this.props.proporcion)+'</strong></td>'+
                    '</tr>'+
                    '</tbody>'+
                    '</table>'+
                    '</div>'+
                    '</div>'+
                    '</div>'+
                    '</div>'
                )
                parentDiv.append(output.join(''))
            }
        }
        const facturasForm = {
            props: {
                ids: {
                    facturas: '',
                    propietarios: ''
                }
            },
            inmobiliaria: {
                rut: '{{$venta->proyecto()->inmobiliaria()->rut()}}',
                nombre: '{{mb_strtoupper($venta->proyecto()->inmobiliaria()->nombreCompleto())}}'
            },
            proyecto: {
                direccion: '{{$venta->proyecto()->direccion()->simple()}}',
                terreno: {{(isset($terreno->fecha) and $terreno->fecha >= $lastDic) ?
                    $IPC->readjust($terreno->valor, $terreno->fecha, $venta->currentEstado()->fecha) : 0}},
            },
            estadoVenta: {
                fecha: new Date('{{$venta->currentEstado()->fecha->format('Y-m-d')}}')
            },
            precio: {{$UF->transform($venta->currentEstado()->fecha, $venta->valor)}},
            uf: {{$UF->get($venta->currentEstado()->fecha)}},
            unidades: JSON.parse('{!! json_encode(array_map(function(Incoviba\Model\Venta\PropiedadUnidad $unidad) use ($venta, $UF, $format) {
                    $precio = ($unidad->valor > 0) ? $unidad->valor : ($unidad->precio($venta->currentEstado()->fecha) ? $unidad->precio($venta->currentEstado()->fecha)->valor : 0);
                    return [
                        'id' => $unidad->id,
                        'pid' => $unidad->pu_id,
                        'descripcion' => ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion) . ' ' . $unidad->descripcion,
                        'precio' => $precio,
                        'base' => $UF->transform($venta->currentEstado()->fecha, $precio),
                        'prorrateo' => $unidad->prorrateo,
                    ];
                }, $venta->propiedad()->unidades)) !!}'),
            venta: {
                base: 0,
                precio: 0,
                descuento: 0,
                prorrateo: 0,
                bruto: 0,
                iva: 0,
                neto: 0,
                subtotal: 0,
                total: 0,
                totalUF: 0
            },
            propietarios: [
                {
                    rut: '{{$venta->propietario()->rut()}}',
                    nombre: '{{$venta->propietario()->nombreCompleto()}}',
                    direccion: '{{$venta->propietario()->datos->direccion->simple()}}',
                    comuna: '{{$venta->propietario()->datos->direccion->comuna->descripcion}}'
                }
            ],
            facturas: [],
            draw() {
                return {
                    propietarios: () => {
                        const proporcion = (100 / this.propietarios.length).toFixed()
                        const parent = $(this.props.ids.propietarios)
                        parent.html('')
                        this.propietarios.forEach((propietario, idx) => {
                            parent.append(
                                '<div class="fields" data-index="'+(idx+1)+'">' +
                                    '<div class="two wide field">'+
                                        '<label for="proporcion'+(idx+1)+'">Proporción Factura</label>'+
                                        '<div class="ui right labeled input">'+
                                            '<input type="number" class="proporcion" name="proporcion'+(idx+1)+'" id="proporcion'+(idx+1)+'" value="'+proporcion+'" max="100" min="0"/>'+
                                            '<div class="ui basic icon label">'+
                                                '<i class="percent icon"></i>'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="three wide field">'+
                                        '<label for="rut'+(idx+1)+'">RUT</label>'+
                                        '<div class="ui input">'+
                                            '<input type="text" name="rut'+(idx+1)+'" id="rut'+(idx+1)+'" value="'+propietario.rut+'" />'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="five wide field">'+
                                        '<label for="propietario'+(idx+1)+'">Propietario</label>'+
                                        '<div class="ui input">'+
                                            '<input type="text" name="propietario'+(idx+1)+'" id="propietario'+(idx+1)+'" value="'+propietario.nombre+'" />'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="six wide field">'+
                                        '<label for="direccion_propietario'+(idx+1)+'">Dirección</label>'+
                                        '<div class="ui input">'+
                                            '<input type="text" name="direccion_propietario'+(idx+1)+'" id="direccion_propietario'+(idx+1)+'" value="'+propietario.direccion+'" />'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="two wide field">'+
                                        '<label for="comuna_propietario'+(idx+1)+'">Comuna</label>'+
                                        '<input type="text" name="comuna_propietario'+(idx+1)+'" id="comuna_propietario'+(idx+1)+'" value="'+propietario.comuna+'" />'+
                                    '</div>' +
                                '</div>')
                            const inputs = {
                                proporcion: 'proporciones',
                                rut: 'rut',
                                propietario: 'propietario',
                                direccion_propietario: 'direccion',
                                comuna_propietario: 'comuna'
                            }
                            Object.entries(inputs).forEach(([name, method]) => {
                                $("[name='"+name+(idx+1)+"']").change(event => {
                                    this.update()[method](idx)
                                    this.update().facturas()
                                })
                            })
                        })
                    }
                }
            },
            update: function() {
                return {
                    price: (id, value) => {
                        this.unhighlight()
                        const idx = this.unidades.findIndex(unidad => unidad.pid === id)
                        if (idx === -1) {
                            return
                        }
                        const old_value = parseFloat(this.unidades[idx].precio)
                        if (old_value === parseFloat(value)) {
                            return
                        }
                        const url = '{{$urls->api}}/ventas/propiedades/unidad/' + id + '/edit'
                        const data = new FormData()
                        data.set('valor', value)
                        return fetchAPI(url, {method: 'post', body: data}).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(json => {
                            if (!json.edited) {
                                return
                            }
                            const idx = this.unidades.findIndex(unidad => unidad.pid === json.propiedad_unidad_id)
                            this.unidades[idx].precio = parseFloat(json.input.valor)
                            this.unidades[idx].base = parseFloat(json.input.valor) * parseFloat(this.unidades[idx].base) / old_value
                        })
                    },
                    terreno: value => {
                        const url = '{{$urls->api}}/proyecto/{{$venta->proyecto()->id}}/terreno/edit'
                        const data = new FormData()
                        data.set('valor', value)
                        data.set('fecha', '{{$lastDic->format('Y-m-d')}}')
                        return fetchAPI(url, {method: 'post', body: data}).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(json => {
                            if (!json.edited) {
                                return
                            }
                            this.terreno = parseInt(json.input.valor)
                            const data = new FormData()
                            data.set('start', '{{$lastDic->format('Y-m-d')}}')
                            data.set('end', '{{$venta->currentEstado()->fecha->sub(new DateInterval('P1M'))->format('Y-m-d')}}')
                            const url = '{{$urls->api}}/money/ipc'
                            return fetchAPI(url, {method: 'post', body: data}).then(response => {
                                if (response.ok) {
                                    return response.json()
                                }
                            }).then(json => {
                                this.terreno *= (1 + parseFloat(json.ipc))
                                this.update().unidades()
                            })
                        })
                    },
                    prorrateo: (id, value) => {
                        if (parseFloat(value) === 0) {
                            return
                        }
                        const url = '{{$urls->api}}/ventas/unidad/' + id + '/prorrateo'
                        const data = new FormData()
                        data.set('prorrateo', value)
                        return fetchAPI(url, {method: 'post', body: data}).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(json => {
                            if (!json.edited) {
                                return
                            }
                            const idx = this.unidades.findIndex(unidad => unidad.id === json.unidad_id)
                            this.unidades[idx].prorrateo = parseFloat(json.input.prorrateo)
                        })
                    },
                    propietarios: value => {
                        if (value < this.propietarios.length) {
                            for (let i = value; i < this.propietarios.length; i ++) {
                                this.propietarios.splice(i, 1)
                                if (i in this.facturas.keys()) {
                                    this.facturas[i].splice(i, 1)
                                }
                            }
                            return
                        }
                        for (let i = this.propietarios.length; i < value; i ++) {
                            const propietario = {
                                rut: '',
                                nombre: '',
                                direccion: '',
                                comuna: ''
                            }
                            this.propietarios.push(propietario)
                            if (!(i in this.facturas.keys())) {
                                this.facturas.push(new Factura({propietario, proporcion: 0}))
                            }
                        }
                    },
                    proporciones: idx => {
                        const proporcion = $("[name='proporcion"+(idx+1)+"']")
                        const proporciones = $('.proporcion')
                        const total = proporciones.toArray().reduce((sum, input) => sum + parseInt($(input).val()), 0)
                        if (total <= 100) {
                            this.facturas[idx].props.proporcion = parseInt(proporcion.val()) / 100
                            return
                        }
                        const otros = proporciones.toArray().filter(input => input.name !== 'proporcion' + (idx+1)).reduce((sum, input) => sum + parseInt($(input).val()), 0)
                        proporcion.val(100 - otros)
                        this.facturas[idx].props.proporcion = parseInt(proporcion.val()) / 100
                    },
                    rut: idx => {
                        this.propietarios[idx].rut = $("[name='rut"+(idx+1)+"']").val()
                    },
                    propietario: idx => {
                        this.propietarios[idx].nombre = $("[name='propietario"+(idx+1)+"']").val()
                    },
                    direccion: idx => {
                        this.propietarios[idx].direccion = $("[name='direccion"+(idx+1)+"']").val()
                    },
                    comuna: idx => {
                        this.propietarios[idx].comuna = $("[name='comuna"+(idx+1)+"']").val()
                    },
                    unidades: () => {
                        const ufFormatter = new Intl.NumberFormat('es-CL', {maximumFractionDigits: 2, minimumFractionDigits: 2})
                        let totalUnidades = 0
                        let precioUnidades = 0
                        let terreno = 0
                        let prorrateo = 0
                        this.unidades.forEach(unidad => {
                            totalUnidades += parseFloat(unidad.base)
                            precioUnidades += parseFloat(unidad.precio)
                            terreno += parseFloat(this.proyecto.terreno) * parseFloat(unidad.prorrateo)
                            prorrateo += parseFloat(unidad.prorrateo)
                        })

                        $('#total_unidades')
                            .attr('class', 'ui compact segment ' + ((totalUnidades.toFixed(2) !== this.precio.toFixed(2)) ? 'inverted red' : 'inverted green'))
                            .html('Total Unidades: ' + ufFormatter.format(precioUnidades) + ' UF' +
                                ((totalUnidades.toFixed(2) !== this.precio.toFixed(2)) ? '; Diferencia: ' + ufFormatter.format({{$venta->valor}} - precioUnidades) + ' UF' : ''))
                        if (totalUnidades.toFixed(2) !== this.precio.toFixed(2)) {
                            this.highlight()
                        }
                        this.venta.base = totalUnidades
                        this.venta.precio = precioUnidades
                        this.venta.terreno = terreno
                        this.venta.prorrateo = prorrateo
                        this.venta.bruto = this.venta.base - this.venta.terreno
                        this.venta.neto = this.venta.bruto / 1.19
                        this.venta.iva = this.venta.neto * 0.19
                        this.venta.subtotal = this.venta.base + this.venta.iva
                        this.venta.total = this.venta.subtotal + this.venta.terreno
                        this.venta.totalUF = this.venta.total / this.uf
                    },
                    facturas: () => {
                        const facturas = $(this.props.ids.facturas)
                        facturas.html('')
                        this.facturas.forEach((factura, idx) => {
                            factura.draw({
                                parentDiv: facturas,
                                inmobiliaria: this.inmobiliaria,
                                proyecto: this.proyecto,
                                propietario: this.propietarios[idx],
                                unidades: this.unidades,
                                venta: this.venta,
                                estadoVenta: this.estadoVenta,
                                uf: this.uf,
                                formatters: {
                                    date: new Intl.DateTimeFormat('es-CL', {day:'2-digit',month:'2-digit',year:'numeric'}),
                                    pesos: new Intl.NumberFormat('es-CL', {maximumFractionDigits: 0, minimumFractionDigits: 0}),
                                    ufs: new Intl.NumberFormat('es-CL', {maximumFractionDigits: 2, minimumFractionDigits: 2}),
                                    percent: new Intl.NumberFormat('es-CL', {maximumFractionDigits: 5, minimumFractionDigits: 5})
                                }
                            })
                        })
                    }
                }
            },
            watch: function() {
                return {
                    prices: class_name => {
                        $(class_name).change(event => {
                            const val = $(event.currentTarget).val()
                            const id = $(event.currentTarget).data('id')
                            this.update().price(id, val).then(() => {
                                this.update().unidades()
                            })
                        })
                    },
                    prorrateo: class_name => {
                        $(class_name).change(event => {
                            const val = $(event.currentTarget).val()
                            const id = $(event.currentTarget).data('id')
                            this.update().prorrateo(id, val).then(() => {
                                this.update().unidades()
                            })
                        })
                    },
                    terreno: id => {
                        $(id).change(event => {
                            const val = $(event.currentTarget).val()
                            this.update().terreno(val).then(() => {
                                $(id).parent().parent().hide()
                                this.update().unidades()
                            })
                        })
                    },
                    propietarios: id => {
                        $(id).change(event => {
                            let val = $(event.currentTarget).val()
                            if (val < 1) {
                                $(event.currentTarget).val(1)
                                val = 1
                            }
                            this.update().propietarios(val)
                            this.draw().propietarios()
                        })
                    }
                }
            },
            highlight: function() {
                const pid = this.unidades[0].pid
                const input = $('#input' + pid)
                input.addClass('error')
                input.find('.label').addClass('red')
                input.attr('data-content', 'Valor total no es igual a valor de venta')
                input.popup()
            },
            unhighlight: function() {
                const pid = this.unidades[0].pid
                const input = $('#input' + pid)
                input.removeClass('error')
                input.find('.label').removeClass('red')
                input.removeAttr('data-content')
            },
            setup: function({form_id, prices_class, prorrateo_class, terreno_id, propietarios_id, count_propietarios_id, facturas_id}) {
                this.props.ids.facturas = facturas_id
                this.props.ids.propietarios = propietarios_id
                $(form_id).submit(event => {
                    event.preventDefault()
                    return false
                })
                this.watch().prices(prices_class)
                this.watch().prorrateo(prorrateo_class)
                this.watch().propietarios(count_propietarios_id)
                @if (!isset($terreno->fecha) or $terreno->fecha->getTimestamp() < 0 or $terreno->fecha <= $lastDic)
                    this.watch().terreno(terreno_id)
                @endif
                this.facturas.push(new Factura({propietario: this.propietarios[0], proporcion: 1}))
                this.update().unidades()
                this.update().propietarios($(count_propietarios_id).val())
                this.draw().propietarios()
                this.unidades.forEach((unidad, idx) => {
                    this.update().proporciones(idx)
                })
                this.update().facturas()
            }
        }
        $(document).ready(() => {
            facturasForm.setup({form_id: '#venta_form', prices_class: '.price', prorrateo_class: '.prorrateo', terreno_id: '#terreno', propietarios_id: '#propietarios', count_propietarios_id: '#cantidad_propietarios', facturas_id: '#facturas'})
        })
    </script>
@endpush