{{-- Two-factor sign-in set-up (authenticator app) --}}
@extends('layouts.app')
@section('title', 'Two-factor sign-in - ICMIS')
@section('content')
<div class="container" style="max-width:640px">
    <h2 class="fw-bold mb-3">Two-factor sign-in</h2>
    <div class="card"><div class="card-body">
        @if($user->two_factor_enabled)
            <p><span class="badge bg-success">On</span> since {{ optional($user->two_factor_confirmed_at)->format('d M Y') }}. Each time you sign in you will be asked for the 6-digit code from your authenticator app.</p>
            <form method="POST" action="{{ route('two-factor.disable') }}" class="row g-2">@csrf
                <div class="col-md-8"><input type="password" name="password" class="form-control" placeholder="Your password to turn it off" required></div>
                <div class="col-md-4"><button class="btn btn-outline-danger w-100">Turn off</button></div>
            </form>
        @else
            <ol class="small">
                <li>Install an authenticator app on your phone (Google Authenticator, Microsoft Authenticator or similar).</li>
                <li>Scan this QR code with the app — or type the key below.</li>
                <li>Enter the 6-digit code the app shows.</li>
            </ol>
            <div class="text-center my-3"><div id="qr" class="d-inline-block p-2 bg-white border"></div></div>
            <p class="text-center small">Key: <code style="letter-spacing:2px">{{ trim(chunk_split($secret, 4, ' ')) }}</code></p>
            <form method="POST" action="{{ route('two-factor.enable') }}" class="row g-2">@csrf
                <div class="col-md-8"><input name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" class="form-control text-center" placeholder="123456" required></div>
                <div class="col-md-4"><button class="btn btn-primary w-100">Turn on</button></div>
            </form>
        @endif
    </div></div>
</div>
@if(!$user->two_factor_enabled)
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>try { new QRCode(document.getElementById('qr'), { text: @json($uri), width: 180, height: 180 }); } catch (e) {}</script>
@endif
@endsection