<template>
  <Layout>
    <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 text-gray-900">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-2xl font-bold">Create New Center</h2>
              <Link href="/admin/centers/index" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                Back to Centers
              </Link>
            </div>

            <form @submit.prevent="submit">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">Center Name</label>
                  <input 
                    v-model="form.name" 
                    type="text" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                    required
                  >
                  <div v-if="errors.name" class="text-red-600 text-sm mt-1">{{ errors.name }}</div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">Location</label>
                  <input 
                    v-model="form.location" 
                    type="text" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                    required
                  >
                  <div v-if="errors.location" class="text-red-600 text-sm mt-1">{{ errors.location }}</div>
                </div>

                <div class="md:col-span-2">
                  <label class="block text-sm font-medium text-gray-700 mb-2">Assign Manager (Optional)</label>
                  <select v-model="form.manager_id" class="w-full border-gray-300 rounded-md">
                    <option value="">No Manager</option>
                    <option v-for="partner in availablePartners" :key="partner.id" :value="partner.id">
                      {{ partner.name }} - {{ partner.email }}
                    </option>
                  </select>
                  <div v-if="errors.manager_id" class="text-red-600 text-sm mt-1">{{ errors.manager_id }}</div>
                  <p class="text-sm text-gray-500 mt-1">Select a partner to be the manager of this center</p>
                </div>
              </div>

              <button 
                type="submit" 
                :disabled="processing"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
              >
                {{ processing ? 'Creating...' : 'Create Center' }}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import Layout from '@/Components/Layout.vue'
import { Link, useForm } from '@inertiajs/vue3'

defineProps({
  availablePartners: Array,
  errors: Object
})

const form = useForm({
  name: '',
  location: '',
  manager_id: ''
})

const submit = () => {
  form.post('/admin/centers/store')
}

const { processing } = form
</script>