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

defineOptions({ layout: AppLayout })

const form = useForm({
    name: '',
    email: '',
    phone: '',
    admin_name: '',
    admin_email: '',
    admin_password: '',
})

function submit() {
    form.post(route('super-admin.tenants.store'))
}
</script>

<template>
    <div class="max-w-2xl">
        <div class="mb-5">
            <h1 class="text-xl font-bold text-slate-800">إضافة شركة جديدة</h1>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
            <form @submit.prevent="submit" class="space-y-6">
                <div>
                    <h3 class="text-sm font-semibold text-slate-700 mb-4 pb-2 border-b border-slate-100">بيانات الشركة</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">اسم الشركة <span class="text-red-500">*</span></label>
                            <input v-model="form.name" type="text" placeholder="مثال: شركة التقنية المتطورة"
                                :class="['w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition-colors', form.errors.name ? 'border-red-300' : 'border-slate-200 focus:border-indigo-400']" />
                            <p v-if="form.errors.name" class="mt-1 text-xs text-red-500">{{ form.errors.name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">البريد الإلكتروني</label>
                            <input v-model="form.email" type="email" class="w-full border border-slate-200 focus:border-indigo-400 rounded-xl px-4 py-2.5 text-sm outline-none transition-colors" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">رقم الهاتف</label>
                            <input v-model="form.phone" type="text" class="w-full border border-slate-200 focus:border-indigo-400 rounded-xl px-4 py-2.5 text-sm outline-none transition-colors" />
                        </div>
                    </div>
                </div>

                <div>
                    <h3 class="text-sm font-semibold text-slate-700 mb-4 pb-2 border-b border-slate-100">بيانات مدير الشركة</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">الاسم الكامل <span class="text-red-500">*</span></label>
                            <input v-model="form.admin_name" type="text"
                                :class="['w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition-colors', form.errors.admin_name ? 'border-red-300' : 'border-slate-200 focus:border-indigo-400']" />
                            <p v-if="form.errors.admin_name" class="mt-1 text-xs text-red-500">{{ form.errors.admin_name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">البريد الإلكتروني <span class="text-red-500">*</span></label>
                            <input v-model="form.admin_email" type="email"
                                :class="['w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition-colors', form.errors.admin_email ? 'border-red-300' : 'border-slate-200 focus:border-indigo-400']" />
                            <p v-if="form.errors.admin_email" class="mt-1 text-xs text-red-500">{{ form.errors.admin_email }}</p>
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">كلمة المرور <span class="text-red-500">*</span></label>
                            <input v-model="form.admin_password" type="password" placeholder="8 أحرف على الأقل"
                                :class="['w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition-colors', form.errors.admin_password ? 'border-red-300' : 'border-slate-200 focus:border-indigo-400']" />
                            <p v-if="form.errors.admin_password" class="mt-1 text-xs text-red-500">{{ form.errors.admin_password }}</p>
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-3 pt-2">
                    <button type="submit" :disabled="form.processing"
                        class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white text-sm font-medium px-6 py-2.5 rounded-xl transition-colors">
                        <svg v-if="form.processing" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                        {{ form.processing ? 'جاري الحفظ...' : 'إنشاء الشركة' }}
                    </button>
                    <Link :href="route('super-admin.tenants.index')" class="text-sm text-slate-500 hover:text-slate-700 px-4 py-2.5 rounded-xl hover:bg-slate-100 transition-colors">
                        إلغاء
                    </Link>
                </div>
            </form>
        </div>
    </div>
</template>