@extends('layouts.auth')

@section('title', trans('auth.register_title'))

@section('content')
<div class="w-full max-w-[430px]"
     x-data="authOtpFlow({
        step: 'email',
        email: @js(old('email', request('email'))),
        sendUrl: @js(route('register.submit')),
        verifyUrl: @js(route('register.verify.submit')),
        resendUrl: @js(route('register.resend')),
        csrf: @js(csrf_token()),
        strings: window.authOtpStrings,
     })">

    <div class="bg-white dark:bg-navy-900 rounded-[28px] p-7 sm:p-9 shadow-xl shadow-slate-200/60 dark:shadow-navy-950/40 border border-slate-100 dark:border-slate-800 transition-all">

        <!-- STEP 1: EMAIL INPUT -->
        <div x-show="step === 'email'">
            <!-- Logo Icon with Badge -->
            <div class="flex justify-center mb-5">
                <div class="relative w-12 h-12 flex items-center justify-center">
                    <div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-emerald-100 to-teal-50 dark:from-emerald-950/60 dark:to-teal-900/40 border border-emerald-200/60 dark:border-emerald-500/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400 shadow-sm">
                        <i class="fa-solid fa-sparkles text-lg"></i>
                    </div>
                    <span class="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-full bg-emerald-600 text-white text-[9px] flex items-center justify-center font-bold ring-2 ring-white dark:ring-navy-900">
                        <i class="fa-solid fa-plus text-[8px]"></i>
                    </span>
                </div>
            </div>

            <!-- Heading & Subtitle -->
            <div class="text-center mb-6">
                <h1 class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">
                    {{ trans('auth.get_started_emzatca') }}
                </h1>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">
                    {{ trans('auth.create_company_send_code') }}
                </p>
            </div>

            <!-- Error Banner -->
            <div x-show="error" x-cloak class="mb-4 p-3 rounded-2xl bg-red-500/10 border border-red-500/30 text-red-600 dark:text-red-400 text-xs flex items-center gap-2">
                <i class="fa-solid fa-circle-exclamation shrink-0"></i>
                <span x-text="error"></span>
            </div>

            <!-- Social Logins (Google & Apple) -->
            <div class="space-y-2.5 mb-5">
                <!-- Google Button -->
                <a href="{{ route('social.redirect', 'google') }}"
                   class="w-full flex items-center justify-center gap-3 py-3 px-4 rounded-2xl border border-slate-200 dark:border-slate-700/80 bg-white dark:bg-navy-950 text-slate-800 dark:text-slate-100 text-xs font-bold hover:bg-slate-50 dark:hover:bg-slate-800/60 transition shadow-sm">
                    <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
                        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                    </svg>
                    <span>{{ trans('auth.continue_with_google') }}</span>
                </a>

                <!-- Apple Button -->
                <a href="{{ route('social.redirect', 'apple') }}"
                   class="w-full flex items-center justify-center gap-3 py-3 px-4 rounded-2xl bg-black text-white text-xs font-bold hover:bg-zinc-900 transition shadow-sm">
                    <svg
                        class="w-5 h-5 shrink-0 fill-current"
                        viewBox="0 0 384 512"
                        xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true">
                        <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.8-44.6-35.6-2.8-74.5 20.8-88.7 20.8-15 0-49.5-19.8-76.4-19.8C63.2 141.1 0 187.6 0 281.4c0 27.7 5.1 56.3 15.3 85.8 13.6 36.7 62.6 126.7 113.7 125.2 23.9-.6 40.8-17 74-17 32.2 0 47.8 17 74.5 17 51.5-.7 95.8-82.5 108.8-119.3-69.1-32.5-67.6-102.4-67.6-104.4zM261.1 104.4C288.6 71.8 286.1 42.1 285.3 32c-24.3 1.4-52.4 16.5-68.4 35.1-17.7 19.8-28.1 44.4-25.9 72.1 26.3 2 50.3-11.5 70.1-34.8z"/>
                    </svg>
                    <span>{{ trans('auth.continue_with_apple') }}</span>
                </a>
            </div>

            <!-- Divider: or with email -->
            <div class="relative flex items-center justify-center my-6">
                <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-slate-200 dark:border-slate-800"></div></div>
                <span class="relative bg-white dark:bg-navy-900 px-3 text-[11px] text-slate-400 font-medium">
                    {{ trans('auth.or_with_email') }}
                </span>
            </div>

            <!-- Email Form -->
            <form @submit.prevent="sendCode()" class="space-y-4" id="registerForm">
                <div>
                    <input type="email" name="email" id="registerEmail" x-ref="emailInput" x-model="email" required autofocus
                           placeholder="you@company.sa"
                           :disabled="submitting"
                           class="w-full rounded-2xl bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-700/80 text-slate-900 dark:text-slate-100 p-3.5 text-center text-xs placeholder:text-slate-400 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/10 focus:outline-none transition disabled:opacity-60 font-mono">
                </div>

                <button type="submit" :disabled="submitting || !email"
                        class="w-full py-3.5 rounded-2xl bg-[#0f7648] hover:bg-[#0c623b] active:bg-[#0a5231] text-white font-bold text-sm shadow-md shadow-emerald-800/15 transition flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                    <i class="fa-solid fa-spinner fa-spin" x-show="submitting"></i>
                    <span x-text="submitting ? strings.sending : '{{ trans('auth.create_new_account') }}'"></span>
                </button>
            </form>

            <!-- Bottom Sub-hint -->
            <p class="text-[11px] text-slate-400 dark:text-slate-500 text-center mt-5 font-normal">
                {{ trans('auth.terms_privacy_agreement') }}
            </p>
        </div>

        <!-- STEP 2: OTP VERIFICATION (INLINE OR AFTER EMAIL) -->
        @include('auth.partials.otp-step')
    </div>

    <!-- Bottom Link (already have account) -->
    <div class="mt-6 text-center">
        <a href="{{ route('login') }}" class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-300 transition">
            <span>{{ trans('auth.already_have_account_signin') }}</span>
            <span class="rtl:rotate-180 inline-block font-sans">←</span>
        </a>
    </div>

</div>
@endsection

@section('scripts')
    @include('auth.partials.auth-otp-script')
@endsection