<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Secure Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    background: linear-gradient(180deg, #ffffff, #f4f6f9);
}

/* Tech background */
.tech-bg {
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.025) 0px,
        rgba(0,0,0,0.025) 1px,
        transparent 1px,
        transparent 4px
    );
    animation: scan 6s linear infinite;
    pointer-events: none;
}

@keyframes scan {
    from { background-position-y: 0; }
    to { background-position-y: 120px; }
}

/* Layout */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 460px;
    background: #fff;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 40px 80px rgba(0,0,0,.15);
}

/* Logo */
.logo {
    text-align: center;
    margin-bottom: 20px;
}

.logo img {
    max-width: 220px;
}

/* Text */
h3 {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

label {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

/* Inputs */
.input {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 1rem;
}

.input[readonly] {
    background: #eee;
    cursor: not-allowed;
}

/* Buttons */
.btn {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    margin-top: 18px;
}

.btn.primary {
    background: linear-gradient(135deg, #000, #1f2937);
    color: #fff;
}

.btn.primary:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn.link {
    background: transparent;
    color: #000;
    font-size: .8rem;
}

/* Keypad */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.key {
    padding: 14px;
    background: #f1f5f9;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.key:hover {
    background: #e2e8f0;
}

.key.action {
    background: #000;
    color: #fff;
}

/* Options */
.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    margin-top: 14px;
}

/* Steps */
.step { display: none; }
.step.active { display: block; }

.message {
    margin-top: 8px;
    font-size: .75rem;
    font-weight: 600;
}

.message.error { color: #dc2626; }
.message.success { color: #16a34a; }
</style>
</head>
<body>

<div class="tech-bg"></div>

<div class="login-wrapper">
<div class="login-card">

<div class="logo">
    @if(config('settings.logo'))
        <img src="{{ asset(config('settings.logo')) }}" alt="Logo">
    @endif
</div>

<h3>Secured access to your personal spacesd</h3>

<form method="POST" action="{{ route('login') }}">
@csrf

<!-- STEP 1 -->
<div class="step active" id="step1">
    <label>Enter your identifier</label>
    <input type="text" name="email" class="input" required autocomplete="off">

    @error('email')<span class="message error">{{ $message }}</span>@enderror

    <button type="button" class="btn primary" onclick="goStep2()">Continue</button>
</div>

<!-- STEP 2 -->
<div class="step" id="step2">
    <label>Enter your personal code</label>

    <!-- Display only -->
    <input type="password" id="pinDisplay" class="input" readonly>

    <!-- Real value -->
    <input type="hidden" name="password" id="pinValue">

    <!-- Keypad -->
    <div class="keypad" id="keypad">
        <div class="key" onclick="press(1)">1</div>
        <div class="key" onclick="press(2)">2</div>
        <div class="key" onclick="press(3)">3</div>
        <div class="key" onclick="press(4)">4</div>
        <div class="key" onclick="press(5)">5</div>
        <div class="key" onclick="press(6)">6</div>
        <div class="key" onclick="press(7)">7</div>
        <div class="key" onclick="press(8)">8</div>
        <div class="key" onclick="press(9)">9</div>
        <div class="key action" onclick="backspace()">⌫</div>
        <div class="key" onclick="press(0)">0</div>
        <div class="key action" onclick="shuffle()">↻</div>
    </div>

    <div id="pinMessage" class="message error">
        Minimum 8 digits required
    </div>

    @error('password')<span class="message error">{{ $message }}</span>@enderror

    <div class="options">
        <label><input type="checkbox" name="remember"> Remember me</label>
        <a href="{{ route('password.request') }}">Forgot password?</a>
    </div>

    <button type="submit" class="btn primary" id="loginBtn" disabled>
        Log in
    </button>

    <button type="button" class="btn link" onclick="backStep()">
        ← Change identifier
    </button>
</div>

</form>

</div>
</div>

<script>
let pin = '';
const MIN_PIN = 8;
const MAX_PIN = 12;

function goStep2() {
    document.getElementById('step1').classList.remove('active');
    document.getElementById('step2').classList.add('active');
}

function backStep() {
    pin = '';
    updatePin();
    document.getElementById('step2').classList.remove('active');
    document.getElementById('step1').classList.add('active');
}

function press(n) {
    if (pin.length >= MAX_PIN) return;
    pin += n;
    updatePin();
}

function backspace() {
    pin = pin.slice(0, -1);
    updatePin();
}

function updatePin() {
    const display = document.getElementById('pinDisplay');
    const hidden = document.getElementById('pinValue');
    const msg = document.getElementById('pinMessage');
    const btn = document.getElementById('loginBtn');

    display.value = '•'.repeat(pin.length);
    hidden.value = pin;

    if (pin.length < MIN_PIN) {
        msg.textContent = `Minimum ${MIN_PIN} digits required`;
        msg.className = 'message error';
        btn.disabled = true;
    } else {
        msg.textContent = 'PIN length OK';
        msg.className = 'message success';
        btn.disabled = false;
    }
}

function shuffle() {
    const keys = Array.from(document.querySelectorAll('#keypad .key:not(.action)'));
    keys.sort(() => Math.random() - 0.5)
        .forEach(k => document.getElementById('keypad').appendChild(k));
}
</script>

</body>
</html>
