<template>
    <Head :title="kra ? 'Edit KRA' : 'Create KRA'" />
    <AuthenticatedLayout :title="kra ? 'Edit Key Result Area' : 'Create Key Result Area'">
        <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">KRA 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" /></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">Department</label><select v-model="form.department_id" 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="null">Organization-wide</option><option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option></select><p class="mt-1 text-xs text-surface-400">Leave as "Organization-wide" for KRAs that apply to all departments.</p></div>
                    <div class="flex items-center gap-2"><input v-model="form.is_active" type="checkbox" id="active" class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500" /><label for="active" class="text-sm text-surface-700">Active</label></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">{{ kra ? 'Update' : 'Create' }}</button>
                        <Link href="/kras" class="px-6 py-2.5 border border-surface-200 text-surface-600 rounded-xl text-sm font-medium hover:bg-surface-50">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({ kra: Object, departments: Array });
const form = useForm({ name: props.kra?.name || '', description: props.kra?.description || '', department_id: props.kra?.department_id || null, is_active: props.kra?.is_active ?? true });
function submit() { props.kra ? form.put('/kras/' + props.kra.id) : form.post('/kras'); }
</script>
