<template>
    <div class="flex flex-col gap-4 pt-2">
        <div>
            <h2 class="text-lg font-semibold text-neutral-900">{{ $t('absences.policies.title') }}</h2>
            <p class="text-sm text-neutral-500">{{ $t('absences.policies.subtitle') }}</p>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full border-collapse text-sm">
                <thead>
                    <tr class="border-b border-neutral-200 text-left text-neutral-500">
                        <th class="py-2 pr-3">{{ $t('absences.policies.type') }}</th>
                        <th class="py-2 px-2">{{ $t('absences.policies.daysPerYear') }}</th>
                        <th class="py-2 px-2">{{ $t('absences.policies.daysPerEvent') }}</th>
                        <th class="py-2 px-2">{{ $t('absences.policies.noticeDays') }}</th>
                        <th class="py-2 px-2 text-center">{{ $t('absences.policies.justificationRequired') }}</th>
                        <th class="py-2 px-2 text-center">{{ $t('absences.policies.countWorkingDaysOnly') }}</th>
                        <th class="py-2 px-2 text-center">{{ $t('absences.policies.active') }}</th>
                        <th class="py-2 pl-2" />
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="row in rows" :key="row.id" class="border-b border-neutral-100">
                        <td class="py-2 pr-3 font-medium text-neutral-800">{{ row.label }}</td>
                        <td class="py-2 px-2">
                            <input v-model.number="row.daysPerYear" type="number" step="0.5" class="w-20 rounded border border-neutral-300 px-2 py-1">
                        </td>
                        <td class="py-2 px-2">
                            <input v-model.number="row.daysPerEvent" type="number" step="0.5" class="w-20 rounded border border-neutral-300 px-2 py-1">
                        </td>
                        <td class="py-2 px-2">
                            <input v-model.number="row.noticeDays" type="number" class="w-16 rounded border border-neutral-300 px-2 py-1">
                        </td>
                        <td class="py-2 px-2 text-center">
                            <input v-model="row.justificationRequired" type="checkbox" class="h-4 w-4">
                        </td>
                        <td class="py-2 px-2 text-center">
                            <input v-model="row.countWorkingDaysOnly" type="checkbox" class="h-4 w-4">
                        </td>
                        <td class="py-2 px-2 text-center">
                            <input v-model="row.active" type="checkbox" class="h-4 w-4">
                        </td>
                        <td class="py-2 pl-2 text-right">
                            <MalioButton :label="$t('absences.policies.save')" variant="secondary" @click="save(row)" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { AbsencePolicy } from '~/services/dto/absence'
import { useAbsenceService } from '~/services/absences'

const service = useAbsenceService()
const rows = ref<AbsencePolicy[]>([])

async function load() {
    rows.value = await service.getPolicies()
}

async function save(row: AbsencePolicy) {
    await service.updatePolicy(row.id, {
        daysPerYear: row.daysPerYear === null || Number.isNaN(row.daysPerYear) ? null : Number(row.daysPerYear),
        daysPerEvent: row.daysPerEvent === null || Number.isNaN(row.daysPerEvent) ? null : Number(row.daysPerEvent),
        noticeDays: Number(row.noticeDays),
        justificationRequired: row.justificationRequired,
        countWorkingDaysOnly: row.countWorkingDaysOnly,
        active: row.active,
    })
}

onMounted(load)
</script>
