@using Kreta.Web.Areas.Orarend.Models;
@using Kreta.Web.Helpers.Grid;
@using Kreta.Framework
@using Kreta.Enums
@model MulasztasNaplozas
@{ Layout = null; }

<div class="container-fluid">
    <div class="row">
        @Html.KretaComboBoxFor(m => m.Tema, Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = "AdminNaploEllenorzesApi", action = "GetTema", osztCsop = Model.OsztalyCsoportId, targy = Model.TargyId }), dataTextField: "Text", datavalueField: "Text", isCustomAllowed: true).Placeholder(StringResourcesUtils.GetString(4798)).AutoBind(true).Enable(false).RenderWithName(3, 3)
        @Html.KretaLabelFor(m => m.EvesOraSorszam, 3, 3)
    </div>

    @if ((Model.JogviszonySzunetletetokDb.HasValue && Model.JogviszonySzunetletetokDb.Value > 0) || (Model.SzakmaiGyakorlatonLevokDb.HasValue && Model.SzakmaiGyakorlatonLevokDb.Value > 0))
    {
        <div class="row">
            @if (Model.JogviszonySzunetletetokDb.HasValue && Model.JogviszonySzunetletetokDb.Value > 0)
            {
                @Html.KretaLabelFor(m => m.JogviszonySzunetletetokDb, 3, 3, true, "JogviszonySzunetletetoDb")
            }
            @if (Model.SzakmaiGyakorlatonLevokDb.HasValue && Model.SzakmaiGyakorlatonLevokDb.Value > 0)
            {
                @Html.KretaLabelFor(m => m.SzakmaiGyakorlatonLevokDb, 3, 3, true, "SzakmaiGyakorlatonLevoDb")
            }
        </div>
    }
</div>

