<?php include __DIR__ . '/../../layouts/header.php'; ?>
<?php include __DIR__ . '/../../layouts/sidebar.php'; ?>

<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">Security Settings</h2>
        </div>

        <?php if (isset($_GET['success'])): ?>
            <div class="alert alert-success border-0 shadow-sm mb-4 rounded-4" role="alert">
                <i class="fas fa-check-circle me-2"></i> <?= htmlspecialchars($_GET['success']) ?>
            </div>
        <?php endif; ?>

        <?php if (isset($_GET['error'])): ?>
            <div class="alert alert-danger border-0 shadow-sm mb-4 rounded-4" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i> <?= htmlspecialchars($_GET['error']) ?>
            </div>
        <?php endif; ?>

        <div class="card border-0 shadow-sm" style="border-radius: 20px;">
            <div class="card-body p-5">
                <div class="mb-4">
                    <h5 class="fw-bold mb-1">Change Password</h5>
                    <p class="text-secondary small">Ensure your account is using a long, random password to stay secure.</p>
                </div>

                <form action="?page=change_password&action=update" method="POST">
                    <div class="mb-4">
                        <label class="form-label text-secondary small fw-bold">Current Password</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0 px-3" style="border-radius: 12px 0 0 12px;"><i class="fas fa-lock text-muted"></i></span>
                            <input type="password" name="old_password" class="form-control form-control-lg bg-light border-0 px-3" placeholder="Enter current password" required style="border-radius: 0 12px 12px 0;">
                        </div>
                    </div>

                    <hr class="my-4 opacity-50">

                    <div class="mb-4">
                        <label class="form-label text-secondary small fw-bold">New Password</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0 px-3" style="border-radius: 12px 0 0 12px;"><i class="fas fa-key text-muted"></i></span>
                            <input type="password" name="new_password" class="form-control form-control-lg bg-light border-0 px-3" placeholder="Create new password" required style="border-radius: 0 12px 12px 0;">
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label text-secondary small fw-bold">Confirm New Password</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0 px-3" style="border-radius: 12px 0 0 12px;"><i class="fas fa-shield-alt text-muted"></i></span>
                            <input type="password" name="confirm_password" class="form-control form-control-lg bg-light border-0 px-3" placeholder="Repeat new password" required style="border-radius: 0 12px 12px 0;">
                        </div>
                    </div>

                    <div class="mt-5">
                        <button type="submit" class="btn btn-dark btn-lg rounded-pill px-5 w-100 py-3 fw-bold shadow-sm">Securely Update Password</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php include __DIR__ . '/../../layouts/footer.php'; ?>
