oficial/app/resources/views/ventas/propiedades/edit.blade.php

@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">
            Editar Propiedad - {{$proyecto->descripcion}}
            <a href="{{$urls->base}}/venta/{{$venta->id}}">
                {{$propiedad->summary()}}
            </a>
        </h2>
        <table class="ui table">
            <thead>
                <tr>
                    <th>Tipo</th>
                    <th>Unidad</th>
                    <th>Valor</th>
                    <th class="right aligned">
                        <button class="ui small green circular icon button" id="add_unidad">
                            <i class="plus icon"></i>
                        </button>
                    </th>
                </tr>
            </thead>
            <tbody id="unidades">
            @foreach($propiedad->unidades as $unidad)
                <tr>
                    <td>{{ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion)}}</td>
                    <td>{{$unidad->descripcion}}</td>
                    <td>
                        <div class="ui right labeled input">
                            <input type="text" name="precio{{$unidad->pu_id}}" class="precio" data-pid="{{$unidad->pu_id}}" value="{{($unidad->valor > 0) ? $unidad->valor : $unidad->precio($venta->fecha)->valor}}" />
                            <div class="ui basic label">UF</div>
                        </div>
                    </td>
                    <td class="right aligned">
                        <button class="ui small red circular icon button remove_unidad" data-pid="{{$unidad->pu_id}}">
                            <i class="remove icon"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="ui modal" id="add_modal">
        <div class="content">
            <h3 class="header">Agregar</h3>
            <div class="ui form" id="add_form">
                <div class="field">
                    <label for="tipo">Tipo</label>
                    <select id="tipo" name="tipo" class="ui search selection dropdown">
                    @foreach ($tiposUnidades as $tipoUnidad)
                        <option value="{{$tipoUnidad->id}}">{{ucwords($tipoUnidad->descripcion)}}</option>
                    @endforeach
                    </select>
                </div>
                <div class="field">
                    <label for="unidad">Unidad</label>
                    <select id="unidad" name="unidad" class="ui search selection dropdown" size="4"></select>
                </div>
                <button class="ui button">Agregar</button>
            </div>
        </div>
    </div>
@endsection

@push('page_scripts')
    <script type="text/javascript">
        const propiedad = {
            unidades: [
                @foreach($propiedad->unidades as $unidad)
                {
                    id: {{$unidad->id}},
                    tipo: '{{ucwords($unidad->proyectoTipoUnidad->tipoUnidad->descripcion)}}',
                    descripcion: '{{$unidad->descripcion}}',
                    pid: {{$unidad->pu_id}},
                    valor: {{($unidad->valor > 0) ? $unidad->valor : $unidad->precio($venta->fecha)->valor}}
                },
                @endforeach
            ],
            tipos: {
                @foreach($tiposUnidades as $tipoUnidad)
                        {{$tipoUnidad->id}}: [
                        @foreach($unidades as $unidad)
                        @if ($unidad->proyectoTipoUnidad->tipoUnidad->id === $tipoUnidad->id)
                    {
                        value: {{$unidad->id}},
                        text: '{{$unidad->descripcion}}',
                        name: '{{$unidad->descripcion}}'
                    },
                    @endif
                    @endforeach
                ],
                @endforeach
            },
            changeTipoUnidad: function(tipo_unidad_id) {
                $('#unidad').dropdown('change values', this.tipos[tipo_unidad_id].sort((a, b) => a.text.padStart(4, '0').localeCompare(b.text.padStart(4, '0'))))
            },
            addUnidad: function() {
                $('#add_modal').modal('show')
            },
            removeUnidad: function(unidad_id) {
                console.debug(unidad_id)
            },
            updatePrecio: function(pid, valor) {
                const idx = this.unidades.findIndex(unidad => unidad.pid === pid)
                if (idx === -1) {
                    return
                }
                const old_value = this.unidades[idx].valor
                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].valor = parseFloat(json.input.valor)
                    this.draw()
                })
            },
            draw: function() {
                const tbody = $('#unidades')
                tbody.html('')
                this.unidades.forEach(unidad => {
                    const row = $('<tr></tr>').append(
                        $('<td></td>').html(unidad.tipo)
                    ).append(
                        $('<td></td>').html(unidad.descripcion)
                    ).append(
                        $('<td></td>').append(
                            $('<div></div>').addClass('ui right labeled input').append(
                                $('<input />').addClass('precio').attr('type', 'text').attr('data-pid', unidad.pid).attr('value', unidad.valor)
                            ).append(
                                $('<div></div>').addClass('ui basic label').html('UF')
                            )
                        )
                    ).append(
                        $('<td></td>').addClass('right aligned').append(
                            $('<button></button>').addClass('ui small red circular icon button remove_unidad').attr('data-pid', unidad.pid).append(
                                $('<i></i>').addClass('remove icon')
                            )
                        )
                    )
                    tbody.append(row)
                })
                $('.price').change(event => {
                    const pid = $(event.currentTarget).data('pid')
                    const val = $(event.currentTarget).val()
                    this.updatePrecio(pid, val)
                })
                $('.remove_unidad').click(event => {
                    const unidad_id = $(event.currentTarget).data('pid')
                    this.removeUnidad(unidad_id)
                })
            },
            setup: function() {
                $('#add_unidad').click(event => {
                    this.addUnidad()
                })
                $('.remove_unidad').click(event => {
                    const unidad_id = $(event.currentTarget).data('pid')
                    this.removeUnidad(unidad_id)
                })
                $('#add_modal').modal()
                const tipo = $('#tipo')
                tipo.dropdown()
                tipo.change(event => {
                    this.changeTipoUnidad(tipo.val())
                })
                $('#unidad').dropdown()
                this.changeTipoUnidad(tipo.val())
                $('#add_form').submit(event => {
                    event.preventDefault()
                    tipo.model('hide')
                    return false
                })
                $('.precio').change(event => {
                    const pid = $(event.currentTarget).data('pid')
                    const val = $(event.currentTarget).val()
                    this.updatePrecio(pid, val)
                })
            }
        }
        $(document).ready(() => {
            propiedad.setup()
        })
    </script>
@endpush