@extends('layouts.app')

@push('styles')
<style>
.topbar,.bottom-nav,.drawer,.d-ov,.desk-sidebar{display:none!important}
.desk-main{padding:0!important}
.page-outer,.page-inner{display:block}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg)}
.auth-panel{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.auth-panel-top{padding:28px 28px 0}
.auth-heading{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--text);text-align:center;margin-bottom:4px}
.auth-subhead{font-size:13px;color:var(--muted);text-align:center;margin-bottom:24px;line-height:1.6}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-field{display:flex;flex-direction:column;gap:4px}
.auth-label{font-size:12px;font-weight:500;color:var(--text2)}
.auth-err{padding:9px 11px;border-radius:var(--r);background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.2);color:#f43f5e;font-size:12px;font-weight:500}
.auth-info{padding:9px 11px;border-radius:var(--r);background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.2);color:#38bdf8;font-size:12px;font-weight:500}
.otp-inputs{display:flex;gap:10px;justify-content:center}
.otp-digit{width:48px;height:56px;text-align:center;font-size:24px;font-weight:700;border:2px solid var(--border2);border-radius:10px;background:var(--elevated);color:var(--text);outline:none;transition:border-color .14s,box-shadow .14s;font-family:monospace}
.otp-digit:focus{border-color:var(--accent)}
.auth-submit{width:100%;min-height:44px;padding:11px;border-radius:var(--r);background:var(--accent);color:#fff;border:none;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s,transform .08s}
.auth-submit:hover{background:var(--accent-d)}
.auth-submit:active{transform:scale(.98)}
.auth-panel-bottom{padding:14px 28px 22px;border-top:1px solid var(--border);margin-top:20px;background:var(--elevated);text-align:center;font-size:12px;color:var(--muted)}
.auth-panel-bottom a{color:var(--accent);font-weight:600;text-decoration:none}
.resend-btn{background:none;border:none;color:var(--accent);font-weight:600;font-size:12px;cursor:pointer;padding:0;font-family:inherit}
.resend-btn:hover{text-decoration:underline}
</style>
@endpush

@section('content')
@include('partials.auth-fit')
<div class="auth-wrap">
    <div style="width:100%;max-width:400px">

        <a href="{{ route('password.request') }}" style="display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);margin-bottom:16px;text-decoration:none">
            <i class="fas fa-arrow-left" style="font-size:11px"></i> Kembali
        </a>

        <div class="auth-panel anim-up">
            <div class="auth-panel-top">

                <div style="text-align:center;margin-bottom:20px;padding-top:4px">
                    <div style="display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--accent-l);">
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
                            <path d="M20 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z" stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M22 6l-10 7L2 6" stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

                <div class="auth-heading">Cek Email Kamu</div>
                <div class="auth-subhead">
                    Kode 6 digit dikirim ke<br>
                    <strong style="color:var(--text)">{{ session('pwreset_email') }}</strong><br>
                    Berlaku 10 menit.
                </div>

                @if(session('info'))
                <div class="auth-info" style="margin-bottom:14px">{{ session('info') }}</div>
                @endif

                @if($errors->any())
                <div class="auth-err" style="margin-bottom:14px">{{ $errors->first() }}</div>
                @endif

                <form method="POST" action="{{ route('password.verify.submit') }}" class="auth-form" id="otpForm">
                    @csrf
                    <div class="auth-field">
                        <label class="auth-label" style="text-align:center;margin-bottom:8px">Masukkan Kode Verifikasi</label>

                        <div class="otp-inputs" id="otpBoxes">
                            @for($i = 0; $i < 6; $i++)
                            <input type="text" maxlength="1" class="otp-digit"
                                   inputmode="numeric" pattern="[0-9]"
                                   autocomplete="off">
                            @endfor
                        </div>

                        <input type="hidden" name="code" id="otpHidden">
                    </div>

                    <button type="submit" class="auth-submit" id="submitBtn" disabled>
                        Verifikasi Kode
                    </button>
                </form>
            </div>

            <div class="auth-panel-bottom">
                Tidak menerima email?&nbsp;
                <form method="POST" action="{{ route('password.resend') }}" style="display:inline">
                    @csrf
                    <button type="submit" class="resend-btn">Kirim ulang</button>
                </form>
                 &middot;
                <a href="{{ route('password.request') }}">Ganti email</a>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const boxes    = Array.from(document.querySelectorAll('.otp-digit'));
    const hidden   = document.getElementById('otpHidden');
    const submitBtn = document.getElementById('submitBtn');

    function updateHidden() {
        const val = boxes.map(b => b.value).join('');
        hidden.value = val;
        submitBtn.disabled = val.length < 6 || !/^\d{6}$/.test(val);
    }

    boxes.forEach((box, idx) => {
        box.addEventListener('input', function (e) {
            const pasted = e.data || this.value;
            if (pasted && pasted.length > 1) {
                const digits = pasted.replace(/\D/g, '').slice(0, 6).split('');
                digits.forEach((d, i) => { if (boxes[i]) boxes[i].value = d; });
                (boxes[Math.min(digits.length, 5)]).focus();
                updateHidden();
                return;
            }
            this.value = this.value.replace(/\D/g, '').slice(0, 1);
            if (this.value && idx < 5) boxes[idx + 1].focus();
            updateHidden();
        });

        box.addEventListener('keydown', function (e) {
            if (e.key === 'Backspace' && !this.value && idx > 0) {
                boxes[idx - 1].value = '';
                boxes[idx - 1].focus();
                updateHidden();
            }
        });

        box.addEventListener('paste', function (e) {
            e.preventDefault();
            const text = (e.clipboardData || window.clipboardData).getData('text');
            const digits = text.replace(/\D/g, '').slice(0, 6).split('');
            digits.forEach((d, i) => { if (boxes[i]) boxes[i].value = d; });
            (boxes[Math.min(digits.length, 5)]).focus();
            updateHidden();
        });
    });

    boxes[0].focus();
})();
</script>
@endsection