@{
    var grid = Html.KretaGrid<MulasztasNaplozasGrid>
        (
          name: "MulasztasokNaplozasaGrid",
          getUrl: new GridApiUrl("AdminNaploEllenorzesApi", "GetMulasztasok",
            new Dictionary<string, string> {
            { "osztalycsoportId", Model.OsztalyCsoportId.HasValue ? Model.OsztalyCsoportId .Value.ToString() : "-1" },
            { "tanoraId", Model.isTanora && Model.TanoraId.HasValue ? Model.TanoraId.Value.ToString() :"-1" },
            { "targyId", Model.TargyId.HasValue ? Model.TargyId.Value.ToString() :"-1" },
            { "tanarId", Model.TanarId.HasValue ? Model.TanarId.Value.ToString() :"-1" },
            { "oraKezdete", Model.OraKezdete.ToString() },
            { "oraVege", Model.OraVege.ToString() },
            { "hianyzokAutoKitoltes", Model.HianyzokAutoKitoltes.ToString() }
                }),
        allowFilterable: false,
        allowPaging: false,
        pageSizes: null
    )
    .Sortable(sortable => sortable
        .AllowUnsort(true)
        .SortMode(GridSortMode.MultipleColumn));

    grid.Columns(c => c.Template(t => t.ToString()).Title(StringResourcesUtil.GetString(455/*Tanuló neve*/)).ClientTemplate(
        @"
#if (Igazolt != null || OraMentesseg_BOOL == true || elozoOranHianyzott == true || (Oka!= null && Oka.includes('" + OrarendResource.Magantanulo + "')) || (Oka != null && Oka != '')) { # " +
                "<div style='pointer-events: all' title='#if (Oka != null) { # #:Oka# # } # #if (elozoOranHianyzott == true) { # Az előző órán hiányzott! # } #'> <span class='kendoTooltipMulasztasTanuloNev' data-gondviselo='#:GondviseloNev#' data-gondviselotelszam='#:GondviseloTelSzam# data-amifotargy='#: AmiFotargyId_DNAME #' data-amitagozat='#: AmiTagozatId_DNAME #' data-amitantargykotelezoseg='#: AmiTantargyKotelezosegId_DNAME #' data-evfolyam='#: EvfolyamId_DNAME #' '> #:TanuloNev# </span><i class='fa fa-exclamation-triangle' ></i></div>"
            + @"# } " +
            @"
else if (Igazolt == null && (OraMentesseg_BOOL == null || OraMentesseg_BOOL == false)) { # " +
                "<span class='kendoTooltipMulasztasTanuloNev' data-gondviselo='#:GondviseloNev#' data-gondviselotelszam='#:GondviseloTelSzam#'data-amifotargy='#: AmiFotargyId_DNAME #' data-amitagozat='#: AmiTagozatId_DNAME #' data-amitantargykotelezoseg='#: AmiTantargyKotelezosegId_DNAME #' data-evfolyam='#: EvfolyamId_DNAME #'  > #:TanuloNev# </span>"
            + @"# } #"
        ));

    grid.Columns(c => c.Template(t => t.ToString()).Title(OrarendResource.MulasztasSzazalek).ClientTemplate(
        @"
#if(MulasztasSzazalek >= 20 && MulasztasSzazalek < 30) { #
<span style='color: rgb(227, 159, 11); font-weight: bold;' class='kendoTooltipMulasztasSzazalek' data-mulasztasossz='#:MulasztasOsszCnt#' data-mulasztashiany='#:MulasztasHianyCnt#' data-mulasztasmegtartott='#:MulasztasMegtartottCnt#' data-mulasztasmegtarthato='#:MulasztasMegtarthatoCnt#'> #:MulasztasSzazalek#%</span>
# } else if(MulasztasSzazalek >= 30) { #
<span style='color: red; font-weight: bold;' class='kendoTooltipMulasztasSzazalek' data-mulasztasossz='#:MulasztasOsszCnt#' data-mulasztashiany='#:MulasztasHianyCnt#' data-mulasztasmegtartott='#:MulasztasMegtartottCnt#' data-mulasztasmegtarthato='#:MulasztasMegtarthatoCnt#'> #:MulasztasSzazalek#%</span>
# } else { #
<span class='kendoTooltipMulasztasSzazalek' data-mulasztasossz='#:MulasztasOsszCnt#' data-mulasztashiany='#:MulasztasHianyCnt#' data-mulasztasmegtartott='#:MulasztasMegtartottCnt#' data-mulasztasmegtarthato='#:MulasztasMegtarthatoCnt#'> #:MulasztasSzazalek#%</span>
# } #
"
));

    grid.Columns(c => c.Template(t => t.ToString()).HeaderHtmlAttributes(new { @class = "mulasztasGridColumnHeaderTh" }).Title(@"<div>
<div class='mulasztasGridColumnHeader mulasztasGridColumnHeaderJelen' onclick='TanariOrarend.ChangeAllJelenletValue(" + (int)MulasztasTipusEnum.jelenlet + ");'>" + OrarendResource.Jelenlet + @"</div>
<div class='mulasztasGridColumnHeader mulasztasGridColumnHeaderUres' onclick='TanariOrarend.ChangeAllJelenletValue();'>" + OrarendResource.Ures + @"</div>
</div>").ClientTemplate(
            @"<div style='pointer-events: none;'>
#if (Igazolt == null && OraMentesseg_BOOL == true) { # " +
                    grid.SelectForColumnTemplate(Html.For<MulasztasNaplozasGrid>(), x => x.MulasztasTipus, Model.FelmentettJelenletList)
            + @"# } #" +
            @"
#if (Igazolt == null && (OraMentesseg_BOOL == null || OraMentesseg_BOOL == false)) { # " +
                    grid.SelectForColumnTemplate(Html.For<MulasztasNaplozasGrid>(), x => x.MulasztasTipus, Model.JelenletList, customClickFunctionName: "MulasztasHelper.changeMulsztasTipus")
                + @"# } #" +
            @"
#if (Igazolt != null && (OraMentesseg_BOOL == null || OraMentesseg_BOOL == false)) { # " +
            "#: MulasztasTipus_DNAME #" +
                @"<input type='hidden' value='#: MulasztasTipus #' name='MulasztasokNaplozasaGrid_MulasztasTipus_#: ID#' id='MulasztasokNaplozasaGrid_MulasztasTipus_#:ID#' data-rowinputname='MulasztasTipus'>"
            + @"# } #
    </div>"
        ));
    
    grid.Columns(c => c.Template(t => t.ToString()).Title(StringResourcesUtil.GetString(2563/*Késés(perc)*/)).ClientTemplate(
            @"<div style='pointer-events: none;'>
#if (Igazolt == null && OraMentesseg_BOOL == true) { # " + ""
            + @"# } #" +
            @"
#if (Igazolt == null && (OraMentesseg_BOOL == null || OraMentesseg_BOOL == false)) { # " +
                    grid.NumericBoxForColumnTemplate(Html, m => m.KesesIdo, 0, Model.MaxKeses, 0)
            + @"# } #" +
            @"
#if (Igazolt != null && (OraMentesseg_BOOL == null || OraMentesseg_BOOL == false) && KesesIdo != null) { # " +
                    "#: KesesIdo #" +
                        "<input data-numericboxgroup='MulasztasokNaplozasaGrid_KesesIdo' data-rowinputname='KesesIdo' id='MulasztasokNaplozasaGrid_KesesIdo_#: ID#' max='44' min='0' name='MulasztasokNaplozasaGrid_KesesIdo_#: ID#' step='1' type='hidden' value='#: KesesIdo #' data-role='numerictextbox' role='spinbutton' class='k-input' aria-valuemin='0' aria-valuemax='44' aria-valuenow='#: KesesIdo #' aria-disabled='false' aria-readonly='false'>"
            + @"# } #
    </div>"
        ));

    grid.Columns(c => c.Template(t => t.ToString()).Title("").ClientTemplate(
            @"
<div style='display: table;'>
<div class='autoFeljegyzesTable' style='display: table-row'>
<div style='display: table-cell;'>
<div title='" + OrarendResource.HazifeladatHiany + @"' class='haziFeladatHianyFeljegyzes autoFeljegyezes fejlegyezesImgDefault # if(HaziFeladatHiany_BOOL) { #haziFeladatHianyRed# } else { #haziFeladatHiany# } #' data-haziFeladatHiany='# if(HaziFeladatHiany_BOOL) { #true# } else { #false# } #' data-haziFeladatHianyId='#: HaziFeladatHianyId #'>
</div>
</div>
<div style='display: table-cell;'>
<div title='" + OrarendResource.FelszerelesHiany + @"' class='felszerelesHianyFeljegyzes autoFeljegyezes fejlegyezesImgDefault # if(FelszerelesHiany_BOOL) { #felszerelesHianyRed# } else { #felszerelesHiany# } #' data-felszerelesHiany='# if(FelszerelesHiany_BOOL) { #true# } else { #false# } #' data-felszerelesHianyId='#: FelszerelesHianyId #'>
</div>
</div>
<div style='display: table-cell;'>
<div title='" + OrarendResource.Felmentes + @"' class='felmentesFeljegyzes autoFeljegyezes fejlegyezesImgDefault # if(Felmentes_BOOL) { #felmentesOrange# } else { #felmentes# } #' data-felmentes='# if(Felmentes_BOOL) { #true# } else { #false# } #' data-felmentesId='#: FelmentesId #'>
</div>
</div>
<div style='display: table-cell;'>
<div title='" + OrarendResource.TanoraiDicseret + @"' class='tanoraiDicseretFeljegyzes autoFeljegyezes fejlegyezesImgDefault # if(TanoraiDicseret_BOOL) { #dicseretGreen# } else { #dicseret# } #' data-tanoraiDicseret='# if(TanoraiDicseret_BOOL) { #true# } else { #false# } #' data-tanoraiDicseretId='#: TanoraiDicseretId #'>
</div>
</div>
</div>
</div>
"
        ));
}
<div style="pointer-events: none;">
    @(grid)
</div>
<script type="text/javascript">

    var MulasztasHelper = (function () {
        var mulasztasHelper = function () { };

        mulasztasHelper.getModel = function () { return getModel("MulasztasokNaplozasaForm", "MulasztasokNaplozasaGrid"); }

        function getModel(formName, gridName) {
            var model = { "TemaTanmenetId": null, "Tema": "", "MulasztasList": [] };

            var form = $("#" + formName).toObject();
            var grid = KretaGridHelper.getAllRowsWithDataAttribute(gridName, ["haziFeladatHiany", "felszerelesHiany", "felmentes", "tanoraiDicseret", "haziFeladatHianyId", "felszerelesHianyId", "felmentesId", "tanoraiDicseretId"]);
            model.TemaTanmenetId = form.TemaTanmenetId;
            model.Tema = form.Tema;

            $.each(grid, function () {
                var mulasztas = {
                    "MulasztasRowId": null, "TanuloId": 0, "MulasztasTipus": 0, "Keses": null
                    , "HazifeladatHiany": null, "FelszerelesHiany": null, "Felmentes": null, "TanoraiDicseret": null
                    , "HazifeladatHianyId": 0, "FelszerelesHianyId": 0, "FelmentesId": 0, "TanoraiDicseretId": 0
                };

                mulasztas.MulasztasRowId = this.MulasztasId;
                mulasztas.TanuloId = this.ID;
                mulasztas.MulasztasTipus = this.ki_MulasztasTipus;
                mulasztas.Keses = this.ki_KesesIdo;

                mulasztas.HazifeladatHiany = this.ki_haziFeladatHiany
                mulasztas.FelszerelesHiany = this.ki_felszerelesHiany;
                mulasztas.Felmentes = this.ki_felmentes;
                mulasztas.TanoraiDicseret = this.ki_tanoraiDicseret;

                mulasztas.HazifeladatHianyId = this.ki_haziFeladatHianyId
                mulasztas.FelszerelesHianyId = this.ki_felszerelesHianyId;
                mulasztas.FelmentesId = this.ki_felmentesId;
                mulasztas.TanoraiDicseretId = this.ki_tanoraiDicseretId;

                model.MulasztasList.push(mulasztas);
            });

            return model;
        }

        mulasztasHelper.setOraTemaja = function () {
            $("input[name = 'Tema_input']").val($("#ElozoOraTema").val());
            $("input[name = 'Tema_input']").focus();
        }

        mulasztasHelper.changeMulsztasTipus = function (data) {
            if (($(data).attr('val') == "@(((int)MulasztasTipusEnum.keses).ToString())" && $(data).hasClass("activebar")))
            { return; }

            var itemId = $(data).closest('div').parent('div').attr("id");
            var kesesPrefix = "MulasztasokNaplozasaGrid_KesesIdo_";
            var divPrefix = "divMulasztasokNaplozasaGrid_MulasztasTipus_";

            var itemNumber = itemId.toString().replace(divPrefix, '');
            var kendoKeses = $("#" + kesesPrefix + itemNumber).data("kendoNumericTextBox");

            if (typeof (kendoKeses) !== "undefined") {
                kendoKeses.value(null);
            }

        }

        mulasztasHelper.dataBoundAdditionalFunction = function () {
            DocumentReadyHelper.documentReadyBindings();

            KretaTooltipHelper.setTooltip($(".kendoTooltipMulasztasTanuloNev"), "#kendoTooltip-mulasztasTanuloNevTemplate");
            KretaTooltipHelper.setTooltip($(".kendoTooltipMulasztasSzazalek"), "#kendoTooltip-mulasztasSzazalekTemplate");

            $(".haziFeladatHianyFeljegyzes").click(function () {
                var $this = $(this);
                var active = ($this.attr('data-hazifeladatHiany') == "true");

                if (!active) { $this.addClass("haziFeladatHianyRed").removeClass("haziFeladatHiany"); }
                else { $this.addClass("haziFeladatHiany").removeClass("haziFeladatHianyRed"); }
                $this.attr('data-hazifeladatHiany', !active);
            });

            $(".felszerelesHianyFeljegyzes").click(function () {
                var $this = $(this);
                var active = ($this.attr('data-felszerelesHiany') == "true");

                if (!active) { $this.addClass("felszerelesHianyRed").removeClass("felszerelesHiany"); }
                else { $this.addClass("felszerelesHiany").removeClass("felszerelesHianyRed"); }
                $this.attr('data-felszerelesHiany', !active);
            });

            $(".felmentesFeljegyzes").click(function () {
                var $this = $(this);
                var active = ($this.attr('data-felmentes') == "true");

                if (!active) { $this.addClass("felmentesOrange").removeClass("felmentes"); }
                else { $this.addClass("felmentes").removeClass("felmentesOrange"); }
                $this.attr('data-felmentes', !active);
            });

            $(".tanoraiDicseretFeljegyzes").click(function () {
                var $this = $(this);
                var active = ($this.attr('data-tanoraiDicseret') == "true");

                if (!active) { $this.addClass("dicseretGreen").removeClass("dicseret"); }
                else { $this.addClass("dicseret").removeClass("dicseretGreen"); }
                $this.attr('data-tanoraiDicseret', !active);
            });
        }

        return mulasztasHelper;
    })();

    var DocumentReadyHelper = (function () {
        // ID prefixek
        var kesesPrefix = "MulasztasokNaplozasaGrid_KesesIdo_";
        var mulasztasPrefix = "MulasztasokNaplozasaGrid_MulasztasTipus_";
        // Jquery selector for id starts with specific text
        var kesesButtonok = $('[id^=MulasztasokNaplozasaGrid_MulasztasTipus_]');
        var kesesNumericTextBoxok = $('[id^=MulasztasokNaplozasaGrid_KesesIdo_]');

        var documentReadyHelper = function () { };

        documentReadyHelper.documentReadyBindings = function () { return documentReadyBindings(); }

        function documentReadyBindings() {
            buttonBindToKesesPercben(kesesButtonok, kesesNumericTextBoxok);
            kesesPercbenBindToButton(kesesButtonok, kesesNumericTextBoxok);
        }

        function buttonBindToKesesPercben(kesesButtonok, kesesNumericTextBoxok) {
            kesesButtonok.each(function () {
                var itemId = $(this).attr("id");
                $("#" + itemId).on("change", function () {
                    mulasztasTipusOnChange(this, itemId);
                });
            });
        }

        function kesesPercbenBindToButton(kesesButtonok, kesesNumericTextBoxok) {
            kesesNumericTextBoxok.each(function () {
                var itemId = $(this).attr("id");
                $("#" + itemId).on("change", function () {
                    kesesPercbenOnChange(this, itemId);
                });
            });
        }

        function mulasztasTipusOnChange(item, itemId) {
            var mulasztasTipusValue = $("#" + itemId).val();
            // hogy ha nem "késés" típus van kiválasztva
            if (mulasztasTipusValue != 1499) {
                var itemNumber = itemId.toString().replace(mulasztasPrefix, '');
                var kendoKeses = $("#" + kesesPrefix + itemNumber).data("kendoNumericTextBox");
                if (typeof (kendoKeses) !== "undefined") {
                    kendoKeses.value(null); // kitöröljük a kendo control értékét
                }

            }
        }

        function kesesPercbenOnChange(item, itemId) {
            var itemNumber = itemId.toString().replace(kesesPrefix, '');

            var kendoKeses = $("#" + kesesPrefix + itemNumber).data("kendoNumericTextBox");
            if (typeof (kendoKeses) !== "undefined") {
                var kesesValue = kendoKeses.value();
                if (kesesValue > 0) {
                    var itemDiv = "#div" + mulasztasPrefix + itemNumber;
                    var itemKeses = $(itemDiv).find('.selectorwrapper > ul > li[val="1499"]');

                    if (itemKeses.hasClass("activebar") == false) {
                        itemKeses.click();
                    }
                }
            }
        }

        return documentReadyHelper;
    })();

    $(document).ready(function () {
        $("#ElozoOraAdatai").click(function () { MulasztasHelper.setOraTemaja() });
        $("#JogviszonySzunetletetoDb").kendoTooltip({ content: '@Model.JogviszonySzunetletetok' });
        $("#SzakmaiGyakorlatonLevoDb").kendoTooltip({ content: '@Model.SzakmaiGyakorlatonLevok' });
    });

</script>
@Html.KretaTooltipTemplate("kendoTooltip-mulasztasTanuloNevTemplate",
@"<div class='kendoTooltip'>
<table>
<tr>
<td style='padding-right: 5px'><b>Gondviselő neve:</b></td>
<td>#:target.data('gondviselo')#</td>
</tr>
<tr>
<td style='padding-right: 5px'><b>Gondviselő telefonszáma:</b></td>
<td>#:target.data('gondviselotelszam')#</td>
</tr>
<tr>
<td style='padding-right: 5px'><b>AMI főtárgy:</b></td>
<td>#:target.data('amifotargy')#</td>
</tr>
<tr>
<td style='padding-right: 5px'><b>AMI tagozat:</b></td>
<td>#:target.data('amitagozat')#</td>
</tr>
<tr>
<td style='padding-right: 5px'><b>AMI tantárgykötelezőség:</b></td>
<td>#:target.data('amitantargykotelezoseg')#</td>
</tr>
<tr>
<td style='padding-right: 5px'><b>AMI évfolyam:</b></td>
<td>#:target.data('evfolyam')#</td>
</tr>
</table>
</div>")

@Html.KretaTooltipTemplate("kendoTooltip-mulasztasSzazalekTemplate",
    @"<div class='kendoTooltip'>
<table>
<tr>
    <td style='padding-right: 5px'><b>" + OrarendResource.Osszes + @":</b></td>
    <td>#:target.data('mulasztasossz')#</td>
</tr>
<tr>
    <td style='padding-right: 5px'><b>" + OrarendResource.EddigMegtartottOrak + @":</b></td>
    <td>#:target.data('mulasztasmegtartott')#</td>
</tr>
<tr>
    <td style='padding-right: 5px'><b>" + OrarendResource.HatralevoOrak + @":</b></td>
    <td>#:target.data('mulasztasmegtarthato')#</td>
</tr>
<tr>
    <td style='padding-right: 5px'><b>" + OrarendResource.Hianyzas + @":</b></td>
    <td>#:target.data('mulasztashiany')#</td>
</tr>
</table>
</div>")