<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Project.Master" Inherits="System.Web.Mvc.ViewPage<AdministratorConsole.Models.ProjectController.IndexViewModel>" %>

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <script language="javascript" type="text/javascript">
        var projectFilter = null;

        function filterProjects() {
            if (projectFilter != null) {
                clearTimeout(projectFilter);
                projectFilter = null;
            }

            projectFilter = setTimeout(function () {
                var searchTerm = $("#ProjectSearch").val();

                if (searchTerm) {
                    if (searchTerm.length > 2) {
                        var projectIdsToShow = [];

                        $(".project-card-container").each(function () {
                            var cardContainer = $(this);

                            cardContainer.find(".project-name").each(function () {
                                var projectName = $(this).html();

                                if ((projectName) && (projectName.toLowerCase().indexOf(searchTerm.toLowerCase())) !== -1) projectIdsToShow.push(cardContainer.attr("projectId"));
                            });

                            cardContainer.find(".project-number").each(function () {
                                var projectNumber = $(this).html();

                                if ((projectNumber) && (projectNumber.toLowerCase().indexOf(searchTerm.toLowerCase())) !== -1) projectIdsToShow.push(cardContainer.attr("projectId"));
                            });

                            cardContainer.find(".project-location").each(function () {
                                var projectLocation = $(this).html();

                                if ((projectLocation) && (projectLocation.toLowerCase().indexOf(searchTerm.toLowerCase())) !== -1) projectIdsToShow.push(cardContainer.attr("projectId"));
                            });
                        });

                        $(".project-card-container").hide();

                        for (var i = 0; i < projectIdsToShow.length; i++) {
                            $("#project-card_" + projectIdsToShow[i]).show();
                        }
                    }
                    else $(".project-card-container").show();
                }
                else $(".project-card-container").show();
            }, 1000);
        }

        function setProjectFavorite(projectId) {
            var favourateProject = $("#favorite-project_" + projectId);

            if (!favourateProject.hasClass("selected")) {
                favourateProject.addClass("selected");

                $.ajax({
                    url: '<%= Url.Action("SetProjectFavorite", "Project")%>',
                    data: { projectId: projectId },
                    type: "GET",
                    cache: false,
                    success: function (response) {
                        updateProjectCardOrder();
                    }
                });
            }
            else {
                favourateProject.removeClass("selected");

                $.ajax({
                    url: '<%= Url.Action("RemoveFavoriteProject", "Project")%>',
                    data: { projectId: projectId },
                    type: "GET",
                    cache: false,
                    success: function (response) {
                        updateProjectCardOrder();
                    }
                });
            }
        }

        function updateProjectCardOrder() {
            _updateTaggedProjectCards();
        }

        function selectTaggedProjects(tagHTML, tag) {
            $(".project-tag").removeClass("selected");

            if ($(tagHTML).attr("id") != "all-tags") $(tagHTML).addClass("selected");

            _updateTaggedProjectCards();
        }

        function manageTags() {
            $.ajax({
                url: '<%= Url.Action("GetManageTags", "Tags")%>',
                type: "GET",
                cache: false,
                success: function (response) {
                    $("#modal-overlay").html(response);
                },
                complete: function () {
                    showModelDialog();
                }
            });
        }

        function refreshPage() {
            window.location.href = '<%= Url.Action("Index", "Project") %>';
        }

        function _updateTaggedProjectCards() {
            $("#project-cards-container").hide();
            $("#loading-projects").show();

            $.ajax({
                url: '<%= Url.Action("UpdateTaggedProjectCards", "Project")%>',
                data: {
                    tag: _getSelectedTag(),
                    sortOrder: this.$("#card-sort-order").val()
                },
                type: "GET",
                cache: false,
                success: function (response) {
                    $("#project-cards-container").html(response);

                    $("#loading-projects").hide();
                    $("#project-cards-container").show();
                }
            });
        }

        function _getSelectedTag() {
            var selectedTag = "";

            $(".project-tag").each(function () {
                if ($(this).hasClass("selected")) selectedTag = $(this).html();
            });

            return selectedTag;
        }
    </script>

    <div id="content-wrap">
        <% Html.RenderPartial("Navigation/_SideNavigation", Model.MenuNavigationModel); %>
        <div id="content">
            <div class="row align-items-start">
                <div class="col">
                    <h1><%= TextHelper.GetText("Projects") %></h1>
                </div>
                <div class="col">                     
                    <div class=" row right-floating-panel">
                        <% if (Model.Projects.Count > 0)
                        { %>
                            <div id="card-sort-container" class="col">
                                <div class="row align-items-center">
                                <label class="col">Sort:</label>
                                <select class="col" style="min-width: 100px !important" id="card-sort-order" name="CardSortOrder" onchange="updateProjectCardOrder()">
                                    <option value="name" selected="selected">Name</option>
                                    <option value="number">Number</option>
                                    <option value="created">Date Created</option>
                                    <option value="activity">Recent Activity</option>
                                </select>
                                </div>
                            </div>
                        <% } %>
                        <div id="project-display-container" class="col">
                                <a href="<%= Url.Action("Index", "Project") %>">
                                    <img src="<%= Request.ApplicationPath.TrimEnd(new char[] { '/' }) %>/Images/Icons/card-display.png" title="Card View" alt="card view" class="project-display-select" />
                                </a>
                                <a href="<%= Url.Action("List", "Project") %>">
                                    <img src="<%= Request.ApplicationPath.TrimEnd(new char[] { '/' }) %>/Images/Icons/list-display.png" title="List View" alt="list view" class="project-display-select" />
                                </a>
                            <% if ((Model.ClarityUser.IsAdministrator) || ((Model.ClarityUser.IsProjectCoordinator) && (Model.CanCoordinatorsCanProjects())))
                                { %>
                                    <a href="<%= Url.Action("Deactivated", "Project") %>">
                                        <img src="<%= Request.ApplicationPath.TrimEnd(new char[] { '/' }) %>/Images/Icons/deactivated-display.png" title="Show De-activated Projects" alt="deactivated projects" class="project-display-select" />
                                    </a>
                            <% } %>
                        </div>                        
                            <% if (Model.ClarityUser.IsAdministrator || (Model.ClarityUser.IsProjectCoordinator && Model.CanCoordinatorsCanProjects()))
                            { %>
                                <div class="col">
                                    <input type="button" value="<%= TextHelper.GetText("Add Project") %>" onclick="window.location.href='<%= Url.Action("Add", "Project") %>';" class="button create" />
                                </div>
                            <% } %>
                    </div>
                </div>
            </div>
            <% if (!Model.IsDefaultView("Index"))
               { %>
                <div class="right-floating-panel top-padded"><a href="<%= Url.Action("SetDefaultView", "Project", new { view = "index" }) %>">Set this as my default project view</a></div>
            <% } %>
            <div class="clear"></div>
            <% if (!String.IsNullOrEmpty(Model.AllProjectsMessage))
                { %>
            <div><%= Html.Raw(Model.AllProjectsMessage) %></div>
            <br />
            <% } %>
            <% if (Model.Projects.Count > 0)
                { %>
            <div id="project-cards-container" class="group"><% Html.RenderPartial("Partials/ProjectCards", Model.GetProjectCardsPartialViewModel()); %></div>
            <div id="loading-projects" style="display: none">
                <img src="<%= Request.ApplicationPath.TrimEnd(new char[] { '/' }) %>/Images/loading.gif" alt="loading" />
            </div>
            <% }
            else
            { %>
            <div class="clear"></div>
            <% if (Model.ClarityUser.IsAdministrator)
                { %><%= TextHelper.GetText("No projects exist. To create a project, click \"Add Project\".")%><% }
                else
                { %><%= TextHelper.GetText("Not assigned to any projects, contact your admin to be able to get access to the projects")%><% } %>
            <% } %>
        </div>
    </div>
</asp:Content>
