<template>
    <Head :title="staff ? 'Edit Staff' : 'Add Staff'" />
    <AuthenticatedLayout :title="staff ? 'Edit Staff' : 'Add Staff Member'">
        <div class="max-w-4xl">
            <div class="bg-white rounded-2xl border border-surface-200 p-6 shadow-sm">
                <form @submit.prevent="submit" class="space-y-6">
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">Surname *</label>
                            <input v-model="form.surname" 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 focus:border-transparent" />
                            <p v-if="form.errors.surname" class="mt-1 text-sm text-red-500">{{ form.errors.surname }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">First Name *</label>
                            <input v-model="form.firstname" 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 focus:border-transparent" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">Other Name</label>
                            <input v-model="form.othername" type="text" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent" />
                        </div>
                    </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">Email *</label>
                            <input v-model="form.email" type="email" required class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent" />
                            <p v-if="form.errors.email" class="mt-1 text-sm text-red-500">{{ form.errors.email }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">Phone</label>
                            <input v-model="form.phone" type="text" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent" />
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">IPPIS No.</label>
                            <input v-model="form.ippis_no" type="text" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">Staff Number</label>
                            <input v-model="form.staff_number" type="text" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">Designation</label>
                            <input v-model="form.designation" type="text" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent" />
                        </div>
                    </div>

                    <!-- Role & Reporting Hierarchy (Supervisor & Counter-Signing Officer) -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">System Role *</label>
                            <select v-model="form.role" required class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                                <option v-for="r in roles" :key="r.value" :value="r.value">{{ r.label }}</option>
                            </select>
                        </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 focus:border-transparent">
                                <option :value="null">-- Select Department --</option>
                                <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">Immediate Supervisor</label>
                            <select v-model="form.supervisor_id" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                                <option :value="null">-- None / Self --</option>
                                <option v-for="s in supervisors" :key="s.id" :value="s.id">{{ s.surname }} {{ s.firstname }} ({{ s.designation || 'Officer' }})</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">Counter-Signing Officer</label>
                            <select v-model="form.counter_signing_officer_id" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                                <option :value="null">-- Auto (Supervisor's Boss / HOD) --</option>
                                <option v-for="c in counterSigningOfficers" :key="c.id" :value="c.id">{{ c.surname }} {{ c.firstname }} ({{ c.designation || 'Director/HOD' }})</option>
                            </select>
                        </div>
                    </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">Password {{ staff ? '' : '*' }}</label>
                            <input v-model="form.password" type="password" :required="!staff" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent" :placeholder="staff ? 'Leave blank to keep current' : ''" />
                            <p v-if="form.errors.password" class="mt-1 text-sm text-red-500">{{ form.errors.password }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1.5">Confirm Password {{ staff ? '' : '*' }}</label>
                            <input v-model="form.password_confirmation" type="password" :required="!staff" class="w-full px-4 py-2.5 rounded-xl border border-surface-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent" />
                        </div>
                    </div>

                    <div v-if="staff" class="flex items-center gap-2">
                        <input v-model="form.is_active" type="checkbox" id="is_active" class="w-4 h-4 rounded text-primary-600 focus:ring-primary-500" />
                        <label for="is_active" class="text-sm text-surface-700">Active Account</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 transition-colors">
                            {{ staff ? 'Update Staff' : 'Create Staff' }}
                        </button>
                        <Link href="/staff" 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({
    staff: Object,
    departments: Array,
    supervisors: Array,
    counterSigningOfficers: Array,
    roles: Array
});

const form = useForm({
    surname: props.staff?.surname || '',
    firstname: props.staff?.firstname || '',
    othername: props.staff?.othername || '',
    email: props.staff?.email || '',
    phone: props.staff?.phone || '',
    ippis_no: props.staff?.ippis_no || '',
    staff_number: props.staff?.staff_number || '',
    designation: props.staff?.designation || '',
    role: props.staff?.role || 'staff',
    department_id: props.staff?.department_id || null,
    supervisor_id: props.staff?.supervisor_id || null,
    counter_signing_officer_id: props.staff?.counter_signing_officer_id || null,
    is_active: props.staff?.is_active ?? true,
    password: '',
    password_confirmation: '',
});

function submit() {
    if (props.staff) {
        form.put('/staff/' + props.staff.id);
    } else {
        form.post('/staff');
    }
}
</script>
