<script setup>
import { computed } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { useI18n } from 'vue-i18n';

import { SecondaryButton } from '@/Components/Jet';
import { AutoComplete, DateInput, Input, LoadingButton, Textarea, TimePicker } from '@/Components/Common';

const { t } = useI18n();
const emit = defineEmits(['close', 'done']);
const props = defineProps(['current', 'stores', 'employees']);

const employeeOptions = computed(() => props.employees.map(e => ({ value: e.id, label: e.user?.name || `#${e.id}` })));

const statusOptions = [
  { value: 'present', label: t('Present') },
  { value: 'absent', label: t('Absent') },
  { value: 'late', label: t('Late') },
  { value: 'half_day', label: t('Half Day') },
  { value: 'holiday', label: t('Holiday') },
  { value: 'on_leave', label: t('On Leave') },
];

const form = useForm({
  _method: props.current?.id ? 'put' : 'post',
  employee_id: props.current?.employee_id || null,
  store_id: props.current?.store_id || null,
  date: props.current?.date || '',
  clock_in: props.current?.clock_in || '',
  clock_out: props.current?.clock_out || '',
  overtime_hours: props.current?.overtime_hours ?? 0,
  status: props.current?.status || 'present',
  note: props.current?.note || '',
});

function handleSubmit() {
  form.post(props.current?.id ? route('attendances.update', props.current.id) : route('attendances.store'), {
    preserveScroll: true,
    onSuccess: p => {
      emit('done', p.props.flash?.data);
      emit('close');
    },
  });
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
      <h1 class="text-focus text-base font-semibold">
        {{ current?.id ? $t('Edit {x}', { x: $t('Attendance') }) : $t('Add {x}', { x: $t('Attendance') }) }}
      </h1>
      <p class="text-mute mt-1 text-sm">
        {{
          $t('Please fill the form below to {action} {record}.', { record: $t('attendance'), action: current?.id ? $t('edit') : $t('add') })
        }}
      </p>
    </div>

    <div class="grid grid-cols-6 gap-6 p-6">
      <div class="col-span-6 sm:col-span-3">
        <AutoComplete
          :json="true"
          :label="$t('Employee')"
          v-model="form.employee_id"
          :suggestions="employeeOptions"
          :error="form.errors.employee_id"
          :placeholder="$t('Select employee')"
        />
      </div>

      <div class="col-span-6 sm:col-span-3">
        <AutoComplete
          :json="true"
          :label="$t('Store')"
          :suggestions="stores"
          v-model="form.store_id"
          :error="form.errors.store_id"
          :placeholder="$t('Select store')"
        />
      </div>

      <div class="col-span-6 sm:col-span-3">
        <DateInput type="date" :label="$t('Date')" :required="true" v-model="form.date" :error="form.errors.date" />
      </div>

      <div class="col-span-6 sm:col-span-3">
        <AutoComplete :json="true" :label="$t('Status')" v-model="form.status" :error="form.errors.status" :suggestions="statusOptions" />
      </div>

      <div class="col-span-6 sm:col-span-2">
        <TimePicker :label="$t('Clock In')" v-model="form.clock_in" :error="form.errors.clock_in" />
      </div>

      <div class="col-span-6 sm:col-span-2">
        <TimePicker :label="$t('Clock Out')" v-model="form.clock_out" :error="form.errors.clock_out" />
      </div>

      <div class="col-span-6 sm:col-span-2">
        <Input type="number" step="0.5" :label="$t('Overtime Hours')" v-model="form.overtime_hours" :error="form.errors.overtime_hours" />
      </div>

      <div class="col-span-6">
        <Textarea rows="2" :label="$t('Note')" v-model="form.note" :error="form.errors.note" />
      </div>
    </div>

    <div class="flex flex-row justify-end bg-gray-100 px-6 py-4 text-end dark:bg-gray-950">
      <SecondaryButton @click="$emit('close')">{{ $t('Cancel') }}</SecondaryButton>
      <LoadingButton class="ms-3" :loading="form.processing">{{ $t('Save') }}</LoadingButton>
    </div>
  </form>
</template>
