<script setup lang="ts">
    import { computed } from 'vue';
    import AppLayout from '@/layouts/AppLayout.vue';
    import { type BreadcrumbItem } from '@/types';
    import { Head, Link, usePage } from '@inertiajs/vue3';
    import { Button } from '@/components/ui/button';
    import { Label } from '@/components/ui/label';

    interface WorkHour {
        id: string;
        user_name: string;
        ordinary_hours: number;
        work_date: string;
        project_name: string;
        comment: string;
    };

    const page = usePage<{ workHour: WorkHour }>();

    const workHour = computed(() => page.props.workHour);

    const breadcrumbs = computed<BreadcrumbItem[]>(() => [
        { title: 'Dashbord',      href: '/dashboard' },
        { title: 'Arbeidstimer',  href: '/smartdok/work-hours' },
        {
            title: workHour.value.id,
            href: route('smartdok.work-hours.show', workHour.value.id),
        },
    ]);
</script>

<template>
    <Head title="Vis arbeidstime" />
    <AppLayout :breadcrumbs="breadcrumbs">
      <div class="p-6 space-y-8">
        <!-- Heading + actions -->
        <div class="flex items-center justify-between">
          <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
            Vis arbeidstime
          </h3>
          <div class="flex space-x-2">
            <Link :href="route('smartdok.work-hours.index')">
              <Button variant="outline">Tilbake</Button>
            </Link>
            <Link :href="route('smartdok.work-hours.edit', workHour.id)">
              <Button>Rediger</Button>
            </Link>
          </div>
        </div>
        <!-- WorkHour details -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <Label for="id" className="font-semibold">ID</Label>
            <p id="id" class="mt-1 text-base">
              {{ workHour.id }}
            </p>
          </div>
          <div>
            <Label for="user_name" className="font-semibold">Bruker</Label>
            <p id="user_name" class="mt-1 text-base">
              {{ workHour.user_name }}
            </p>
          </div>
          <div>
            <Label for="ordinary_hours" className="font-semibold">Timer</Label>
            <p id="ordinary_hours" class="mt-1 text-base">
              {{ workHour.ordinary_hours }}
            </p>
          </div>
          <div>
            <Label for="work_date" className="font-semibold">Arbeidsdato</Label>
            <p id="work_date" class="mt-1 text-base">
              {{ workHour.work_date }}
            </p>
          </div>
          <div>
            <Label for="comment" class="font-semibold">Kommentar</Label>
            <p id="comment" class="mt-1 text-base">
              {{ workHour.comment }}
            </p>
          </div>
          <div>
            <Label className="font-semibold">Prosjekter</Label>
            <p id="project_name" className="mt-1 text-base">{{ workHour.project_name }}</p>
          </div>
        </div>
      </div>
    </AppLayout>
</template>
