<?php
include('nav.php');

$getID = $_GET['id'] ?? 0;

$stmt = $conn->prepare("SELECT * FROM users WHERE id = ? LIMIT 1");
$stmt->bind_param("i", $getID);
$stmt->execute();

$result = $stmt->get_result();
$user = $result->fetch_assoc();

if (!$user) {
           	echo "
        <script>
            alert('User Not Found');
            window.location.href = 'user-list.php';
        </script>
        ";
    exit;
}

$name     = $user['name'];
$username = $user['email'];
$password = $user['password'];
$role = $user['role'];
?>







<div style="padding-left: 10px; margin-top: 40px;" class="hp-main-layout-content">

<div class="page-header-modern">
        <h2 class="header-modern">Edit User</h2>

        <div class="dropdown">
        <button
            class="btn btn-user dropdown-toggle"
            type="button"
            id="userDropdown"
            data-bs-toggle="dropdown"
            aria-expanded="false"
        >
            <i class=""></i>
            <span class="user-name capitalize">
                <img src="../images/icon/invoice360-user.png" height=30px; width=30px;>
            </span>
        </button>

        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
            <li>
                <a class="dropdown-item" href="">
                    <i class="fa fa-user me-2"></i>   <?php echo strtok($_SESSION['user_name'], ' ');?> (<?php echo $_SESSION['role']; ?>)
                </a>
            </li>

            <li>
                <a class="dropdown-item" href="payment-details.php">
                    <i class="fa fa-credit-card"></i> Billing history
                </a>
            </li>

            <li>
                <a class="dropdown-item" href="company-profile.php">
                    <i class="fa fa-cog me-2"></i> Settings
                </a>
            </li>

            <li><hr class="dropdown-divider"></li>

            <li>
                <a class="dropdown-item text-danger" href="logout.php">
                    <i class="fa fa-sign-out me-2"></i> Sign Out
                </a>
            </li>
        </ul>
    </div>
    </div>

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:500,600,700|Poppins:400,500&display=swap');

    * {
        font-family: 'Poppins', sans-serif;
        box-sizing: border-box;
    }

    .form-wrapper {
        max-width: 1200px;
        background: #ffffff;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

    .form-header {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 25px;
        font-family: 'Montserrat', sans-serif;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .section-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        border-bottom: 2px solid #eee;
        padding-bottom: 8px;
        color: #333;
    }

    .field {
        margin-bottom: 18px;
    }

    .field p {
        font-weight: 600;
        margin-bottom: 6px;
        color: #444;
    }

    .field input,
    .field select {
        width: 100%;
        padding: 12px 14px;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        outline: none;
        transition: border 0.3s;
    }

    .field input:focus,
    .field select:focus {
        border-color: #3498db;
    }

    .password-box {
        background: #f8f9fb;
        padding: 20px;
        border-radius: 10px;
    }

    .hint {
        font-size: 13px;
        color: #777;
        margin-bottom: 12px;
    }

    .submit-btn {
        margin-top: 30px;
        text-align: right;
    }

    .submit-btn input {
        background: #3498db;
        color: #fff;
        border: none;
        padding: 12px 28px;
        font-size: 15px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
    }

    .submit-btn input:hover {
        background: #2980b9;
    }

    @media(max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="form-wrapper">
    <div class="form-header">Update User</div>

    <form action="../endpoint/updateuser.php" method="POST">
        <input type="hidden" name="id" value="<?php echo $getID; ?>">

        <div class="form-grid">

            <!-- LEFT COLUMN -->
            <div>
                <div class="section-title">User Information</div>

                <div class="field">
                    <p>Full Name</p>
                    <input type="text" name="name" required value="<?php echo $name; ?>">
                </div>

                <div class="field">
                    <p>Email</p>
                    <input type="email" name="email" required value="<?php echo $username; ?>">
                </div>

                <div class="field">
                    <p>Role</p>
                    <select name="role" required>
                        <option value="">-- Select Role --</option>
                        <option value="admin" <?= ($role === 'admin') ? 'selected' : '' ?>>Admin</option>
                        <option value="user" <?= ($role === 'user') ? 'selected' : '' ?>>User</option>
                    </select>
                </div>
            </div>

            <!-- RIGHT COLUMN -->
            <div class="password-box">
                <div class="section-title">Update Password</div>
                <p class="hint">Leave blank to keep existing password</p>

                <div class="field">
                    <p>New Password</p>
                    <input type="password" name="password" placeholder="New Password">
                </div>

                <div class="field">
                    <p>Confirm Password</p>
                    <input type="password" name="confirm_password" placeholder="Confirm Password">
                </div>
            </div>

        </div>

        <div class="submit-btn">
            <input type="submit" value="Update User">
        </div>

    </form>
</div>

</div>
iv>

    <script>
        // Password visibility toggle
        const showBtns = document.querySelectorAll('.show');
        
        showBtns.forEach(showBtn => {
            showBtn.addEventListener('click', function () {
                const passField = this.previousElementSibling; // Target the associated input field
                if (passField.type === "password") {
                    passField.type = "text";
                    this.textContent = "HIDE";
                } else {
                    passField.type = "password";
                    this.textContent = "SHOW";
                }
            });
        });

        
    </script>





             

 <!-- Plugin -->
    <!-- Plugin -->
    <script data-cfasync="false" src="../../../../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
    <script src="../app-assets/js/plugin/jquery.min.js"></script>
    <script src="../app-assets/js/plugin/bootstrap.bundle.min.js"></script>
    <script src="../app-assets/js/plugin/swiper-bundle.min.js"></script>
    <script src="../app-assets/js/plugin/jquery.mask.min.js"></script>
    <script src="../app-assets/js/plugin/autocomplete.min.js"></script>
    <script src="../app-assets/js/plugin/moment.min.js"></script>

    <!-- Layouts -->
    <script src="../app-assets/js/layouts/header-search.js"></script>
    <script src="../app-assets/js/layouts/sider.js"></script>
    <script src="../app-assets/js/components/input-number.js"></script>

    <!-- Base -->
    <script src="../app-assets/js/base/index.js"></script>
    <!-- Customizer -->
    <script src="../app-assets/js/customizer.js"></script>

    <!-- Custom -->
    <script src="../assets/js/main.js"></script>  
</body>


</html>