<script>

// window.Vue = require('vue');



new Vue ({  
    el: '#app',
    data() {
        return {
            editando: false,
            proveedores: [],
            filtro: '',
            proveedor: {
                id: '',
                nombre: '',
                direccion: '',
                logo: '',
                telefono: '',
                email: '',
                web: '',
                descripcion: ''
            },
            paginacion: {
                total: 0,
                pagina_actual: 0,
                por_pagina: 0,
                ultima_pagina: 0,
                desde: 0,
                hasta: 0
            },
            fileLogo: '',
            errors: []
        };
    },
    created() {
        this.listarProveedores();
    },
    computed: {
        paginaActiva: function() {
            return this.paginacion.pagina_actual;
        },
        paginas: function() {
            if (!this.paginacion.hasta) return [];

            var desde = this.paginacion.pagina_actual - 2;

            if (desde < 1) desde = 1;

            var hasta = desde + (2 + 2);

            if (hasta >= this.paginacion.ultima_pagina) hasta = this.paginacion.ultima_pagina;

            var paginas = [];

            while(desde <= hasta) {
                paginas.push(desde);
                desde++;
            }

            return paginas;
        }
    },
    methods: {
        listarProveedores(pagina) {
            let url = 'api/proveedores?page=' + pagina;

            axios.get(url, {
                params: {
                    filtro: this.filtro
                }
            }).then(response => {
                this.paginacion = response.data.paginacion;
                this.proveedores = response.data.proveedores.data;
            });
        },
        eliminarProveedor(proveedor) {
            let url = 'api/proveedores/' + proveedor.id;

            axios.delete(url).then(response => {
                this.listarProveedores();
                // this.proveedores = response.data.data;
            });
        },
        crearProveedor() {
            this.limpiarProveedor();
            this.editando = false;
            $('#modal-proveedor').modal('show');
        },
        guardarProveedor() {
            let url = this.editando ? 'api/proveedores/' + this.proveedor.id : 'api/proveedores';

            const data = new FormData();
            data.append('nombre', this.proveedor.nombre);
            data.append('direccion', this.proveedor.direccion);
            data.append('telefono', this.proveedor.telefono);
            data.append('web', this.proveedor.web);
            data.append('email', this.proveedor.email);
            data.append('descripcion', this.proveedor.descripcion);

            // data.append('logo', this.fileLogo);
            data.append('logo', this.proveedor.logo);
            data.append('fileLogo', this.fileLogo);

            if (this.editando) {
                data.append('id', this.proveedor.id);
                data.append("_method", "put");
            }

            axios.post(url, data).then(response => {
                this.listarProveedores();
                this.errors = [];
                this.limpiarProveedor();
                $('#modal-proveedor').modal('hide');
            }).catch(errors => {
                this.errors = errors.response.data;
            })
        },
        editarProveedor(proveedor) {
            this.llenarProveedor(proveedor);
            this.editando = true;
            $('#modal-proveedor').modal('show');
        },
        actualizarProveedor(proveedor) {
            let url = 'api/proveedores/' + proveedor.id;

            const data = new FormData();
            data.append('id', this.proveedor.id);
            data.append('nombre', this.proveedor.nombre);
            data.append('direccion', this.proveedor.direccion);
            data.append('logo', this.proveedor.logo);
            data.append('fileLogo', this.fileLogo);
            data.append("_method", "put");
            
            // axios.put(url, {
            //     id: this.proveedor.id,
            //     nombre: this.proveedor.nombre,
            //     direccion: this.proveedor.direccion
            // })
            axios.post(url, data).then(response => {
                console.log(response);

                this.listarProveedores();
                this.errors = [];
                this.limpiarProveedor();
                $('#modal-proveedor').modal('hide');
            }).catch(errors => {
                this.errors = errors.response.data;
            });
        },
        llenarProveedor(proveedor) {
            this.proveedor.id = proveedor.id;
            this.proveedor.nombre = proveedor.nombre;
            this.proveedor.direccion = proveedor.direccion;
            this.proveedor.telefono = proveedor.telefono;
            this.proveedor.web = proveedor.web;
            this.proveedor.email = proveedor.email;
            this.proveedor.descripcion = proveedor.descripcion;

            this.proveedor.logo = proveedor.logo == null ? '' : proveedor.logo;
            // this.proveedor.logo = proveedor.logo;
        },
        limpiarProveedor() {
            this.proveedor.id = '';
            this.proveedor.nombre = '';
            this.proveedor.direccion = '';
            this.proveedor.telefono = '';
            this.proveedor.web = '';
            this.proveedor.email = '';
            this.proveedor.descripcion = '';
            
            this.borrarImagen();
            // this.proveedor.logo = '';

            // this.$refs.logoFile.value = null;
            // $('.custom-file-label').html('Seleccione un archivo');
        },
        cargarImagen(e) {
            // console.log(e.target.files[0]);
            const file = e.target.files[0]
            this.fileLogo = file;
            this.proveedor.logo = URL.createObjectURL(file); //Para mostrar la imágen en el modal
            $('.custom-file-label').html(file.name);
        },
        borrarImagen() {
            this.proveedor.logo = '';
            this.fileLogo = '';
            this.$refs.logoFile.value = null;
            $('.custom-file-label').html('');
        },
        borrarFiltro() {
            this.filtro = '',
            this.listarProveedores();
        },
        cambiarPagina(pagina) {
            this.paginacion.pagina_actual = pagina;
            this.listarProveedores(pagina);
        }
    }
});
</script><?php /**PATH C:\xampp\htdocs\costear\resources\views/proveedores/vue.blade.php ENDPATH**/ ?>