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

@extends('layout.base')

@section('page_title')
Editar Propietario
@endsection

@section('page_content')
<div class="ui container">
    <h2 class="ui header">Editar Propietario</h2>
    <form class="ui form" id="edit_form">
        <input type="hidden" name="venta_id" value="{{$venta_id}}" />
        <div class="two wide field">
            <label for="rut">RUT</label>
            <div class="ui right labeled input" id="rut">
                <input type="text" name="rut" value="{{number_format($propietario->rut, 0, ',', '.')}}" />
                <div class="ui basic label">-<span id="digito">{{$propietario->dv}}</span></div>
            </div>
        </div>
        <div class="fields">
            <div class="field">
                <label for="nombres">Nombre</label>
                <input type="text" name="nombres" id="nombres" value="{{trim($propietario->nombres)}}" />
            </div>
            <div class="field">
                <label for="apellido_paterno">Apellido Paterno</label>
                <input type="text" id="apellido_paterno" name="apellido_paterno" value="{{$propietario->apellidos['paterno']}}" />
            </div>
            <div class="field">
                <label for="apellido_materno">Apellido Materno</label>
                <input type="text" id="apellido_materno" name="apellido_materno" value="{{$propietario->apellidos['materno'] ?? ''}}" />
            </div>
        </div>
        <div class="fields">
            <div class="field">
                <label for="calle">Dirección</label>
                <input type="text" name="calle" id="calle" value="{'{$propietario->datos->direccion->calle}}" />
            </div>
            <div class="field">
                <label for="numero">Número</label>
                <input type="number" id="numero" size="6" name="numero" value="{{$propietario->datos->direccion->numero}}" />
            </div>
            <div class="field">
                <label for="extra">Información Adicional*</label>
                <input type="text" id="extra" name="extra" value="{{$propietario->datos->direccion->extra}}" />
            </div>
        </div>
        <div class="fields">
            <div class="field">
                <label for="region">Región</label>
                <select id="region" name="region" class="ui search selection dropdown">
                    @foreach($regiones as $region)
                        <option value="{{$region->id}}"{{($propietario->datos->direccion->comuna->provincia->region->id === $region->id) ? ' selected="selected"' : ''}}>{{$region->numeral}} {{$region->descripcion}}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label for="comunas">Comuna</label>
                <select class="ui search selection dropdown" name="comuna" id="comunas"></select>
            </div>
        </div>
        <div class="fields">
            <div class="four wide field">
                <label>Email</label>
                <input type="email" name="email" value="{{$propietario->datos?->email}}" />
            </div>
            <div class="field">
                <label>Teléfono</label>
                <input type="text" name="telefono" value="{{$propietario->datos?->telefono}}" />
            </div>
        </div>
        <button type="button" class="ui button" id="guardar_button">Guardar</button>
    </form>
</div>
@endsection

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

