<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { dashboard } from '@/routes';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/vue3';
import PlaceholderPattern from '../components/PlaceholderPattern.vue';
import { usePage } from '@inertiajs/vue3';
import { Trophy, ShieldCheck, Star, ArrowRight, UserCheck, UserCheck2 } from 'lucide-vue-next';
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';


const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Dashboard',
        href: dashboard().url,
    },
];
const page = usePage();
const token = page.props.flash?.token;

if (token) {
    localStorage.setItem('sanctum_token', token);
}

</script>

<template>

    <Head title="Dashboard" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <div class="grid gap-12 md:grid-cols-2 h-full p-6 md:p-8">

            <div class="relative overflow-y-auto">
                Geplante Aktivitäten
            </div>
            <div class="flex flex-col gap-8">
                <div class="relative overflow-y-auto">

                    <div class="flex flex-wrap gap-2 overflow-x-auto">

                        <Alert class="bg-amber-300">
                            <Trophy class="h-4 w-4" />
                            <AlertTitle>Du hast zwei neue Erfolge</AlertTitle>
                            <AlertDescription class="text-sky-600">
                            </AlertDescription>
                        </Alert>
                        <Alert class="bg-sky-300">
                            <UserCheck2 class="h-4 w-4" />
                            <AlertTitle>Du hast länger keine Bestandskunden mehr kontaktiert</AlertTitle>
                            <AlertDescription class="text-sky-600">
                                <a href="">Hier sind ein paar Vorschläge für Dich
                                    <ArrowRight class="inline h-4 w-4" />
                                </a>
                            </AlertDescription>
                        </Alert>

                    </div>
                </div>
                <div class="relative flex-1 overflow-y-auto">
                    <h1 class="mb-4">Offene Rechnungen</h1>
                    <Table>
                        <TableRow>
                            <TableHead class="text-right px-4">Bezahlt</TableHead>
                            <TableCell class="text-right px-4 tabular-nums">21.976,09 €</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableHead class="text-right px-4">Gestellt, nicht bezahlt</TableHead>
                            <TableCell class="text-right px-4 text-destructive font-bold tabular-nums">8.637,00 €</TableCell>
                        </TableRow>
                        <TableRow class="border-b-slate-600">
                            <TableHead class="text-right px-4">Noch nicht gestellt</TableHead>
                            <TableCell class="text-right px-4 tabular-nums">–</TableCell>
                        </TableRow>
                        <TableRow class="border-b-0">
                            <TableHead class="text-right px-4 font-bold">Summe</TableHead>
                            <TableCell class="text-right px-4 font-bold tabular-nums">30.613,09 €</TableCell>
                        </TableRow>
                    </table>
                </div>
                <div
                    class="relative flex-1 overflow-y-auto">
                    Aktuelle Angebote
                </div>
            </div>
        </div>
    </AppLayout>
</template>
