<template>
    <section>
        <h1 class="text-center g-py-20 g-mb-30">Tambah Aset</h1>
        <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="keterangan">Keterangan</label>
                                <input type="text" class="form-control" id="keterangan" placeholder="keterangan" v-model="form.keterangan" required="required">
                            </div>
                            <label for="kategori">Kategori</label>
                            <select class="form-select g-mb-15" aria-label="Default select example" placeholder="kategori" v-model="form.kategori" required="required">
                                <option selected>Pilih Kategori</option>
                                <option v-for="(kategoriaset, index) in kategoriaset" :key="index">{{ kategoriaset.nama }}</option>
                            </select>
                            <div class="form-group g-mb-15">
                                <label for="nama">Nama</label>
                                <input type="text" class="form-control" id="nama" placeholder="nama" v-model="form.nama" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="jumlah">Jumlah</label>
                                <input type="number" class="form-control" id="jumlah" placeholder="jumlah" v-model="form.jumlah" required="required">
                            </div>
                            <label for="status">Status</label>
                            <select class="form-select g-mb-15" aria-label="Default select example" placeholder="status" v-model="form.status" required="required">
                                <option selected>Pilih Status</option>
                                <option value="Baik">Baik</option>
                                <option value="Rusak">Rusak</option>
                                <option value="Hilang">Hilang</option>
                            </select>
                            <div class="form-group g-mb-15">
                                <label for="lokasi">Lokasi</label>
                                <input type="text" class="form-control" id="lokasi" placeholder="lokasi" v-model="form.lokasi" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <label for="penanggungjawab">Penanggung Jawab</label>
                                <input type="text" class="form-control" id="penanggungjawab" placeholder="penanggungjawab" v-model="form.penanggungjawab" required="required">
                            </div>
                            <div class="form-group g-mb-15">
                                <p class="form-label" for="foto">Foto</p>
                                <img v-bind:src="form.image" class="mb-2" width="200" v-if="previewimage === null">
                                <input type="file" class="form-control g-mb-10" id="foto" ref="form.foto" v-on:change="handleFileUpload">
                                <img v-bind:src="previewimage" width="100">
                            </div>
                            <button type="submit" class="btn btn-orange w-100 g-mt-40">Ubah 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 { onMounted, ref } from 'vue'

export default {
    name: 'UpdateFormAxios',
    data(){
        return{
            form: {
                keterangan: '',
                kategori: '',
                nama: '',
                jumlah: [],
                status: '',
                lokasi: '',
                penanggungjawab: '',
                foto: null,
                image: null
            },
            previewimage: null,
        }
    },
    setup() {
        //reactive state
        let kategoriaset = ref([]);

        onMounted(() => {
            //get data from api endpoint
            axios.get('https://werp-api.pt-gti.co.id/api/kategoriaset')
            .then((response) => {
                kategoriaset.value = response.data
                // console.log(response.data[0])
            }).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/aset/' +id)
        .then((response) => {
            // console.log(response.data)
            this.form.keterangan = response.data.keterangan
            this.form.kategori = response.data.kategori
            this.form.nama = response.data.nama
            this.form.jumlah = response.data.jumlah
            this.form.status = response.data.status
            this.form.lokasi = response.data.lokasi
            this.form.penanggungjawab = response.data.penanggungjawab
            this.form.foto = response.data.foto
            this.form.image = "https://werp-api.pt-gti.co.id/uploads/aset-images/"
            this.form.image += response.data.foto
            // console.log(this.form.foto)
        }).catch((err) => {
            console.log(err.response)
        });
    },
    methods: {
        handleFileUpload(event) {
            // console.log(event);
            const detailFoto = event.target.files[0]
            this.previewimage = URL.createObjectURL(detailFoto);

            // const fileName = event.target.files[0].name;
            // this.form.foto = fileName;
            this.fileDetail = event.target.files[0];
        },
        updateForm(){
            const id = this.$route.params.id;
            const data = new FormData();
            data.append('keterangan', this.form.keterangan);
            data.append('kategori', this.form.kategori);
            data.append('nama', this.form.nama);
            data.append('jumlah', this.form.jumlah);
            data.append('status', this.form.status);
            data.append('lokasi', this.form.lokasi);
            data.append('penanggungjawab', this.form.penanggungjawab);
            if(this.previewimage !== null) {
                data.append('foto', this.fileDetail, this.fileDetail.name);
            }
            // data.append('foto', this.fileDetail, this.fileDetail.name);
            axios.post('https://werp-api.pt-gti.co.id/api/aset/' +id, data, {
                onUploadProgress: uploadEvent => {
                    console.log('Upload Progress: ' + Math.round(uploadEvent.loaded / uploadEvent.total * 100) + '%')
                }
            })
                .then((response) => {
                    //Perform Success Action
                    console.log(response.data);
                    location.href = '/aset';
                })
                .catch((error) => {
                    // error.response.status Check status code
                    console.log(error.response)
                }).finally(() => {
                    //Perform action in always
                });
        },
    }
}
</script>