<?php
include 'auth.php';
include 'database.php';

$user_id = $_SESSION['user_id'];

$stmt = $conn->prepare("
    SELECT u.fname, u.lname, pr.profile_picture, pr.profile_description, pr.twitter, pr.instagram, pr.linkedin, pr.facebook, pr.tiktok 
    FROM users u
    LEFT JOIN profiles pr ON u.id = pr.user_id 
    WHERE u.id = ?
");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
$profile_data = $result->fetch_assoc();
$stmt->close();

$fname = $profile_data['fname'];
$lname = $profile_data['lname'];
// rename $profile_data for easier replacement in the rest of the file if needed, 
// but I will just update the usages.
$profile_info = $profile_data;

$stmt = $conn->prepare("SELECT id, post_name, image_1 FROM posts WHERE user_id = ? ORDER BY id DESC");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
$user_posts = $result->fetch_all(MYSQLI_ASSOC);
$stmt->close();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<title><?php echo htmlspecialchars($fname . ' ' . $lname); ?></title>
</head>
<body>
    <header>
        <img src="img/logo.png" alt="Logo" class="logo">
        <button id="navbtn" onclick="window.location.href='index.php'">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" href="index.html"/>
                <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
            </svg>
        </button>
    </header>
    <section class="col-8 mx-auto" style="padding: 20px;">
        <?php
        echo "<h2>" . $fname . ' ' . $lname . "</h2>";
        ?>
            <form class="row g-3" action="update_profile.php" method="post" enctype="multipart/form-data" id="about">
                <div id="pfp" class="col-xl-3">
                    <label for="profile_picture" id="label">Profile Picture:</label>
                    <input type="file" name="profile_picture" id="profile_picture" class="form-control" accept="image/*">
                    <div id="profile_preview_container">
                        <?php if(!empty($profile_info['profile_picture'])): ?>
                            <img id="profile_preview" src="uploads/<?php echo htmlspecialchars($profile_info['profile_picture']); ?>" alt="Profile Preview">
                        <?php else: ?>
                            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#114011" class="bi bi-person-fill" viewBox="0 0 16 16" id="placeholder_svg">
                                <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
                            </svg>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="col-xl-9">
                    <label for="profile_description" id="label">Profile Description:</label>
                    <textarea name="profile_description" class="form-control" id="profile_description" rows="5" placeholder="Describe yourself..."><?php echo !empty($profile_info['profile_description']) ? htmlspecialchars($profile_info['profile_description']) : ''; ?></textarea>
                </div>
                <label id="label">Social Media:</label>
                    <div id="twitter" class="col-12 col-md-6">
                        <input name="twitter" type="url" class="form-control" id="social_media_site" placeholder="Twitter Profile URL" value="<?php echo !empty($profile_info['twitter']) ? htmlspecialchars($profile_info['twitter']) : ''; ?>">
                    </div>
                    <div id="instagram" class="col-12 col-md-6">
                        <input name="instagram" type="url" class="form-control" id="social_media_site" placeholder="Instagram Profile URL" value="<?php echo !empty($profile_info['instagram']) ? htmlspecialchars($profile_info['instagram']) : ''; ?>">
                    </div>
                    <div id="linkedin" class="col-12 col-md-6">
                        <input name="linkedin" type="url" class="form-control" id="social_media_site" placeholder="LinkedIn Profile URL" value="<?php echo !empty($profile_info['linkedin']) ? htmlspecialchars($profile_info['linkedin']) : ''; ?>">
                    </div>
                    <div id="facebook" class="col-12 col-md-6">
                        <input name="facebook" type="url" class="form-control" id="social_media_site" placeholder="Facebook Profile URL" value="<?php echo !empty($profile_info['facebook']) ? htmlspecialchars($profile_info['facebook']) : ''; ?>">
                    </div>
                    <div id="tiktok" class="col-12 col-md-6 mx-auto">
                        <input name="tiktok" type="url" class="form-control" id="social_media_site" placeholder="TikTok Profile URL" value="<?php echo !empty($profile_info['tiktok']) ? htmlspecialchars($profile_info['tiktok']) : ''; ?>">
                    </div>
                <div class="col-12" id="notes">
                    Note: Please keep your description, profile picture and social media links related to your professional or creative work.<br>
                    Do not include any inappropriate or unrelated content.
                </div>
                <div class="d-grid col-4 mx-auto"> 
                    <button type="submit" class="btn" id="actionbtn">Save Profile Info</button>
                </div>
            </form>
    </section>
    <?php if ($profile_info && !empty($profile_info['profile_description']) && ((!empty($profile_info['twitter']) || !empty($profile_info['instagram']) || !empty($profile_info['facebook']) || !empty($profile_info['linkedin']) || !empty($profile_info['tiktok'])))): ?>
        <h2>Your offers:</h2>
        <div class="post_grid">
            <?php foreach ($user_posts as $post): ?>
                <div class="post_container">
                    <img src="uploads/<?php echo htmlspecialchars($post['image_1']); ?>" alt="Post Image" class="post_image" onclick="window.location.href='post.php?id=<?php echo $post['id']; ?>'">
                    <button class="post_name" onclick="window.location.href='post.php?id=<?php echo $post['id']; ?>'">
                        <?php echo htmlspecialchars($post['post_name']); ?>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16" onclick="deletePost(event, <?php echo $post['id']; ?>)">
                            <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"/>
                        </svg>
                    </button>
                </div>
            <?php endforeach; ?>
            <div class="post_container" id="add_post" onclick="window.location.href='create_post_page.php'">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#aaa" class="bi bi-plus-square" viewBox="0 0 16 16">
                    <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
                </svg>
            </div>
        </div>
    <?php else: ?>
    <section class="col-8 mx-auto row g-3">
        <div class="col-12 mx-auto text-center" id="notes">
            You need to add a profile description and at least one social media link to start posting your offers.
        </div>
    </section>
    <?php endif; ?>
    <section class="d-grid col-4 mx-auto" style="padding: 20px">
        <button type="button" class="btn" id="actionbtn" onclick="logout()">Log out</button>
    </section>
<script src="js/script.js"></script>
</body>
</html>