<script setup>
import { onMounted, ref } from 'vue';
import { useSearcher } from '@Services/Api';

import { getDateTime }    from '@Controllers/DateController.js';

import SearcherHead from '@Holos/Searcher.vue';
import Table        from '@Holos/Table.vue';
import IconButton   from '@Holos/Button/Icon.vue';
import DestroyModal from '@Holos/Modal/Template/Destroy.vue';
import ShowModal    from '@Holos/Skeleton/Sidebar/Notification/Show.vue';

/** Propiedades */
const destroyModal = ref(null);
const showModal    = ref(false);

const models = ref([]);

// Servicios
const searcher = useSearcher({
    url: route('system.notifications.all'),
    onSuccess: (r) => models.value = r.models,
    onError: () => models.value = []
});

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

<template>
    <div>
        <SearcherHead
            :title="$t('notifications.title')"
            @search="(x) => searcher.search(x)"
        >
            <IconButton
                icon="refresh"
                :title="$t('refresh')"
                @click="searcher.search()"
            />
        </SearcherHead>
        <div class="pt-2 w-full">
            <Table 
                :items="models"
                @send-pagination="searcher.pagination"
                :processing="searcher.processing"
            >
                <template #head>
                    <th v-text="$t('title')" />
                    <th v-text="$t('description')" />
                    <th
                        v-text="$t('date')"
                        class="w-40 text-center"
                    />
                    <th
                        v-text="$t('status')"
                        class="w-32 text-center"
                    />
                    <th
                        v-text="$t('actions')"
                        class="w-32 text-center"
                    />
                </template>
                <template #body="{items}">
                    <tr v-for="model in items" class="table-row">
                        <td class="table-cell border">
                            {{ model.data.title }}
                        </td>
                        <td class="table-cell border">
                            {{ model.data.description }}
                        </td>
                        <td class="table-cell border">
                            {{ getDateTime(model.created_at) }}
                        </td>
                        <td class="table-cell border">
                            <div class="flex items-center justify-center">
                                <div class="w-2 h-2 rounded-full" :class="model.read_at ? 'bg-success' : 'bg-danger'"></div>
                                <span class="ml-2">{{ model.read_at ? $t('readed') : (model.is_closed ? $t('omitted') : $t('unreaded')) }}</span>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-actions">
                                <IconButton
                                    icon="visibility"
                                    :title="$t('crud.show')"
                                    @click="showModal.open(model)"
                                    outline
                                />
                                <IconButton
                                    icon="delete"
                                    :title="$t('crud.destroy')"
                                    @click="destroyModal.open(model)"
                                    outline
                                />
                            </div>
                        </td>
                    </tr>
                </template>
                <template #empty>
                    <td class="table-cell border">
                        <div class="flex items-center text-sm">
                            <p class="font-semibold">
                                {{ $t('registers.empty') }}
                            </p>
                        </div>
                    </td>
                    <td class="table-cell border">-</td>
                    <td class="table-cell border">-</td>
                    <td class="table-cell border">-</td>
                    <td class="table-cell border">-</td>
                </template>
            </Table>
        </div>
        
        <ShowModal 
            ref="showModal"
            @reload="searcher.search()"
        />
        <DestroyModal
            ref="destroyModal"
            :to="(id) => route('system.notifications.destroy', { id })"
            @update="searcher.search()"
        />
    </div>
</template>
    