@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="field">
            <label for="rut">RUT</label>
            {{$propietario->rut()}}
        </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>
        <button class="ui button" id="guardar_button">Guardar</button>
    </form>
</div>
@endsection

@push('page_scripts')
<script type="text/javascript">
    function drawComunas({parent, comunas}) {
        parent.html('')
        comunas.forEach(comuna => {
            const option = $('<option></option>')
            option.attr('value', comuna.id).html(comuna.descripcion)
            if (comuna.id === {{$propietario->datos->direccion->comuna->id}}) {
                option.prop('selected', true)
            }
            parent.append(option)
        })
        parent.show()
        parent.dropdown()
    }
    function findComunas(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.ok) {
                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)
        })
    }
    function getComunas(region_id) {
        const parent = $('#comunas')
        parent.hide()
        const uri = '{{$urls->api}}/direcciones/region/' + region_id + '/comunas'
        return fetchAPI(uri).then(response => {
            if (response.ok) {
                return response.json()
            }
        }).then(data => {
            if (data.total === 0) {
                return
            }
            drawComunas({parent, comunas: data.comunas})
        })
    }
    function redirect() {
        window.location = '{{$urls->base}}/venta/{{$venta_id}}'
    }
    function changeDireccion() {
        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()
            values.push(val)
        })
        const collator = new Intl.Collator('es')
        if (collator.compare(originals.join(' '), values.join(' ')) !== 0) {
            findComunas(values.join(' ').trim())
        }
    }
    function watchChangeDireccion() {
        const watched = [
            'calle',
            'numero',
            'extra'
        ]
        watched.forEach(name => {
            $("[name='" + name + "']").change(event => {
                changeDireccion()
            })
        })
    }
    function editPropietario() {
        const uri = '{{$urls->api}}/ventas/propietario/{{$propietario->rut}}'
        const names = [
            'nombres',
            'apellido_paterno',
            'apellido_materno'
        ]
        const values = [
            '{{trim($propietario->nombres)}}',
            '{{trim($propietario->apellidos['paterno'])}}',
            '{{trim($propietario->apellidos['materno'])}}'
        ]
        const direccion_names = [
            'calle',
            'numero',
            'extra',
            'comuna'
        ]
        const direccion_values = [
            '{{trim($propietario->datos->direccion->calle)}}',
            '{{$propietario->datos->direccion->numero}}',
            '{{trim($propietario->datos->direccion->extra)}}',
            '{{$propietario->datos->direccion->comuna->id}}'
        ]
        const data = {}
        const collator = new Intl.Collator('es')
        names.forEach((name, index) => {
            const val = $("[name='" + name + "']").val()
            if (collator.compare(val, values[index]) !== 0) {
                console.debug(name, val, values[index], collator.compare(val, values[index]))
                data[name] = val
            }
        })
        direccion_names.forEach((name, index) => {
            const val = $("[name='" + name + "']").val()
            if (collator.compare(val, direccion_values[index]) !== 0) {
                if (typeof data['direccion'] === 'undefined') {
                    data['direccion'] = {}
                }
                console.debug(name, val, direccion_values[index])
                data['direccion'][name] = val
            }
        })
        if (Object.keys(data).length === 0) {
            redirect()
            return
        }
        return fetchAPI(uri,
            {method: 'put', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
        ).then(response => {
            if (response.ok) {
                redirect()
            }
        })
    }
    $(document).ready(() => {
        const regiones = $("select[name='region']")
        regiones.dropdown()
        regiones.change(event => {
            const region_id = $(event.currentTarget).val()
            getComunas(region_id)
        })
        $('#comunas').hide()
        getComunas({{$propietario->datos->direccion->comuna->provincia->region->id}})
        $('#edit_form').submit(event => {
            event.preventDefault()
            editPropietario({{$propietario->rut}})
            return false
        })
        $('#guardar_button').click(event => {
            editPropietario({{$propietario->rut}})
        })
        watchChangeDireccion()
    })
</script>
@endpush