<% function isValidHttpUrl(string) {
    try {
      const url = new URL(string);
      return url.protocol === 'http:' || url.protocol === 'https:';
    } catch (err) {
      return false;
    }
} %> 
<%-include ('./header')%>
    <% admin1.dynamicFields=JSON.parse(admin1.dynamicFields) %>
    <% admin2.dynamicFields=JSON.parse(admin2.dynamicFields) %>
    <div class="container">
        <div class="row">
            <div class="col-9 ">
                <h2 class="text-center mt-4 header"><i class="fa-solid fa-clipboard mr-2 fa-sm"></i>View Projects</h2>
            </div>
            <div class="col-3">
                <% if (user.admin) { %>
                    <a href="/group/create">
                        <button class="btn btn-primary btn-block" style="margin-block: 40px;">
                            <i class="fa-solid fa-folder-plus mr-2"></i>Create Project</button>
                    </a>
                    <% } %>
            </div>
        </div>

        <div class="row">
            <div class="col-6 admin-card" data-toggle="modal" data-target="#userModal<%= admin1.userId %>">
                <div class="admin-picture-div">
                    <img src=<%= admin1.profileImage %> alt="Admin Profile Picture" class="admin-picture">
                </div>
                    <div class="user-details">
                    <h2 class="username"><%= admin1.userName %></h2>
                    <p class="email"><%= admin1.userEmail %></p>
                </div>
            </div>
            <div class="col-6 admin-card"  data-toggle="modal" data-target="#userModal<%= admin2.userId %>">
                <div class="admin-picture-div">
                    <img src=<%= admin2.profileImage %> alt="Admin Profile Picture" class="admin-picture">
                </div>
                <div class="user-details">
                    <h2 class="username"><%= admin2.userName %></h2>
                    <p class="email"><%= admin2.userEmail %></p>
                </div>
            </div>
        </div>

        <% for(const group of groups) { %>
            <div class="card">
                <div class="card-header">
                    <%= group.groupName %>
                </div>
                <div class="card-body">
                    <div class="group-info"><strong>Project ID: </strong><%= group.groupId %>
                    </div>
                    <div class="group-info"><strong>Description: </strong><%= group.project %>
                    </div>
                    <div class="group-info"><strong>Admin: </strong><%= group.adminId %>
                    </div>
                    <a href="/group/dashboard?groupId=<%= group.groupId %>"><button class="btn btn-view-details">
                        <i class="fa-solid fa-sitemap mr-2"></i>Open Dashboard</button></a>
                </div>
            </div>
            <% } %>
    </div>
    <%-include ('./footer')%>

<!-- admin1 modal -->
    <div class="modal fade invite-modal" id="userModal<%= admin1.userId %>" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">User Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="profile-card">
                        <h2 class="text-center mb-4">Admin Profile</h2>
                        <hr>
                        <div class="profile-picture">
                            <img src="<%= admin1.profileImage %>" alt="Profile Picture">
                        </div>
                        <div class="user-details">
                            <strong>Username:</strong> <%= admin1.userName %> <br>
                            <strong>User ID:</strong> <%= admin1.userId %> <br>
                            <strong>Email:</strong> <%= admin1.userEmail %> <br>
                            <strong>Bio:</strong> <%= admin1.bio %> <br>
                            <%for(df of admin1['dynamicFields']){%>
                                <strong><%= df.field %>:</strong> 
                                <% if (isValidHttpUrl(df.value)) { %>
                                    <a href="<%= df.value %>">Click Here</a>
                                <% } else { %>
                                    <%= df.value %>
                                <% } %>
                                <br>
                            <% } %>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- admin2 modal -->
    <div class="modal fade invite-modal" id="userModal<%= admin2.userId %>" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">User Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="profile-card">
                        <h2 class="text-center mb-4">Admin Profile</h2>
                        <hr>
                        <div class="profile-picture">
                            <img src="<%= admin2.profileImage %>" alt="Profile Picture">
                        </div>
                        <div class="user-details">
                            <strong>Username:</strong> <%= admin2.userName %> <br>
                            <strong>User ID:</strong> <%= admin2.userId %> <br>
                            <strong>Email:</strong> <%= admin2.userEmail %> <br>
                            <strong>Bio:</strong> <%= admin2.bio %> <br>
                            <%for(df of admin2['dynamicFields']){%>
                                <strong><%= df.field %>:</strong> 
                                <% if (isValidHttpUrl(df.value)) { %>
                                    <a href="<%= df.value %>">Click Here</a>
                                <% } else { %>
                                    <%= df.value %>
                                <% } %>
                                <br>
                            <% } %>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

<script>
    // Add an event listener to each navigation link
    $(document).ready(function(){
        // Remove 'active' class from all navigation links
        $(".navbar-nav .nav-link").removeClass("active");
        // Add 'active' class to the clicked navigation link
        $('#viewGroups').addClass("active");
    });

    const query=<%- query %>;

    if(query.groupCreate=='failure')
        Swal.fire({
            title: 'Error!',
            text: 'Group Creation Failed!',
            icon: 'error',
            confirmButtonText: 'OK'
        })

    if(query.groupDelete=='success')
    Swal.fire({
        title: 'Done!',
        text: 'Group Deleted Successfully!',
        icon: 'success',
        confirmButtonText: 'OK'
    })

    if(query.groupDelete=='failure')
    Swal.fire({
        title: 'Error!',
        text: 'Group Deletion Failed!',
        icon: 'error',
        confirmButtonText: 'OK'
    })
</script>

