<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { toast } from 'vue-sonner';
import { RupiahInput } from '@/components/form/rupiah-input';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Field, FieldError, FieldGroup, FieldLabel, FieldSet } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { formErrors } from '@/lib/form';
import { update } from '@/routes/admin/system/settings/hr';
import type { HrSettingsData } from '@/types/setting';

const props = defineProps<{
    data: HrSettingsData;
}>();

const form = useForm({
    scheduled_check_in_time: props.data.scheduled_check_in_time,
    scheduled_check_out_time: props.data.scheduled_check_out_time,
    late_penalty_amount: String(props.data.late_penalty_amount),
    absent_penalty_amount: String(props.data.absent_penalty_amount),
});

function submit() {
    form.put(update.url(), {
        preserveScroll: true,
        onError: (errors: any) => {
            if (errors.system) {
                toast.error(errors.system);
            }
        },
    });
}
</script>

<template>
    <form @submit.prevent="submit">
        <Card>
            <CardContent>
                <FieldSet>
                    <FieldGroup class="grid gap-4 sm:grid-cols-2">
                        <Field>
                            <FieldLabel for="scheduled_check_in_time" required>Jam Masuk Kerja</FieldLabel>
                            <Input id="scheduled_check_in_time" v-model="form.scheduled_check_in_time" type="time" />
                            <p class="text-xs text-muted-foreground mt-1">
                                Jam masuk yang dijadwalkan. Keterlambatan dihitung dari jam ini. Notifikasi pengingat
                                dikirim 30 menit sebelum jam ini.
                            </p>
                            <FieldError :errors="formErrors(form, 'scheduled_check_in_time')" />
                        </Field>

                        <Field>
                            <FieldLabel for="scheduled_check_out_time" required>Jam Pulang Kerja</FieldLabel>
                            <Input id="scheduled_check_out_time" v-model="form.scheduled_check_out_time" type="time" />
                            <p class="text-xs text-muted-foreground mt-1">
                                Jam pulang yang dijadwalkan. Digunakan sebagai referensi waktu kerja.
                            </p>
                            <FieldError :errors="formErrors(form, 'scheduled_check_out_time')" />
                        </Field>

                        <Field>
                            <FieldLabel for="late_penalty_amount">Denda Keterlambatan</FieldLabel>
                            <RupiahInput id="late_penalty_amount" v-model="form.late_penalty_amount" placeholder="0" />
                            <p class="text-xs text-muted-foreground mt-1">
                                Potongan gaji otomatis jika pegawai terlambat melakukan presensi masuk.
                            </p>
                            <FieldError :errors="formErrors(form, 'late_penalty_amount')" />
                        </Field>

                        <Field>
                            <FieldLabel for="absent_penalty_amount">Denda Bolos</FieldLabel>
                            <RupiahInput id="absent_penalty_amount" v-model="form.absent_penalty_amount"
                                placeholder="0" />
                            <p class="text-xs text-muted-foreground mt-1">
                                Potongan gaji otomatis jika pegawai tidak melakukan presensi masuk dan pulang (bolos).
                            </p>
                            <FieldError :errors="formErrors(form, 'absent_penalty_amount')" />
                        </Field>
                    </FieldGroup>
                </FieldSet>
            </CardContent>
        </Card>

        <div class="mt-6 flex justify-end">
            <Button type="submit" :disabled="form.processing">
                <Save class="size-4" />
                {{ form.processing ? 'Menyimpan...' : 'Simpan' }}
            </Button>
        </div>
    </form>
</template>
