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

@section('title', 'Reset Password - VEMBERS - Digital Menu')

@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">
                    Account Recovery
                </span>
                <h1 class="text-4xl md:text-5xl font-extrabold text-on-surface tracking-tight leading-none mb-4">
                    Set a New <span class="text-primary italic">Password.</span>
                </h1>
                <p class="text-on-surface-variant font-body leading-relaxed max-w-xs">
                    Choose a strong password to secure your account.
                </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

                <form class="space-y-6" method="POST" action="{{ route('digitalmenu.reset-password.update') }}">
                    {!! csrf_field() !!}
                    <input type="hidden" name="token" value="{{ $token }}"/>
                    <input type="hidden" name="email" value="{{ $email }}"/>

                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface ml-1" for="password">New Password <span class="text-error">*</span></label>
                        <input id="password" name="password" type="password" autocomplete="new-password" maxlength="20"
                               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' : '' }}"/>
                        <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 ml-1" for="password_confirmation">Confirm New Password <span class="text-error">*</span></label>
                        <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" maxlength="20"
                               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"/>
                        <p id="confirm-mismatch" class="hidden text-error text-xs ml-1 mt-1">Passwords do not match.</p>
                    </div>

                    <div class="pt-2">
                        <button type="submit"
                                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">
                            Reset Password <span class="material-symbols-outlined">arrow_forward</span>
                        </button>
                    </div>
                </form>
            </div>
        </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>
@endsection