<template>
    <InertiaHead title="Twoje wnioski urlopowe" />
    <div class="bg-white sm:rounded-lg shadow-md">
        <div class="flex justify-between items-center p-4 sm:px-6">
            <div>
                <h2 class="text-lg leading-6 font-medium text-gray-900">
                    Twoje wnioski urlopowe
                </h2>
            </div>
            <div>
                <InertiaLink
                    href="vacation-requests/create"
                    class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
                >
                    Dodaj wniosek
                </InertiaLink>
            </div>
        </div>
        <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
                        >
                            Numer
                        </th>
                        <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
                        >
                            Rodzaj urlopu
                        </th>
                        <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
                        >
                            Od
                        </th>
                        <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
                        >
                            Do
                        </th>
                        <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
                        >
                            Dni urlopu
                        </th>
                        <th
                            scope="col"
                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
                        />
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    <tr
                        v-for="request in requests.data"
                        :key="request.id"
                        class="hover:bg-blumilk-25"
                    >
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ request.id }}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ request.type }}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ request.from }}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ request.to }}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                            X
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                            <Menu
                                as="div"
                                class="relative inline-block text-left"
                            >
                                <MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
                                    <DotsVerticalIcon
                                        class="h-5 w-5"
                                        aria-hidden="true"
                                    />
                                </MenuButton>

                                <transition
                                    enter-active-class="transition ease-out duration-100"
                                    enter-from-class="transform opacity-0 scale-95"
                                    enter-to-class="transform opacity-100 scale-100"
                                    leave-active-class="transition ease-in duration-75"
                                    leave-from-class="transform opacity-100 scale-100"
                                    leave-to-class="transform opacity-0 scale-95"
                                >
                                    <MenuItems class="origin-top-right absolute right-0 mt-2 w-56 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
                                        <div
                                            class="py-1"
                                        >
                                            <MenuItem
                                                v-slot="{ active }"
                                                class="flex"
                                            >
                                                <InertiaLink
                                                    :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
                                                >
                                                    <PencilIcon
                                                        class="mr-2 h-5 w-5 text-blue-500"
                                                        aria-hidden="true"
                                                    /> Edytuj
                                                </InertiaLink>
                                            </MenuItem>
                                            <MenuItem
                                                v-slot="{ active }"
                                                class="flex"
                                            >
                                                <InertiaLink
                                                    as="button"
                                                    method="delete"
                                                    :preserve-scroll="true"
                                                    :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
                                                >
                                                    <TrashIcon
                                                        class="mr-2 h-5 w-5 text-red-500"
                                                    /> Usuń
                                                </InertiaLink>
                                            </MenuItem>
                                        </div>
                                    </MenuItems>
                                </transition>
                            </Menu>
                        </td>
                    </tr>
                    <tr
                        v-if="! requests.data.length"
                    >
                        <td
                            colspan="100%"
                            class="text-center py-4 text-xl leading-5 text-gray-700"
                        >
                            Brak danych
                        </td>
                    </tr>
                </tbody>
            </table>
            <div
                v-if="requests.data.length && requests.meta.last_page !== 1"
                class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
            >
                <div class="flex-1 flex justify-between sm:hidden">
                    <InertiaLink
                        :is="requests.links.prev ? 'InertiaLink': 'span'"
                        :href="requests.links.prev"
                        class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
                    >
                        Poprzednia
                    </InertiaLink>
                    <Component
                        :is="requests.links.next ? 'InertiaLink': 'span'"
                        :href="requests.links.next"
                        class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
                    >
                        Następna
                    </Component>
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div class="text-sm text-gray-700">
                        Wyświetlanie
                        <span class="font-medium">{{ requests.meta.from }}</span>
                        od
                        <span class="font-medium">{{ requests.meta.to }}</span>
                        do
                        <span class="font-medium">{{ requests.meta.total }}</span>
                        wyników
                    </div>
                    <nav class="relative z-0 inline-flex space-x-1">
                        <template
                            v-for="(link, index) in requests.meta.links"
                            :key="index"
                        >
                            <Component
                                :is="link.url ? 'InertiaLink' : 'span'"
                                :href="link.url"
                                :preserve-scroll="true"
                                class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
                                :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
                                v-text="link.label"
                            />
                        </template>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { DotsVerticalIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';

export default {
    name: 'UserIndex',
    components: {
        DotsVerticalIcon,
        PencilIcon,
        TrashIcon,
        Menu,
        MenuButton,
        MenuItem,
        MenuItems,
    },
    props: {
        requests: {
            type: Object,
            default: () => null,
        },
    },
};
</script>
