<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/PageCss/body.css">
    <title>Feed | Wandrlust</title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</head>

<body>
    <!--Section: Newsfeed-->
    <div>
        <ul class="nav nav-tabs mb-3" id="myTab0" role="tablist"
            style="display: flex; justify-content: space-between; align-items: center;">
            <div style="display: flex;">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab0" data-mdb-toggle="tab" data-mdb-target="#home0"
                        type="button" role="tab" aria-controls="home" aria-selected="true">
                        Posts
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab0" data-mdb-toggle="tab" data-mdb-target="#profile0"
                        type="button" role="tab" aria-controls="profile" aria-selected="false">
                        Users
                    </button>
                </li>
            </div>
            <a href="/admin/logout" style="text-decoration: none;">
                <button style="margin-right: 1rem; height: 70%;color: white; background-color: black;">
                    Logout Admin
                </button>
            </a>
        </ul>
        <div class="tab-content" id="myTabContent0">
            <div class="tab-pane fade show active" id="home0" role="tabpanel" aria-labelledby="home-tab0">
                <section style="display: flex; flex-direction: column; gap: 2rem; align-items: center;">
                    <% images.forEach(function (image){ %>
                        <div class="card" style="max-width: 40rem; border-radius: 1rem;">
                            <div class="card-body">
                                <!-- Data -->
                                <div class="d-flex mb-3">
                                    <a href="" style="text-decoration: none;">
                                        <img src="/images/profile.png" class="border rounded-circle me-2" alt="Avatar"
                                            style="height: 40px" />
                                    </a>
                                    <div>
                                        <a href="" class="text-dark mb-0" style="text-decoration: none;">
                                            <strong>
                                                <%= image.author.username %>
                                            </strong>
                                        </a>
                                        <a href="" class="text-muted d-block"
                                            style="margin-top: -6px; text-decoration: none;">
                                            <small>
                                                <%= image.createdAt.toLocaleString("en-IN", {timeZone: 'Asia/Kolkata' ,
                                                    weekday: "long" , year: "numeric" , month: "long" , day: "numeric" ,
                                                    hour: "numeric" , minute: "numeric" , second: "numeric" }) %>
                                            </small>
                                        </a>
                                    </div>
                                </div>
                                <!-- Description -->
                                <div style="font-weight: 500;">
                                    <%= image.description %>
                                </div>
                            </div>

                            <!-- Media -->
                            <div class="bg-image hover-overlay ripple rounded-0" data-mdb-ripple-color="light"
                                style="margin: 1rem;">
                                <img src="data:image/<%=image.image.contentType%>;base64,
                                <%=image.image.data.toString('base64')%>" class="w-100" style="border-radius: 1rem;">
                                <a>
                                    <div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
                                </a>
                            </div>
                            <!-- Media -->
                            <!-- Interactions -->
                            <div class="card-body">
                                <!-- Reactions -->
                                <div class="d-flex justify-content-between mb-3">
                                    <div>
                                        <a href="" style="text-decoration: none;"
                                            onclick="deletePost('<%=image._id%>')">
                                            <i class="fas fa-trash text-danger"></i>
                                            <span>
                                                Delete
                                            </span>
                                        </a>
                                    </div>
                                    <div>
                                        <%= image.caption %>
                                    </div>
                                </div>
                                <!-- Reactions -->

                            </div>
                            <!-- Interactions -->
                        </div>
                        <% }); %>
                </section>
            </div>
            <div class="tab-pane fade" id="profile0" role="tabpanel" aria-labelledby="profile-tab0">
                <% users.forEach(function (user){ %>
                    <div class="card">
                        <div class="card-header">
                            <%= user.name %>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">
                                <%= user.username %>
                            </h5>
                            <p class="card-text">
                                <%= user.email %>
                                    <br>
                                    <%= user.phone %>
                            </p>
                            <% if(!user.blocked){ %>
                                <a href="/admin"
                                    style="text-decoration: none; width: 9rem;height: 2rem;text-align: center;color: white; background-color: black;"
                                    onclick="blockUser('<%= user._id %>')" type="submit">Block</a>
                                <% } else {%>
                                    <a href="/admin"
                                        style="text-decoration: none; width: 9rem; height: 2rem; text-align: center;color: white; background-color: black;"
                                        type="submit" onclick="UnblockUser('<%= user._id %>')"
                                        class="btn btn-dark">UnBlock</a>
                                    <% } %>
                        </div>
                    </div>
                    <% }); %>
            </div>
        </div>

    </div>
    <script>
        const deletePost = async (imageId) => {
            await fetch("admin/deletePostAdmin", {
                method: "delete",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    imageId
                })
            })
        }

        const blockUser = async (userId) => {
            await fetch("admin/blockUserAdmin", {
                method: "put",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    userId
                })
            })
        }

        const UnblockUser = async (userId) => {
            await fetch("admin/unBlockUserAdmin", {
                method: "put",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    userId
                })
            })
        }
        
    </script>
    <!--Section: Newsfeed-->
    <div hidden>
        <%- include('partials/footer') %>
    </div>
</body>

</html>