@using Kreta.Web.Areas.Tanulo.Models
@using Kreta.Resources
@using Kreta.Web
@using Kreta.Enums.ManualEnums

@model TanuloApaczaiDokumentumHozzaadasaModel
@Html.HiddenFor(m => m.PalyazatStatusz)
@{
    var columnSizeClass = BootsrapHelper.GetSizeClasses(3);

    var dokumentumHozzaadasaContainerClass = "dokumentum-hozzaadasa-container";
    var dokumentumHozzaadasaTitleClass = "dokumentum-hozzaadasa-title";
    var dokumentumHozzaadasaFajlnevClass = "dokumentum-hozzaadasa-fajlnev";

    var successIcon = "fa-check-circle";
    var errorIcon = "fa-times";

    var hatranyosHelyzetIcon = Model.IsHatranyosHelyzetIgazolasaUploaded ? successIcon : errorIcon;
    var hatranyosHelyzetColor = Model.IsHatranyosHelyzetIgazolasaUploaded ? Constants.ApaczaiPalyazatColors.Green : Constants.ApaczaiPalyazatColors.Red;

    var hozzajaruloNyilatkozatIcon = Model.IsHozzajaruloNyilatkozatUploaded ? successIcon : errorIcon;
    var hozzajaruloNyilatkozatColor = Model.IsHozzajaruloNyilatkozatUploaded ? Constants.ApaczaiPalyazatColors.Green : Constants.ApaczaiPalyazatColors.Red;

    var mentoriTamogatoNyilatkozatIcon = Model.IsMentoriTamogatoNyilatkozatUploaded ? successIcon : errorIcon;
    var mentoriTamogatoNyilatkozatColor = Model.IsMentoriTamogatoNyilatkozatUploaded ? Constants.ApaczaiPalyazatColors.Green : Constants.ApaczaiPalyazatColors.Red;

    var egyebDokumentumIcon = Model.IsEgyebDokumentumUploaded ? successIcon : errorIcon;
    var egyebDokumentumColor = Model.IsEgyebDokumentumUploaded ? Constants.ApaczaiPalyazatColors.Green : Constants.ApaczaiPalyazatColors.Red;

    var elozoTanevEvvegiBizonyitvanyIcon = Model.IsElozoTanevEvvegiBizonyitvanyUploaded ? successIcon : errorIcon;
    var elozoTanevEvvegiBizonyitvanyColor = Model.IsElozoTanevEvvegiBizonyitvanyUploaded ? Constants.ApaczaiPalyazatColors.Green : Constants.ApaczaiPalyazatColors.Red;

    var hatranyosHelyzetIconContainerId = "hatranyosHelyzetIconContainer";
    var hozzajaruloNyilatkozatIconContainerId = "hozzajaruloNyilatkozatIconContainer";
    var mentoriTamogatoNyilatkozatIconContainerId = "mentoriTamogatoNyilatkozatIconContainer";
    var egyebDokumentumIconContainerId = "egyebDokumentumIconContainer";
    var elozoTanevEvvegiBizonyitvanyIconContainerId = "elozoTanevEvvegiBizonyitvanyIconContainer";

    var hatranyosHelyzetFileNameContainerId = "hatranyosHelyzetFileNameContainer";
    var hozzajaruloNyilatkozatFileNameContainerId = "hozzajaruloNyilatkozatFileNameContainer";
    var mentoriTamogatoNyilatkozatFileNameContainerId = "mentoriTamogatoNyilatkozatFileNameContainer";
    var egyebDokumentumFileNameContainerId = "egyebDokumentumFileNameContainer";
    var elozoTanevEvvegiBizonyitvanyFileNameContainerId = "elozoTanevEvvegiBizonyitvanyFileNameContainer";

    var hatranyosHelyzetFileUploadName = "hatranyosHelyzetIgazolasa";
    var hozzajaruloNyilatkozatFileUploadName = "hozzajaruloNyilatkozat";
    var mentoriTamogatoNyilatkozatFileUploadName = "mentoriTamogatoNyilatkozat";
    var egyebDokumentumFileUploadName = "egyebDokumentum";
    var elozoTanevEvvegiBizonyitvanyFileUploadName = "elozoTanevEvvegiBizonyitvanyDokumentum";

    var dokumentumFeltoltesFigyelmeztetoUzenetFirstClass = "dokumentum-feltoltes-figyelmezteto-uzenet-first";
    var dokumentumFeltoltesFigyelmeztetoUzenetClass = "dokumentum-feltoltes-figyelmezteto-uzenet";
}

