@extends('layouts.guest')

@section('title', 'Create Workspace')

@section('content')
<main class="auth-shell flex min-h-screen" x-data="{ showPassword: false, showConfirmation: false }">
    @include('auth.partials.visual-panel')

    <section class="auth-form-side flex w-full flex-col lg:w-[46%]" aria-labelledby="signup-heading">
        <div class="flex min-h-screen flex-col px-4 py-5 sm:px-8 lg:px-[5%] lg:py-7">
            <div class="flex justify-end">
                @include('auth.partials.language-switcher')
            </div>

            <div class="my-auto flex w-full justify-center py-5">
                <div class="auth-card px-6 py-7 sm:px-9 sm:py-9 lg:px-11 lg:py-9">
                    <div class="text-center">
                        @include('auth.partials.brand')

                        <h1 id="signup-heading" class="mt-6 text-[clamp(1.65rem,2vw,2.05rem)] font-bold tracking-[-0.03em] text-[#0b1f38]">Create Your Workspace</h1>
                        <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-slate-500">Start your secure 14-day BrandX ERP trial. No credit card required.</p>
                    </div>

                    <div class="mt-6 space-y-4">
                        @include('auth.partials.messages')

                        <form action="{{ route('signup.store') }}" method="POST" class="space-y-4">
                            @csrf

                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label for="owner_name" class="mb-1.5 block text-xs font-semibold text-[#0b1f38]">Your name</label>
                                    <input class="auth-field w-full px-4 py-3 text-sm placeholder:text-slate-400" id="owner_name" name="owner_name" type="text" value="{{ old('owner_name') }}" placeholder="Full name" autocomplete="name" required>
                                </div>
                                <div>
                                    <label for="company_name" class="mb-1.5 block text-xs font-semibold text-[#0b1f38]">Typing center name</label>
                                    <input class="auth-field w-full px-4 py-3 text-sm placeholder:text-slate-400" id="company_name" name="company_name" type="text" value="{{ old('company_name') }}" placeholder="Company name" autocomplete="organization" required>
                                </div>
                            </div>

                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label for="email" class="mb-1.5 block text-xs font-semibold text-[#0b1f38]">Work email</label>
                                    <input class="auth-field w-full px-4 py-3 text-sm placeholder:text-slate-400" id="email" name="email" type="email" value="{{ old('email') }}" placeholder="you@company.ae" autocomplete="email" required>
                                </div>
                                <div>
                                    <label for="mobile" class="mb-1.5 block text-xs font-semibold text-[#0b1f38]">Mobile number</label>
                                    <input class="auth-field w-full px-4 py-3 text-sm placeholder:text-slate-400" id="mobile" name="mobile" type="tel" value="{{ old('mobile') }}" placeholder="+971 50 123 4567" autocomplete="tel" required>
                                </div>
                            </div>

                            <div>
                                <label for="emirate" class="mb-1.5 block text-xs font-semibold text-[#0b1f38]">Emirate</label>
                                <select class="auth-field w-full px-4 py-3 text-sm" id="emirate" name="emirate" required>
                                    <option value="" disabled {{ old('emirate') ? '' : 'selected' }}>Select your emirate</option>
                                    @foreach(['Abu Dhabi', 'Dubai', 'Sharjah', 'Ajman', 'Umm Al Quwain', 'Ras Al Khaimah', 'Fujairah'] as $emirate)
                                        <option value="{{ $emirate }}" {{ old('emirate') === $emirate ? 'selected' : '' }}>{{ $emirate }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label for="password" class="mb-1.5 block text-xs font-semibold text-[#0b1f38]">Password</label>
                                    <div class="relative">
                                        <input class="auth-field w-full py-3 pl-4 pr-14 text-sm placeholder:text-slate-400" id="password" name="password" :type="showPassword ? 'text' : 'password'" placeholder="Minimum 8 characters" autocomplete="new-password" required>
                                        <button type="button" class="absolute inset-y-0 right-3 text-xs font-semibold text-slate-400 hover:text-emerald-700" @click="showPassword = !showPassword" x-text="showPassword ? 'Hide' : 'Show'"></button>
                                    </div>
                                </div>
                                <div>
                                    <label for="password_confirmation" class="mb-1.5 block text-xs font-semibold text-[#0b1f38]">Confirm password</label>
                                    <div class="relative">
                                        <input class="auth-field w-full py-3 pl-4 pr-14 text-sm placeholder:text-slate-400" id="password_confirmation" name="password_confirmation" :type="showConfirmation ? 'text' : 'password'" placeholder="Repeat password" autocomplete="new-password" required>
                                        <button type="button" class="absolute inset-y-0 right-3 text-xs font-semibold text-slate-400 hover:text-emerald-700" @click="showConfirmation = !showConfirmation" x-text="showConfirmation ? 'Hide' : 'Show'"></button>
                                    </div>
                                </div>
                            </div>

                            <p class="text-[11px] leading-4 text-slate-500">Use at least 8 characters with uppercase, lowercase and a number.</p>

                            <label class="flex cursor-pointer items-start gap-3 text-xs leading-5 text-slate-600">
                                <input type="checkbox" name="terms" value="1" class="mt-0.5 h-5 w-5 shrink-0 rounded border-slate-300 text-emerald-600 focus:ring-emerald-600" {{ old('terms') ? 'checked' : '' }} required>
                                <span>I agree to the <a href="{{ route('home') }}#terms" class="font-semibold text-emerald-700">Terms &amp; Conditions</a> and <a href="{{ route('home') }}#privacy" class="font-semibold text-emerald-700">Privacy Policy</a>.</span>
                            </label>

                            <button type="submit" class="auth-submit flex w-full items-center justify-center px-5 text-base font-bold text-white">
                                <span class="flex-1 text-center">Create Account</span>
                                <span class="text-2xl font-normal" aria-hidden="true">&rarr;</span>
                            </button>
                        </form>

                        <div class="flex items-center gap-4 pt-1 text-slate-400" aria-hidden="true">
                            <span class="h-px flex-1 bg-slate-200"></span>
                            <span class="grid h-8 w-8 place-items-center rounded-full border border-slate-200 text-sm text-[#0b1f38]">&#10003;</span>
                            <span class="h-px flex-1 bg-slate-200"></span>
                        </div>
                        <p class="text-center text-xs text-slate-500">Encrypted, role-based access built for UAE typing centers.</p>
                    </div>
                </div>
            </div>

            <p class="pb-1 text-center text-sm text-slate-500">
                Already have a BrandX ERP account?
                <a href="{{ route('login') }}" class="font-bold text-emerald-700 transition hover:text-emerald-800">Sign in</a>
            </p>
        </div>
    </section>
</main>
@endsection