@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <table class="ui table">
            <thead>
            <tr>
                <th>Nombre</th>
                <th>Contacto</th>
                <th class="right aligned">
                    <button class="ui green icon button" id="add_button">
                        <i class="plus icon"></i>
                    </button>
                </th>
            </tr>
            </thead>
            <tbody id="proveedores">
            @foreach ($proveedores as $proveedor)
                <tr>
                    <td>{{$proveedor->nombre}}</td>
                    <td>{{$proveedor->contacto->nombreCompleto()}}</td>
                    <td class="right aligned">
                        <button class="ui icon button" data-sociedad="{{$proveedor->rut}}">
                            <i class="edit icon"></i>
                        </button>
                        <button class="ui red icon button" data-sociedad="{{$proveedor->rut}}">
                            <i class="remove icon"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="ui modal" id="add_modal">
        <div class="content">
            <form class="ui 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"
                               required/>
                        <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" required/>
                    </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" required/>
                    </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>
@endsection

@push('page_scripts')
    <script>
        const proveedores = {
            ids: {
                modal: '',
                buttons: {
                    add: '',
                    edit: '',
                    remove: ''
                },
                add: {
                    form: '',
                    rut: '',
                    dv: '',
                    nombre: '',
                    razon: '',
                    tipo: '',
                    contacto: {
                        rut: '',
                        dv: '',
                        nombre: '',
                        apellido_paterno: '',
                        apellido_materno: '',
                        email: '',
                        telefono: ''
                    }
                },
                proveedores: ''
            },
            data: JSON.parse('{!! json_encode($proveedores) !!}'),
            add() {
                return {
                    sociedad: () => {
                        const data = {
                            rut: $(this.ids.add.rut).val().replace(/\D/g, ''),
                            digito: $(this.ids.add.dv).text(),
                            nombre: $(this.ids.add.nombre).val(),
                            razon: $(this.ids.add.razon).val(),
                            tipo_sociedad_id: $(this.ids.add.tipo).dropdown('get value'),
                            contacto: {
                                rut: $(this.ids.add.contacto.rut).val().replace(/\D/g, ''),
                                digito: $(this.ids.add.contacto.dv).text(),
                                nombres: $(this.ids.add.contacto.nombre).val(),
                                apellido_paterno: $(this.ids.add.contacto.apellido_paterno).val(),
                                apellido_materno: $(this.ids.add.contacto.apellido_materno).val(),
                                email: $(this.ids.add.contacto.email).val(),
                                telefono: $(this.ids.add.contacto.telefono).val().replace(/\D/g, ''),
                            }
                        }
                        const body = new FormData()
                        body.append('sociedades[]', JSON.stringify(data))
                        const url = '{{$urls->api}}/sociedades/add'
                        const method = 'post'
                        fetchAPI(url, {method, body})
                            .then(response => (response) ? response.json() : null)
                            .then(data => {
                                if (data.sociedades !== null) {
                                    data.sociedades.forEach(sociedad => {
                                        const exists = this.data.find(s => s.rut === sociedad.rut)
                                        if (typeof exists !== 'undefined') {
                                            return
                                        }
                                        this.data.push(sociedad)
                                    })
                                    this.draw().sociedades()
                                    $(this.ids.modal).find('form.form').trigger('reset')
                                }
                            })
                    }
                }
            },
            edit() {
            },
            remove() {
                return {
                    sociedad: rut => {
                        const body = new FormData()
                        body.append('sociedades_ruts[]', rut)
                        const url = '{{$urls->api}}/sociedades/delete'
                        const method = 'post'
                        fetchAPI(url, {method, body})
                            .then(response => (response) ? response.json() : null)
                            .then(data => {
                                if (data.sociedades !== null) {
                                    data.sociedades.forEach(sociedad => {
                                        if (sociedad.sociedad.rut !== rut) {
                                            return
                                        }
                                        if (!sociedad.deleted) {
                                            return
                                        }
                                        $(this.ids.proveedores).find(`button[data-sociedad="${rut}"]`).closest('tr').remove()
                                    })
                                }
                            })

                    }
                }
            },
            draw() {
                return {
                    sociedades: () => {
                        $(this.ids.proveedores).empty()
                        this.data.forEach(sociedad => {
                            $(this.ids.proveedores).append(`
                            <tr>
                                <td>${sociedad.nombre}</td>
                                <td>${sociedad.contacto.nombreCompleto}</td>
                                <td class="right aligned">
                                    <button class="ui icon button" data-sociedad="${sociedad.rut}">
                                        <i class="edit icon"></i>
                                    </button>
                                    <button class="ui red icon button" data-sociedad="${sociedad.rut}">
                                        <i class="remove icon"></i>
                                    </button>
                                </td>
                            </tr>
                            `)
                        })
                        $(this.ids.buttons.remove).click((e) => {
                            this.remove().sociedad($(e.target).data('sociedad'))
                        })
                    }
                }
            },
            formatters() {
                return {
                    rut: value => {
                        const rut = value.replace(/[^0-9]/g, '')
                        if (rut.length <= 1) {
                            return rut
                        }
                        return rut.replace(/\B(?=(\d{3})+(?!\d))/g, '.')
                    },
                    telefono: value => {
                        const phone = value.replace(/[^0-9]/g, '')
                        if (phone.length <= 1) {
                            return phone
                        }
                        return phone.replace(/(\d{2})(\d{3})(\d{4})/, '$1 $2 $3')
                    }
                }
            },
            digitoVerificador(value) {
                let rut = value.replace(/[^0-9kK]/g, '')
                if (rut.length < 1) {
                    return ''
                }
                let suma = 0
                let mul = 2
                for (let i = rut.length - 1; i >= 0; i--) {
                    suma += parseInt(rut[i]) * mul
                    mul = (mul + 1) % 8 || 2
                }
                const dv = 11 - suma % 11
                return dv === 10 ? 'K' : (dv === 11 ? '0' : dv.toString())
            },
            setup(ids) {
                this.ids = ids
                $(this.ids.buttons.add).click(() => {
                    $(this.ids.modal).modal('show')
                })
                $(this.ids.add.rut).on('input', (e) => {
                    e.target.value = this.formatters().rut(e.target.value)
                    $(this.ids.add.dv).text(this.digitoVerificador(e.target.value))
                })
                if ($(this.ids.add.rut).val().length > 0) {
                    $(this.ids.add.rut).val(this.formatters().rut($(this.ids.add.rut).val()))
                    $(this.ids.add.dv).text(this.digitoVerificador($(this.ids.add.rut).val()))
                }
                $(this.ids.tipo).dropdown()
                $(this.ids.add.contacto.rut).on('input', (e) => {
                    e.target.value = this.formatters().rut(e.target.value)
                    $(this.ids.add.contacto.dv).text(this.digitoVerificador(e.target.value))
                })
                if ($(this.ids.add.contacto.rut).val().length > 0) {
                    $(this.ids.add.contacto.rut).val(this.formatters().rut($(this.ids.add.contacto.rut).val()))
                    $(this.ids.add.contacto.dv).text(this.digitoVerificador($(this.ids.add.contacto.rut).val()))
                }
                $(this.ids.add.contacto.telefono).on('input', (e) => {
                    e.target.value = this.formatters().telefono(e.target.value)
                })
                if ($(this.ids.add.contacto.telefono).val().length > 0) {
                    $(this.ids.add.contacto.telefono).val(this.formatters().telefono($(this.ids.add.contacto.telefono).val()))
                }
                $(this.ids.modal).modal({
                    onApprove: () => {
                        this.add().sociedad()
                    }
                })
                $(this.ids.buttons.remove).click((e) => {
                    this.remove().sociedad($(e.target).data('sociedad'))
                })
            }
        }
        $(document).ready(() => {
            proveedores.setup({
                modal: '#add_modal',
                buttons: {
                    add: '#add_button',
                    edit: '.edit',
                    remove: '.remove'
                },
                add: {
                    form: '#add_modal form.form',
                    rut: '#rut',
                    dv: '#dv',
                    nombre: '#nombre',
                    razon: '#razon',
                    tipo: '#tipo',
                    contacto: {
                        rut: '#rut_contacto',
                        dv: '#dv_contacto',
                        nombre: '#nombre_contacto',
                        apellido_paterno: '#apellido_paterno_contacto',
                        apellido_materno: '#apellido_materno_contacto',
                        email: '#email_contacto',
                        telefono: '#telefono_contacto'
                    }
                },
                proveedores: '#proveedores'
            })
        })
    </script>
@endpush