<!DOCTYPE html>
<html x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }"
      :class="{ 'dark': darkMode }"
      lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Enter Passcode</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'] },
                    colors: {
                        yellow: { 400: '#facc15', 500: '#eab308', 600: '#ca8a04' }
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
        @keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
        .animate-fade { animation: fadeIn 0.4s ease-out both; }
        .shake { animation: shake 0.4s ease-in-out; }
        .dot-pop { animation: pop 0.2s ease-in-out; }
        .numpad-btn { transition: all 0.12s ease; }
        .numpad-btn:active { transform: scale(0.9); }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">

    <div class="w-full max-w-sm animate-fade">

        <!-- Card -->
        <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 border border-gray-100 dark:border-gray-700">

            <!-- Icon & Title -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                </div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Enter Passcode</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Enter your 6-digit security passcode</p>
            </div>

            <!-- Error -->
            @if($errors->has('passcode'))
                <div id="error-msg" class="mb-4 text-center text-sm text-red-500 bg-red-50 dark:bg-red-900/20 rounded-xl py-2 px-4">
                    {{ $errors->first('passcode') }}
                </div>
            @endif

            <!-- Dots display -->
            <div class="flex justify-center space-x-4 mb-8" id="dots-row">
                @for($i = 0; $i < 6; $i++)
                    <div id="dot-{{ $i }}" class="w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 transition-all duration-200"></div>
                @endfor
            </div>

            <!-- Hidden form -->
            <form id="passcode-form" method="POST" action="{{ route('passcode.verify') }}">
                @csrf
                <input type="hidden" id="passcode-input" name="passcode" value="" />
            </form>

            <!-- Number Pad -->
            <div class="grid grid-cols-3 gap-3">
                @foreach([1,2,3,4,5,6,7,8,9] as $num)
                    <button type="button" onclick="addDigit({{ $num }})"
                        class="numpad-btn h-16 rounded-2xl bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-2xl font-semibold shadow hover:bg-yellow-50 dark:hover:bg-gray-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-yellow-400">
                        {{ $num }}
                    </button>
                @endforeach

                <!-- Clear -->
                <button type="button" onclick="clearAll()"
                    class="numpad-btn h-16 rounded-2xl bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 shadow hover:bg-red-50 dark:hover:bg-gray-600 hover:text-red-500 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-red-300 flex items-center justify-center">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 001.414.586H19a2 2 0 002-2V7a2 2 0 00-2-2h-8.172a2 2 0 00-1.414.586L3 12z"/>
                    </svg>
                </button>

                <!-- 0 -->
                <button type="button" onclick="addDigit(0)"
                    class="numpad-btn h-16 rounded-2xl bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-2xl font-semibold shadow hover:bg-yellow-50 dark:hover:bg-gray-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-yellow-400">
                    0
                </button>

                <!-- Backspace -->
                <button type="button" onclick="deleteDigit()"
                    class="numpad-btn h-16 rounded-2xl bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 shadow hover:bg-yellow-50 dark:hover:bg-gray-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-yellow-400 flex items-center justify-center">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"/>
                    </svg>
                </button>
            </div>

            <!-- Verify button (always visible as fallback) -->
            <button type="button" id="verify-btn" onclick="submitIfReady()" 
                class="mt-6 w-full py-3 bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
                disabled>
                Verify Passcode
            </button>

            <!-- Back link -->
            <div class="mt-6 text-center">
                <a href="{{ route('login') }}" class="text-sm text-gray-500 hover:text-yellow-500 transition-colors duration-200">
                    ← Back to Login
                </a>
            </div>
        </div>
    </div>

    <script>
        let code = '';

        function updateDots() {
            for (let i = 0; i < 6; i++) {
                const dot = document.getElementById('dot-' + i);
                if (i < code.length) {
                    dot.classList.remove('bg-gray-200', 'dark:bg-gray-600');
                    dot.classList.add('bg-yellow-500');
                    dot.classList.add('dot-pop');
                    setTimeout(() => dot.classList.remove('dot-pop'), 200);
                } else {
                    dot.classList.add('bg-gray-200');
                    dot.classList.remove('bg-yellow-500', 'dot-pop');
                }
            }
            document.getElementById('passcode-input').value = code;
            document.getElementById('verify-btn').disabled = code.length !== 6;
        }

        function addDigit(n) {
            if (code.length < 6) {
                code += String(n);
                updateDots();
                if (code.length === 6) {
                    // auto-submit after tiny delay so dots visually fill
                    setTimeout(() => {
                        document.getElementById('passcode-form').submit();
                    }, 250);
                }
            }
        }

        function deleteDigit() {
            code = code.slice(0, -1);
            updateDots();
        }

        function clearAll() {
            code = '';
            updateDots();
        }

        function submitIfReady() {
            if (code.length === 6) {
                document.getElementById('passcode-form').submit();
            }
        }
    </script>
</body>
</html>
