<template>
  <AppLayout title="Create Teacher">
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        Create New Teacher
      </h2>
    </template>

    <div class="py-12">
      <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
          <div class="p-6 bg-white border-b border-gray-200">
            <form @submit.prevent="submit">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Personal Information -->
                <div class="col-span-2">
                  <h3 class="text-lg font-medium text-gray-900 mb-4">Personal Information</h3>
                </div>

                <!-- First Name -->
                <div>
                  <label for="first_name" class="block text-sm font-medium text-gray-700">First Name</label>
                  <input
                    id="first_name"
                    v-model="form.first_name"
                    type="text"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.first_name }"
                    required
                  />
                  <div v-if="form.errors.first_name" class="mt-2 text-sm text-red-600">
                    {{ form.errors.first_name }}
                  </div>
                </div>

                <!-- Last Name -->
                <div>
                  <label for="last_name" class="block text-sm font-medium text-gray-700">Last Name</label>
                  <input
                    id="last_name"
                    v-model="form.last_name"
                    type="text"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.last_name }"
                    required
                  />
                  <div v-if="form.errors.last_name" class="mt-2 text-sm text-red-600">
                    {{ form.errors.last_name }}
                  </div>
                </div>

                <!-- Email -->
                <div>
                  <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                  <input
                    id="email"
                    v-model="form.email"
                    type="email"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.email }"
                    required
                  />
                  <div v-if="form.errors.email" class="mt-2 text-sm text-red-600">
                    {{ form.errors.email }}
                  </div>
                </div>

                <!-- Phone -->
                <div>
                  <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
                  <input
                    id="phone"
                    v-model="form.phone"
                    type="tel"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.phone }"
                  />
                  <div v-if="form.errors.phone" class="mt-2 text-sm text-red-600">
                    {{ form.errors.phone }}
                  </div>
                </div>

                <!-- Date of Birth -->
                <div>
                  <label for="date_of_birth" class="block text-sm font-medium text-gray-700">Date of Birth</label>
                  <input
                    id="date_of_birth"
                    v-model="form.date_of_birth"
                    type="date"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.date_of_birth }"
                  />
                  <div v-if="form.errors.date_of_birth" class="mt-2 text-sm text-red-600">
                    {{ form.errors.date_of_birth }}
                  </div>
                </div>

                <!-- Gender -->
                <div>
                  <label for="gender" class="block text-sm font-medium text-gray-700">Gender</label>
                  <select
                    id="gender"
                    v-model="form.gender"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.gender }"
                  >
                    <option value="">Select Gender</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                    <option value="other">Other</option>
                  </select>
                  <div v-if="form.errors.gender" class="mt-2 text-sm text-red-600">
                    {{ form.errors.gender }}
                  </div>
                </div>

                <!-- Address -->
                <div class="col-span-2">
                  <label for="address" class="block text-sm font-medium text-gray-700">Address</label>
                  <textarea
                    id="address"
                    v-model="form.address"
                    rows="3"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.address }"
                  ></textarea>
                  <div v-if="form.errors.address" class="mt-2 text-sm text-red-600">
                    {{ form.errors.address }}
                  </div>
                </div>

                <!-- Professional Information -->
                <div class="col-span-2 mt-6">
                  <h3 class="text-lg font-medium text-gray-900 mb-4">Professional Information</h3>
                </div>

                <!-- Employee ID -->
                <div>
                  <label for="employee_id" class="block text-sm font-medium text-gray-700">Employee ID</label>
                  <input
                    id="employee_id"
                    v-model="form.employee_id"
                    type="text"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.employee_id }"
                    required
                  />
                  <div v-if="form.errors.employee_id" class="mt-2 text-sm text-red-600">
                    {{ form.errors.employee_id }}
                  </div>
                </div>

                <!-- Hire Date -->
                <div>
                  <label for="hire_date" class="block text-sm font-medium text-gray-700">Hire Date</label>
                  <input
                    id="hire_date"
                    v-model="form.hire_date"
                    type="date"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.hire_date }"
                    required
                  />
                  <div v-if="form.errors.hire_date" class="mt-2 text-sm text-red-600">
                    {{ form.errors.hire_date }}
                  </div>
                </div>

                <!-- Qualification -->
                <div>
                  <label for="qualification" class="block text-sm font-medium text-gray-700">Qualification</label>
                  <input
                    id="qualification"
                    v-model="form.qualification"
                    type="text"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.qualification }"
                  />
                  <div v-if="form.errors.qualification" class="mt-2 text-sm text-red-600">
                    {{ form.errors.qualification }}
                  </div>
                </div>

                <!-- Experience Years -->
                <div>
                  <label for="experience_years" class="block text-sm font-medium text-gray-700">Years of Experience</label>
                  <input
                    id="experience_years"
                    v-model="form.experience_years"
                    type="number"
                    min="0"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    :class="{ 'border-red-500': form.errors.experience_years }"
                  />
                  <div v-if="form.errors.experience_years" class="mt-2 text-sm text-red-600">
                    {{ form.errors.experience_years }}
                  </div>
                </div>

                <!-- Subject Assignment -->
                <div class="col-span-2" v-if="subjects.length > 0">
                  <label for="subject_ids" class="block text-sm font-medium text-gray-700">Subjects to Teach</label>
                  <div class="mt-2 space-y-2">
                    <div v-for="subject in subjects" :key="subject.id" class="flex items-center">
                      <input
                        :id="`subject_${subject.id}`"
                        v-model="form.subject_ids"
                        :value="subject.id"
                        type="checkbox"
                        class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                      />
                      <label :for="`subject_${subject.id}`" class="ml-2 block text-sm text-gray-900">
                        {{ subject.name }} ({{ subject.code }})
                      </label>
                    </div>
                  </div>
                  <div v-if="form.errors.subject_ids" class="mt-2 text-sm text-red-600">
                    {{ form.errors.subject_ids }}
                  </div>
                </div>

                <!-- Active Status -->
                <div class="col-span-2">
                  <div class="flex items-center">
                    <input
                      id="is_active"
                      v-model="form.is_active"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    />
                    <label for="is_active" class="ml-2 block text-sm text-gray-900">
                      Active Teacher
                    </label>
                  </div>
                  <div v-if="form.errors.is_active" class="mt-2 text-sm text-red-600">
                    {{ form.errors.is_active }}
                  </div>
                </div>
              </div>

              <!-- Form Actions -->
              <div class="mt-6 flex items-center justify-end space-x-3">
                <Link :href="route('teachers.index')" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                  Cancel
                </Link>
                <button
                  type="submit"
                  :disabled="form.processing"
                  class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
                >
                  <span v-if="form.processing">Creating...</span>
                  <span v-else>Create Teacher</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { useForm, Link, usePage } from '@inertiajs/vue3'
import { useToast } from '@/composables/useToast'
import { onMounted } from 'vue'
import AppLayout from '@/layouts/AppLayout.vue'

const props = defineProps({
  subjects: {
    type: Array,
    default: () => []
  }
})

const page = usePage()
const toast = useToast()

const form = useForm({
  first_name: '',
  last_name: '',
  email: '',
  phone: '',
  date_of_birth: '',
  gender: '',
  address: '',
  employee_id: '',
  hire_date: new Date().toISOString().split('T')[0],
  qualification: '',
  experience_years: 0,
  subject_ids: [],
  is_active: true
})

const submit = () => {
  form.post(route('teachers.store'), {
    onError: (errors) => {
      // Show toast for validation errors
      const firstError = Object.values(errors)[0]
      const errorMessage = Array.isArray(firstError) ? firstError[0] : firstError
      toast.error(errorMessage || 'Please check the form for errors.')
    }
  })
}

// Show success toast if redirected with success message
onMounted(() => {
  if (page.props.success) {
    toast.success(page.props.success)
  }
})
</script>
