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

@section('title', 'Register - VEMBERS - Digital Menu')

@section('meta')
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ Request::url() }}">
    <meta property="og:title" content="Register - VEMBERS - Digital Menu">
    <meta property="og:description" content="Create a stunning digital menu for your restaurant or store in minutes. Generate a QR code, share it with your customers, and manage your products in real-time — all for free.">
    <meta property="og:image" content="{{ asset('assets/images/digital-menu-1.png') }}">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection

@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 bg-tertiary-fixed text-on-tertiary-fixed-variant text-xs font-bold tracking-widest uppercase mb-4 bg-primary/10 text-primary">DIGITIZE YOUR DISHES</span>
                <h1 class="font-headline text-5xl md:text-6xl font-extrabold text-on-surface tracking-tighter leading-none">
                    Start Your <span class="text-primary italic">Journey</span>
                </h1>
                <p class="mt-4 text-on-surface-variant/80 text-lg md:text-xl font-medium max-w-md">Join for free and start building your digital menu in minutes.</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">

                @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/register') }}">
                    {!! csrf_field() !!}

                    {{-- Shop Type --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1">Business Type <span class="text-error">*</span></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 <span class="text-error">*</span></label>
                        <div class="relative group">
                            <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' : '' }}"/>
                        </div>
                        @if ($errors->has('shop_name'))
                            <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('shop_name') }}</p>
                        @endif
                    </div>

                    {{-- Full Name --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="name">Full Name <span class="text-error">*</span></label>
                        <div class="relative group">
                            <input id="name" name="name" type="text" maxlength="100"
                                   value="{{ old('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('name') ? 'ring-2 ring-error' : '' }}"/>
                        </div>
                        @if ($errors->has('name'))
                            <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('name') }}</p>
                        @endif
                    </div>

                    {{-- Email --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="email">Email <span class="text-error">*</span></label>
                        <input id="email" name="email" type="email"
                               value="{{ old('email') }}"
                               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('email') ? 'ring-2 ring-error' : '' }}"/>
                        @if ($errors->has('email'))
                            <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('email') }}</p>
                        @endif
                    </div>

                    {{-- Phone --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="phone_number">Phone <span class="text-error">*</span></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>

                    {{-- Username --}}
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="username">Username <span class="text-error">*</span></label>
                        <div class="relative group">
                            <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' : '' }}"/>
                        </div>
                        <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>

                    {{-- Password + Confirm --}}
                    <div class="grid grid-cols-1 gap-6">
                        <div class="space-y-2">
                            <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="password">Password <span class="text-error">*</span></label>
                            <input id="password" name="password" type="password" autocomplete="new-password"

                                   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('password') ? 'ring-2 ring-error' : '' }}"/>
                            <div id="password-rules" class="mt-3 grid grid-cols-2 gap-2">
                                <div id="rule-length"  class="rule-pill flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant/50 text-xs font-medium transition-all duration-200">
                                    <span class="rule-icon material-symbols-outlined text-base leading-none">radio_button_unchecked</span>
                                    <span>6+ characters</span>
                                </div>
                                <div id="rule-upper"   class="rule-pill flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant/50 text-xs font-medium transition-all duration-200">
                                    <span class="rule-icon material-symbols-outlined text-base leading-none">radio_button_unchecked</span>
                                    <span>Uppercase letter</span>
                                </div>
                                <div id="rule-number"  class="rule-pill flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant/50 text-xs font-medium transition-all duration-200">
                                    <span class="rule-icon material-symbols-outlined text-base leading-none">radio_button_unchecked</span>
                                    <span>Number</span>
                                </div>
                                <div id="rule-special" class="rule-pill flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant/50 text-xs font-medium transition-all duration-200">
                                    <span class="rule-icon material-symbols-outlined text-base leading-none">radio_button_unchecked</span>
                                    <span>Special character</span>
                                </div>
                            </div>
                            @if ($errors->has('password'))
                                <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('password') }}</p>
                            @endif
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-semibold text-on-surface-variant ml-1" for="password_confirmation">Confirm Password <span class="text-error">*</span></label>
                            <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password"

                                   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"/>
                            <p id="confirm-mismatch" class="hidden text-error text-xs ml-1 mt-1">Passwords do not match.</p>
                        </div>
                    </div>

                    <script>
                        (function () {
                            const pwdInput    = document.getElementById('password');
                            const confInput   = document.getElementById('password_confirmation');
                            const form        = pwdInput.closest('form');
                            const mismatchMsg = document.getElementById('confirm-mismatch');

                            const rules = {
                                'rule-length':  v => v.length >= 6,
                                'rule-upper':   v => /[A-Z]/.test(v),
                                'rule-number':  v => /[0-9]/.test(v),
                                'rule-special': v => /[^A-Za-z0-9]/.test(v),
                            };

                            function updateRules(val) {
                                let allPassed = true;
                                for (const [id, test] of Object.entries(rules)) {
                                    const pill = document.getElementById(id);
                                    const icon = pill.querySelector('.rule-icon');
                                    const ok   = test(val);
                                    icon.textContent = ok ? 'check_circle' : 'radio_button_unchecked';
                                    pill.classList.toggle('bg-green-50',          ok);
                                    pill.classList.toggle('text-green-700',        ok);
                                    pill.classList.toggle('ring-1',                ok);
                                    pill.classList.toggle('ring-green-300',        ok);
                                    pill.classList.toggle('bg-surface-container-high', !ok);
                                    pill.classList.toggle('text-on-surface-variant/50', !ok);
                                    if (!ok) allPassed = false;
                                }
                                return allPassed;
                            }

                            pwdInput.addEventListener('input', () => updateRules(pwdInput.value));
                            confInput.addEventListener('input', () => {
                                const mismatch = confInput.value && confInput.value !== pwdInput.value;
                                mismatchMsg.classList.toggle('hidden', !mismatch);
                            });

                            form.addEventListener('submit', function (e) {
                                const allPassed = updateRules(pwdInput.value);
                                if (!allPassed) {
                                    e.preventDefault();
                                    pwdInput.classList.add('ring-2', 'ring-error');
                                    pwdInput.focus();
                                    return;
                                }
                                if (confInput.value !== pwdInput.value) {
                                    e.preventDefault();
                                    mismatchMsg.classList.remove('hidden');
                                    confInput.focus();
                                }
                            });
                        })();
                    </script>

                    <div class="flex justify-center">
                        <div class="p-3 bg-surface-container-high rounded-2xl">
                            <div class="g-recaptcha" data-sitekey="{{ $recaptchaSiteKey }}" data-callback="onRecaptchaVerified" data-expired-callback="onRecaptchaExpired"></div>
                        </div>
                    </div>

                    <div class="pt-4">
                        <button type="submit" id="signupBtn" disabled
                                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 opacity-50 cursor-not-allowed">
                            Sign Up
                            <span class="material-symbols-outlined text-xl">arrow_forward</span>
                        </button>
                    </div>

                    <script>
                        function onRecaptchaVerified() {
                            const btn = document.getElementById('signupBtn');
                            btn.disabled = false;
                            btn.classList.remove('opacity-50', 'cursor-not-allowed');
                        }
                        function onRecaptchaExpired() {
                            const btn = document.getElementById('signupBtn');
                            btn.disabled = true;
                            btn.classList.add('opacity-50', 'cursor-not-allowed');
                        }
                    </script>

                    {{-- Divider --}}
                    <div class="flex items-center gap-4 pt-2">
                        <div class="flex-1 h-px bg-surface-container-high"></div>
                        <span class="text-xs font-medium text-on-surface-variant/50 whitespace-nowrap">Or continue with</span>
                        <div class="flex-1 h-px bg-surface-container-high"></div>
                    </div>

                    {{-- Social Login --}}
                    <div class="flex items-center justify-center gap-3">

                        {{-- Google --}}
                        <a href="{{ route('digitalmenu.auth.google') }}" title="Continue with Google"
                           class="w-14 h-14 flex items-center justify-center rounded-full border border-surface-container-high bg-white hover:bg-gray-50 hover:border-gray-300 active:scale-95 transition-all duration-200 shadow-sm">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="flex-shrink-0" style="width: 2.25rem; height: 2.25rem;">
                                <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>
                        </a>

                        {{-- Facebook --}}
                        <a href="{{ route('digitalmenu.auth.facebook') }}" title="Continue with Facebook"
                           class="w-14 h-14 flex items-center justify-center rounded-full border border-surface-container-high bg-white hover:bg-gray-50 hover:border-gray-300 active:scale-95 transition-all duration-200 shadow-sm">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="flex-shrink-0" style="width: 2.7rem; height: 2.7rem;" fill="#1877F2">
                                <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.886v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
                            </svg>
                        </a>

                        {{-- Apple --}}
                        <!-- <a href="#" title="Continue with Apple"
                           class="w-11 h-11 flex items-center justify-center rounded-full bg-black hover:bg-[#1a1a1a] active:scale-95 transition-all duration-200 shadow-sm">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" class="w-4 h-4" fill="white">
                                <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 790.7 0 663 0 541.8c0-194.3 127.4-297.5 252.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/>
                            </svg>
                        </a> -->

                    </div>

                    <div class="text-center pt-4">
                        <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