<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
      <div class="text-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800">Portal Aseguradora</h1>
        <p class="text-gray-600 mt-2">Ingrese sus credenciales</p>
      </div>

      <form @submit.prevent="login">
        <div class="mb-4">
          <InputLabel for="ruc" value="RUC" />
          <TextInput
            id="ruc"
            v-model="form.ruc"
            type="text"
            class="mt-1 block w-full"
            required
            placeholder="1234567890001"
          />
          <InputError :message="errors.ruc" class="mt-2" />
        </div>

        <div class="mb-6">
          <InputLabel for="codigo_acceso" value="Código de Acceso" />
          <TextInput
            id="codigo_acceso"
            v-model="form.codigo_acceso"
            type="password"
            class="mt-1 block w-full"
            required
            placeholder="••••••••"
          />
          <InputError :message="errors.codigo_acceso" class="mt-2" />
        </div>

        <PrimaryButton class="w-full justify-center" :disabled="form.processing">
          Ingresar
        </PrimaryButton>
      </form>

      <div class="mt-6 text-center">
        <Link :href="route('portal.caso_no_encontrado')" class="text-sm text-blue-600 hover:underline">
          ¿Caso no encontrado?
        </Link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3'
import { Link } from '@inertiajs/vue3'
import InputLabel from '@/Components/InputLabel.vue'
import TextInput from '@/Components/TextInput.vue'
import InputError from '@/Components/InputError.vue'
import PrimaryButton from '@/Components/PrimaryButton.vue'

defineProps({
  title: String,
  errors: Object
})

const form = useForm({
  ruc: '',
  codigo_acceso: ''
})

const login = () => {
  form.post(route('portal.authenticate'), {
    onFinish: () => form.reset('codigo_acceso')
  })
}
</script>
