oficial/app/resources/views/proyectos/show/edit_direccion.blade.php

<div class="ui modal" id="edit_direccion_modal">
    <div class="header">
        Editar Dirección
    </div>
    <div class="content">
        <form class="ui form" id="edit_direccion_form">
            <input type="hidden" name="id" />
            <div class="fields">
                <div class="field">
                    <label>Calle</label>
                    <input type="text" name="calle" value="{{ $proyecto->direccion()->calle }}" />
                </div>
                <div class="field">
                    <label>Número</label>
                    <input type="text" name="numero" value="{{ $proyecto->direccion()->numero }}" />
                </div>
                <div class="field">
                    <label>Extra</label>
                    <input type="text" name="extra" value="{{ $proyecto->direccion()->extra }}" />
                </div>
            </div>
            <div class="fields">
                <div class="field">
                    <label>Comuna</label>
                    <div class="ui search selection dropdown" id="comuna">
                        <input type="hidden" name="comuna" />
                        <i class="dropdown icon"></i>
                        <div class="default text">Comuna</div>
                        <div class="menu"></div>
                    </div>
                </div>
                <div class="field">
                    <label>Región</label>
                    <div class="ui search selection dropdown" id="region">
                        <input type="hidden" name="region" />
                        <i class="dropdown icon"></i>
                        <div class="default text">Región</div>
                        <div class="menu"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="actions">
        <div class="ui black deny button">
            Cancelar
        </div>
        <div class="ui green ok button">
            Guardar
        </div>
    </div>
</div>

@push('page_scripts')
    <script>
        function submitForm() {
            const form = document.getElementById('edit_direccion_form')
            const body = new FormData(form)
            const url = '{{$urls->api}}/direccion/{{ $proyecto->direccion()->id }}/edit'
            const method = 'post'
            APIClient.fetch(url, {method, body}).then(response => {
                if (response.ok) {
                    return response.json().then(json => {
                        if (json.success) {
                            window.location.reload()
                        }
                    })
                }
            })
        }
        function fetchComunas(region_id) {
            const url = `{{ $urls->api }}/region/${region_id}/comunas`
            APIClient.fetch(url).then(response => {
                if (!response.ok) {
                    return;
                }
                return response.json().then(json => {
                    const dropdown = $('#comuna')
                    const values = []
                    json.comunas.forEach(comuna => {
                        values.push({
                            name: comuna.descripcion,
                            value: comuna.id,
                            text: comuna.descripcion
                        })
                    })
                    dropdown.dropdown('change values', values)

                    if (json.region_id === {{ $proyecto->direccion()->comuna->provincia->region->id }}) {
                        dropdown.dropdown('set selected', {{ $proyecto->direccion()->comuna->id }})
                    }
                })
            })
        }
        function fetchRegiones() {
            const url = '{{ $urls->api }}/regiones'
            APIClient.fetch(url).then(response => {
                if (!response.ok) {
                    return;
                }
                return response.json().then(json => {
                    const dropdown = $('#region')
                    const values = []
                    json.regiones.forEach(region => {
                        values.push({
                            name: region.descripcion,
                            value: region.id,
                            text: region.descripcion
                        })
                    })
                    dropdown.dropdown({
                        values,
                        onChange: (value, text, $choice) => {
                            fetchComunas(value)
                        }
                    })
                    $('#comuna').dropdown()
                    dropdown.dropdown('set selected', {{ $proyecto->direccion()->comuna->provincia->region->id }})
                })
            })
        }
        $(document).ready(function() {
            fetchRegiones()
            $('#edit_direccion_modal').modal({
                onApprove: function() {
                    submitForm()
                }
            })
            document.getElementById('edit_direccion_form').addEventListener('submit', event => {
                event.preventDefault()
                submitForm()
                return false
            })
        })
    </script>
@endpush