<script setup>
import { onMounted, ref } from 'vue';
import { useSearcher } from '@Services/Api';
import { hasPermission } from '@Plugins/RolePermission';
import { getDate } from '@Controllers/DateController';
import { can, apiTo, viewTo, transl } from './Module'

import IconButton from '@Holos/Button/Icon.vue'
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
import SearcherHead from '@Holos/Searcher.vue';
import Table from '@Holos/NewTable.vue';
import ShowView from './Modals/Show.vue';

import GoogleIcon from '@Shared/GoogleIcon.vue';
import Searcher from '@Holos/Searcher.vue';
import Adding from '@Holos/Button/ButtonRh.vue';

/** Propiedades */
const models = ref([]);

/** Referencias */
const showModal = ref(false);
const destroyModal = ref(false);

/** Métodos */
const searcher = useSearcher({
    url: apiTo('index'),
    onSuccess: (r) => models.value = r.models,
    onError: () => models.value = []
});

/** Ciclos */
onMounted(() => {
    searcher.search();
});
</script>

<template>
    <!-- Header -->
    <div class="flex items-start justify-between gap-4">
        <div>
            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
            </p>
        </div>

        <RouterLink :to="viewTo({ name: 'create' })">
            <Adding text="Nuevo Empleado" />
        </RouterLink>
    </div>

    <!-- Search Card -->
    <div class="pt-2 w-full">
        <Searcher @search="(x) => searcher.search(x)">
        </Searcher>
    </div>

    <!-- List Card -->
    <div class="pt-2 w-full">
        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
            <template #head>
                <th v-text="$t('name')" />
                <th v-text="$t('department')" />
                <th v-text="$t('headquarter')" />
                <th v-text="$t('hire_date')" />
                <th v-text="$t('status')" />
                <th class="w-32 text-center" v-text="$t('actions')" />
            </template>

            <template #body="{ items }">
                <tr v-for="model in items" class="table-row">
                    <td>{{ model.full_name }}</td>
                    <td>{{ model.department?.name }}</td>
                    <td>{{ model.headquarter }}</td>
                    <td>{{ getDate(model.hire_date) }}</td>
                    <td class="py-6">
                        <span
                            class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">
                            {{ model.status_ek }}
                        </span>
                    </td>
                    <td>
                        <div class="table-actions">
                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
                                outline />
                            <RouterLink v-if="can('edit')" class="h-fit"
                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
                            </RouterLink>
                            <IconButton v-if="can('destroy')" icon="delete" :title="$t('crud.destroy')"
                                @click="destroyModal.open(model)" outline />
                            <RouterLink v-if="can('settings')" class="h-fit"
                                :to="viewTo({ name: 'settings', params: { id: model.id } })">
                                <IconButton icon="settings" :title="$t('setting')" />
                            </RouterLink>
                            <RouterLink v-if="hasPermission('activities.index')" class="h-fit"
                                :to="$view({ name: 'admin.activities.index', query: { user: model.id } })">
                                <IconButton icon="timeline" :title="$t('activity')" />
                            </RouterLink>
                        </div>
                    </td>
                </tr>
            </template>

            <template #empty>
                <td colspan="6" class="py-12 text-center">
                    <div class="text-gray-500 dark:text-primary-dt/70">
                        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
                        <p class="text-lg font-medium">No se encontraron empleados</p>
                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
                    </div>
                </td>
            </template>
        </Table>

        <ShowView ref="showModal" />

        <DestroyView v-if="can('destroy')" ref="destroyModal" subtitle="last_name"
            :to="(user) => apiTo('destroy', { user })" @update="searcher.search()" />
    </div>
</template>