@extends('layout.master')
<style>
    .qr-code-img {
        width: 250px;
        height: auto;
    }
</style>

@section('content')
<div class="container my-1">
    <div class="row mb-3">
        <div class="col-lg-12">
            <h1 class="display-4">Two-Factor Authentication (2FA)</h1>
            <p class="text-muted">Enhance your account security by enabling Two-Factor Authentication. With 2FA, you'll need to provide a verification code in addition to your password when signing in.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Current Status</h5>
                    <p class="text-muted mb-1">CLICK BUTTON ! Two-Factor Authentication is currently <strong><span id="2fa-status">Disabled</span></strong>.</p>
                    <button class="btn btn-primary" id="enable-2fa-btn">Enable 2FA</button>
                    <button class="btn btn-danger" id="disable-2fa-btn" style="display: none;">Disable 2FA</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-5" id="qr-code-section" style="display: none;">
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Scan QR Code</h5>
                    <p class="text-muted mb-2">Scan this QR code with your authentication app (e.g., Google Authenticator or Authy).</p>
                    <div class="text-center my-2">
                        <img src="{{ asset('assets/images/qrcode.png') }}" alt="QR Code" id="qr-code" class="img-fluid qr-code-img">
                    </div>
                                
                    <p class="text-muted">Once scanned, enter the code generated by the app to complete the setup.</p>
                    <div class="mb-3">
                        <label for="verification-code" class="form-label">Verification Code</label>
                        <input type="text" class="form-control" id="verification-code" placeholder="Enter the code from your app">
                    </div>
                    <button class="btn btn-success" id="verify-code-btn">Verify Code</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-5" id="recovery-codes-section" style="display: none;">
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Recovery Codes</h5>
                    <p class="text-muted">Keep these recovery codes in a safe place. You can use them to access your account if you lose access to your authentication app.</p>
                    <ul class="list-group mb-4">
                        <li class="list-group-item">ABC123DEF456</li>
                        <li class="list-group-item">GHI789JKL012</li>
                        <li class="list-group-item">MNO345PQR678</li>
                        <li class="list-group-item">STU901VWX234</li>
                        <li class="list-group-item">YZA567BCD890</li>
                    </ul>
                    <button class="btn btn-outline-primary" id="regenerate-codes-btn">Regenerate Codes</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const enable2FABtn = document.getElementById("enable-2fa-btn");
        const disable2FABtn = document.getElementById("disable-2fa-btn");
        const qrCodeSection = document.getElementById("qr-code-section");
        const recoveryCodesSection = document.getElementById("recovery-codes-section");
        const statusElement = document.getElementById("2fa-status");

        enable2FABtn.addEventListener("click", () => {
            qrCodeSection.style.display = "block";
            enable2FABtn.style.display = "none";
            disable2FABtn.style.display = "inline-block";
            statusElement.textContent = "Enabled";
        });

        disable2FABtn.addEventListener("click", () => {
            qrCodeSection.style.display = "none";
            recoveryCodesSection.style.display = "none";
            enable2FABtn.style.display = "inline-block";
            disable2FABtn.style.display = "none";
            statusElement.textContent = "Disabled";
        });

        document.getElementById("verify-code-btn").addEventListener("click", () => {
            recoveryCodesSection.style.display = "block";
        });

        document.getElementById("regenerate-codes-btn").addEventListener("click", () => {
            alert("New recovery codes have been generated.");
        });
    });
</script>
@endsection