<div class="ui modal" id="add_broker_modal">
    <div class="header">
        Agregar Operador
    </div>
    <div class="content">
        <form class="ui form" id="add_broker_form">
            <div class="fields">
                <div class="field">
                    <label>RUT</label>
                    <div class="ui right labeled input">
                        <input type="text" name="rut" placeholder="RUT" maxlength="10" required />
                        <div class="ui basic label">-<span id="digit"></span></div>
                    </div>
                </div>
            </div>
            <div class="fields">
                <div class="field">
                    <label>Nombre</label>
                    <input type="text" name="name" placeholder="Nombre" required />
                </div>
                <div class="six wide field">
                    <label>Razón Social</label>
                    <input type="text" name="legal_name" placeholder="Razón Social" required />
                </div>
            </div>
            <div class="fields">
                <div class="field">
                    <label>Contacto</label>
                    <input type="text" name="contact" placeholder="Contacto" />
                </div>
            </div>
            <div class="fields">
                <div class="field">
                    <label>Correo</label>
                    <input type="email" name="email" placeholder="Correo" />
                </div>
                <div class="field">
                    <label>Teléfono</label>
                    <input type="text" name="phone" placeholder="Teléfono" />
                </div>
            </div>
        </form>
    </div>
    <div class="actions">
        <div class="ui deny button">
            Cancelar
        </div>
        <div class="ui positive right labeled icon button">
            Agregar
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

@include('layout.body.scripts.rut')

@push('page_scripts')
    <script>
        class AddModal {
            ids
            modal
            handler
            constructor(handler) {
                this.handler = handler
                this.ids = {
                    modal: 'add_broker_modal',
                    form: 'add_broker_form',
                    digit: 'digit'
                }
                this.modal = $(`#${this.ids.modal}`)
                this.modal.modal({
                    onApprove: () => {
                        const form = document.getElementById(this.ids.form)
                        const data = {
                            rut: form.querySelector('[name="rut"]').value.replace(/\D/g, ''),
                            digit: Rut.digitoVerificador(form.querySelector('[name="rut"]').value),
                            name: form.querySelector('[name="name"]').value,
                            legal_name: form.querySelector('[name="legal_name"]').value,
                            contact: form.querySelector('[name="contact"]').value || '',
                            email: form.querySelector('[name="email"]').value || '',
                            phone: form.querySelector('[name="phone"]').value || ''
                        }
                        this.handler.execute().add(data)
                    }
                })
                this.modal.modal('hide')
                const value = document.querySelector(`#${this.ids.form} input[name="rut"]`).value
                this.update().digit(value)
                this.watch().rut()
            }
            update() {
                return {
                    digit: value => {
                        if (value.length > 3) {
                            document.getElementById(this.ids.digit).textContent = Rut.digitoVerificador(value)
                        }
                    }
                }
            }
            watch() {
                return {
                    rut: () => {
                        document.querySelector(`#${this.ids.form} input[name="rut"]`).addEventListener('input', event => {
                            const value = event.currentTarget.value
                            this.update().digit(value)
                        })
                    }
                }
            }
            show() {
                this.modal.modal('show')
            }
        }
    </script>
@endpush
