<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Shared.aspx.cs" Inherits="eDocument.Server.Administrator.eDocumentTemplate.Shared" MasterPageFile="~/Site.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">

    <style type="text/css">
        .Hide
        {
            display: none;
        }
    </style>
    <h1 class="skjema-admin__page-title skjema-admin__mb-30">
        Delte skjema
    </h1>
    
    <%--<asp:Button runat="server" id="btnSync" CssClass="skjema-admin__button mb-5" OnClick="btnSync_OnClick" Text="Synkroniser"/>--%>

    <div class="skjema-admin__mb-50 skjema-admin__fs-18">
        Her kan du se alle skjema som er delt av din egen og andre organisasjoner.<br />
    </div>
    
    <div class="skjema-admin__table__filter-container">
        <div>
            <div class="d-flex align-items-center skjema-admin__mb-20">
                <div class="skjema-admin__table-search-input-container" style="">
                    <span class="budicon budicon-search"></span>
                    <%--<asp:TextBox runat="server" id="txtSearch" CssClass="skjema-admin__table-search-input" style="width: unset; border: none;" data-jscomponent="tableFilter" placeholder="Søk i skjema" ToolTip="Søk etter ID, tittel eller organisasjon"></asp:TextBox>--%>
                    <input class="skjema-admin__table-search-input" style="width: unset; border: none;" type="text" data-jscomponent="tableFilter" placeholder="Søk i skjema" />
                    <button class="skjema-admin__table-search-clear-button" type="button" data-jscomponent="tableFilterClear" style="border: none; background-color: transparent;">
                        <span class="budicon budicon-cross-ui" style="top: 5px; font-size: 24px; position: relative;"></span>
                    </button>
                </div>
                <script>
                    Array.prototype.forEach.call(document.querySelectorAll('.skjema-admin__table-search-input-container'), function (el) {
                        var input = el.querySelector('input');

                        conditionallyHideClearIcon();
                        input.addEventListener('input', conditionallyHideClearIcon);
                        el.querySelector('.skjema-admin__table-search-clear-button').addEventListener('click', function (e) {
                            input.value = '';
                            conditionallyHideClearIcon();
                        });

                        function conditionallyHideClearIcon(e) {
                            var target = (e && e.target) || input;
                            target.nextElementSibling.style.visibility = target.value ? 'visible' : 'hidden';
                        }
                    });
                </script>
                <%--<asp:TextBox runat="server" id="txtSearch" CssClass="skjema-admin__input_textfield" placeholder="Søk etter ID, tittel eller organisasjon" ToolTip="Søk etter ID, tittel eller organisasjon"></asp:TextBox>
                <asp:LinkButton runat="server" id="btnSearch" OnClick="btnSearch_OnClick" Text="" CssClass="skjema-admin__table-search-button skjema-admin__icon-anchor" CausesValidation="False">
                    <span class="budicon budicon-search"></span>
                </asp:LinkButton>
                <div>
                    <asp:Label runat="server" id="lblSearchError" ForeColor="Red"></asp:Label>
                    <asp:Label runat="server" id="lblSearchResult"></asp:Label>
                </div>--%>
            </div>
            <div id="formsCountContainer" class="skjema-admin__mb-10">Viser <span id="formsCount" style="counter-reset: variable var(--formsCount, 0);content: counter(variable);"></span> skjema<span id="plural" class="d-none">er</span> <span id="linkClearFilter" data-jscomponent="tableFilterClear" style="text-decoration: underline;cursor:pointer;" class="d-none">Nullstill søk</span></div>
        </div>
    </div>
    
    <asp:GridView
        ID="gvSharedTemplates"
        data-jsid="tableOfSharedForms"
        runat="server"
        AutoGenerateColumns="False"
        Width="100%"
        Border="0"
        ShowHeader="true"
        CssClass="skjema-admin__table
        skjema-admin__table__sort-icon-2
        skjema-admin__table__sort-icon-3
        skjema-admin__table__sort-icon-4
        skjema-admin__table__sort-icon-5
        jsFilterTable"
        OnRowDataBound="gvSharedTemplates_OnRowDataBound">

        <HeaderStyle CssClass="skjema-admin__table__header"></HeaderStyle>

        <Columns>
            <asp:BoundField DataField="TemplateId" HeaderText="Skjema ID" ItemStyle-CssClass="Hide" HeaderStyle-CssClass="Hide"></asp:BoundField>
            <asp:BoundField DataField="FormId" HeaderText="ID" />
            <asp:BoundField DataField="Name" HeaderText="Tittel" />
            <asp:BoundField DataField="UpdatedOn" HeaderText="Sist endret" DataFormatString="{0:dd/MM/yyyy}"/>
            <asp:BoundField DataField="CustomerName" HeaderText="Organisasjon" />

            <asp:TemplateField>
                <ItemTemplate>
                    <button class="skjema-admin__button-toggle" type="button" data-jscomponent="contextMenuToggle">
                    </button>

                    <asp:Panel ID="panelOfToggles" CssClass="skjema-admin__context-menu skjema-admin__context-menu-big" runat="server" data-jscomponent="contextMenuContainer">
                        <button class="skjema-admin__context-menu__close" type="button"></button>
                        <asp:HyperLink ID="lnkPreview" runat="server" Text="Forhåndsvis" Target="_blank" CssClass="skjema-admin__context-menu__link"/>
                        <asp:LinkButton ID="btnCreateCopy" runat="server" Text="Lag kopi" OnClick="btnCreateCopy_OnClick" CssClass="skjema-admin__context-menu__link" CommandArgument='<%# Eval("TemplateVersionId") %>' CausesValidation="False" />
                        <%--<asp:LinkButton ID="toggleActiveButton" CssClass="skjema-admin__context-menu__link" runat="server" OnClick="gvSharedTemplates_toggleActivate_OnClickChanged" />--%>
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    <asp:Panel ID="pnlCopy" Visible="False" runat="server" CssClass="skjema-admin__modal" data-jscomponent="modal">
        <div class="skjema-admin__modal__window">
            <button class="skjema-admin__modal__close" type="button" data-jscomponent="modalClose"></button>

            <div class="skjema-admin__designer__modal-title skjema-admin__mb-15">
                Lag kopi
            </div>
      
            <asp:HiddenField runat="server" ID="hiddenCopyTemplateVersionId"/>

            <div class="skjema-admin__mb-15">
                <div class="">
                    <asp:Label ID="Label3" CssClass="skjema-admin__designer__modal-label" runat="server">
                        Tittel *
                    </asp:Label>
                </div>

                <div class="">
                    <asp:TextBox CssClass="skjema-admin__designer__modal-input" ID="txtName" runat="server" data-jsid="copyFormTitle"></asp:TextBox>
                    <asp:RequiredFieldValidator
                        ID="RequiredFieldValidator1"
                        runat="server"
                        ErrorMessage="Du må fylle inn tittel."
                        ControlToValidate="txtName"
                        ForeColor="Red"
                        Font-Size="Small"
                        Display="Dynamic"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator
                        EnableClientScript="True"
                        ID="RegularExpressionValidator2"
                        runat="server"
                        ControlToValidate="txtName"
                        ForeColor="Red"
                        Display="Dynamic"
                        ErrorMessage="Tittel kan bestå av bokstaver, tall, parentes, bindestrek, punktum og mellomrom."
                        ValidationExpression="^[a-zA-Z0-9æøåÆØÅ. \/()\-é–]*$">
                    </asp:RegularExpressionValidator>
                </div>
            </div>
      
            <div class="skjema-admin__mb-15">
                <div class="">
                    <asp:Label ID="Label1" CssClass="skjema-admin__designer__modal-label" runat="server">
                        ID *
                    </asp:Label>
                </div>
                <div class="">
                    <asp:TextBox CssClass="skjema-admin__designer__modal-input" ID="txtFormID" runat="server" data-jsid="copyFormId"></asp:TextBox>
                    <br/>
                    <asp:RequiredFieldValidator
                        ID="RequiredFieldValidator3"
                        runat="server"
                        ErrorMessage="Du må fylle inn ID."
                        ControlToValidate="txtFormID"
                        ForeColor="Red"
                        Font-Size="small"
                        Display="Dynamic">
                    </asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator
                        EnableClientScript="True"
                        ID="RegularExpressionValidator1"
                        runat="server"
                        ControlToValidate="txtFormID"
                        ForeColor="Red"
                        Display="Dynamic"
                        ErrorMessage="ID kan bestå av a-z, 0-9 og tegnene _-"
                        ValidationExpression="^[a-zA-Z0-9_-]*$">
                    </asp:RegularExpressionValidator>
                </div>
            </div>

            <div class="skjema-admin__mb-15">
                <div class="" data-jsid="copyFormCategorySelectContent">
                    <div class="d-flex align-items-center">
                        <div class="justify-content-between">
                            <asp:Label ID="Label2" CssClass="skjema-admin__designer__modal-label" runat="server">
                                Kategori *
                            </asp:Label>

                            <asp:DropDownList
                                ID="ddlTemplateCategory"
                                runat="server"
                                CssClass="skjema-admin__designer__modal-select"
                                DataTextField="Name"
                                DataValueField="Id"
                                data-jsid="copyFormCategorySelect"/>
                            <br/>
                            <asp:RequiredFieldValidator
                                ID="RequiredFieldValidator2"
                                ForeColor="Red"
                                Display="Dynamic"
                                runat="server"
                                ErrorMessage="Du må velge en kategori."
                                InitialValue="---"
                                ControlToValidate="ddlTemplateCategory">
                            </asp:RequiredFieldValidator>
                            <div class="skjema-admin__designer__modal-input__helper-text" data-jsid="copyFormCanChangeAdminHelperText">
                                Kan endres i administrator
                            </div>
                        </div>
                    
                        <div class="">
                            <button class="skjema-admin__designer__plus-button" type="button" data-jsid="copyFormToggleCreateCategory">
                                + Opprett kategori
                            </button>
                        </div>
                    </div>
                </div>
                <div class="d-none" data-jsid="copyFormCategoryAddContent">
                    <div class="d-flex justify-content-between">
                        <div>
                            <label class="skjema-admin__designer__modal-label" for="copyFormCategoryInput">
                                Navn på ny kategori
                            </label>
                            <asp:TextBox ID="txtCategoryInput" CssClass="skjema-admin__designer__modal-input skjema-admin__designer__modal-input--half skjema-admin__mr-10" runat="server" data-jsid="copyFormCategoryInput" placeholder="Kategori" />
                            <div class="skjema-admin__designer__modal-input__helper-text">
                                Kan endres i administrator
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center" style="width:170px;padding-top:3px;">
                            <button class="skjema-admin__designer__button skjema-admin__designer__button--max-height skjema-admin__designer__button--small skjema-admin__designer__button--secondary" type="button" data-jsid="copyFormCancelCategoryAdd">
                                Avbryt
                            </button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="skjema-admin__mb-15">
                <div class="">
                    <asp:Label ID="Label4" CssClass="skjema-admin__designer__modal-label" runat="server">
                        Sikkerhetsnivå
                    </asp:Label>
                </div>

                <div class="">
                    <asp:DropDownList
                        runat="server"
                        CssClass="skjema-admin__designer__modal-select"
                        ID="ddlSecurityLevel">
                        <asp:ListItem Selected="True" Value="---">Ikke krev pålogging</asp:ListItem>
                        <asp:ListItem Value="1">Pålogging med Feide</asp:ListItem>
                        <asp:ListItem Value="3">Pålogging med MinId</asp:ListItem>
                        <asp:ListItem Value="4">Pålogging med BankID/Buypass</asp:ListItem>
                    </asp:DropDownList>
                    <div class="skjema-admin__designer__modal-input__helper-text">
                        Kan endres i administrator
                    </div>
                </div>
            </div>

            <div class="skjema-admin__text-center skjema-admin__mt-40">
                <asp:Button CssClass="skjema-admin__button skjema-admin__button--primary" runat="server" ID="btnCreate" OnClick="btnCreate_OnClick" Text="Opprett kopi av skjema" />
            </div>
            
            <asp:Label ID="lblCreateMessage" ForeColor="Red" CssClass="skjema-admin__page__label" runat="server" />
        </div>
    </asp:Panel>
    
    <asp:Panel ID="pnlConfirm" Visible="False" runat="server" CssClass="skjema-admin__modal" data-jscomponent="modal">
        <div class="skjema-admin__modal__window width-540">
            <button class="skjema-admin__modal__close" type="button" data-jscomponent="modalClose"></button>
            <div class="skjema-admin__designer__modal-title skjema-admin__mb-40">
                Skjema opprettet
            </div>
         
            <div class="skjema-admin__fs-16 skjema-admin__mb-20">
                En kopi av skjemaet er opprettet og lagret som <asp:Label runat="server" ID="lblFormId" /> - <asp:Label runat="server" id="lblFormName" />. Skjemaet er tilgjengelig for <span runat="server" id="spanIsDesignerEditable" Visible="False">redigering i Designer og </span>konfigurering i Administrator.
            </div>
            <div>
               <div class="skjema-admin__display-flex skjema-admin__mb-10" runat="server" id="divDesignerEditLink" Visible="False">
                   <span class="budicon budicon-arrow-right skjema-admin__icon__big-and-bold skjema-admin__mr-25"></span>
                   <asp:HyperLink CssClass="skjema-admin__fs-16" runat="server" id="lnkFormDesigner" Text="Designer - Åpne skjema" Target="_blank"></asp:HyperLink>
               </div>
               <div class="skjema-admin__display-flex skjema-admin__mb-15">
                   <span class="budicon budicon-arrow-right skjema-admin__icon__big-and-bold skjema-admin__mr-25"></span>
                   <asp:HyperLink CssClass="skjema-admin__fs-16" runat="server" id="lnkFormAdmin" Text="Administrator - Konfigurering av skjema"></asp:HyperLink>
               </div>

            </div>
        </div>
    </asp:Panel>

    <asp:Panel ID="pnlError" Visible="False" runat="server" CssClass="skjema-admin__modal" data-jscomponent="modal" Font-Size="Small">
        <div class="skjema-admin__designer__modal">
            <button class="skjema-admin__designer__popup-close skjema-admin__designer__cross-icon-filled" type="button" data-jsid="closeFormMenuCross">
                <span class="d-none">Lukk</span>
            </button>

            <h2 class="skjema-admin__designer__modal-title skjema-admin__mb-30" data-jsid="errorModalMessageTitle">
                <asp:Label ID="lblCreateTitleDialog" runat="server" Text="Feil"/> 
            </h2>

            <div class="skjema-admin__mb-30">
                <asp:Label ID="lblCreateMessageDialog" runat="server" />
            </div>

            <button class="skjema-admin__designer__button skjema-admin__designer__button--primary" type="button" data-jsid="closeFormMenuCross">
                Ok
            </button>
        </div>
    </asp:Panel>

    <script type="text/javascript">

        

        document.addEventListener("DOMContentLoaded", function () {

            const regexAllowTitle = /^[a-zA-Z\d\s\æøåÆØÅ.,\/()\-é–]$/;
            const regexReplaceTitle = /[^a-zA-Z0-9æøåÆØÅ., \/()\-é–]/gi;
            const regexAllowFormId = /^[a-zA-Z\d\-_]$/;
            const regexReplaceFormId = /[^a-zA-Z0-9\-_]/gi;

            var copyFormTitle = document.querySelector("[data-jsid='copyFormTitle']");
            if (copyFormTitle) {
                copyFormTitle.addEventListener("keypress", (event) => { allowedCharacters(event, regexAllowTitle, regexReplaceTitle) }, false);
                copyFormTitle.addEventListener("beforeinput", (event) => { allowedCharacters(event, regexAllowTitle, regexReplaceTitle) }, false);
                copyFormTitle.addEventListener("paste", (event) => { allowedCharacters(event, regexAllowTitle, regexReplaceTitle) }, false);
                copyFormTitle.addEventListener("change", (event) => { allowedCharacters(event, regexAllowTitle, regexReplaceTitle) }, false);
            }

            var copyFormId = document.querySelector("[data-jsid='copyFormId']");
            if (copyFormId) {
                copyFormId.addEventListener("keypress", (event) => { allowedCharacters(event, regexAllowFormId, regexReplaceFormId) }, false);
                copyFormId.addEventListener("beforeinput", (event) => { allowedCharacters(event, regexAllowFormId, regexReplaceFormId) }, false);
                copyFormId.addEventListener("paste", (event) => { allowedCharacters(event, regexAllowFormId, regexReplaceFormId) }, false);
                copyFormId.addEventListener("change", (event) => { allowedCharacters(event, regexAllowFormId, regexReplaceFormId) }, false);
            }

            function allowedCharacters(event, regexAllow, regexReplace) {
                if (event.type == "paste") {

                    let clipboardData = event.clipboardData || window.clipboardData;
                    let pastedData = clipboardData.getData('Text');

                    var desired = pastedData.replace(regexReplace, '');

                    event.preventDefault();
                    if (document.queryCommandSupported('insertText')) {
                        document.execCommand('insertText', false, desired);
                    }
                    else {
                        document.execCommand('paste', false, desired);
                    }
                } else if (event.type == "beforeinput" || event.type == "change") {
                    if (event.data != null && !regexAllow.test(event.data)) { //added ekstra check because of bug in safari (mac)
                        event.preventDefault();
                    }
                } else {

                    var key = event.key;
                    if (!regexAllow.test(key)) {
                        event.preventDefault();
                    }
                }

            }
            
        });

        $(document).ready(function () {
            $('#' + '<%= gvSharedTemplates.ClientID %>').tablesorter({
                headers: {
                    3: { sorter: "shortDate", dateFormat: "ddmmyyyy" },
                    5: { sorter: false },
                }
            });



            const table = document.querySelector("[data-jsid='tableOfSharedForms']");

            const copyFormToggleCreateCategory = document.querySelector("[data-jsid='copyFormToggleCreateCategory']");
            const copyFormCategorySelectContent = document.querySelector("[data-jsid='copyFormCategorySelectContent']");
            const copyFormCategoryAddContent = document.querySelector("[data-jsid='copyFormCategoryAddContent']");

            const copyFormCancelCategoryAdd = document.querySelector("[data-jsid='copyFormCancelCategoryAdd']");
            const copyFormCategoryInput = document.querySelector("[data-jsid='copyFormCategoryInput']");

            if (copyFormToggleCreateCategory && copyFormCategorySelectContent) {
                copyFormToggleCreateCategory.addEventListener("click", function () {
                    copyFormCategoryAddContent.classList.remove("d-none");
                    copyFormCategorySelectContent.classList.add("d-none");
                });
            }
            if (copyFormCancelCategoryAdd) {
                copyFormCancelCategoryAdd.addEventListener("click", function () {
                    copyFormCategoryAddContent.classList.add("d-none");
                    copyFormCategorySelectContent.classList.remove("d-none");
                    copyFormCategoryInput.value = "";
                });
            }

            var clearFilterInput = document.querySelectorAll("[data-jscomponent=tableFilterClear]");

            for (let i = 0; i < clearFilterInput.length; i++) {
                clearFilterInput[i].addEventListener("click", function () {
                    const tableFilterInput = document.querySelector('input[data-jscomponent=tableFilter]')
                    tableFilterInput.value = '';
                    const rows = Array.from(table.querySelectorAll("tr"));
                    rows.slice(1).forEach((row) => row.classList.remove("d-none"));
                    document.getElementById('formsCount').innerText = (rows.length - 1).toString();
                    if ((rows.length - 1) == 1) {
                        document.getElementById("plural").classList.add("d-none");
                    } else {
                        document.getElementById("plural").classList.remove("d-none");
                    }
                    document.getElementById('linkClearFilter').classList.add("d-none");
                });
            }

            var closeFormMenuesCross = document.querySelectorAll("[data-jsid='closeFormMenuCross']");
            Array.from(closeFormMenuesCross).forEach(function (closeButton) {
                closeButton.addEventListener("click", function (event) {
                    closeButton.parentElement.parentElement.classList.add("d-none");
                });
            });
            document.getElementById('formsCount').innerText = (Array.from(table.querySelectorAll("tr")).length - 1).toString();
        });

    </script>
</asp:Content>

 
