@extends('layouts.redesigned-user-dashboard-layout')
@section('user-dashboard-content')

   <div class="col-lg-9">
        <div class="content-wrapper">

          <!-- Page Title -->
          <h2 class="page-title"><i class="fa-solid fa-lock"></i> Login & Security</h2>


          <!-- PASSWORD -->
          <div class="card-theme-security">
            <h5 class="section-title"><i class="fa-solid fa-key"></i> Change Password</h5>

            <p class="text-muted mb-4">Update your password to keep your account secure.</p>

            <form>
              <div class="row g-3">
                <div class="col-md-6">
                  <input type="password" class="form-control" placeholder="New Password">
                </div>
                <div class="col-md-6">
                  <input type="password" class="form-control" placeholder="Confirm Password">
                </div>
              </div>

              <button class="btn-mint mt-3">
                <i class="fa-solid fa-floppy-disk"></i> Update Password
              </button>
            </form>
          </div>


          <!-- 2FA -->
          <div class="card-theme-security">
            <h5 class="section-title"><i class="fa-solid fa-shield-halved"></i> Two-Factor Authentication (2FA)</h5>
            <p class="text-muted mb-4">Protect your account by adding an extra layer of security.</p>

            <div class="twofa-box">

              <img src="https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=2FA-KEY-EXAMPLE" alt="QR">

              <p class="text-muted small mb-1">Scan this QR code in your authenticator app</p>
              <p class="fw-bold mb-3">2FA-KEY-EXAMPLE</p>

              <div class="d-flex justify-content-center gap-2 mb-3 flex-wrap">
                <input type="text" class="form-control code-input" placeholder="Enter 6-digit code">
              </div>

              <button class="btn-mint">
                <i class="fa-solid fa-lock"></i> Verify & Enable
              </button>

            </div>

          </div>


          <!-- DISABLE ACCOUNT -->
          <div class="card-theme-security">
            <h5 class="section-title text-danger"><i class="fa-solid fa-user-slash"></i> Disable Account</h5>
            <p class="text-muted mb-3">Permanently delete your account and all associated data.</p>

            <button class="btn-danger">
              <i class="fa-solid fa-trash"></i> Disable Account
            </button>
          </div>


        </div>
      </div>
@endsection