@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>
        <form id="venta_form" class="ui form">
            <div class="two wide field">
                <label for="proporcion">Proporción Factura</label>
                <div class="ui right labeled input">
                    <input type="number" name="proporcion" id="proporcion" value="100" max="100" min="0"/>
                    <div class="ui basic icon label">
                        <i class="percent icon"></i>
                    </div>
                </div>
            </div>
            <div class="fields">
                @foreach ($venta->propiedad()->unidades as $unidad)
                    <div class="three wide field">
                        <label for="precio{{$unidad->pu_id}}">Precio {{ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion)}} {{$unidad->descripcion}}</label>
                        <div class="ui right labeled input">
                            <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>
        </form>
        <div class="ui divider"></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:
                    </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>
        const factura = {
            id: '#unidades',
            totales: {},
            proporcion: 1,
            precio: {{$UF->transform($venta->currentEstado()->fecha, $venta->valor)}},
            terreno: {{$IPC->readjust($venta->proyecto()->terreno->valor, $venta->proyecto()->terreno->date, $venta->currentEstado()->fecha)}},
            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;
                    return [
                        'pu_id' => $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)) !!}'),
            build: function() {
                const tbody = $(this.id)
                tbody.html('')
                const pesoFormatter = new Intl.NumberFormat('es-CL', {maximumFractionDigits: 0, minimumFractionDigits: 0})
                const ufFormatter = new Intl.NumberFormat('es-CL', {maximumFractionDigits: 2, minimumFractionDigits: 2})
                const percentFormatter = new Intl.NumberFormat('es-CL', {maximumFractionDigits: 5, minimumFractionDigits: 5})
                let terreno = 0
                let c = 1
                const classes = [
                    '',
                    '',
                    'center aligned',
                    'right aligned',
                    'center aligned',
                    'right aligned'
                ]
                this.unidades.forEach(unidad => {
                    const descuento = this.terreno * unidad.prorrateo
                    terreno += descuento
                    const bruto = unidad.base  - descuento
                    const neto = bruto / 1.19
                    const data = [
                        c ++,
                        unidad.descripcion + ' (UF ' + ufFormatter.format(unidad.precio * this.proporcion) + ')',
                        '1 UNID',
                        pesoFormatter.format(neto * this.proporcion),
                        'AF',
                        pesoFormatter.format(neto * this.proporcion)
                    ]

                    const row = $('<tr></tr')
                    data.forEach((value, i) => {
                        const cell = $('<td></td>')
                        if (classes[i] !== '') {
                            cell.addClass(classes[i])
                        }
                        cell.html(value)
                        row.append(cell)
                    })
                    tbody.append(row)
                })
                const bruto = this.precio - terreno
                const base = bruto / 1.19
                const iva = base * .19
                const subtotal = base + iva
                const total = subtotal + terreno
                const totalUF = total / this.uf
                const descuento = terreno / base

                const data = [
                    c,
                    'Valor con Terreno ' + pesoFormatter.format((base + terreno) * this.proporcion) + ' - Menos valor terreno ' + pesoFormatter.format(-terreno * this.proporcion) + '<br />' +
                        'Base imponible ' + pesoFormatter.format(base * this.proporcion) + '<br />' +
                        'IVA ' + pesoFormatter.format(iva * this.proporcion) + '<br />' +
                        'SUBTOTAL ' + pesoFormatter.format(subtotal * this.proporcion) + '<br />' +
                        'Mas valor terreno ' + pesoFormatter.format(terreno * this.proporcion) + '<br />' +
                        'TOTAL ' + pesoFormatter.format(total * this.proporcion) + ';' + ufFormatter.format(totalUF * this.proporcion) + ' UF<br /><br />' +
                        'Descuento Terreno: ' + percentFormatter.format(descuento) + '%<br /><br />' +
                        'UF: ' + ufFormatter.format(this.uf),
                    '1 UNID',
                    pesoFormatter.format(terreno * this.proporcion),
                    'EX',
                    pesoFormatter.format(terreno * this.proporcion)
                ]
                const row = $('<tr></tr>').addClass('top aligned')
                data.forEach((value, i) => {
                    const cell = $('<td></td>')
                    if (classes[i] !== '') {
                        cell.addClass(classes[i])
                    }
                    cell.html(value)
                    row.append(cell)
                })
                tbody.append(row)

                $(this.totales.afecto).html(pesoFormatter.format(base * this.proporcion))
                $(this.totales.exento).html(pesoFormatter.format(terreno * this.proporcion))
                $(this.totales.iva).html(pesoFormatter.format(iva * this.proporcion))
                $(this.totales.total).html(pesoFormatter.format(total * this.proporcion))
            },
            update: function() {
                return {
                    price: (id, value) => {
                        const idx = this.unidades.findIndex(unidad => unidad.pu_id === id)
                        const old_value = 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.pu_id === json.propiedad_unidad_id)
                            this.unidades[idx].precio = parseInt(json.input.valor)
                            this.unidades[idx].base = parseFloat(json.input.valor * this.unidades[idx].base / old_value)
                            this.build()
                        })
                    }
                }
            },
            watch: function() {
                return {
                    proporcion: id => {
                        $(id).change(event => {
                            const val = $(event.currentTarget).val()
                            if (val / 100 === this.proporcion) {
                                return
                            }
                            this.proporcion = val / 100
                            this.build()
                        })
                    },
                    prices: (class_name) => {
                        $(class_name).change(event => {
                            const val = $(event.currentTarget).val()
                            const id = $(event.currentTarget).data('id')
                            this.update().price(id, val)
                        })
                    }
                }
            },
            setup: function({form_id, tbody_id, input_id, prices_class, totales_ids}) {
                $(form_id).submit(event => {
                    event.preventDefault()
                    return false
                })
                this.id = tbody_id
                this.totales = totales_ids
                this.proporcion = $(input_id).val() / 100
                this.watch().proporcion(input_id)
                this.watch().prices(prices_class)
                this.build()
            }
        }
        $(document).ready(() => {
            factura.setup({form_id: '#venta_form', tbody_id: '#unidades', input_id: '#proporcion',
                prices_class: '.price', totales_ids: {
                    afecto: '#neto',
                    exento: '#exento',
                    iva: '#iva',
                    total: '#total'
                }})
        })
    </script>
@endpush