<%-include ('./header')%>
    <div class="container ">
        <div class="row  mb-4 header">
            <div class="col-8">
                <h2 class="text-center" >
                    <i class="fa-solid fa-clipboard mr-2 fa-sm"></i><%=group.groupName%>
                    <!-- Button to open the modal -->
                        <i class="fa-solid fa-circle-info mb-3" style="font-size: 14px;cursor: pointer;;" data-toggle="modal" data-target="#projectDetailsModal"></i>
                </h2>
            </div>
            <div class="col-4">
                <% if (currUser.admin) { %>
                    <div class="btn-group ml-auto" role="group" aria-label="Edit and Delete Group Buttons" style="float: right;">
                        <a href="/group/edit?groupId=<%= group.groupId %>">
                            <button type="button" class="btn btn-warning mx-2">
                                <i class="fa-solid fa-pen-nib mr-2"></i>Edit Project
                            </button>
                        </a>
                        <a href="/group/delete?groupId=<%= group.groupId %>">
                            <button type="button" class="btn btn-danger">
                                <i class="fa-solid fa-square-minus mr-2"></i>Delete Project</button>
                        </a>
                    </div>
                <% } %>
            </div>
        </div>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#group_updates">
                    <i class="fa-solid fa-pen-nib mr-2"></i>Posts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#group_resources">
                    <i class="fa-solid fa-wrench mr-2"></i>Resources</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#group_members">
                    <i class="fa-solid fa-users mr-2"></i>Members</a>
            </li>
        </ul>

        <div class="tab-content">
            
            <%-include ('./groupPosts')%>
            <%-include ('./groupResources')%>
            <%-include ('./groupMembers')%>

        </div>
    </div>

    <!-- Group Details Modal -->
    <div class="modal fade invite-modal" id="projectDetailsModal" tabindex="-1" role="dialog" aria-labelledby="projectDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="projectDetailsModalLabel">Project 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">
                    <!-- Project details content -->
                    <p><strong>Project ID:</strong> <span id="projectId"><%= group.groupId %></span></p>
                    <p><strong>Project Name:</strong> <span id="projectName"><%= group.groupName %></span></p>
                    <p><strong>Admin ID:</strong> <span id="adminId"><%= group.adminId %></span></p>
                    <p><strong>Project Description:</strong> <span id="projectDescription"><%= group.project %></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<%-include ('./footer')%>

<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");
    });
</script>

<script>
    const query=<%- query %>;
    if(query.postCreate=='success')
        Swal.fire({
            title: 'Post Created Successfully!',
            text: '',
            icon: 'success',
            confirmButtonText: 'OK'
        })

    if(query.postCreate=='failure')
        Swal.fire({
            title: 'Post Creation Failed!',
            text: 'Try Again',
            icon: 'error',
            confirmButtonText: 'OK'
        })

    if(query.postEdit=='success')
        Swal.fire({
            title: 'Done!',
            text: 'Post Edited Successfully',
            icon: 'success',
            confirmButtonText: 'OK'
        })

    if(query.postEdit=='failure')
        Swal.fire({
            title: 'Error!',
            text: 'Post Edit Failed',
            icon: 'error',
            confirmButtonText: 'OK'
        })

    if(query.postDelete=='success')
        Swal.fire({
            title: 'Done!',
            text: 'Post Deleted Successfully.',
            icon: 'success',
            confirmButtonText: 'OK'
        })
    if(query.postDelete=='failure')
        Swal.fire({
            title: 'Error!',
            text: 'Post Delete Failed',
            icon: 'error',
            confirmButtonText: 'OK'
        })

    if(query.groupCreate=='success')
        Swal.fire({
            title: 'Success!',
            text: 'Group Created Successfully',
            icon: 'success',
            confirmButtonText: 'OK'
        })

    if(query.groupEdit=='success')
        Swal.fire({
            title: 'Success!',
            text: 'Group Edited Successfully',
            icon: 'success',
            confirmButtonText: 'OK'
        })

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

    if(query.memberDelete=='success')
        Swal.fire({
            title: 'Success!',
            text: 'Member Deleted',
            icon: 'success',
            confirmButtonText: 'OK'
        })

    if(query.memberDelete=='failure')
        Swal.fire({
            title: 'Error!',
            text: 'Member Delete Failed!!',
            icon: 'error',
            confirmButtonText: 'OK'
        })

    if(query.memberAdd=='success')
        Swal.fire({
            title: 'Done!',
            text: "Member/s Added Successfully",
            icon: 'success',
            confirmButtonText: 'OK'
        })
    
    if(query.memberAdd=='failure')
        Swal.fire({
            title: 'Error!',
            text: "Member/s Add Failed!!",
            icon: 'error',
            confirmButtonText: 'OK'
        })

    if(query.resourceCreate=='success')
    Swal.fire({
        title: 'Done!',
        text: "Resource Added Successfully",
        icon: 'success',
        confirmButtonText: 'OK'
    })
    
    if(query.resourceCreate=='failure')
        Swal.fire({
            title: 'Error!',
            text: "Resource Add Failed!!",
            icon: 'error',
            confirmButtonText: 'OK'
        })

    if(query.resourceEdit=='success')
    Swal.fire({
        title: 'Done!',
        text: "Resource Edited Successfully",
        icon: 'success',
        confirmButtonText: 'OK'
    })
    
    if(query.resourceEdit=='failure')
        Swal.fire({
            title: 'Error!',
            text: "Resource Edit Failed!!",
            icon: 'error',
            confirmButtonText: 'OK'
        })

    if(query.resourceDelete=='success')
    Swal.fire({
        title: 'Done!',
        text: "Resource Deleted",
        icon: 'success',
        confirmButtonText: 'OK'
    })

    if(query.resourceDelete=='failure')
        Swal.fire({
            title: 'Error!',
            text: "Resource Delete Failed!!",
            icon: 'error',
            confirmButtonText: 'OK'
        })
</script>

    