#extends('layouts.app')
#section('title')
    Profile
#endsection
#section('content')
<!-- Profile Header -->
<div class="card card-body mb-5">
    <div class="d-flex align-items-center gap-3">
        <div class="profile-avatar-large">
            [[ strtoupper(substr(Auth::user()->name, 0, 1)) ]]
        </div>
        <div>
            <h1 class="mb-1 fw-bold" style="font-size: 1.75rem;">[[ Auth::user()->name ]]</h1>
            <p class="mb-0 opacity-75">[[ Auth::user()->email ]]</p>
        </div>
    </div>
</div>
<!-- Profile Information Section -->
<div class="row mb-4">
    <div class="col-lg-4 mb-3 mb-lg-0">
        <div class="section-header">
            <h3 class="section-title">
                <i class='bx bx-user-circle' style="color: var(--primary); font-size: 1.5rem; vertical-align: middle;"></i>
                Profile Information
            </h3>
            <p class="section-description">Update your account's profile information and email address.</p>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="form-section">
            <form action="[[ route('profile') ]]" method="post">
                #csrf
                <div class="mb-4">
                    <label class="form-label">
                        <i class='bx bx-user' style="margin-right: 0.25rem;"></i>
                        Full Name
                    </label>
                    <input type="text" name="name" class="form-control" value="[[ Auth::user()->name ]]" placeholder="Enter your full name">
                </div>
                <div class="mb-4">
                    <label class="form-label">
                        <i class='bx bx-envelope' style="margin-right: 0.25rem;"></i>
                        Email Address
                    </label>
                    <input type="email" name="email" class="form-control" value="[[ Auth::user()->email ]]" placeholder="Enter your email">
                </div>
                <button type="submit" class="btn btn-dark">
                    <i class='bx bx-save' style="margin-right: 0.5rem;"></i>
                    Save Changes
                </button>
            </form>
        </div>
    </div>
</div>

<hr class="section-divider">

<!-- Update Password Section -->
<div class="row mb-4">
    <div class="col-lg-4 mb-3 mb-lg-0">
        <div class="section-header">
            <h3 class="section-title">
                <i class='bx bx-lock-alt' style="color: var(--primary); font-size: 1.5rem; vertical-align: middle;"></i>
                Update Password
            </h3>
            <p class="section-description">Ensure your account is using a long, random password to stay secure.</p>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="form-section">
            <div class="info-box">
                <i class='bx bx-info-circle' style="margin-right: 0.5rem; font-size: 1.25rem; vertical-align: middle;"></i>
                <strong>Password Security:</strong> Use at least 8 characters with a mix of letters, numbers, and symbols.
            </div>
            <form action="[[ route('password.update') ]]" method="post">
                #csrf
                <div class="mb-4">
                    <label class="form-label">
                        <i class='bx bx-key' style="margin-right: 0.25rem;"></i>
                        Current Password
                    </label>
                    <input type="password" name="old_password" class="form-control" placeholder="Enter current password" required>
                </div>
                <div class="mb-4">
                    <label class="form-label">
                        <i class='bx bx-lock' style="margin-right: 0.25rem;"></i>
                        New Password
                    </label>
                    <input type="password" name="new_password" class="form-control" placeholder="Enter new password" required>
                </div>
                <div class="mb-4">
                    <label class="form-label">
                        <i class='bx bx-check-circle' style="margin-right: 0.25rem;"></i>
                        Confirm Password
                    </label>
                    <input type="password" name="confirm_password" class="form-control" placeholder="Confirm new password" required>
                </div>
                <button type="submit" class="btn btn-dark">
                    <i class='bx bx-save' style="margin-right: 0.5rem;"></i>
                    Update Password
                </button>
            </form>
        </div>
    </div>
</div>
<hr class="section-divider">

