<template>
  <AppLayout title="Create Guardian">
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        Create New Guardian
      </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 }"
                    required
                  />
                  <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>

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

                <!-- Relationship -->
                <div>
                  <label for="relationship" class="block text-sm font-medium text-gray-700">Relationship</label>
                  <select
                    id="relationship"
                    v-model="form.relationship"
                    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.relationship }"
                    required
                  >
                    <option value="">Select Relationship</option>
                    <option value="father">Father</option>
                    <option value="mother">Mother</option>
                    <option value="guardian">Guardian</option>
                    <option value="grandfather">Grandfather</option>
                    <option value="grandmother">Grandmother</option>
                    <option value="uncle">Uncle</option>
                    <option value="aunt">Aunt</option>
                    <option value="other">Other</option>
                  </select>
                  <div v-if="form.errors.relationship" class="mt-2 text-sm text-red-600">
                    {{ form.errors.relationship }}
                  </div>
                </div>

                <!-- Occupation -->
                <div>
                  <label for="occupation" class="block text-sm font-medium text-gray-700">Occupation</label>
                  <input
                    id="occupation"
                    v-model="form.occupation"
                    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.occupation }"
                  />
                  <div v-if="form.errors.occupation" class="mt-2 text-sm text-red-600">
                    {{ form.errors.occupation }}
                  </div>
                </div>

                <!-- Workplace -->
                <div>
                  <label for="workplace" class="block text-sm font-medium text-gray-700">Workplace</label>
                  <input
                    id="workplace"
                    v-model="form.workplace"
                    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.workplace }"
                  />
                  <div v-if="form.errors.workplace" class="mt-2 text-sm text-red-600">
                    {{ form.errors.workplace }}
                  </div>
                </div>

                <!-- Work Phone -->
                <div>
                  <label for="work_phone" class="block text-sm font-medium text-gray-700">Work Phone</label>
                  <input
                    id="work_phone"
                    v-model="form.work_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.work_phone }"
                  />
                  <div v-if="form.errors.work_phone" class="mt-2 text-sm text-red-600">
                    {{ form.errors.work_phone }}
                  </div>
                </div>

                <!-- Emergency Contact -->
                <div class="col-span-2">
                  <div class="flex items-center">
                    <input
                      id="is_emergency_contact"
                      v-model="form.is_emergency_contact"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    />
                    <label for="is_emergency_contact" class="ml-2 block text-sm text-gray-900">
                      Primary Emergency Contact
                    </label>
                  </div>
                  <div v-if="form.errors.is_emergency_contact" class="mt-2 text-sm text-red-600">
                    {{ form.errors.is_emergency_contact }}
                  </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 Guardian
                    </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('guardians.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-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
                >
                  <span v-if="form.processing">Creating...</span>
                  <span v-else>Create Guardian</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

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

const form = useForm({
  first_name: '',
  last_name: '',
  email: '',
  phone: '',
  date_of_birth: '',
  gender: '',
  address: '',
  relationship: '',
  occupation: '',
  workplace: '',
  work_phone: '',
  is_emergency_contact: false,
  is_active: true
})

const submit = () => {
  form.post(route('guardians.store'))
}
</script>
