<div class="ui modal" id="edit_broker_modal">
    <div class="header">
        Editar Operador
    </div>
    <div class="content">
        <form class="ui form" id="edit_broker_form">
            <input type="hidden" name="broker_rut" value="" />
            <div class="fields">
                <div class="field">
                    <label>Rut</label>
                    <div class="ui right labeled input">
                        <input type="text" name="rut" placeholder="Rut" value="" disabled />
                        <div class="ui basic label">-<span id="edit_digit"></span></div>
                    </div>
                </div>
            </div>
            <div class="fields">
                <div class="field">
                    <label>Nombre</label>
                    <input type="text" name="name" placeholder="Nombre" value="" />
                </div>
                <div class="six wide field">
                    <label>Razón Social</label>
                    <input type="text" name="legal_name" placeholder="Razón Social" value="" />
                </div>
            </div>
            <div class="fields">
                <div class="field">
                    <label>Contacto</label>
                    <input type="text" name="contact" placeholder="Contacto" value="" />
                </div>
            </div>
            <div class="fields">
                <div class="field">
                    <label>Correo</label>
                    <input type="email" name="email" placeholder="Correo" value="" />
                </div>
                <div class="field">
                    <label>Teléfono</label>
                    <input type="text" name="phone" placeholder="Teléfono" value="" />
                </div>
            </div>
        </form>
    </div>
    <div class="actions">
        <div class="ui black deny button">
            Cancelar
        </div>
        <div class="ui positive right labeled icon button">
            Guardar
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

@push('page_scripts')
    <script>
        class EditModal
        {
            ids
            modal
            handler
            data

            constructor(handler)
            {
                this.handler = handler
                this.ids = {
                    modal: 'edit_broker_modal',
                    form: 'edit_broker_form',
                    digit: 'edit_digit',
                }
                this.modal = $(`#${this.ids.modal}`)
                this.modal.modal({
                    onApprove: () => {
                        const form = document.getElementById(this.ids.form)
                        const broker_rut = form.querySelector('[name="broker_rut"]').value
                        const data = {
                            rut: form.querySelector('[name="rut"]').value.replace(/\D/g, ''),
                            name: form.querySelector('[name="name"]').value,
                            contact: form.querySelector('[name="contact"]').value || '',
                            legal_name: form.querySelector('[name="legal_name"]').value,
                            email: form.querySelector('[name="email"]').value || '',
                            phone: form.querySelector('[name="phone"]').value || ''
                        }
                        this.handler.execute().edit(data)
                    }
                })
                this.modal.modal('hide')
            }
            load(data) {
                this.data = data
                const form = document.getElementById(this.ids.form)
                form.querySelector('input[name="broker_rut"]').value = data.rut
                form.querySelector('input[name="rut"]').value = data.rut
                form.querySelector('input[name="name"]').value = data.name
                form.querySelector('input[name="legal_name"]').value = data.legal_name
                form.querySelector('input[name="contact"]').value = data.contact
                form.querySelector('input[name="email"]').value = data.email
                form.querySelector('input[name="phone"]').value = data.phone
                this.update().digit(data.rut)
                this.modal.modal('show')
            }
            update() {
                return {
                    digit: value => {
                        document.getElementById(this.ids.digit).textContent = Rut.digitoVerificador(value)
                    },
                }
            }
        }
    </script>
@endpush
