<?php
require_once('includes/auth_check.php');
// require_once('includes/config.php'); // Adjust path to your config
include_once('includes/header.php');
include_once('includes/sidebar.php');

// Fetch current admin data to display in the fields
try {
    $stmt = $pdo->prepare("SELECT username, email FROM admin_account WHERE id = ? LIMIT 1");
    $stmt->execute([$_SESSION['admin_id']]);
    $admin = $stmt->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $admin = ['username' => 'Error', 'email' => 'Error'];
}
?>

<div class="container-fluid px-4 py-4">
    <h2 class="fw-bold mb-4"><i class="fas fa-shield-alt text-primary me-2"></i>Security & Profile Settings</h2>

    <div class="row">
        <div class="col-xl-8">

            <form id="secureUpdateForm">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0 fw-bold small text-uppercase text-primary">Account Details</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Username</label>
                                <input type="text" name="username" class="form-control bg-light"
                                    value="<?php echo htmlspecialchars($admin['username']); ?>">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Email Address (Target for OTP)</label>
                                <input type="email" name="email" class="form-control"
                                    value="<?php echo htmlspecialchars($admin['email']); ?>">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm border-start border-danger border-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold text-dark mb-3">Security Verification</h5>
                        <p class="small text-muted mb-4">To change your password or email, please verify your identity.
                        </p>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-danger">Current Password *</label>
                                <input type="password" id="old_password" name="old_password"
                                    class="form-control " required
                                    placeholder="Enter current password">
                                <div id="passwordError" class="text-danger small mt-1" style="display:none;"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-primary">New Password (Optional)</label>
                                <input type="password" id="new_password" name="new_password" class="form-control"
                                    placeholder="Leave blank to keep current">
                                <div id="newPassError" class="text-danger small mt-1" style="display:none;"></div>
                            </div>

                            <div class="col-12 mt-4">
                                <div
                                    class="p-3 bg-light rounded border d-flex align-items-center justify-content-between">
                                    <div>
                                        <span class="d-block fw-bold small">Email Verification Required</span>
                                        <span class="small text-muted">A code will be sent to your registered email
                                            address.</span>
                                    </div>
                                    <button type="button" id="otpBtn" class="btn btn-sm btn-dark"
                                        onclick="sendUpdateOTP()">Send OTP</button>
                                </div>
                            </div>

                            <div class="col-md-4 mt-3">
                                <input type="text" name="update_otp" id="update_otp"
                                    class="form-control text-center fw-bold" placeholder="Enter 6-Digit OTP"
                                    maxlength="6">
                            </div>

                            <div class="col-12 mt-4 text-end">
                                <button type="submit" id="saveBtn" class="btn btn-outline-success px-5 py-2 fw-bold">
                                    <i class="fas fa-user-check me-2"></i>Verify & Save Changes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div id="responseMsg"></div>

        </div>
    </div>
</div>

<?php include_once('includes/footer.php') ?>