<?php
session_start();
require_once '../config.php';



$user_id = (int)$_SESSION['user_id'];

// Fetch user data
$query = mysqli_query($conn, "SELECT * FROM users WHERE id = $user_id");
$user = mysqli_fetch_assoc($query);

$success = "";
$error = "";

// Handle password change
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $current_password = $_POST['current_password'] ?? '';
    $new_password = $_POST['new_password'] ?? '';
    $confirm_password = $_POST['confirm_password'] ?? '';

    if (empty($current_password) || empty($new_password) || empty($confirm_password)) {
        $error = "All fields are required!";
    } elseif ($new_password !== $confirm_password) {
        $error = "New password and confirm password do not match!";
    } elseif ($current_password !== $user['password']) {
        $error = "Current password is incorrect!";
    } else {

        $update = mysqli_query($conn, "UPDATE users SET password='$new_password' WHERE id=$user_id");

        if ($update) {
            $success = "Password changed successfully!";
            $user['password'] = $new_password;
        } else {
            $error = "Something went wrong!";
        }
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Medical Representative Profile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../assets/style.css">
    <style>
        :root{
            --bg:#f4f6fb;
            --card:#ffffff;
            --text:#000000;
            --muted:#555555;
            --border:#e5e7eb;
            --success-bg:#ecfdf3;
            --success:#027a48;
            --error-bg:#fef3f2;
            --error:#b42318;
            --shadow:0 12px 30px rgba(0,0,0,0.08);
            --radius:18px;
            --sidebar-width:260px;
        }

        *{
            box-sizing:border-box;
        }

        html, body{
            margin:0;
            padding:0;
            overflow-x:hidden;
        }

        body{
            background:var(--bg);
            color:var(--text);
            font-family: Arial, Helvetica, sans-serif;
        }

        .main-content{
            margin-left: var(--sidebar-width);
            padding: 20px 24px;
            min-height: 100vh;
        }

        .page-wrap{
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-header{
            background: linear-gradient(135deg, #111111 0%, #2b2b2b 100%);
            color:#fff;
            border-radius: var(--radius);
            padding: 20px 24px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
        }

        .page-header h1{
            margin:0;
            font-size: 28px;
            line-height:1.2;
        }

        .page-header p{
            margin:8px 0 0;
            color: rgba(255,255,255,0.8);
            font-size: 14px;
        }

        .profile-grid{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:20px;
            align-items:stretch;
        }

        .card{
            background:var(--card);
            color:#000;
            border:1px solid var(--border);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            overflow:hidden;
            display:flex;
            flex-direction:column;
            height:100%;
        }

        .card-head{
            padding:16px 20px;
            border-bottom:1px solid var(--border);
            background:#fafafa;
        }

        .card-head h2{
            margin:0;
            font-size:18px;
            color:#000;
        }

        .card-body{
            padding:20px;
            flex:1;
        }

        .profile-box{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            text-align:center;
        }

        .avatar{
            width:92px;
            height:92px;
            border-radius:50%;
            background: linear-gradient(135deg, #111111, #444444);
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:34px;
            font-weight:bold;
            margin: 0 auto 14px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.18);
        }

        .profile-name{
            margin:0;
            font-size:22px;
            font-weight:700;
            color:#000;
        }

        .profile-role{
            margin:8px 0 16px;
            display:inline-block;
            padding:6px 12px;
            border-radius:999px;
            background:#f3f4f6;
            color:#111;
            font-size:13px;
            font-weight:600;
        }

        .info-list{
            width:100%;
            margin-top:18px;
            text-align:left;
            border-top:1px solid var(--border);
            padding-top:18px;
        }

        .info-item{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:16px;
            padding:10px 0;
            border-bottom:1px dashed #ececec;
        }

        .info-item:last-child{
            border-bottom:none;
        }

        .info-label{
            width:42%;
            color:#000;
            font-size:14px;
            font-weight:600;
        }

        .info-value{
            width:58%;
             color:#000;
            font-size:14px;
            font-weight:700;
            text-align:right;
            word-break:break-word;
        }

        .alert{
            padding:12px 14px;
            border-radius:12px;
            margin-bottom:15px;
            font-size:14px;
            font-weight:600;
        }

        .success{
            background:var(--success-bg);
            color:var(--success);
            border:1px solid #abefc6;
        }

        .error{
            background:var(--error-bg);
            color:var(--error);
            border:1px solid #fecdca;
        }

        .form-group{
            display:flex;
            flex-direction:column;
            gap:6px;
            margin-bottom:15px;
        }

        label{
            display:block;
            margin-bottom:0;
            font-size:14px;
            font-weight:700;
            color:#000;
        }

        input{
            width:100%;
            height:42px;
            padding:10px 12px;
            border:1px solid var(--border);
            border-radius:12px;
            outline:none;
            font-size:14px;
            background:#fff;
            color:#000;
            transition:0.2s ease;
        }

        input::placeholder{
            color:#666;
        }

        input:focus{
            border-color:#111;
            box-shadow:0 0 0 4px rgba(17,17,17,0.08);
        }

        .btn{
            width:100%;
            height:44px;
            border:none;
            border-radius:12px;
            background: linear-gradient(135deg, #111111 0%, #2b2b2b 100%);
            color:#fff;
            padding:0 16px;
            font-size:15px;
            font-weight:700;
            cursor:pointer;
            transition:0.2s ease;
            margin-top:8px;
        }

        .btn:hover{
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.14);
        }

        .note{
            margin-top:14px;
            font-size:13px;
            color:var(--muted);
            line-height:1.6;
        }

        @media (max-width: 900px){
            .main-content{
                margin-left:0;
            }

            .profile-grid{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 600px){
            .main-content{
                padding:14px;
            }

            .page-header{
                padding:18px;
            }

            .page-header h1{
                font-size:22px;
            }

            .card-body{
                padding:18px;
            }

            .info-item{
                flex-direction:column;
                align-items:flex-start;
                gap:4px;
            }

            .info-label,
            .info-value{
                width:100%;
                text-align:left;
            }
        }
    </style>
</head>
<body>

<?php include '../header.php'; ?>
<?php include 'salesexecutivesidebar.php'; ?>

<div class="main-content">
    <div class="page-wrap">

        <div class="page-header">
            <div>
                <h1>Medical Representative Profile</h1>
                <p>View your account details and change your password securely.</p>
            </div>
        </div>

        <div class="profile-grid">
            <div class="card">
                <div class="card-head">
                    <h2>Profile Details</h2>
                </div>
                <div class="card-body profile-box">
                    <div class="avatar">
                        <?php echo strtoupper(substr($user['name'] ?? 'A', 0, 1)); ?>
                    </div>

                    <h3 class="profile-name" style="color: #000;"><?php echo htmlspecialchars($user['name'] ?? 'Medical Representative'); ?></h3>
                

                    <div class="info-list">
                        <div class="info-item">
                            <div class="info-label">Name</div>
                            <div class="info-value"><?php echo htmlspecialchars($user['name'] ?? ''); ?></div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">Email</div>
                            <div class="info-value"><?php echo htmlspecialchars($user['email'] ?? ''); ?></div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">User ID</div>
                            <div class="info-value"><?php echo (int)$user_id; ?></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-head">
                    <h2>Change Password</h2>
                </div>
                <div class="card-body">

                    <?php if ($success): ?>
                        <div class="alert success"><?php echo $success; ?></div>
                    <?php endif; ?>

                    <?php if ($error): ?>
                        <div class="alert error"><?php echo $error; ?></div>
                    <?php endif; ?>

                    <form method="POST">
                        <div class="form-group">
                            <label>Current Password</label>
                            <input type="password" name="current_password" placeholder="Enter current password" required>
                        </div>

                        <div class="form-group">
                            <label>New Password</label>
                            <input type="password" name="new_password" placeholder="Enter new password" required>
                        </div>

                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" name="confirm_password" placeholder="Re-enter new password" required>
                        </div>

                        <button type="submit" class="btn">Change Password</button>
                    </form>

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

    </div>
</div>

</body>
</html>