@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<Wingman.NovaSBE.ViewModels.Shared.ListViewModel<Wingman.NovaSBE.ViewModels.Shared.SEOSearchContent>>
@using System.Globalization
@using Wingman.NovaSBE.ViewModels.Extensions;
@using System.Threading;
@using Wingman.NovaSBE.ViewModels.Constants;
@using DotNetNuke.Common.Utilities;
@using Wingman.Presentation.Extensions;
@using DotNetNuke.Web.Client.ClientResourceManagement
@Html.Partial("Includes")

@if (Dnn.ModuleContext.IsEditable)
{
    <strong>@Dnn.ModuleContext.Configuration.ModuleTitle</strong>
}

@{
    var moduleId = @Dnn.ModuleContext.ModuleId;
    var nameModuleAngular = "FacultyListApp-" + moduleId;
    var category = ViewBag.Category > 0 ? ViewBag.Category : "null";
    var defaultImg = @Dnn.ActivePage.SkinPath + "assets/images/faculty-default.jpg";

}

@if (Model != null)
{
    @Html.Partial("wSEOSearchData", Model)
}


<div ng-controller="mainController as main" ng-init="main.init(@ViewBag.PageSize)" data-aos="fade-up">
    <div class="form container-fluid">
        <div class="row">
            <div class="col-12 mb-4">
                <p class="mb-1">@Dnn.LocalizeString("labelFilterTitle")</p>
                <hr />
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-md-10">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <div class="form__content">
                            <label for="form_name">@Dnn.LocalizeString("labelFilter")</label>
                            <input type="text" ng-model="main.customFilters['FacultyFreeText'].value" class="form-control mb-0" placeholder="@Dnn.LocalizeString("LabelFilterByPlaceholder")" />
                        </div>
                    </div>
                </div>
                @if ((bool)ViewBag.ShowExectutiveFilter)
                {
                    <div class="row mt-3 mt-md-5">
                        <div class="col-12 col-md-6">
                            <div class="form__content">
                                <label>@Dnn.LocalizeString("labelFilterChallenge")</label>
                                <select ng-model="main.customFilters['AcademicUnit'].value" class="form-control mb-md-0"
                                        ng-options="item.Value as item.Text for item in main.initialData.ChallengeList">
                                    <option value="">@Dnn.LocalizeString("labelFilterAll")</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form__content">
                                <label>@Dnn.LocalizeString("labelFilterProgram")</label>
                                <select ng-model="main.customFilters['Program'].value" ng-disabled="!main.customFilters['AcademicUnit'].value"
                                        ng-options="item.Value as item.Text for item in main.initialData.ProgramsList | filter: {Value : main.customFilters['AcademicUnit'].value}" class="form-control mb-md-0 mb-5">
                                    <option value="">@Dnn.LocalizeString("labelFilterAll")</option>
                                </select>
                            </div>
                        </div>
                    </div>
                }
            </div>
            <div class="col-12 col-md-2  d-flex align-items-end">
                <div class="row w-100">
                    <div class="col-12">
                        <a href="#" class="w-100 btn-primary--dark mb-md-0 mr-0" ng-click="main.applyFilter();">@Dnn.LocalizeString("labelFilterSearchData")</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="alphabet js-alphabet">
        <div class="alphabet--options">
            <div class="alphabet--options__wrapper">
                <ul>
                    <li ng-class="main.customFilters['Letter'].value == '' ? 'is-active' : ''"><button type="button" data-index="all" ng-click="main.setLetter()" onclick="alphabetFilter($('.js-alphabet'))"><img src="@(Dnn.ActivePage.SkinPath)assets/images/icons/all-circle.png"></button></li>
                    <li ng-class="letter.Total <= 0 ? 'is-empty' : ''" ng-repeat="letter in main.letters"><button ng-disabled="letter.Total <= 0" type="button" data-index="{{letter.Initial}}" ng-click="main.setLetter(letter.Initial)" onclick="alphabetFilter($('.js-alphabet'))">{{letter.Initial}}</button></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="no-related-faculty" ng-if="main.empty">
        <span>@Dnn.LocalizeString("lblNoResults")</span>
    </div>

    <div infinite-scroll="main.loadMore()" ng-cloak ng-if="!main.empty" data-aos="fade-up">
        <div data-letter="{{key}}" class="row" ng-repeat="(key, value) in main.data | groupBy: 'InitialLetter'">
            <div class="col-12 text-center">
                <div class="container-fluid">
                    <div class="alphabet--selected-letter">
                        <span>{{key}}</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center" ng-repeat="item in value">
                <div class="container-fluid">
                    <div class="people">
                        <div class="people__wrapper">
                            <a href="{{item.DetailUrl}}" title="{{item.Name}}" class="people--image">
                                <img class="rounded-circle img-fluid" ng-src={{item.PhotoPath}} onerror="this.src='@defaultImg'" alt="{{item.Name}}">
                            </a>
                            <div class="people--name">
                                <a href="{{item.DetailUrl}}" class="">{{item.Name}}</a>
                            </div>
                            <div class="people--title">
                                {{item.Translation.Position}}
                            </div>
                            <div class="people--email">
                                <button type="button" class="email open-modal" ng-click="main.showModalDialog(main.initialData.modalResources, main.initialData.modalDefaults, {FacultyId : item.Id})" href="#" target="_top">@Dnn.LocalizeString("labelSendEmail")</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<script>
    document.addEventListener("DOMContentLoaded", function(Faculty) {
        var initialData = {
            TabId: @Dnn.ModuleContext.TabId,
            ModuleId: @moduleId,
            PortalId: @Dnn.ModuleContext.PortalId,
            recaptachaKey: '@ViewBag.ReCaptchaPublicToken',
            ShowExectutiveFilter: '@ViewBag.ShowExectutiveFilter',
			modalResources: {
                Name: '@Html.Raw(Dnn.LocalizeString("lblName"))',
                Email: '@Html.Raw(Dnn.LocalizeString("lblEmail"))',
                PlcName: '@Html.Raw(Dnn.LocalizeString("plcName"))',
                PlcEmail: '@Html.Raw(Dnn.LocalizeString("plcEmail"))',
                Message: '@Html.Raw(Dnn.LocalizeString("lblMessage"))',
                PlcMessage: '@Html.Raw(Dnn.LocalizeString("plcMessage"))',
                SendACopy: '@Html.Raw(Dnn.LocalizeString("lblSendACopy"))',
                BtnSend: '@Html.Raw(Dnn.LocalizeString("lblSend"))',
                RequiredFielMsg: '@Html.Raw(Dnn.LocalizeString("fieldRequired"))',
                ErrorEmail: '@Html.Raw(Dnn.LocalizeString("invalidField"))',
                PreTitle: '@Html.Raw(Dnn.LocalizeString("lblSpontaneous"))',
                Title: '@Html.Raw(Dnn.LocalizeString("Title"))',
                MoreInfo: '@Html.Raw(Dnn.LocalizeString("lblMoreInfo"))',
                ErrorMessageTitle : '@Html.Raw(Dnn.LocalizeString("lblMessageErrorTitle"))',
                ErrorMessage: '@Html.Raw(Dnn.LocalizeString("lblMessageError"))',
                Back: '@Html.Raw(Dnn.LocalizeString("Back"))',
                SuccessMessage: '@Html.Raw(Dnn.LocalizeString("lblMessageSent"))',
                SucessTitleMessage: '@Html.Raw(Dnn.LocalizeString("lblMessageSentTitle"))'
            },
            ChallengeList: @Html.Raw(ViewBag.ChallengeList),
            ProgramsList: @Html.Raw(ViewBag.Program),

            modalDefaults : {
                backdrop: true,
                keyboard: true,
                modalFade: true,
                windowTemplateUrl: "/WingmanControlsEditorial/Angular/HtmlTemplates/templateModalWindow.html",
                templateUrl:  "/WingmanControls/TemplatesShared/customModal.html",
            },
        };

        $(document).ready(function() {
            $('.open-modal').click(function(e) {
                e.preventDefault();

                // To open the modal use this:
                openModal($('#static-modal'));

            });
        });

        $(function () { alphabetFilter($('.js-alphabet')); });

        appFacultyList('@nameModuleAngular', @moduleId);
        mainFacultyList('@nameModuleAngular', initialData);
        modalContactFacultyList('@nameModuleAngular', initialData);

        angular.bootstrap(document.getElementById('mvcContainer-' + @Dnn.ActiveModule.ModuleID), ['@nameModuleAngular']);
    })
</script>