@extends('layouts.public')

@section('title', 'Sign Up - Don\'t Forget')

@section('content')
<div class="min-h-screen flex flex-col bg-bg">
    <form x-data="signupForm()" @submit.prevent="handleSubmit" class="w-full max-w-4xl mx-auto space-y-6 py-10 px-4">
        <div class="space-y-6 border border-border rounded-md p-4 sm:p-6 bg-white">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-text">Create Account</h2>
                <p class="text-text/60 text-sm mt-1">Fill in your details to create a new account.</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {{-- First Name --}}
                <div>
                    <label class="block text-sm font-semibold text-text mb-1">First Name</label>
                    <input type="text" x-model="form.firstName" placeholder="Enter first name" required
                        class="w-full border border-border bg-white rounded-md p-3.5 outline-none text-text text-sm focus:ring-2 focus:ring-cta/50">
                </div>

                {{-- Last Name --}}
                <div>
                    <label class="block text-sm font-semibold text-text mb-1">Last Name</label>
                    <input type="text" x-model="form.lastName" placeholder="Enter last name" required
                        class="w-full border border-border bg-white rounded-md p-3.5 outline-none text-text text-sm focus:ring-2 focus:ring-cta/50">
                </div>

                {{-- Email --}}
                <div>
                    <label class="block text-sm font-semibold text-text mb-1">Email</label>
                    <input type="email" x-model="form.email" placeholder="Enter email" required
                        class="w-full border border-border bg-white rounded-md p-3.5 outline-none text-text text-sm focus:ring-2 focus:ring-cta/50">
                </div>

                {{-- Phone --}}
                <div>
                    <label class="block text-sm font-semibold text-text mb-1">Phone</label>
                    <input type="text" x-model="form.phone" placeholder="Enter phone number" required
                        class="w-full border border-border bg-white rounded-md p-3.5 outline-none text-text text-sm focus:ring-2 focus:ring-cta/50">
                </div>

                {{-- Business Name --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-text mb-1">Business Name</label>
                    <input type="text" x-model="form.businessName" placeholder="Enter business name" required
                        class="w-full border border-border bg-white rounded-md p-3.5 outline-none text-text text-sm focus:ring-2 focus:ring-cta/50">
                </div>
            </div>
        </div>

        <div class="space-y-6 border border-border rounded-md p-4 sm:p-6 bg-white">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-text">Security</h2>
                <p class="text-text/60 text-sm mt-1">Set your account password.</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {{-- Password --}}
                <div>
                    <label class="block text-sm font-semibold text-text mb-1">Password</label>
                    <input type="password" x-model="form.password" placeholder="Enter password" required
                        class="w-full border border-border bg-white rounded-md p-3.5 outline-none text-text text-sm focus:ring-2 focus:ring-cta/50">
                </div>

                {{-- Confirm Password --}}
                <div>
                    <label class="block text-sm font-semibold text-text mb-1">Confirm Password</label>
                    <input type="password" x-model="form.confirmPassword" placeholder="Confirm password" required
                        class="w-full border border-border bg-white rounded-md p-3.5 outline-none text-text text-sm focus:ring-2 focus:ring-cta/50">
                </div>
            </div>

            <div class="flex items-center gap-4">
                <button type="submit" class="px-8 py-3 bg-cta text-white font-bold rounded-xl shadow-sm hover:opacity-90 active:scale-95 transition-all">
                    Create Account
                </button>
                <a href="javascript:history.back()" class="px-8 py-3 border border-border text-text font-bold rounded-xl hover:bg-gray-50 transition-all">
                    Back
                </a>
            </div>
        </div>
    </form>
</div>

<script>
function signupForm() {
    return {
        form: {
            firstName: '',
            lastName: '',
            email: '',
            phone: '',
            businessName: '',
            password: '',
            confirmPassword: ''
        },
        handleSubmit() {
            if (this.form.password !== this.form.confirmPassword) {
                alert("Passwords do not match");
                return;
            }
            alert("Account created successfully (Mock)");
            window.location.href = '/login';
        }
    }
}
</script>
@endsection