<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostBack = "true" ValidateRequest="false" CodeBehind="UserManualDesigner.aspx.cs" Inherits="eDocument.Server.Administrator.UserManuals.UserManualDesigner" MasterPageFile="~/Site.Master" %>


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <style type="text/css">
        .Hide
        {
            display: none;
        }

        .delete_linkbutton {
            margin: auto; 
            margin-right: 0;  
            text-decoration: none;
        }

        .editorpanel {
            background-color: #f3f3f3;
            padding: 10px 10px;
        }

        .rm_padding {
            padding: 0 !important;
        }

    </style>

    <a class="skjema-admin__page__back skjema-admin__mb-20" href="SystemTextList.aspx">
        <div class="d-flex align-items-center">
            <div class="skjema-admin__page__back-circle mr-3"></div>
            Systemadministrasjon / Brukerveiledning designer
        </div>
    </a>

    <h1 class="skjema-admin__page-title mt-0 skjema-admin__mb-20">
        Brukerveiledning for designer
    </h1>

    <p class="skjema-admin__mb-40">
        Tilpass tekstene i brukerveiledning for designer her.
    </p>

    <asp:label id="lblMessage" runat="server" ForeColor="Red" Visible="false"></asp:label>
    <asp:LinkButton ID="btnCreateUsermanual" runat="server" OnClick="btnCreateUsermanual_OnClick" Visible ="false">Opprett brukerveiledning for designer</asp:LinkButton>
    
    <div class="d-flex justify-content-end">
        <asp:Button ID="btnSaveTop" OnClick="btnSave_OnClick" Text="Lagre endringer" class="skjema-admin__button skjema-admin__button--primary skjema-admin__button--primary-shadow" runat="server"/>
    </div>

    <div class="skjema-admin__mb-20">
        
        <div class="d-flex align-items-center justify-content-center">
            <div class="skjema-admin__mb-10 p-2 flex-fill rm_padding">
                <label id="lblTitle" class="skjema-admin__page__label" for="txtTitle" runat="server">
                        Tittel
                    </label>
                <asp:TextBox id="txtTitle" class="skjema-admin__editor__input" type="text" placeholder="Tittel" runat="server"/>
            </div>
            <div class="skjema-admin__mb-10 p-2 flex-fill"></div>
        </div>
      
      
        <asp:Repeater ID="repeaterGroups" runat="server" OnItemDataBound="repeaterGroups_OnItemDataBound" OnItemCommand="repeaterGroups_ItemCommand">
            <HeaderTemplate>
            </HeaderTemplate>
            <ItemTemplate>
                <div class="skjema-admin__mb-20">
                <asp:Label ID="lblGroupRowId" CssClass="Hide" runat="server" Text='<%# Eval("GroupId") %>'></asp:Label>
                <asp:Label ID="lblGroupSequence" CssClass="Hide" runat="server" Text='<%# Eval("GroupSequence") %>'></asp:Label>
                <div class="d-flex align-items-center justify-content-center">
                    <div class="p-1 flex-fill">
                        <asp:Label CssClass="skjema-admin__page__label" Text="Gruppe" runat="server"></asp:Label>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-center">
                    <div class="p-2 flex-fill rm_padding">
                        <asp:TextBox id="txtGroup" Text='<%# Eval("GroupTitle") %>' CssClass="skjema-admin__editor__input" type="text" placeholder="Gruppe tittel" runat="server"/>
                    </div>
                    <div class="p-2 flex-fill rm_padding">
                        <span class="skjema-admin__side-menu__toggle-button " onclick="hide(event);"></span>
                        <asp:LinkButton
                            ID="btnDeleteGroup"
                            class="budicon budicon-trash delete_linkbutton"
                            style=""
                            runat="server"
                            CommandName="DeleteGroup">
                        </asp:LinkButton>
                    </div>
                </div>
                <br/>
                <div class="d-none">
                <asp:Repeater ID="repeaterSections" runat="server" OnItemDataBound="repeaterSections_OnItemDataBound" OnItemCommand="repeaterSections_ItemCommand">
                    <HeaderTemplate>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <div>
                            <asp:Label ID="lblGroupRowId" CssClass="Hide" runat="server" Text='<%# Eval("GroupId") %>'></asp:Label>
                            <asp:Label ID="lblSectionRowId" CssClass="Hide" runat="server" Text='<%# Eval("SectionId") %>'></asp:Label>
                            <asp:Label ID="lblSectionSequence" CssClass="Hide" runat="server" Text='<%# Eval("SectionSequence") %>'></asp:Label>
                            <div data-jscomponent="tabPanel" data-tab-id="1" class="align-items-start">
                                <asp:Panel ID="pnlEditor" class="editorpanel skjema-admin__mt-20" runat="server">
                                    <div class="align-items-center justify-content-center skjema-admin__mt-10">
                                        <%--<div class="p-1 flex-fill">--%>
                                            <label class="skjema-admin__page__label" runat="server" AssociatedControlID="txtSectionTitle">Seksjon</label>
                                       <%-- </div>--%>
                                    </div>
                                    <div class="d-flex  align-items-center justify-content-center">
                                        <div class="p-2 flex-fill rm_padding">
                                            <asp:TextBox id="txtSectionTitle" Text='<%# Eval("SectionTitle") %>' class="skjema-admin__editor__input" type="text" runat="server"/>
                                        </div>
                                        <div class="p-2 flex-fill rm_padding">
                                            <span style="background-color: transparent;" class="skjema-admin__side-menu__toggle-button flex-fill" onclick="hide(event);"></span>
                                            <asp:LinkButton
                                                ID="btnDeleteSection"
                                                class="budicon budicon-trash delete_linkbutton"
                                                runat="server"
                                                CommandName="DeleteSection">
                                            </asp:LinkButton>
                                        </div>
                                    </div>
                                    
                                    <div class="align-items-center justify-content-center skjema-admin__mt-10 d-none">
                                        <label class="skjema-admin__page__label" for="txtSectionBody">
                                            Innhold
                                        </label>
                                    </div>
                                    <div class="d-none">
                                        <asp:TextBox id="txtSectionBody" Text='<%# Eval("SectionBody") %>' data-js="tinyMCE" TextMode="MultiLine" Rows="6" runat="server"></asp:TextBox>
                                    </div>
                                </asp:Panel>
                                <div class="skjema-admin__plus-anchor-container skjema-admin__mt-10 float-right">
                                    <span class="skjema-admin__icon__plus skjema-admin__icon__big-and-bold"></span>
                                    <asp:LinkButton
                                        ID="btnAddSection"
                                        class="skjema-admin__plus-anchor"
                                        runat="server"
                                        Text="Legg til ny seksjon"
                                        CommandName="AddSection">
                                    </asp:LinkButton>
                                </div>
                            </div>
                            <br>
                            <div class="d-none" data-jscomponent="tabPanel" data-tab-id="2">
                            </div>
                            <div class="d-none" data-jscomponent="tabPanel" data-tab-id="3">
                            </div>
                            <div class="d-none" data-jscomponent="tabPanel" data-tab-id="4">
                            </div>
                         </div>
                    </ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:Repeater>
                </div>
                <div class="skjema-admin__plus-anchor-container skjema-admin__mt-10">
                    <span class="skjema-admin__icon__plus skjema-admin__icon__big-and-bold"></span>
                    <asp:LinkButton
                        ID="btnAddGroup"
                        class="skjema-admin__plus-anchor"
                        runat="server"
                        Text="Legg til ny gruppe"
                        CommandName="AddGroup">
                    </asp:LinkButton>
                </div>
                </div>

            </ItemTemplate>
            <FooterTemplate>
                
            </FooterTemplate>
        </asp:Repeater>
    </div>
    <div class="d-flex justify-content-end">
        <asp:Button ID="btnSave" OnClick="btnSave_OnClick" Text="Lagre endringer" class="skjema-admin__button skjema-admin__button--primary skjema-admin__button--primary-shadow" runat="server"></asp:Button>
    </div>
    <script>
      function hide(event) {
          
        var span = event.currentTarget;
        var contextMenu = span.parentNode.parentNode.nextElementSibling;

        if (!contextMenu.classList.contains("skjema-admin__plus-anchor-container"))
            contextMenu.classList.toggle("d-none");

          while (contextMenu = contextMenu.nextElementSibling) {
              if (!contextMenu.classList.contains("skjema-admin__plus-anchor-container"))
                    contextMenu.classList.toggle("d-none");
            }
           
            var hasClass = span.classList.contains("skjema-admin__side-menu__toggle-button--active")
            
            if(hasClass){
                span.classList.remove("skjema-admin__side-menu__toggle-button--active");
                span.classList.toggle("skjema-admin__side-menu__toggle-button");
              
            }else
            {
               span.classList.remove("skjema-admin__side-menu__toggle-button");
               span.classList.add("skjema-admin__side-menu__toggle-button--active");
            }
        }

        document.addEventListener("DOMContentLoaded", function () {
            var SkjemaAdmin = admin;
            SkjemaAdmin.tinyMCEObj.init({
                selector: "[data-js='tinyMCE']",
                plugins: ['paste', 'link', 'lists', 'code', 'image', 'imagetools', 'fullscreen','autoresize'],
                toolbar: 'link | bold italic | numlist bullist | formatselect | image | imagetools | paste | code | fullscreen',
                menubar: false,
                statusbar: false,
                contextmenu: 'link image imagetools table',
                automatic_uploads: true,
                file_picker_types: 'image',
                file_picker_callback: function (cb, value, meta) {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');

                    /*
                      Note: In modern browsers input[type="file"] is functional without
                      even adding it to the DOM, but that might not be the case in some older
                      or quirky browsers like IE, so you might want to add it to the DOM
                      just in case, and visually hide it. And do not forget do remove it
                      once you do not need it anymore.
                    */

                    input.onchange = function () {
                        var file = this.files[0];

                        var reader = new FileReader();
                        reader.onload = function () {
                            /*
                              Note: Now we need to register the blob in TinyMCEs image blob
                              registry. In the next release this part hopefully won't be
                              necessary, as we are looking to handle it internally.
                            */
                            var id = 'blobid' + (new Date()).getTime();
                            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                            var base64 = reader.result.split(',')[1];
                            var blobInfo = blobCache.create(id, file, base64);
                            blobCache.add(blobInfo);

                            /* call the callback and populate the Title field with the file name */
                            cb(blobInfo.blobUri(), { title: file.name });
                        };
                        reader.readAsDataURL(file);
                    };

                    input.click();
                },
                min_height: 800,
                resize: 'auto'
            });
        });

    </script>

</asp:Content>