<template>
    <Head :title="period ? 'Edit Period' : 'Create Period'" />
    <AuthenticatedLayout :title="period ? 'Edit Appraisal Period' : 'Create Appraisal Period'">
        <div class="max-w-2xl">
            <div class="bg-white rounded-2xl border border-surface-200 p-6 shadow-sm">
                <form @submit.prevent="submit" class="space-y-5">
                    <div><label class="block text-sm font-medium text-surface-700 mb-1.5">Period Name *</label><input v-model="form.name" type="text" required class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500" placeholder="e.g. May – December 2024" /><p v-if="form.errors.name" class="mt-1 text-sm text-red-500">{{ form.errors.name }}</p></div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div><label class="block text-sm font-medium text-surface-700 mb-1.5">Start Date *</label><input v-model="form.start_date" type="date" required class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500" /></div>
                        <div><label class="block text-sm font-medium text-surface-700 mb-1.5">End Date *</label><input v-model="form.end_date" type="date" required class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500" /></div>
                    </div>
                    <div><label class="block text-sm font-medium text-surface-700 mb-1.5">Description</label><textarea v-model="form.description" rows="3" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500"></textarea></div>
                    <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1.5">Status *</label>
                        <select v-model="form.status" required class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500">
                            <option value="draft">Draft</option>
                            <option value="active">Active</option>
                            <option value="closed">Closed</option>
                        </select>
                        <p v-if="form.status === 'active'" class="mt-1 text-xs text-amber-600">⚠ Activating this period will close any currently active period.</p>
                    </div>
                    <div class="flex items-center gap-4 pt-4 border-t border-surface-200">
                        <button type="submit" :disabled="form.processing" class="px-6 py-2.5 bg-primary-600 text-white rounded-xl text-sm font-medium hover:bg-primary-700 disabled:opacity-50 transition-colors">{{ period ? 'Update' : 'Create' }} Period</button>
                        <Link href="/appraisal-periods" class="px-6 py-2.5 border border-surface-200 text-surface-600 rounded-xl text-sm font-medium hover:bg-surface-50 transition-colors">Cancel</Link>
                    </div>
                </form>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
const props = defineProps({ period: Object });
const form = useForm({ name: props.period?.name || '', start_date: props.period?.start_date?.split('T')[0] || '', end_date: props.period?.end_date?.split('T')[0] || '', description: props.period?.description || '', status: props.period?.status || 'draft' });
function submit() { props.period ? form.put('/appraisal-periods/' + props.period.id) : form.post('/appraisal-periods'); }
</script>
