<%@ Page Language="c#" CodeBehind="List.aspx.cs" AutoEventWireup="True" Inherits="eDocument.Server.Administrator.eDocumentTemplate.List" 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">
        Oversikt
    </h1>
    
    <%--<asp:Button runat="server" id="btnSync" CssClass="skjema-admin__button mb-5" OnClick="btnSync_OnClick" Text="Synkroniser"/>--%>

    <p class="skjema-admin__mb-40 skjema-admin__fs-18">
        Her kan du se alle skjema som er tilgjengelige for deg eller din organisasjon.<br />
    </p>
    
    <div class="skjema-admin__table__filter-container">
        <div class="d-flex align-items-center">
            <input class="skjema-admin__table-search-input" type="text" data-jscomponent="tableFilter" placeholder="Søk i skjema" />
            <button class="skjema-admin__table-search-button" type="button" data-jscomponent="tableFilterSubmit">
                <span class="budicon budicon-search"></span>
            </button>
        </div>

        <div class="d-flex">
            <div class="mt-3">
                <div class="ml-0 skjema-admin__table__filter-label">
                    Status
                </div>

                <asp:DropDownList 
                    ID="ddlFilterStatus" 
                    CssClass="skjema-admin__form__select skjema-admin__form__select--thin skjema-admin__mr-20"
                    OnSelectedIndexChanged="ddlFilterStatus_OnSelectedIndexChanged" 
                    AutoPostBack="True" 
                    Width="240"
                    runat="server" />
            </div>

            <div class="mt-3">
                <div class="ml-0 skjema-admin__table__filter-label">
                    Katalog
                </div>

                <asp:DropDownList 
                    ID="ddlFilterKatalog" 
                    OnSelectedIndexChanged="ddlFilterKatalog_SelectedIndexChanged" 
                    CssClass="skjema-admin__form__select skjema-admin__form__select--thin"
                    AutoPostBack="True" 
                    Width="240"
                    runat="server" />
            </div>

        </div>
    </div>

    <div class="d-flex skjema-admin__mb-20">
        <div class="d-flex align-items-center skjema-admin__italic skjema-admin__mr-30" data-js="countText">
        </div>

        <div class="d-none" data-js="evenMoreSelect">
            <div class="d-flex align-items-center">
                <div class="skjema-admin__form__round-select">
                    <asp:DropDownList 
                        ID="ddlBulkChange" 
                        OnSelectedIndexChanged="ddlBulkChange_OnSelectedIndexChanged" 
                        AutoPostBack="True" 
                        Width="240"
                        runat="server" />
                </div>
            </div>
        </div>
    </div>
    
    <asp:GridView
        ID="gvMyTemplates"
        runat="server"
        AutoGenerateColumns="False"
        Width="100%"
        Border="0"
        CssClass="skjema-admin__table 
        skjema-admin__table--min-width-3-n 
        skjema-admin__table--min-width-4 
        skjema-admin__table--min-width-6 
        skjema-admin__table--min-width-7 
        skjema-admin__table--min-width-8 
        skjema-admin__table__sort-icon-4
        skjema-admin__table__sort-icon-5
        skjema-admin__table__sort-icon-9
        jsTableCheckAll jsFilterTable"
        OnRowDataBound="gvMyTemplates_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="SubscriptionId" HeaderText="SubscriptionId" ItemStyle-CssClass="Hide" HeaderStyle-CssClass="Hide"></asp:BoundField>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="gvMyTemplates_chkAll" CssClass="jsAllCheck" AutoPostBack="false" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="gvMyTemplates_chkRow" CssClass="jsSingleCheck" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="ShortName" HeaderText="ID" />
            <asp:HyperLinkField DataTextField="Name" HeaderText="Tittel" DataNavigateUrlFields="TemplateId" DataNavigateUrlFormatString="~/eDocumentTemplate/Edit.aspx?eDocumentTemplateID={0}" />
            <asp:TemplateField>
                <HeaderTemplate>
                    Tidsbestemt
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:LinkButton
                        ID="gvMyTemplates_calendar" 
                        CssClass="skjema-admin__table__calendar-icon" 
                        runat="server" 
                        OnClick="gvMyTemplates_calendar_onClick" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    Aktivert
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Panel runat="server">
                         <asp:Panel 
                            ID="activeIcon" 
                            runat="server" 
                            Visible="true"
                            class='skjema-admin__table__active-icon'>
                        </asp:Panel>

                        <asp:Panel 
                            ID="errorIcon" 
                            runat="server" 
                            Visible="false"
                            class='skjema-admin__table__error-icon'>
                        </asp:Panel>
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:HyperLinkField 
                ControlStyle-CssClass="skjema-admin__table__pen-icon"
                Text="" 
                HeaderText="Feltverdi" 
                Visible="True" 
                DataNavigateUrlFields="TemplateId, SubscriptionId, Name" 
                DataNavigateUrlFormatString="~/Tjenestetorget.Administrator/SelectFieldRelation.aspx?eDocumentTemplateID={0}&SubscriptionID={1}&Name={2}" />

            <asp:BoundField DataField="TemplateCreatedByCustomerName" HeaderText="Katalog"></asp:BoundField>
            <asp:TemplateField>
                <HeaderTemplate>
                    <span class='skjema-admin__table__config-icon' title="Flere valg"></span>
                </HeaderTemplate>
                <ItemTemplate>
                    <button class="skjema-admin__button-toggle" type="button" data-jscomponent="contextMenuToggle">
                    </button>

                    <asp:Panel ID="panelOfToggles" CssClass="skjema-admin__context-menu" runat="server">
                        <button class="skjema-admin__context-menu__close" type="button">
                        </button>
                        <asp:LinkButton ID="toggleActiveButton" CssClass="skjema-admin__context-menu__link" runat="server" OnClick="gvMyTemplates_toggleActivate_OnClickChanged" />
                    </asp:Panel>

                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    
    <asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>

    <asp:Panel ID="pnlSetDate" 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>

            <asp:Label CssClass="skjema-admin__modal__title" Text="Tidsbestemt publisering" runat="server" />

            <div>
                <asp:Label ID="lblInfo" runat="server" />
            </div>
            
            <div class="skjema-admin__modal__input-container">
                <div>
                    <asp:Label CssClass="skjema-admin__modal__label" ID="lblFromDate" Text="Fra og med" runat="server" />
                    <asp:TextBox id="txtFromDate" class="datepick" runat="server" autocomplete="off"></asp:TextBox>
                    <asp:CompareValidator 
                        ID="CompareValidatorFromDate"
                        runat="server"
                        ControlToValidate="txtFromDate"
                        ErrorMessage="Feil datoformat, riktig format er dd.mm.åååå"
                        Operator="DataTypeCheck"
                        ForeColor="Red"
                        Display="Dynamic"
                        Type="Date">
                    </asp:CompareValidator>
                </div>

                <div>
                    <asp:Label ID="lblToDate" CssClass="skjema-admin__modal__label" Text="Til og med" runat="server" />
                    <asp:TextBox  ID="txtToDate" class="datepick" runat="server" autocomplete="off"></asp:TextBox>
                    <asp:CompareValidator 
                        ID="CompareValidatorToDate"
                        runat="server"
                        ControlToValidate="txtToDate"
                        ErrorMessage="Feil datoformat, riktig format er dd.mm.åååå"
                        Operator="DataTypeCheck"
                        ForeColor="Red"
                        Display="Dynamic"
                        Type="Date">
                    </asp:CompareValidator>
                </div>
            </div>

            <div>
                <asp:Button CssClass="skjema-admin__button skjema-admin__button--primary" runat="server" id="btnSetDate" OnClick="btnSetDate_OnClick" Text="Lagre"/>
            </div>
        </div>
    </asp:Panel>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#' + '<%= gvMyTemplates.ClientID %>').tablesorter({
                headers: { 
                    5: { sorter: false }, 
                    6: { sorter: false },
                    7: { sorter: false },
                    9: { sorter: false },
                } 
            });
        });

        $(document).ready(function () {
            $(function () {
                $('.datepick').each(function () {
                    $(this).datepicker({
                        dateFormat: 'dd.mm.yy',
                        firstDay: 1
                    });
                });
            });

            var table = document.getElementById("<%= gvMyTemplates.ClientID %>");
            var selectWrapper = document.querySelector("[data-js='evenMoreSelect']");
            var countElement = document.querySelector("[data-js='countText']");
                    
            if(table){
                table.addEventListener("change", function () {
                    var arr = Array.prototype.slice.call(table.querySelectorAll("input[type='checkbox']"));
                    var isSomeChecked = arr.some(function (checkbox) {
                        return checkbox.checked;
                    });

                    var checkedCheckedbox = arr.filter(function (checkbox) {
                        return checkbox.checked && checkbox.parentElement.classList.contains("jsSingleCheck");
                    });

                    if (checkedCheckedbox.length > 0) {
                        countElement.innerHTML = checkedCheckedbox.length + " valgt";
                    } else {
                        countElement.innerHTML = "";
                    }

                    if (isSomeChecked) {
                        selectWrapper.classList.remove("d-none");
                    } else {
                        selectWrapper.classList.add("d-none");
                    }
                });            
            }
        });
    </script>
</asp:Content>
