@extends('digitalmenu::layouts.guest')

@section('title', 'Complete Registration - VEMBERS - Digital Menu')

@section('content')
    <main class="min-h-[calc(100vh-160px)] flex items-center justify-center py-16 px-4 relative overflow-hidden">

        <div class="absolute top-[-10%] right-[-5%] w-96 h-96 bg-primary-fixed opacity-20 rounded-full blur-3xl"></div>
        <div class="absolute bottom-[-10%] left-[-5%] w-80 h-80 bg-secondary-fixed opacity-20 rounded-full blur-3xl"></div>

        <section class="w-full max-w-xl relative z-10">
            <div class="mb-12 relative">
                <span class="inline-block px-4 py-1 rounded-full text-xs font-bold tracking-widest uppercase mb-4 bg-primary/10 text-primary">ALMOST THERE</span>
                <h1 class="font-headline text-5xl md:text-6xl font-extrabold text-on-surface tracking-tighter leading-none">
                    One Last <span class="text-primary italic">Step</span>
                </h1>
                <p class="mt-4 text-on-surface-variant/80 text-lg md:text-xl font-medium max-w-md">Tell us about your business to finish setting up your account.</p>
            </div>

            <div class="bg-surface-container-lowest p-8 md:p-12 rounded-xl shadow-[0px_12px_32px_rgba(25,28,29,0.06)] border border-transparent">

                {{-- Google account badge --}}
                <div class="flex items-center gap-3 mb-8 px-4 py-3 rounded-lg bg-surface-container-high">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="w-5 h-5 flex-shrink-0">
                        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v8.51h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.14z"/>
                        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
                        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
                        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
                    </svg>
                    <div class="min-w-0">
                        <p class="text-sm font-semibold text-on-surface truncate">{{ $google_name }}</p>
                        <p class="text-xs text-on-surface-variant/70 truncate">{{ $google_email }}</p>
                    </div>
                </div>

                @if (session('error'))
                    <div class="mb-6 px-4 py-3 rounded-lg bg-error-container text-on-error-container text-sm font-medium">
                        {{ session('error') }}
                    </div>
                @endif

                <form class="space-y-6" method="POST" action="{{ url('digital-menu/auth/google/complete') }}">
                    {!! csrf_field() !!}

                    {{-- Shop Type --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1">Business Type</label>
                        <div class="grid grid-cols-2 gap-3">
                            <label class="shop-type-card relative cursor-pointer">
                                <input type="radio" name="shop_type" value="food_and_drink" class="sr-only peer" {{ old('shop_type', 'food_and_drink') === 'food_and_drink' ? 'checked' : '' }}>
                                <div class="flex flex-col items-center gap-2 px-4 py-4 rounded-xl border-2 border-surface-container-high bg-surface-container-high peer-checked:border-primary peer-checked:bg-primary/5 transition-all duration-200">
                                    <span class="material-symbols-outlined text-3xl text-on-surface-variant peer-checked:text-primary">restaurant</span>
                                    <span class="text-sm font-semibold text-on-surface-variant peer-checked:text-primary text-center leading-tight">Food &amp; Drink</span>
                                </div>
                            </label>
                            <label class="shop-type-card relative cursor-pointer">
                                <input type="radio" name="shop_type" value="retailer" class="sr-only peer" {{ old('shop_type') === 'retailer' ? 'checked' : '' }}>
                                <div class="flex flex-col items-center gap-2 px-4 py-4 rounded-xl border-2 border-surface-container-high bg-surface-container-high peer-checked:border-primary peer-checked:bg-primary/5 transition-all duration-200">
                                    <span class="material-symbols-outlined text-3xl text-on-surface-variant peer-checked:text-primary">storefront</span>
                                    <span class="text-sm font-semibold text-on-surface-variant peer-checked:text-primary text-center leading-tight">Retailer</span>
                                </div>
                            </label>
                        </div>
                        @if ($errors->has('shop_type'))
                            <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('shop_type') }}</p>
                        @endif
                    </div>

                    {{-- Shop Name --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="shop_name">Shop / Business Name</label>
                        <input id="shop_name" name="shop_name" type="text" maxlength="100"
                               value="{{ old('shop_name') }}"
                               class="w-full bg-surface-container-high border-none rounded-lg px-4 py-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all duration-200 outline-none {{ $errors->has('shop_name') ? 'ring-2 ring-error' : '' }}"/>
                        @if ($errors->has('shop_name'))
                            <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('shop_name') }}</p>
                        @endif
                    </div>

                    {{-- Username --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="username">Username</label>
                        <input id="username" name="username" type="text" autocomplete="off" minlength="6" maxlength="20"
                               value="{{ old('username') }}" pattern="[A-Za-z0-9]+" inputmode="text"
                               class="w-full bg-surface-container-high border-none rounded-lg px-4 py-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all duration-200 outline-none {{ $errors->has('username') ? 'ring-2 ring-error' : '' }}"/>
                        <p class="text-on-surface-variant/60 text-xs ml-1">6–20 characters, letters and numbers only, no spaces.</p>
                        @if ($errors->has('username'))
                            <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('username') }}</p>
                        @endif
                    </div>

                    <script>
                        (function () {
                            const usernameInput = document.getElementById('username');
                            usernameInput.addEventListener('keydown', function (e) {
                                if (e.key === ' ' || e.code === 'Space') {
                                    e.preventDefault();
                                }
                            });
                            usernameInput.addEventListener('input', function () {
                                this.value = this.value.replace(/[^A-Za-z0-9]/g, '');
                            });
                        })();
                    </script>

                    {{-- Phone --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="phone_number">Phone</label>
                        @include('digitalmenu::partials.phone_country_selector')
                        @if ($errors->has('phone'))
                            <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('phone') }}</p>
                        @endif
                    </div>

                    <div class="pt-4">
                        <button type="submit"
                                class="w-full kinetic-gradient text-on-primary font-bold text-lg py-4 rounded-full shadow-lg hover:scale-[1.02] transition-all duration-300 active:scale-95 flex items-center justify-center gap-2">
                            Create My Account
                            <span class="material-symbols-outlined text-xl">arrow_forward</span>
                        </button>
                    </div>

                    <div class="text-center pt-2">
                        <p class="text-on-surface-variant text-sm">
                            Already have an account?
                            <a class="text-primary font-bold hover:underline transition-all" href="{{ route('login') }}">Login</a>
                        </p>
                    </div>
                </form>
            </div>
        </section>

    </main>
@endsection