<template>
    <app-header></app-header>
    <section>
        <div id="push2" class="container-fluid max-width-webkit-fill-available">
            <h2 class="text-center g-py-20">Kategori Aset</h2>
            <div class="row g-mb-30">
                <div class="text-right col-12 col-md-12 col-lg-12 g-mb-20">
                    <router-link v-if="getPermissions.includes('view-kategoriaset')" to="/tambahkategoriaset" class="btn btn-md btn-orange">
                        Tambah Kategori Aset
                    </router-link>
                </div>
                <div class="row" v-if="getPermissions.includes('edit-kategoriaset')">
                    <router-link v-bind:to="{ path: '/editkategoriaset/' +kategoriaset.id}" class="col-12 col-md-12 col-lg-6 container align-items-center g-color-white g-mb-15 g-font-size-14 text-decoration-none" v-for="(kategoriaset, index) in kategoriaset" :key="index">
                        <div class="d-flex justify-content-center">
                            <router-link v-if="getPermissions.includes('delete-kategoriaset')" @click="deleteKategoriAset(kategoriaset.id)" to="" class="btn btn-danger btn-md box-shadow2 g-width-70px ka-border1">Delete</router-link>
                            <div class="btn btn-white btn-md box-shadow2 w-80 ka-border2 text-capitalize">{{ kategoriaset.nama }}</div>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
.ka-border1 {
    border-radius: 10px 0px 0px 10px;
    border: 1px solid #b5b5b5;
    padding-top: 10px;
    padding-bottom: 10px;
}
.ka-border2 {
    border-radius: 0px 10px 10px 0px;
    border: 1px solid #b5b5b5;
    padding-top: 10px;
    padding-bottom: 10px;
}
.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 {onMounted, ref} from 'vue'
import Header from './Header.vue'

export default{
    components: {
        'app-header': Header
    },
    created() {
        this.getPermissions = JSON.parse(localStorage.getItem('permissions'));
        // console.log(this.getPermissions);
    },
    setup() {
        //reactive state
        let kategoriaset = ref([]);

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

        return {
            kategoriaset
        }
    },
    methods: {
        deleteKategoriAset($id) {
            if(confirm("Apakah Anda yakin untuk dihapus ?")) {
                axios.delete('https://werp-api.pt-gti.co.id/api/kategoriaset/' +$id)
                .then((response) => {
                    location.href = '/kategoriaset';
                    // console.log(response.data)
                }).catch((err) => {
                    console.log(err.response)
                });
            }
        }
    }
}
</script>