<template>
    <Head title="Department Report" />
    <AuthenticatedLayout :title="'Department Report — ' + period.name">
        <div class="bg-white rounded-2xl border border-surface-200 shadow-sm overflow-hidden mb-6">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead><tr class="bg-surface-50 border-b border-surface-200">
                        <th class="text-left py-3.5 px-6">Department</th>
                        <th class="text-center py-3.5 px-6">Staff</th>
                        <th class="text-center py-3.5 px-6">Completed</th>
                        <th class="text-center py-3.5 px-6">Rate</th>
                        <th class="text-center py-3.5 px-6">Avg Score</th>
                    </tr></thead>
                    <tbody>
                        <tr v-for="d in report_data" :key="d.department" class="border-b border-surface-100">
                            <td class="py-3.5 px-6 font-medium">{{ d.department }}</td>
                            <td class="py-3.5 px-6 text-center">{{ d.total_staff }}</td>
                            <td class="py-3.5 px-6 text-center text-emerald-600 font-bold">{{ d.completed }}</td>
                            <td class="py-3.5 px-6 text-center">{{ d.completion_rate }}%</td>
                            <td class="py-3.5 px-6 text-center font-bold text-primary-600">{{ d.avg_score }}%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <Link href="/reports" class="px-4 py-2.5 border border-surface-200 text-surface-600 rounded-xl text-sm font-medium hover:bg-surface-50">← Back</Link>
    </AuthenticatedLayout>
</template>

<script setup>
import { Head, Link } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
defineProps({ period: Object, report_data: Array });
</script>
