<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Edit.aspx.cs" Inherits="eDocument.Server.Administrator.Resources.Edit" MasterPageFile="~/Site.Master" ValidateRequest="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <style type="text/css">
        .Hide
        {
            display: none;
        }
    </style>
    <div class="skjema-admin__page-pre-title">
        Systemtekster og oversettelse
    </div>
    
    <h1 class="skjema-admin__page-title mt-0" >
        <asp:label id="lblHeader" runat="server"></asp:label>
    </h1>
    
    <asp:label id="lblMessage" runat="server" ForeColor="Red"></asp:label>

    <div id="moveToTableHeader" class="d-flex">
        <div class="d-flex mr-2">
            <div class="budicon budicon-world-connection mr-2"></div>
            <span>Språk:</span>
        </div>

        <asp:DropDownList ID="ddlCultures"
                          runat="server"
                          AutoPostBack="True"
                          OnSelectedIndexChanged="ddlCultures_OnSelectedIndexChanged"
                          CssClass="ddlCultures">
        </asp:DropDownList>
    </div>

    <div>
        <asp:GridView 
            ID="gvResourceKeys"
            runat="server" 
            AutoGenerateColumns="False"
            CssClass="skjema-admin__table skjema-admin__table--first-column-min-width skjema-admin__table--3-4-50percent skjema-admin__table--last-td-no-padding-left skjema-admin__table--hide-first-td w-100"
            Border="0">
            <Columns>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label Text='<%# Eval("ResourceKeyId") %>' ID="ResourceKeyId" CssClass="Hide" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <div class="d-flex align-items-center">
                            <asp:Panel ID="key" Title='<%# Eval("Key") %>' runat="server" CssClass="mr-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
                                    <g fill="none" fill-rule="evenodd">
                                        <g>
                                            <g transform="translate(-381 -1069) translate(381 1069)">
                                                <circle cx="9.5" cy="9.5" r="9.5" fill="#494949"/>
                                                <path fill="#FFF" fill-rule="nonzero" d="M9.496 6.123c.357 0 .644-.102.86-.308.218-.205.327-.468.327-.79 0-.318-.108-.58-.322-.784-.215-.205-.503-.308-.865-.308-.366 0-.655.103-.868.308-.212.205-.318.466-.318.783 0 .323.108.586.326.791.217.206.504.308.86.308zM10.558 15V7.075H8.434V15h2.124z"/>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </asp:Panel>

                            <div title="Verdi endret">
                                <svg class="d-none" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
                                    <g fill="none" fill-rule="evenodd">
                                        <g>
                                            <g transform="translate(-381 -1035) translate(381 1035)">
                                                <circle cx="9.5" cy="9.5" r="9.5" fill="#F3F3F3"/>
                                                <g fill="#2F2F2F">
                                                    <path d="M6.38 5.72l-.699-4.61c-.02-.148.025-.299.124-.412.098-.113.241-.178.391-.178h.369c.15 0 .293.065.392.178.098.113.143.264.123.412l-.7 4.61zm-.699 6.17c-.02.148.025.299.124.412.098.113.241.178.391.178h.369c.15 0 .293-.065.392-.178.098-.113.143-.264.123-.412l-.7-4.61-.699 4.61zM1.363 4.41l4.342 1.7L2.063 3.2c-.119-.093-.272-.129-.419-.1-.147.029-.275.12-.35.25l-.184.32c-.075.13-.09.286-.042.428.049.142.156.256.295.313zm10.035 4.18l-4.342-1.7L10.7 9.8c.118.093.271.129.418.1.148-.03.275-.12.35-.25l.185-.32c.075-.13.09-.286.041-.428-.048-.142-.156-.256-.295-.313zm-10.035 0c-.139.056-.246.17-.295.312-.048.142-.033.298.042.428l.184.32c.075.13.203.22.35.25.147.029.3-.007.419-.1l3.642-2.91-4.342 1.7zm10.035-4.18c.14-.056.247-.17.295-.312.049-.142.034-.299-.041-.429l-.185-.319c-.075-.13-.202-.221-.35-.25-.147-.029-.3.007-.418.1L7.056 6.11l4.342-1.7z" transform="translate(3 3)"/>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Standardverdi">
                    <ItemTemplate>
                        <div class="skjema-admin__table__input">
                            <asp:Label Text='<%# Eval("BaseValue") %>' runat="server" />
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Verdi">
                    <ItemTemplate>
                        <asp:TextBox ID="txtCustomerValue" Text='<%# Eval("CustomerValue") %>' CssClass="Update skjema-admin__table__input" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.Update').on('change', function (event) {
                    var customerValue = $(this).closest('tr').find('[id*=txtCustomerValue]').val();
                    //var key = $(this).closest('tr').find('[id*=key]').attr("title");
                    var keyId = $(this).closest('tr').find('[id*=ResourceKeyId]').html();
                    var cultureId = $('.ddlCultures').val();
                    
                    //TODO: test med HTML-tags, spesialtegn, mm

                    var customerValueEscaped = customerValue.escapeSpecialChars();

                    var jsonValues = '{'
                                    + 'customerValue:"' + customerValueEscaped + '",'
                                    + 'keyId:"' + keyId + '",'
                                    + 'cultureId:"' + cultureId + '"'
                                    + '}';

                    console.log(customerValue, "customer");
                    console.log(keyId, "keyId");
                    console.log(cultureId, "culture");

                    $.ajax({
                        type: "POST",
                        url: "Edit.aspx/SetValue",
                        data: jsonValues,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            $(event.target)
                                .parent()
                                .siblings()
                                .first()
                                .find("svg")
                                .removeClass("d-none");
                        },
                        error: function (r) {
                            alert("En feil oppstod, feilmelding: " + r.responseText);
                        }
                    });
                });

                $('.skjema-admin__table__input').focus(function () {
                    $(this).parent().parent().addClass("skjema-admin__table__active-row");
                });

                $('.skjema-admin__table__input').focusout(function () {
                    $(this).parent().parent().removeClass("skjema-admin__table__active-row");
                });

                $(".skjema-admin__table th:last-child").html($("#moveToTableHeader"));
            });

            String.prototype.escapeSpecialChars = function () {
                return this.replace(/[\\]/g, '\\\\')
                    .replace(/[\"]/g, '\\\"')
                    .replace(/[\/]/g, '\\/')
                    .replace(/[\b]/g, '\\b')
                    .replace(/[\f]/g, '\\f')
                    .replace(/[\n]/g, '\\n')
                    .replace(/[\r]/g, '\\r')
                    .replace(/[\t]/g, '\\t');
            };
        </script>
    </div>
</asp:Content>
