@using Kreta.Core.Elearning.Nexius
@model List<Kreta.Web.Areas.Adminisztracio.Models.NexiusListItemModel>
@{
    ViewBag.Title = "Index";
}

@section AddCss {
    @Styles.Render("~/Content/nexius")
}

<div class="courses">

    @if (Model.Count == 0)
    {
    <h3>
        @ErrorResource.AzOnSzamaraJelenlegNincsenekElerhatoKurzusok

    </h3>
    }

    @foreach (var course in Model)
    {
        int progress = (int)(course.CourseResult.Activities.Progress * 100);
        var measure = (int)(course.CourseResult.Activities.Measure * 100);
        var spentTime = TimeSpan.FromMinutes(course.CourseResult.Activities.TotalTime).ToString(@"hh\:mm"); ;

        var deadline = "";

        if (course.CourseResult.Activities.ResultEndTime.HasValue)
        {
            if (course.CourseResult.Activities.ResultEndTime.Value.Year == DateTime.MaxValue.Year)
            {
                deadline = "Nincs";
            }
            else
            {
                deadline = course.CourseResult.Activities.ResultEndTime.Value.ToShortDateString();
            }
        }
        else
        {
            deadline = "Nincs";
        }

        <div class="course">
            <div class="image">
                <img class="kretaLogo" />
            </div>
            <div class="details">
                <div class="title">@course.Course.Title</div>
                <div class="description">
                    @if (!string.IsNullOrWhiteSpace(course.Course.Description))
                    {
                        <div class="description-inner">
                            <div class="description-ellipsis">@course.Course.Description</div>
                        </div>
                    }
                </div>
                <div class="results">
                    <div class="left">
                        <div class="progression">
                            <div class="result-title">Előrehaladás:</div>
                            <div class="statusLineContent">
                                <div class="statusLine" style="width: @(progress)%;"></div>
                            </div>
                            <div class="statusLineValue">@progress%</div>
                        </div>
                        <div class="result">
                            <div class="result-title">Eredmény:</div>
                            <div class="statusLineContent">
                                <div class="statusLine" style="width: @(measure)%;"></div>
                            </div>
                            <div class="statusLineValue">@measure%</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="progression">
                            <div class="result-title">Határidő:</div>
                            <div>
                                @(deadline)
                            </div>
                        </div>
                        <div class="result">
                            <div class="result-title">
                                Eltöltött idő:
                            </div>
                            <div>
                                @(spentTime)
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="buttons">
                <div class="coursestatus_container">
                    <button>
                        @course.CourseResult.Activities.Status.GetDescription()
                    </button>
                </div>
                <div class="coursebutton_container">
                    <button data-launchuri="@course.Course.LaunchUri">Tovább a kurzusra</button>
                </div>
            </div>
        </div>
    }
</div>

<script>
    var ELearningHelper = (function () {
        var eLearningHelper = function () { };

        var url = {
            StartCourse: "@Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new {controller = "ELearningApi", action = "StartCourse" })",
        };

        eLearningHelper.StartCourse = function (launchUri) {
            location.href = `${url.StartCourse}?launchUri=${launchUri}`;
        };

        return eLearningHelper;
    })();
    $('.coursebutton_container>button').click(function () {
        $this = $(this);
        ELearningHelper.StartCourse($this.data('launchuri'));
    });

    // NOTE: Az alábbi működés azt a célt szolgálta, hogy ha nem fér ki a description két sorba,
    // akkor levágjuk a maradékot és szöveg végére '...'-t teszünk, de sajnos nem működött megfelelően,
    // mert nem pontos a méret számolás és különböző szövegnél továbbcsúszik.
    // Mivel nem olyan alapvető ennek a megírása, ezért későbbi esetre kikommentezve így hagyjuk.
    // A KRETA2-9229 taszk keretein belül módosításra került, hogy overflow hidden értékkel lesz megjelenítve.

    //var maxWidth = 520;
    //var maxLines = 2;

    //// ----------------------------------------------

    //function getTextWidth(text, font) {
    //    var canvas = getTextWidth.canvas ||
    //        (getTextWidth.canvas = document.createElement("canvas"));
    //    var context = canvas.getContext("2d");
    //    context.font = font;
    //    var metrics = context.measureText(text);
    //    return metrics.width;
    //};

    //$('.description-inner').each(function (i, elem) {
    //    var startIndex = 0;
    //    var ellipsisText = "";

    //    // Get font style and size for source text
    //    var $objCss = $(elem).find(".description-hidden").css("font");

    //    // Split source text into array on spaces.
    //    var arr = $(elem).find(".description-hidden").text().split(" ");

    //    // Get width of space
    //    var spaceWidth = getTextWidth(" ", $objCss);

    //    // Get width of ellipsis
    //    var ellipsisWidth = getTextWidth("...", $objCss);

    //    // For each line
    //    for (var o = 0; o < maxLines; o++) {
    //        var newLine = "";
    //        var newLineWidth = 0;

    //        ellipsisWidth = (o + 1 == maxLines ? ellipsisWidth : 0);

    //        // For each word in the array
    //        for (var i = startIndex; i < arr.length; i++) {
    //            // Get width of each word.
    //            var wordWidth = getTextWidth(arr[i], $objCss);

    //            // Append word to newLine
    //            // Don't allow newLine to be wider than maxWidth
    //            if ((wordWidth + spaceWidth + newLineWidth + ellipsisWidth) < maxWidth) {
    //                newLineWidth += (wordWidth + spaceWidth);
    //                newLine += arr[i] + " ";
    //                startIndex = i + 1;
    //            }
    //            else {
    //                break;
    //            }
    //        }
    //        if (newLine !== '') {
    //            ellipsisText += (newLine + (o + 1 == maxLines ? " ..." : "<br/>"));
    //        }
    //    }

    //    // Show ellipsis text
    //    $(elem).find(".description-ellipsis").html(ellipsisText);
    //});
</script>