<!-- Two-Factor Authentication Section -->
<div class="row mb-4">
    <div class="col-lg-4 mb-3 mb-lg-0">
        <div class="section-header">
            <h3 class="section-title">
                <i class='bx bx-shield-alt-2' style="color: var(--primary); font-size: 1.5rem; vertical-align: middle;"></i>
                Two-Factor Authentication
            </h3>
            <p class="section-description">
                Add extra security to your account using two-factor authentication (2FA).
            </p>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="form-section">
            <div class="d-flex align-items-center justify-content-between mb-4">
            <h5 class="mb-0 fw-bold">Status</h5>
            <span class="status-badge [[ Auth::user()->two_factor_secret ? 'enabled' : 'disabled' ]] d-flex align-items-center">
                <i class='bx [[ Auth::user()->two_factor_secret ? "bx-check-circle" : "bx-x-circle" ]] me-1'></i>
                [[ Auth::user()->two_factor_secret ? 'Enabled' : 'Disabled' ]]
            </span>
        </div>


            <div class="info-box">
                <i class='bx bx-info-circle' style="margin-right: 0.5rem; font-size: 1.25rem; vertical-align: middle;"></i>
                Two-factor authentication (2FA) adds an extra layer of security to your account by
                requiring a time-based code from an authenticator app. Even if your password is
                compromised, your account remains protected.
            </div>

            <form action="[[ route('enable.2fa') ]]" method="post">
                #csrf
                <input type="hidden" name="is_enabled_request"
                    value="[[ Auth::user()->two_factor_secret ? 0 : 1 ]]">
                <button type="submit"
                    class="btn btn-[[ Auth::user()->two_factor_secret ? 'danger' : 'dark' ]]">
                    <i class='bx [[ Auth::user()->two_factor_secret ? "bx-x" : "bx-check" ]]' style="margin-right: 0.5rem;"></i>
                    [[ Auth::user()->two_factor_secret ? 'Disable 2FA' : 'Enable 2FA' ]]
                </button>
            </form>

                #if (isset($qrCodeImage) && isset($secret) && !empty($recoveryCodes))
                    <hr class="my-4">
                    <div class="alert alert-warning" style="border-left: 4px solid var(--warning); background: rgba(245, 158, 11, 0.1); border-radius: 12px;">
                        <i class='bx bx-error' style="font-size: 1.25rem; margin-right: 0.5rem; vertical-align: middle;"></i>
                        <strong>Important:</strong> Save your recovery codes and secret key in a secure location before closing this page.
                    </div>

                    <div class="row mt-4">
                        <!-- QR Code Section -->
                        <div class="col-lg-5 mb-4">
                            <h5 class="fw-bold mb-3">
                                <i class='bx bx-qr' style="margin-right: 0.5rem; color: var(--primary);"></i>
                                Scan QR Code
                            </h5>
                            <div class="qr-code-container">
                                <img src="[[ $qrCodeImage ]]" alt="Two-Factor QR Code" height="180" width="180">
                            </div>
                            <p class="mt-3 text-muted" style="font-size: 0.9rem;">
                                <i class='bx bx-mobile' style="margin-right: 0.25rem;"></i>
                                Open your authenticator app (Google Authenticator, Authy, etc.), tap "+" and scan this QR code.
                            </p>
                        </div>

                        <!-- Manual Setup & Recovery Codes -->
                        <div class="col-lg-7">
                            <!-- Manual Setup -->
                            <div class="mb-4">
                                <h5 class="fw-bold mb-3">
                                    <i class='bx bx-wrench' style="margin-right: 0.5rem; color: var(--primary);"></i>
                                    Manual Setup
                                </h5>
                                <div class="recovery-codes-box mb-3">
                                    <strong>Secret Key:</strong><br>
                                    <code style="font-size: 1rem; color: var(--primary);">[[ $secret ]]</code>
                                </div>
                                <ol class="setup-steps" style="font-size: 0.9rem;">
                                    <li>Open your authenticator app</li>
                                    <li>Tap <strong>"Add account"</strong> or <strong>"Set up manually"</strong></li>
                                    <li>Select <strong>"Enter a setup key"</strong></li>
                                    <li>Enter your account name</li>
                                    <li>Paste the secret key above</li>
                                    <li>Set type to <strong>Time-based (TOTP)</strong></li>
                                    <li>Save and start generating codes</li>
                                </ol>
                            </div>

                            <!-- Recovery Codes -->
                            <div>
                                <h5 class="fw-bold mb-3">
                                    <i class='bx bx-key' style="margin-right: 0.5rem; color: var(--warning);"></i>
                                    Recovery Codes
                                </h5>
                                <p class="mb-3 text-muted" style="font-size: 0.9rem;">
                                    <i class='bx bx-info-circle' style="margin-right: 0.25rem;"></i>
                                    Save these codes securely. Each can be used once if you lose access to your authenticator.
                                </p>
                                <div class="recovery-codes-box">
                                    #foreach ($recoveryCodes as $code)
                                        <div style="padding: 0.25rem 0;">[[ $code ]]</div>
                                    #endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                #endif

            </div>
        </div>
    </div>
</div>
#endsection