<style>

    .dokumentum-hozzaadasa-container {
        text-align: center;
    }

    .dokumentum-hozzaadasa-title {
        display: inline-block;
    }

    .dokumentum-hozzaadasa-fajlnev {
        margin-top: 20px;
    }

    .k-upload-status {
        display: none;
    }

    .file-upload-center {
        justify-content: center;
    }

    .dokumentum-feltoltes-figyelmezteto-uzenet-first {
        margin-top: 40px;
    }

    .dokumentum-feltoltes-figyelmezteto-uzenet {
        font-style: italic;
    }
</style>

<div class="container-fluid">

    <div class="row">

        <div class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <h4 class="@dokumentumHozzaadasaTitleClass">@TanuloApaczaiResource.HatranyosHelyzetIgazolasa</h4>
        </div>

        <div class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <h4 class="@dokumentumHozzaadasaTitleClass">@TanuloApaczaiResource.HozzajaruloNyilatkozat</h4>
        </div>

        <div class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <h4 class="@dokumentumHozzaadasaTitleClass">@TanuloApaczaiResource.MentoriTamogatoNyilatkozat</h4>
        </div>

        <div class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <h4 class="@dokumentumHozzaadasaTitleClass">@TanuloApaczaiResource.ElozoTanevEvvegiBizonyitvany</h4>
        </div>

    </div>

    <div class="row">

        <div id="@hatranyosHelyzetIconContainerId" class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <i class="fa @hatranyosHelyzetIcon fa-5x" aria-hidden="true" style="color: @hatranyosHelyzetColor;" />
        </div>

        <div id="@hozzajaruloNyilatkozatIconContainerId" class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <i class="fa @hozzajaruloNyilatkozatIcon fa-5x" aria-hidden="true" style="color: @hozzajaruloNyilatkozatColor;" />
        </div>

        <div id="@mentoriTamogatoNyilatkozatIconContainerId" class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <i class="fa @mentoriTamogatoNyilatkozatIcon fa-5x" aria-hidden="true" style="color: @mentoriTamogatoNyilatkozatColor;" />
        </div>

        <div id="@elozoTanevEvvegiBizonyitvanyIconContainerId" class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <i class="fa @elozoTanevEvvegiBizonyitvanyIcon fa-5x" aria-hidden="true" style="color: @elozoTanevEvvegiBizonyitvanyColor;" />
        </div>

    </div>

    <div class="row">

        <div id="@hatranyosHelyzetFileNameContainerId" class="@columnSizeClass" style="overflow-x: auto;">
            @foreach (var hatranyosHelyzetIgazolasFajlnev in Model.HatranyosHelyzetIgazolasaFajlnevek)
            {
                <p class="@dokumentumHozzaadasaFajlnevClass">@hatranyosHelyzetIgazolasFajlnev</p>
            }
        </div>

        <div id="@hozzajaruloNyilatkozatFileNameContainerId" class="@columnSizeClass" style="overflow-x: auto;">
            @foreach (var hozzajaruloNyilatkozatFajlnev in Model.HozzajaruloNyilatkozatFajlnevek)
            {
                <p class="@dokumentumHozzaadasaFajlnevClass">@hozzajaruloNyilatkozatFajlnev</p>
            }
        </div>

        <div id="@mentoriTamogatoNyilatkozatFileNameContainerId" class="@columnSizeClass" style="overflow-x: auto;">
            @foreach (var mentoriTamogatoNyilatkozatFajlnev in Model.MentoriTamogatoNyilatkozatFajlnevek)
            {
                <p class="@dokumentumHozzaadasaFajlnevClass">@mentoriTamogatoNyilatkozatFajlnev</p>
            }
        </div>

        <div id="@elozoTanevEvvegiBizonyitvanyFileNameContainerId" class="@columnSizeClass" style="overflow-x: auto;">
            @foreach (var elozoTanevEvvegiBizonyitvanyFajlnev in Model.ElozoTanevEvvegiBizonyitvanyFajlnevek)
            {
                <p class="@dokumentumHozzaadasaFajlnevClass">@elozoTanevEvvegiBizonyitvanyFajlnev</p>
            }
        </div>

    </div>

    <div class="row">

        <div class="@columnSizeClass kretaLabelTooltip fileupload-info-icon-container file-upload-center">
            @Html.KretaFileUpload(
                hatranyosHelyzetFileUploadName,
                Url.Action("UploadHatranyosHelyzetIgazolasa", Constants.Controllers.TanuloApaczai),
                autoUpload: true,
                allowMultiple: false,
                showFileList: false,
                onSuccessEvent: "function (e) { DokumentumHozzaadasaHelper.onSuccessEvent(e, " + (int)ApaczaiDokumentumTipusEnum.HatranyosHelyzetIgazolas + "); }",
                onErrorEvent: "function (e) { DokumentumHozzaadasaHelper.onErrorEvent(e); }",
                onSelectEvent: "function (e) { TanuloApaczaiHelper.onFileUploadSelect(e); }",
                htmlAttributes: new Dictionary<string, object> { { "accept", string.Join(", ", Model.AllowedFileExtensions) } }
            ).Enable(Model.IsHatranyosHelyzetEnable)
            <span class="kretaLabelTooltipText fileupload-tooltip-moreoreqthanmax-hatr @(Model.IsHatranyosHelyzetEnable ? "hidden" : "")">@TanuloApaczaiResource.DokumentumKategoriankentMaxFajlokSzama</span>
            <span class="kretaLabelTooltipText fileupload-tooltip">@TanuloApaczaiResource.HatranyosHelyzetIgazolasaTooltip</span>
            <div class="info-icon" />
        </div>

        <div class="@columnSizeClass kretaLabelTooltip fileupload-info-icon-container file-upload-center">
            @Html.KretaFileUpload(
                hozzajaruloNyilatkozatFileUploadName,
                Url.Action("UploadHozzajaruloNyilatkozat", Constants.Controllers.TanuloApaczai),
                autoUpload: true,
                allowMultiple: false,
                showFileList: false,
                onSuccessEvent: "function (e) { DokumentumHozzaadasaHelper.onSuccessEvent(e, " + (int)ApaczaiDokumentumTipusEnum.HozzajaruloNyilatkozat + "); }",
                onErrorEvent: "function (e) { DokumentumHozzaadasaHelper.onErrorEvent(e); }",
                onSelectEvent: "function (e) { TanuloApaczaiHelper.onFileUploadSelect(e); }",
                htmlAttributes: new Dictionary<string, object> { { "accept", string.Join(", ", Model.AllowedFileExtensions) } }
            ).Enable(Model.IsHozzajaruloNyilatkozatEnable)
            <span class="kretaLabelTooltipText fileupload-tooltip @(Model.IsHozzajaruloNyilatkozatEnable ? "hidden" : "")">@TanuloApaczaiResource.DokumentumKategoriankentMaxFajlokSzama</span>
            <span class="kretaLabelTooltipText fileupload-tooltip">@TanuloApaczaiResource.HozzajaruloNyilatkozatTooltip</span>
            <div class="info-icon" />
        </div>

        <div class="@columnSizeClass kretaLabelTooltip fileupload-info-icon-container file-upload-center">
            @Html.KretaFileUpload(
                mentoriTamogatoNyilatkozatFileUploadName,
                Url.Action("UploadMentoriTamogatoNyilatkozat", Constants.Controllers.TanuloApaczai),
                autoUpload: true,
                allowMultiple: false,
                showFileList: false,
                onSuccessEvent: "function (e) { DokumentumHozzaadasaHelper.onSuccessEvent(e, " + (int)ApaczaiDokumentumTipusEnum.MentoriTamogatoNyilatkozat + "); }",
                onErrorEvent: "function (e) { DokumentumHozzaadasaHelper.onErrorEvent(e); }",
                onSelectEvent: "function (e) { TanuloApaczaiHelper.onFileUploadSelect(e); }",
                htmlAttributes: new Dictionary<string, object> { { "accept", string.Join(", ", Model.AllowedFileExtensions) } }
            ).Enable(Model.IsMentoriTamogatoNyilatkozatEnable)
            <span class="kretaLabelTooltipText fileupload-tooltip @(Model.IsMentoriTamogatoNyilatkozatEnable ? "hidden" : "")">@TanuloApaczaiResource.DokumentumKategoriankentMaxFajlokSzama</span>
            <span class="kretaLabelTooltipText fileupload-tooltip">@TanuloApaczaiResource.MentoriTamogatoNyilatkozatTooltip</span>
            <div class="info-icon" />
        </div>

        <div class="@columnSizeClass kretaLabelTooltip fileupload-info-icon-container file-upload-center">
            @Html.KretaFileUpload(
                elozoTanevEvvegiBizonyitvanyFileUploadName,
                Url.Action("UploadElozoTanevEvvegiBizonyitvanyDokumentum", Constants.Controllers.TanuloApaczai),
                autoUpload: true,
                allowMultiple: false,
                showFileList: false,
                onSuccessEvent: "function (e) { DokumentumHozzaadasaHelper.onSuccessEvent(e, " + (int)ApaczaiDokumentumTipusEnum.ElozoTanevEvvegiBizonyitvany + "); }",
                onErrorEvent: "function (e) { DokumentumHozzaadasaHelper.onErrorEvent(e); }",
                onSelectEvent: "function (e) { TanuloApaczaiHelper.onFileUploadSelect(e); }",
                htmlAttributes: new Dictionary<string, object> { { "accept", string.Join(", ", Model.AllowedFileExtensions) } }
            ).Enable(Model.IsElozoTanevEvvegiBizonyitvanyEnable)
            <span class="kretaLabelTooltipText fileupload-tooltip-moreoreqthanmax-biz @(Model.IsElozoTanevEvvegiBizonyitvanyEnable ? "hidden" : "")">@TanuloApaczaiResource.DokumentumKategoriankentMaxFajlokSzama</span>
            <span class="kretaLabelTooltipText fileupload-tooltip">@Html.Raw(TanuloApaczaiResource.ElozoTanevEvvegiBizonyitvanyTooltip)</span>
            <div class="info-icon" />
        </div>

    </div>

    <div class="row">

        <div class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <h4 class="@dokumentumHozzaadasaTitleClass">@TanuloApaczaiResource.EgyebDokumentum</h4>
        </div>
    </div>

    <div class="row">
        
        <div id="@egyebDokumentumIconContainerId" class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <i class="fa @egyebDokumentumIcon fa-5x" aria-hidden="true" style="color: @egyebDokumentumColor;" />
        </div>
    </div>

    <div class="row">

        <div id="@egyebDokumentumFileNameContainerId" class="@columnSizeClass" style="overflow-x: auto;">
            @foreach (var egyebDokumentumFajlnev in Model.EgyebDokumentumFajlnevek)
            {
                <p class="@dokumentumHozzaadasaFajlnevClass">@egyebDokumentumFajlnev</p>
            }
        </div>
    </div>

    <div class="row">

        <div class="@columnSizeClass kretaLabelTooltip fileupload-info-icon-container file-upload-center">
            @Html.KretaFileUpload(
                egyebDokumentumFileUploadName,
                Url.Action("UploadEgyebDokumentum", Constants.Controllers.TanuloApaczai),
                autoUpload: true,
                allowMultiple: false,
                showFileList: false,
                onSuccessEvent: "function (e) { DokumentumHozzaadasaHelper.onSuccessEvent(e, " + (int)ApaczaiDokumentumTipusEnum.Egyeb + "); }",
                onErrorEvent: "function (e) { DokumentumHozzaadasaHelper.onErrorEvent(e); }",
                onSelectEvent: "function (e) { TanuloApaczaiHelper.onFileUploadSelect(e); }",
                htmlAttributes: new Dictionary<string, object> { { "accept", string.Join(", ", Model.AllowedFileExtensions) } }
            ).Enable(Model.IsEgyebDokumentumEnable)
            <span class="kretaLabelTooltipText fileupload-tooltip @(Model.IsEgyebDokumentumEnable ? "hidden" : "")">@TanuloApaczaiResource.DokumentumKategoriankentMaxFajlokSzama</span>
            <span class="kretaLabelTooltipText fileupload-tooltip">@Html.Raw(TanuloApaczaiResource.EgyebDokumentumTooltip)</span>
            <div class="info-icon" />
        </div>
    </div>

    <div class="row">
        <p class="@dokumentumFeltoltesFigyelmeztetoUzenetFirstClass @dokumentumFeltoltesFigyelmeztetoUzenetClass">@Html.Raw(TanuloApaczaiResource.DokumentumFeltoltesFigyelmeztetoUzenet1)</p>
        <p class="@dokumentumFeltoltesFigyelmeztetoUzenetClass">@TanuloApaczaiResource.DokumentumFeltoltesFigyelmeztetoUzenet2</p>
        <p class="@dokumentumFeltoltesFigyelmeztetoUzenetClass">@TanuloApaczaiResource.DokumentumFeltoltesFigyelmeztetoUzenet3</p>
    </div>
</div>

<script type="text/javascript">

  var DokumentumHozzaadasaHelper = (function () {
    var dokumentumHozzadasaHelper = function () { };

    dokumentumHozzadasaHelper.onSuccessEvent = function (e, dokumentumTipus) {
      var iconContainerId = "";
      var filenameContainerId = "";
      var fileuploadId = "";
      switch (dokumentumTipus) {
        case @((int)ApaczaiDokumentumTipusEnum.HatranyosHelyzetIgazolas):
          iconContainerId = "@hatranyosHelyzetIconContainerId";
          filenameContainerId = "@hatranyosHelyzetFileNameContainerId";
          fileuploadId = "@hatranyosHelyzetFileUploadName";
          break;
        case @((int)ApaczaiDokumentumTipusEnum.HozzajaruloNyilatkozat):
          iconContainerId = "@hozzajaruloNyilatkozatIconContainerId";
          filenameContainerId = "@hozzajaruloNyilatkozatFileNameContainerId";
          fileuploadId = "@hozzajaruloNyilatkozatFileUploadName";
          break;
        case @((int)ApaczaiDokumentumTipusEnum.MentoriTamogatoNyilatkozat):
          iconContainerId = "@mentoriTamogatoNyilatkozatIconContainerId";
          filenameContainerId = "@mentoriTamogatoNyilatkozatFileNameContainerId";
          fileuploadId = "@mentoriTamogatoNyilatkozatFileUploadName";
          break;
        case @((int)ApaczaiDokumentumTipusEnum.Egyeb):
          iconContainerId = "@egyebDokumentumIconContainerId";
          filenameContainerId = "@egyebDokumentumFileNameContainerId";
          fileuploadId = "@egyebDokumentumFileUploadName";
          break;
        case @((int)ApaczaiDokumentumTipusEnum.ElozoTanevEvvegiBizonyitvany):
          iconContainerId = "@elozoTanevEvvegiBizonyitvanyIconContainerId";
          filenameContainerId = "@elozoTanevEvvegiBizonyitvanyFileNameContainerId";
          fileuploadId = "@elozoTanevEvvegiBizonyitvanyFileUploadName";
          break;
      }

      var filenameContainer = $("#" + filenameContainerId);

      if (filenameContainer.children().length == 0) {
        var icon = $("#" + iconContainerId).children().first();
        icon.removeClass("@errorIcon");
        icon.addClass("@successIcon");

        icon.css("color", "@Constants.ApaczaiPalyazatColors.Green");
      }

      var newFilename = $("<p></p>")
        .addClass("@dokumentumHozzaadasaFajlnevClass")
        .append(e.files[0].name);
      filenameContainer.append(newFilename);

      if (filenameContainer.children().length >= @Model.KategoriankentiMaxFajlSzam) {
        $('#' + fileuploadId).data('kendoUpload').enable(false);
        $('#' + fileuploadId).parents('div.fileupload-info-icon-container').children('.hidden').removeClass('hidden');
      }
    }

    dokumentumHozzadasaHelper.onErrorEvent = function (e) {
      var uzenet;
      var jsonResponse = CommonUtils.JSONparse(e.XMLHttpRequest.response);
      if (jsonResponse.Json) {
        uzenet = jsonResponse.Json.Uzenet + ((jsonResponse.Json.MegjelenitendoHiba) ? ' (' + jsonResponse.Json.MegjelenitendoHiba + ')' : '');
      }
      else {
        uzenet = jsonResponse.Message;
      }
      KretaWindowHelper.feedbackWindow("@ErrorResource.Hiba", uzenet, true, null, "@CommonResource.Rendben");
    }

    return dokumentumHozzadasaHelper;
  })();
</script>

<script type="text/javascript">
  $(document).ready(function () {
    $(".k-widget.k-upload.k-header").css({
      "position": "initial",
      "background-color": "transparent",
      "border-color": "transparent",
      "text-align": "center"
    });

    var zones = $(".k-widget.k-upload.k-header.k-upload-empty > .k-dropzone");
    $.each(zones, function () {
      $(this).children().not(':first').remove();
    });
  });
</script>