@push('page_scripts')
<script>
    class Propietario {
        props
        constructor({rut, digito, nombres, apellidos: {paterno, materno}, direccion: {calle, numero, extra, comuna, region}, email, telefono}) {
            this.props = {
                rut,
                digito,
                nombres,
                apellidos: {
                    paterno,
                    materno
                },
                direccion: {
                    calle,
                    numero,
                    extra,
                    comuna,
                    region
                },
                email,
                telefono
            }
        }

        update() {
            return {
                rut: rut => {
                    this.props.rut = rut
                    this.update().digito(Rut.digitoVerificador(this.props.rut))
                },
                digito: digito => {
                    this.props.digito = digito
                },
                nombres: nombres => {
                    this.props.nombres = nombres
                },
                apellidos: () => {
                    return {
                        paterno: paterno => {
                            this.props.apellidos.paterno = paterno
                        },
                        materno: materno => {
                            this.props.apellidos.materno = materno
                        }
                    }
                },
                direccion: () => {
                    return {
                        calle: calle => {
                            this.props.direccion.calle = calle
                        },
                        numero: numero => {
                            this.props.direccion.numero = numero
                        },
                        extra: extra => {
                            this.props.direccion.extra = extra
                        },
                        comuna: comuna => {
                            this.props.direccion.comuna = comuna
                        },
                        region: region => {
                            this.props.direccion.region = region
                        }
                    }
                },
                email: email => {
                    this.props.email = email
                },
                telefono: telefono => {
                    this.props.telefono = telefono
                }
            }
        }
        edit() {
            const uri = '{{$urls->api}}/venta/{{$venta_id}}/propietario/edit'
            const originales = {
                rut: '{{trim($propietario->rut)}}',
                nombres: '{{trim($propietario->nombres)}}',
                apellidos: {
                    paterno: '{{trim($propietario->apellidos['paterno'])}}',
                    materno: '{{trim($propietario->apellidos['materno'] ?? '')}}'
                },
                direccion: {
                    calle: '{{trim($propietario->datos->direccion->calle)}}',
                    numero: '{{$propietario->datos->direccion->numero}}',
                    extra: '{{trim($propietario->datos->direccion->extra)}}',
                    comuna: '{{$propietario->datos->direccion->comuna->id}}'
                },
                email: '{{trim($propietario->datos?->email)}}',
                telefono: '{{trim($propietario->datos?->telefono)}}'
            }
            const data = {}
            const collator = new Intl.Collator('es')
            Object.entries(originales).forEach(([key, value]) => {
                if (key === 'apellidos') {
                    Object.entries(value).forEach(([k, v]) => {
                        const val = this.props[key][k]
                        if (collator.compare(val, v) !== 0) {
                            data[`apellido_${k}`] = val
                        }
                    })
                    return
                }
                if (key === 'direccion') {
                    let changed = false
                    Object.entries(value).forEach(([k, v]) => {
                        const val = this.props[key][k]
                        if (collator.compare(val, v) !== 0) {
                            changed = true
                            data[k] = val
                        }
                    })
                    if (changed) {
                        Object.entries(value).forEach(([k, v]) => {
                            if (k in data) {
                                return
                            }
                            data[k] = this.props[key][k]
                        })
                    }
                    return
                }
                const val = this.props[key]
                if (collator.compare(val, value) !== 0) {
                    data[key] = val
                }
            })
            if (Object.keys(data).length === 0) {
                // No changes
                propietario.redirect()
                return
            }
            if ('rut' in data) {
                data['dv'] = Rut.digitoVerificador(data['rut'])
            }
            return fetchAPI(uri,
                {method: 'put', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
            ).then(response => {
                if (!response) {
                    return
                }
                return response.json().then(data => {
                    if (data.edited) {
                        propietario.redirect()
                    }
                })
            })
        }
    }
    class Region {
        props
        comunas

        constructor({id, descripcion, selected = false}) {
            this.props = {
                id,
                descripcion,
                selected
            }
            this.comunas = []
        }
        get() {
            return {
                comunas: () => {
                    if (this.comunas.length > 0) {
                        return new Promise(resolve => resolve())
                    }
                    const uri = '{{$urls->api}}/direcciones/region/' + this.props.id + '/comunas'
                    return fetchAPI(uri).then(response => {
                        if (!response) {
                            return
                        }
                        return response.json().then(data => {
                            if (data.total === 0) {
                                return
                            }
                            this.comunas = data.comunas.map(comuna => {
                                let selected = false
                                if (comuna.id === {{$propietario->datos->direccion->comuna->id}}) {
                                    selected = true
                                }
                                return {
                                    id: comuna.id,
                                    descripcion: comuna.descripcion,
                                    selected
                                }
                            })
                        })
                    })
                }
            }
        }
    }
    class Form {
        static submit(event) {
            event.preventDefault()
            propietario.props.data.edit()
            return false
        }
    }
    class Watcher {
        static rut() {
            const rut = $("[name='rut']")
            rut.on('input', EventHandler.rut().update)
            rut.on('blur', EventHandler.rut().change)
        }
        static nombres() {
            $("[name='nombres']").change(event => {
                propietario.props.data.update().nombres($(event.currentTarget).val())
            })
        }
        static apellidos() {
            const watched = [
                'apellido_paterno',
                'apellido_materno'
            ]
            watched.forEach(name => {
                $("[name='" + name + "']").change(event => {
                    const value = $(event.currentTarget).val()
                    const key = name.split('_')[1]
                    propietario.props.data.update().apellidos()[key](value)
                })
            })
        }
        static direccion() {
            const watched = [
                'calle',
                'numero',
                'extra'
            ]
            watched.forEach(name => {
                $("[name='" + name + "']").change(EventHandler.direccion)
            })
        }
        static region() {
            $('#region').change(EventHandler.region)
        }
        static comuna() {
            $('#comunas').change(event => {
                const comuna_id = $(event.currentTarget).val()
                propietario.props.data.update().direccion().comuna(comuna_id)
            })
        }
        static email() {
            $("[name='email']").change(event => {
                propietario.props.data.update().email(event.currentTarget.value)
            })
        }
        static telefono() {
            $("[name='telefono']").change(event => {
                propietario.props.data.update().telefono($(event.currentTarget).val())
            })
        }

        static run() {
            Watcher.rut()
            Watcher.nombres()
            Watcher.apellidos()
            Watcher.direccion()
            Watcher.region()
            Watcher.comuna()
            Watcher.email()
            Watcher.telefono()
        }
    }
    class EventHandler {
        static region(event) {
            const region_id = $(event.currentTarget).val()
            propietario.props.regiones.forEach(region => {
                region.props.selected = false
            })
            const region = propietario.props.regiones.find(region => region.props.id === region_id)
            region.props.selected = true
            region.get().comunas().then(() => {
                propietario.draw().comunas()
            })
        }
        static direccion(event) {
            const names = [
                'calle',
                'numero',
                'extra'
            ]
            const originals = [
                '{{trim($propietario->datos->direccion->calle)}}',
                '{{trim($propietario->datos->direccion->numero)}}',
                '{{trim($propietario->datos->direccion->extra)}}'
            ]
            const values = []
            names.forEach(name => {
                const val = $("[name='" + name + "']").val()
                propietario.props.data.update().direccion()[name](val)
                values.push(val)
            })
            const collator = new Intl.Collator('es')
            if (collator.compare(originals.join(' '), values.join(' ')) !== 0) {
                propietario.find().comuna(values.join(' ').trim())
            }
        }
        static rut() {
            return {
                change: event => {
                    const rut = $("[name='rut']").val().replace(/\D/g, '')
                    if (rut.length < 7) {
                        return
                    }
                    propietario.find().propietario(rut)
                },
                update: event => {
                    const input = $("[name='rut']")
                    const rut = input.val().replace(/\D/g, '')
                    propietario.props.data.update().rut(rut)
                    input.val(Rut.format(rut))
                    $('#digito').html(propietario.props.data.props.digito)
                }
            }
        }
    }

    const propietario = {
        props: {
            ids: {},
            data: {},
            regiones: [],
        },
        update() {
            return {
                propietario: () => {
                    $("[name='rut']").val(Rut.format(this.props.data.props.rut))
                    $('#digito').html(this.props.data.props.digito)
                    $("[name='nombres']").val(this.props.data.props.nombres)
                    $("[name='apellido_paterno']").val(this.props.data.props.apellidos.paterno)
                    $("[name='apellido_materno']").val(this.props.data.props.apellidos.materno)
                    $("[name='calle']").val(this.props.data.props.direccion.calle)
                    $("[name='numero']").val(this.props.data.props.direccion.numero)
                    $("[name='extra']").val(this.props.data.props.direccion.extra)
                    $('#region').val(this.props.data.props.direccion.region)
                    $("[name='email']").val(this.props.data.props.email)
                    $("[name='telefono']").val(this.props.data.props.telefono)
                    this.update().region()
                },
                region: () => {
                    this.props.regiones.forEach(region => {
                        region.props.selected = false
                    })
                    this.props.regiones.filter(region => region.props.id === this.props.data.props.direccion.region).forEach(region => {
                        region.props.selected = true
                    })
                    const promises = []
                    this.props.regiones.filter(region => region.props.selected).forEach(region => {
                        promises.push(region.get().comunas())
                    })
                    Promise.all(promises).then(() => {
                        this.draw().comunas()
                    })
                }
            }
        },
        find() {
            return {
                propietario: rut => {
                    const uri = '{{$urls->api}}/ventas/propietario/' + rut
                    return fetchAPI(uri).then(response => {
                        if (!response) {
                            this.draw().reset()
                            return
                        }
                        return response.json().then(data => {
                            if (data.propietario === null) {
                                this.draw().reset()
                                return
                            }
                            this.props.data.update().nombres(data.propietario.nombres)
                            this.props.data.update().apellidos().paterno(data.propietario.apellidos.paterno)
                            this.props.data.update().apellidos().materno(data.propietario.apellidos.materno)
                            this.props.data.update().direccion().calle(data.propietario.direccion.calle)
                            this.props.data.update().direccion().numero(data.propietario.direccion.numero)
                            this.props.data.update().direccion().extra(data.propietario.direccion.extra)
                            this.props.data.update().direccion().comuna(data.propietario.direccion.comuna.id)
                            this.props.data.update().direccion().region(data.propietario.direccion.comuna.provincia.region.id)
                            this.props.data.update().email(data.propietario.email)
                            this.props.data.update().telefono(data.propietario.telefono)
                            this.update().propietario()
                        })
                    })
                },
                comuna: direccion => {
                    const original_id = $("[name='comuna']").val()
                    const uri = '{{$urls->api}}/direcciones/comunas/find'
                    const data = {direccion}
                    return fetchAPI(uri,
                        {method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
                    ).then(response => {
                        if (!response) {
                            return
                        }
                        return response.json().then(data => {
                            if (data.total === 0) {
                                return
                            }
                            const comuna_id = data.comunas[0].id
                            if (comuna_id === original_id) {
                                return
                            }
                            const parent = $('#comunas')
                            parent.dropdown('set selected', comuna_id)
                        })
                    })
                }
            }
        },
        draw() {
            return {
                comunas: () => {
                    const parent = $(this.props.ids.comuna)
                    parent.html('')
                    const region_id = $(this.props.ids.region).val()
                    const comunas = this.props.regiones.find(region => region.props.id === region_id).comunas
                    comunas.forEach(comuna => {
                        const option = $('<option></option>')
                        option.attr('value', comuna.id).html(comuna.descripcion)
                        if (parseInt(comuna.id) === parseInt(this.props.data.props.direccion.comuna)) {
                            option.prop('selected', true)
                        }
                        parent.append(option)
                    })
                    parent.show()
                    parent.dropdown()
                },
                reset: () => {
                    $("[name='nombres']").val('')
                    $("[name='apellido_paterno']").val('')
                    $("[name='apellido_materno']").val('')
                    $("[name='calle']").val('')
                    $("[name='numero']").val('')
                    $("[name='extra']").val('')
                    $("[name='email']").val('')
                    $("[name='telefono']").val('')
                }
            }
        },
        redirect() {
            window.location = '{{$urls->base}}/venta/{{$venta_id}}'
        },
        setup({ids, propietario}) {
            this.props.ids = ids
            this.props.data = propietario

            $(this.props.ids.region).dropdown()
            $(this.props.ids.region).change(EventHandler.region)

            $(this.props.ids.comuna).hide()
            $(this.props.ids.region).find('option').each((index, element) => {
                const id = $(element).val()
                const descripcion = $(element).text()
                const selected = $(element).prop('selected')
                this.props.regiones.push(new Region({id, descripcion, selected}))
            })
            this.update().region()

            document.getElementById(this.props.ids.forms.edit.replace('#', '')).addEventListener('submit', Form.submit)
            document.getElementById(this.props.ids.buttons.guardar.replace('#', '')).addEventListener('click', Form.submit)
            Watcher.run()
        }
    }

    $(document).ready(() => {
        propietario.setup({
            ids: {
                region: '#region',
                comuna: '#comunas',
                forms: {
                    edit: '#edit_form'
                },
                buttons: {
                    guardar: '#guardar_button'
                }
            },
            propietario: new Propietario({
                rut: '{{$propietario->rut}}',
                digito: '{{$propietario->dv}}',
                nombres: '{{$propietario->nombres}}',
                apellidos: {
                    paterno: '{{$propietario->apellidos['paterno']}}',
                    materno: '{{$propietario->apellidos['materno'] ?? ''}}'
                },
                direccion: {
                    calle: '{{$propietario->datos->direccion->calle}}',
                    numero: '{{$propietario->datos->direccion->numero}}',
                    extra: '{{$propietario->datos->direccion->extra}}',
                    comuna: '{{$propietario->datos->direccion->comuna->id}}',
                    region: '{{$propietario->datos->direccion->comuna->provincia->region->id}}',
                },
                email: '{{$propietario->datos?->email}}',
                telefono: '{{$propietario->datos?->telefono}}'
            })
        })
    })
</script>
@endpush