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

@section('title', 'Change Password | Merchant Central')

@section('content')
<div class="max-w-xl mx-auto pb-24">

    <div class="mb-10">
        <span class="font-label text-primary uppercase text-sm tracking-widest font-semibold mb-2 block">Security</span>
        <h1 class="font-display text-4xl md:text-5xl font-extrabold text-on-surface tracking-tight leading-tight">
            {{ $hasPassword ? 'Change Password' : 'Set Password' }}
        </h1>
        <p class="font-body text-on-surface-variant mt-3 text-lg max-w-2xl">
            @if ($hasPassword)
                Update your account password. You'll remain logged in after changing it.
            @else
                Your account uses social login. Set a password to also enable email &amp; password sign-in.
            @endif
        </p>
    </div>

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

        @if ($errors->any())
            <div class="mb-6 flex items-start gap-3 bg-error-container border border-error/20 text-error px-5 py-4 rounded-xl text-sm font-medium">
                <span class="material-symbols-outlined text-error text-xl mt-0.5">error</span>
                <ul class="list-disc list-inside space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            {{-- Current Password (hidden for social-only accounts) --}}
            @if ($hasPassword)
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-on-surface-variant" for="current_password">Current Password</label>
                <input id="current_password" name="current_password" type="password" autocomplete="current-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 outline-none {{ $errors->has('current_password') ? 'ring-2 ring-error' : '' }}"/>
                @if ($errors->has('current_password'))
                    <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('current_password') }}</p>
                @endif
            </div>
            @endif

            {{-- New Password --}}
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-on-surface-variant" for="password">New Password</label>
                <input id="password" name="password" type="password" autocomplete="new-password" maxlength="20"
                       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 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>

            {{-- Confirm New Password --}}
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-on-surface-variant" for="password_confirmation">Confirm New Password</label>
                <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" maxlength="20"
                       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 outline-none"/>
                <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 bg-primary text-white font-bold text-base py-4 rounded-full shadow-lg hover:bg-primary/90 hover:scale-[1.02] transition-all duration-300 active:scale-95 flex items-center justify-center gap-2">
                    <span class="material-symbols-outlined text-xl">lock_reset</span>
                    {{ $hasPassword ? 'Update Password' : 'Set Password' }}
                </button>
            </div>
        </form>
    </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