<script setup lang="ts">
import ShopLayout from '@/Layouts/ShopLayout.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ArrowLeft } from 'lucide-vue-next';

const form = useForm({
    shop_name: '',
    phone_number: '',
    password: '',
    password_confirmation: '',
});

const submit = () => {
    form.post(route('shop.register'));
};
</script>

<template>
    <div class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center p-4">
        <Head title="Shop Register" />

        <div class="w-full max-w-md">
            <div class="rounded-2xl border border-slate-700 bg-slate-800/50 backdrop-blur p-8 shadow-xl">
                <h1 class="text-3xl font-black text-white mb-2">Join Mobile Unlock Service Platform</h1>
                <p class="text-slate-400 mb-8">Register your mobile shop to manage unlock orders</p>

                <form @submit.prevent="submit" class="space-y-4">
                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Shop Name</label>
                        <input
                            v-model="form.shop_name"
                            type="text"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            placeholder="My Mobile Shop"
                            required
                        />
                        <div v-if="form.errors.shop_name" class="mt-1 text-sm text-red-400">{{ form.errors.shop_name }}</div>
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Phone Number</label>
                        <input
                            v-model="form.phone_number"
                            type="text"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            placeholder="98XXXXXXXXX"
                            required
                        />
                        <div v-if="form.errors.phone_number" class="mt-1 text-sm text-red-400">{{ form.errors.phone_number }}</div>
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Password</label>
                        <input
                            v-model="form.password"
                            type="password"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            required
                        />
                        <div v-if="form.errors.password" class="mt-1 text-sm text-red-400">{{ form.errors.password }}</div>
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Confirm Password</label>
                        <input
                            v-model="form.password_confirmation"
                            type="password"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            required
                        />
                    </div>

                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="w-full rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 py-3 font-bold text-white transition-all hover:shadow-lg disabled:opacity-50"
                    >
                        {{ form.processing ? 'Creating Account...' : 'Register' }}
                    </button>
                </form>

                <div class="mt-6 text-center">
                    <p class="text-slate-400">Already have account? <Link href="route('shop.login')" class="text-blue-400 hover:text-blue-300 font-bold">Login here</Link></p>
                </div>
            </div>
        </div>
    </div>
</template>
