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

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

@section('meta')
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ Request::url() }}">
    <meta property="og:title" content="Login - 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')
    <div class="flex-grow flex items-center justify-center px-6 py-12 relative overflow-hidden">

        <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-secondary/5 rounded-full blur-3xl pointer-events-none"></div>

        <div class="w-full max-w-md z-10">
            <div class="mb-10 text-center md:text-left">
                <span class="inline-block px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed-variant font-label text-[10px] tracking-[0.2em] uppercase font-bold rounded mb-4">
                    Member Access
                </span>
                <h1 class="text-4xl md:text-5xl font-extrabold text-on-surface tracking-tight leading-none mb-4">
                    Welcome <span class="text-primary italic">Back.</span>
                </h1>
                <p class="text-on-surface-variant font-body leading-relaxed max-w-xs">
                    Sign in to manage your digital menu and update your latest specials.
                </p>
            </div>

            <div class="bg-surface-container-lowest p-8 md:p-10 rounded-xl shadow-[0px_12px_32px_rgba(25,28,29,0.06)] relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-20"></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

                @if (session('message') && session('message')['success'])
                    <div class="mb-6 px-4 py-3 rounded-lg bg-tertiary-fixed text-on-tertiary-fixed-variant text-sm font-medium">
                        {{ session('message')['message'] }}
                    </div>
                @endif

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

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

                    <div class="space-y-2">
                        <div class="flex justify-between items-center px-1">
                            <label class="text-sm font-semibold text-on-surface" for="password">Password <span class="text-error">*</span></label>
                            <a href="{{ route('digitalmenu.forgot-password') }}" class="text-xs font-semibold text-primary hover:underline">Forgot password?</a>
                        </div>
                        <div class="relative">
                            <input id="password" name="password" type="password"
                                   placeholder="••••••••"
                                   class="w-full px-5 py-4 bg-surface-container-high border-none rounded-lg focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all placeholder:text-on-surface-variant/40 text-on-surface {{ $errors->has('password') ? 'ring-2 ring-error' : '' }}"/>
                            @if ($errors->has('password'))
                                <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('password') }}</p>
                            @endif
                        </div>
                    </div>

                    <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-2">
                        <button type="submit" id="loginBtn" disabled
                                class="w-full py-4 px-6 rounded-full kinetic-gradient text-on-primary font-headline font-extrabold text-lg shadow-xl shadow-primary/30 transition-all hover:scale-105 active:scale-95 flex items-center justify-center gap-3 opacity-50 cursor-not-allowed">
                            Log In <span class="material-symbols-outlined">arrow_forward</span>
                        </button>
                    </div>
                </form>

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

                {{-- Divider --}}
                <div class="flex items-center gap-4 mt-8">
                    <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 mt-4">
                    <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>
                    <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>
                </div>

                <div class="mt-8 pt-8 border-t border-outline-variant/20 text-center">
                    <div class="flex flex-col items-center gap-4">
                        <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider">
                            <span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1, 'wght' 700">verified</span>
                            100% Free
                        </div>
                        <div class="space-y-1 text-center">
                            <p class="text-sm text-on-surface-variant font-medium">
                                Don't have an account?
                            </p>
                            <p class="text-xs text-on-surface-variant/70">
                                Join for free and start building your digital menu in minutes.
                            </p>
                        </div>
                        <a class="w-full py-3 px-6 rounded-full border-2 border-primary text-primary font-headline font-bold text-sm transition-all hover:bg-primary/5 active:scale-95 flex items-center justify-center"
                           href="{{ route('register') }}">
                            Create Free Account
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection