<div class="ui modal" id="edit_modal">
    <div class="header">Editar Proveedor <span class="proveedor"></span></div>
    <div class="content">
        <form class="ui form" id="edit_form">
            <div class="three wide field">
                <label for="edit_rut">RUT</label>
                <div class="ui right labeled input">
                    <input class="right aligned" type="text" id="edit_rut" name="rut" placeholder="RUT" maxlength="10"
                           required/>
                    <div class="ui basic label">-<span id="edit_digito"></span></div>
                </div>
            </div>
            <div class="five wide field">
                <label for="edit_nombre">Nombre</label>
                <input type="text" id="edit_nombre" name="nombre" placeholder="Nombre" required/>
            </div>
            <div class="field">
                <label for="edit_razon">Razón Social</label>
                <input type="text" id="edit_razon" name="razon" placeholder="Razón Social" required/>
            </div>
            <div class="ui divider">Contacto</div>
            <div class="three wide field">
                <label for="edit_rut_contacto">RUT</label>
                <div class="ui right labeled input">
                    <input type="text" id="edit_rut_contacto" name="rut_contacto" placeholder="RUT" maxlength="10" />
                    <div class="ui basic label">-<span id="edit_digito_contacto"></span></div>
                </div>
            </div>
            <div class="fields">
                <div class="five wide field">
                    <label for="edit_nombre_contacto">Nombre</label>
                    <input type="text" id="edit_nombre_contacto" name="nombre_contacto" placeholder="Nombre" />
                </div>
                <div class="field">
                    <label for="edit_apellido_paterno_contacto">Apellido Paterno</label>
                    <input type="text" id="edit_apellido_paterno_contacto" name="apellido_paterno_contacto"
                           placeholder="Apellido Paterno" />
                </div>
                <div class="field">
                    <label for="edit_apellido_materno_contacto">Apellido Materno</label>
                    <input type="text" id="edit_apellido_materno_contacto" name="apellido_materno_contacto"
                           placeholder="Apellido Materno" />
                </div>
            </div>
            <div class="field">
                <label for="edit_email_contacto">Email</label>
                <input type="email" id="edit_email_contacto" name="email_contacto" placeholder="Email"/>
            </div>
            <div class="field">
                <label for="edit_telefono_contacto">Teléfono</label>
                <div class="ui left labeled input">
                    <div class="ui basic label">+56</div>
                    <input type="text" id="edit_telefono_contacto" name="telefono_contacto" placeholder="Teléfono"/>
                </div>
            </div>
        </form>
    </div>
    <div class="actions">
        <button class="ui green approve button">Guardar</button>
    </div>
</div>

@push('page_scripts')
    <script>
        class EditModal {
            props
            data
            constructor(props, formatter) {
                this.props = props
                this.setup(formatter)
            }
            show(id) {
                return this.load(id).then(() => {
                    $(this.props.modal).find('.proveedor').html(this.data.nombre)
                    const form = document.getElementById(this.props.form)
                    form.querySelector(this.props.rut).value = this.data.rut
                    form.querySelector(this.props.digito).textContent = Rut.digitoVerificador(this.data.rut)
                    form.querySelector(this.props.nombre).value = this.data.nombre
                    form.querySelector(this.props.razon).value = this.data.razon
                    form.querySelector(this.props.contacto.rut).value = (this.data.contacto) ? this.data.contacto.rut : ''
                    form.querySelector(this.props.contacto.digito).textContent = (this.data.contact) ? Rut.digitoVerificador(this.data.contacto.rut) : ''
                    form.querySelector(this.props.contacto.nombres).value = (this.data.contact) ? this.data.contacto.nombres : ''
                    form.querySelector(this.props.contacto.apellido_paterno).value = (this.data.contact) ? this.data.contacto.apellidoPaterno : ''
                    form.querySelector(this.props.contacto.apellido_materno).value = (this.data.contact) ? this.data.contacto.apellidoMaterno : ''
                    form.querySelector(this.props.contacto.email).value = (this.data.contact) ? this.data.contacto.datos.email : ''
                    form.querySelector(this.props.contacto.telefono).value = (this.data.contact) ? this.data.contacto.datos.telefono : ''

                    $(this.props.modal).modal('show')
                })
            }
            load(id) {
                const url = `{{$urls->api}}/inmobiliarias/proveedor/${id}`
                return APIClient.fetch(url).then(response => response.json()).then(json => {
                    this.data = json.proveedor
                })
            }
            edit() {
                const form = document.getElementById(this.props.form)
                let data = {
                    rut: form.querySelector(this.props.rut).value.replace(/\D/g, ''),
                    digito: form.querySelector(this.props.digito).textContent,
                    nombre: form.querySelector(this.props.nombre).value,
                    razon: form.querySelector(this.props.razon).value,
                    contacto: {
                        rut: form.querySelector(this.props.contacto.rut).value.replace(/\D/g, ''),
                        digito: form.querySelector(this.props.contacto.digito).textContent,
                        nombres: form.querySelector(this.props.contacto.nombres).value,
                        apellido_paterno: form.querySelector(this.props.contacto.apellido_paterno).value,
                        apellido_materno: form.querySelector(this.props.contacto.apellido_materno).value,
                        email: form.querySelector(this.props.contacto.email).value,
                        telefono: form.querySelector(this.props.contacto.telefono).value.replace(/\D/g, ''),
                    }
                }
                const body = new FormData()
                body.append('proveedores[]', JSON.stringify(data))
                const url = '{{$urls->api}}/inmobiliarias/proveedores/edit'
                const method = 'post'
                return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
                    if (json.success.filter(s => s).length > 0) {
                        window.location.reload()
                    }
                })
            }
            setup(formatter) {
                $(this.props.modal).modal({
                    onApprove: () => {
                        this.edit()
                    }
                })

                const form = document.getElementById(this.props.form)
                form.querySelector(this.props.rut).addEventListener('input', (e) => {
                    e.currentTarget.value = formatter.rut(e.currentTarget.value)
                    form.querySelector(this.props.digito).textContent = Rut.digitoVerificador(e.currentTarget.value)
                })
                if (form.querySelector(this.props.rut).value.length > 0) {
                    form.querySelector(this.props.rut).value = formatter.rut(form.querySelector(this.props.rut).value)
                    form.querySelector(this.props.digito).textContent = Rut.digitoVerificador(form.querySelector(this.props.rut).value)
                }
                form.querySelector(this.props.contacto.rut).addEventListener('input', (e) => {
                    e.currentTarget.value = formatter.rut(e.currentTarget.value)
                    form.querySelector(this.props.contacto.digito).textContent = Rut.digitoVerificador(e.currentTarget.value)
                })
                if (form.querySelector(this.props.contacto.rut).value.length > 0) {
                    form.querySelector(this.props.contacto.rut).value = formatter.rut(form.querySelector(this.props.contacto.rut).value)
                    form.querySelector(this.props.contacto.digito).textContent = Rut.digitoVerificador(form.querySelector(this.props.contacto.rut).value)
                }
                form.querySelector(this.props.contacto.telefono).addEventListener('input', (e) => {
                    e.currentTarget.value = formatter.telefono(e.currentTarget.value)
                })
                if (form.querySelector(this.props.contacto.telefono).value.length > 0) {
                    form.querySelector(this.props.contacto.telefono).value = formatter.telefono(form.querySelector(this.props.contacto.telefono).value)
                }
            }
        }
    </script>
@endpush
