<template>
    <section>
        <h2 class="text-center g-py-20 g-mb-30">Ubah Kategori Aset</h2>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12 g-mb-20">
                    <div class="border box-shadow g-pa-20">
                        <form action="" enctype="multipart/form-data" v-on:submit.prevent="updateForm()">
                            <div class="form-group g-mb-15">
                                <label for="nama">Nama Kategori Aset</label>
                                <input type="text" class="form-control" id="nama" placeholder="nama" v-model="form.nama">
                            </div>
                            <button id="submit" type="submit" class="btn btn-orange d-block text-center g-mt-40">Ubah Kategori Aset</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
a {
    color: #ff6d00;
}
.btn-orange {
    border: 1px solid #ff6d00;
    background-color: #ffffff;
    color: #ff6d00;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
}

.btn-orange:hover {
    border: 1px solid #ff6d00;
    background-color: #ff6d00;
    color: #ffffff;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
}
</style>

<script>
import axios from 'axios'
import { useRoute } from 'vue-router'
import {ref} from 'vue'

export default {
    name: 'UpdateFormAxios',
    data(){
        return{
            form: {
                nama: ''
            },
        }
    },
    setup() {
        //reactive state
        let kategoriaset = ref([]);

        const route = useRoute();
        const id = route.params.id;

        axios.get('https://werp-api.pt-gti.co.id/api/kategoriaset/' +id)
            .then((response) => {
                kategoriaset.value = response.data
                // console.log(kategoriaset.value)
            }).catch((err) => {
                console.log(err.response)
            });

        return {
            kategoriaset
        }
    },
    created() {
        const route = useRoute();
        const id = route.params.id;
        axios.get('https://werp-api.pt-gti.co.id/api/kategoriaset/' +id)
            .then((response) => {
                this.form.nama = response.data.nama
                // console.log(kategoriaset.value)
            }).catch((err) => {
                console.log(err.response)
            });
    },
    methods: {
        updateForm(){
            const id = this.$route.params.id;
            axios.post('https://werp-api.pt-gti.co.id/api/kategoriaset/' +id, this.form)
                .then((response) => {
                    //Perform Success Action
                    // console.log(response.data);
                    location.href = '/kategoriaset';
                })
                .catch((error) => {
                    // error.response.status Check status code
                    console.log(error.response)
                }).finally(() => {
                    //Perform action in always
                });
        },
    }
}
</script>