<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Core</a>
            </li>
            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                <span>Daftar Kabupaten/Kota</span>
            </li>
        </ul>

        <div class="grid grid-cols-1 gap-6 pt-5">
            <div class="panel">
                <div class="mb-5 flex items-center justify-between">
                    <h5 class="text-lg font-semibold dark:text-white-light">Daftar Kabupaten/Kota</h5>
                    <NuxtLink to="/core/regencies-cities/add" class="dark:text-white-light btn btn-primary !py-1">
                        <icon-plus class="me-1" />
                        Tambah
                    </NuxtLink>
                </div>
                <div class="mb-5">
                    <div class="datatable">
                        <vue3-datatable
                            :rows="regenciesCities?.results"
                            :columns="cols"
                            :totalRows="regenciesCities?.count"
                            :isServerMode=true
                            :pageSize="params.pagesize"
                            @change="changeServer"
                            skin="whitespace-nowrap bh-table-hover"
                            firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                            lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
                            previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                            nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                        >
                            <template #id="data">
                                <div class="flex gap-1">
                                    <button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
                                        <icon-edit class="me-1" />
                                        Edit
                                    </button>
                                    <button type="button" class="btn btn-danger !py-1" @click="deleteData(data.value)">
                                        <icon-trash class="me-1" />
                                        Delete
                                    </button>
                                </div>
                            </template>
                        </vue3-datatable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, computed, onMounted } from 'vue';
    import Vue3Datatable from '@bhplugin/vue3-datatable';
    useHead({ title: 'Daftar Provinsi' });

    const router = useRouter();

    const cols =
        ref([
            { field: 'code', title: 'Kode Kabupaten/Kota' },
            { field: 'name', title: 'Nama Kabupaten/Kota' },
            { field: 'province.name', title: 'Nama Provinsi' },
            { field: 'id', title: 'Aksi' },
            
        ]) || [];

    const params = reactive({
        current_page: 1,
        pagesize: 10,
        sort_column: 'id',
        sort_direction: 'asc',
    });
    
    const { data: regenciesCities } = await useAsyncData('regenciesCities', 
        () => $fetch('http://localhost:8000/core/regencies_cities/', {
            params: {
                page: params.current_page,
                page_size: params.pagesize
            }
        }), {
            watch: [params]
        }
    );
    
    const changeServer = (data: any) => {
        // console.log(data);
        params.current_page = data.current_page;
        params.pagesize = data.pagesize;
        params.sort_column = data.sort_column;
        params.sort_direction = data.sort_direction;

        //getUsers();
    };

    const viewData = (data: any) => {
        router.push({ path: "/core/regencies-cities/" + data.id });
    };

    const deleteData = async (data: any) => {

        //delete data with API
        await $fetch(`http://localhost:8000/core/regencies_cities/${data.id}/`, {
            method: 'DELETE'
        });

        //refersh data posts
        refreshNuxtData('regenciesCities');
    }
</script>