@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 tertiary 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 tertiary icon button" data-proveedor="{{$proveedor->rut}}">
                            <i class="edit icon"></i>
                        </button>
                        <button class="ui tertiary red icon button" data-proveedor="{{$proveedor->rut}}">
                            <i class="remove icon"></i>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    @include('inmobiliarias.proveedores.add_modal')

    @include('inmobiliarias.proveedores.edit_modal')
@endsection

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

@push('page_scripts')
    <script>
        const proveedores = {
            ids: {
                buttons: {
                    add: '',
                    edit: '',
                    remove: ''
                },
                add: {
                    form: '',
                    rut: '',
                    dv: '',
                    nombre: '',
                    razon: '',
                    contacto: {
                        rut: '',
                        dv: '',
                        nombre: '',
                        apellido_paterno: '',
                        apellido_materno: '',
                        email: '',
                        telefono: ''
                    }
                },
                proveedores: ''
            },
            data: JSON.parse('{!! json_encode($proveedores) !!}'),
            remove() {
                return {
                    proveedor: rut => {
                        const url = `{{$urls->api}}/inmobiliarias/proveedor/${rut}/delete`
                        const method = 'delete'
                        return APIClient.fetch(url, {method})
                            .then(response => (response) ? response.json() : null)
                            .then(data => {
                                if (data.success) {
                                    window.location.reload()
                                }
                            })

                    }
                }
            },
            formatters() {
                return {
                    rut: value => {
                        return Rut.format(value)
                    },
                    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')
                    }
                }
            },
            setup(ids) {
                this.ids = ids
                const addModal = new AddModal(this.ids.add, this.formatters())
                $(this.ids.buttons.add).click(() => {
                    addModal.show()
                })
                const editModal = new EditModal(this.ids.edit, this.formatters())
                $(this.ids.buttons.edit).click((e) => {
                    e.currentTarget.classList.add('loading')
                    e.currentTarget.classList.add('spinner')
                    editModal.show(e.currentTarget.parentNode.dataset.proveedor).then(() => {
                        e.currentTarget.classList.remove('loading')
                        e.currentTarget.classList.remove('spinner')
                    })
                })
                $(this.ids.buttons.remove).click((e) => {
                    e.currentTarget.classList.add('loading')
                    e.currentTarget.classList.add('spinner')
                    this.remove().proveedor(e.currentTarget.parentNode.dataset.proveedor).then(() => {
                        e.currentTarget.classList.remove('loading')
                        e.currentTarget.classList.remove('spinner')
                    })
                })
            }
        }
        $(document).ready(() => {
            proveedores.setup({
                buttons: {
                    add: '#add_button',
                    edit: '.edit',
                    remove: '.remove'
                },
                add: {
                    modal: '#add_modal',
                    form: 'add_form',
                    rut: '#rut',
                    digito: '#dv',
                    nombre: '#nombre',
                    razon: '#razon',
                    contacto: {
                        rut: '#rut_contacto',
                        digito: '#dv_contacto',
                        nombres: '#nombre_contacto',
                        apellido_paterno: '#apellido_paterno_contacto',
                        apellido_materno: '#apellido_materno_contacto',
                        email: '#email_contacto',
                        telefono: '#telefono_contacto'
                    }
                },
                edit: {
                    modal: '#edit_modal',
                    form: 'edit_form',
                    rut: '#edit_rut',
                    digito: '#edit_digito',
                    nombre: '#edit_nombre',
                    razon: '#edit_razon',
                    contacto: {
                        rut: '#edit_rut_contacto',
                        digito: '#edit_digito_contacto',
                        nombres: '#edit_nombre_contacto',
                        apellido_paterno: '#edit_apellido_paterno_contacto',
                        apellido_materno: '#edit_apellido_materno_contacto',
                        email: '#edit_email_contacto',
                        telefono: '#edit_telefono_contacto'
                    }
                },
                proveedores: '#proveedores'
            })
        })
    </script>
@endpush