<template>
  <Head title="Partner Login - ARP OS | Center Management Access" />
  <Layout>
    <div class="py-12 flex items-center justify-center">
      <div class="max-w-md w-full bg-white rounded-lg shadow-md p-6">
        <div class="text-center mb-6">
          <h1 class="text-2xl font-bold text-gray-900">Partner Login</h1>
          <p class="text-gray-600 mt-2">Access your center dashboard</p>
        </div>

        <form @submit.prevent="submit">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
            <input 
              v-model="form.email" 
              type="email" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
              placeholder="Enter your email"
              required
            >
            <div v-if="errors.email" class="text-red-600 text-sm mt-1">{{ errors.email }}</div>
          </div>

          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">Access Code</label>
            <input 
              v-model="form.access_code" 
              type="text" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500"
              placeholder="Enter your access code"
              required
            >
            <div v-if="errors.access_code" class="text-red-600 text-sm mt-1">{{ errors.access_code }}</div>
          </div>

          <button 
            type="submit" 
            :disabled="processing"
            class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
          >
            {{ processing ? 'Signing in...' : 'Sign In' }}
          </button>
        </form>

        <div class="mt-6 text-center">
          <Link href="/" class="text-gray-600 hover:text-gray-900 text-sm">← Back to Home</Link>
        </div>
      </div>
    </div>
  </Layout>
</template>

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

defineProps({
  errors: Object
})

const form = useForm({
  email: '',
  access_code: ''
})

const submit = () => {
  form.post('/partner/login')
}

const { processing } = form
</script>