<div class="ui modal" id="add_modal">
    <div class="header">Agregar Proveedor</div>
    <div class="content">
        <form class="ui form" id="add_form">
            <div class="three wide field">
                <label for="rut">RUT</label>
                <div class="ui right labeled input">
                    <input class="right aligned" type="text" id="rut" name="rut" placeholder="RUT" maxlength="10"
                           required/>
                    <div class="ui basic label">-<span id="dv"></span></div>
                </div>
            </div>
            <div class="five wide field">
                <label for="nombre">Nombre</label>
                <input type="text" id="nombre" name="nombre" placeholder="Nombre" required/>
            </div>
            <div class="field">
                <label for="razon">Razón Social</label>
                <input type="text" id="razon" name="razon" placeholder="Razón Social" required/>
            </div>
            <div class="ui divider">Contacto</div>
            <div class="three wide field">
                <label for="rut_contacto">RUT</label>
                <div class="ui right labeled input">
                    <input type="text" id="rut_contacto" name="rut_contacto" placeholder="RUT" maxlength="10"/>
                    <div class="ui basic label">-<span id="dv_contacto"></span></div>
                </div>
            </div>
            <div class="fields">
                <div class="five wide field">
                    <label for="nombre_contacto">Nombre</label>
                    <input type="text" id="nombre_contacto" name="nombre_contacto" placeholder="Nombre" />
                </div>
                <div class="field">
                    <label for="apellido_paterno_contacto">Apellido Paterno</label>
                    <input type="text" id="apellido_paterno_contacto" name="apellido_paterno_contacto"
                           placeholder="Apellido Paterno"/>
                </div>
                <div class="field">
                    <label for="apellido_materno_contacto">Apellido Materno</label>
                    <input type="text" id="apellido_materno_contacto" name="apellido_materno_contacto"
                           placeholder="Apellido Materno"/>
                </div>
            </div>
            <div class="field">
                <label for="email_contacto">Email</label>
                <input type="email" id="email_contacto" name="email_contacto" placeholder="Email"/>
            </div>
            <div class="field">
                <label for="telefono_contacto">Teléfono</label>
                <div class="ui left labeled input">
                    <div class="ui basic label">+56</div>
                    <input type="text" id="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 AddModal {
            props

            constructor(props, formatters) {
                this.props = props
                this.setup(formatters)
            }
            show() {
                $(this.props.modal).modal('show')
            }
            add() {
                const form = document.getElementById(this.props.form)
                const 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/add'
                const method = 'post'
                APIClient.fetch(url, {method, body})
                    .then(response => (response) ? response.json() : null)
                    .then(data => {
                        if (data.success.filter(s => s).length > 0) {
                            window.location.reload()
                        }
                    })
            }
            setup(formatters) {
                $(this.props.modal).modal({
                    onApprove: () => {
                        this.add()
                    }
                })

                const form = document.getElementById(this.props.form)
                form.querySelector(this.props.rut).addEventListener('input', (e) => {
                    e.currentTarget.value = formatters.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 = formatters.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 = formatters.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 = formatters.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 = formatters.telefono(e.currentTarget.value)
                })
                if (form.querySelector(this.props.contacto.telefono).value.length > 0) {
                    form.querySelector(this.props.contacto.telefono).value = formatters.telefono(form.querySelector(this.props.contacto.telefono).value)
                }
            }
        }
    </script>
@endpush
