@using Wemsy.UI.BusinessLogic.Models
@using Wemsy.UI.BusinessLogic.DAL
@using System.Data
@model ConsolidationGroupAccountLineMappings

<header class="page-header">
    <h1>
        @Html.Translate("Account Mappings") (@Html.Translate(Model.Consolidation.Translation.TranslationID) - @Html.Translate(Model.Perimeter.CompanyDatabaseID))
    </h1>
    <ul class="breadcrumb" style="background: none;">
        <li><a href="/">@Html.Translate("Home")</a><i id="sep" class="icon-double-angle-right"></i></li>
        <li><a href="/Consolidation">@Html.Translate("Consolidation")</a><i id="sep" class="icon-double-angle-right"></i></li>
        <li class="active"><a href="#">@Html.Translate("Edit")</a></li>
    </ul>
</header>

@using (Html.BeginForm(MVC4.ConsolidationGroupAccount.SaveGroupAccountMapping(), FormMethod.Post, new { autocomplete = "off", @class = "form-horizontal" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(false, "Unable to save :", new { @class = "alert alert-block alert-error" })
    @Html.SecureFor(model => model.Consolidation.ID)
    @Html.SecureFor(model => model.Perimeter.ID)

    @Html.DropDownList("GroupAccountLineEditor", Model.GroupAccountLines.DataTable, "id", new string[] { "Code", "Description" }, new { @id = "GroupAccountLineEditor", @class = "input-xlarge form-control", @style="display:none" }, true)
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row-fluid">
                <div class="col-xs-12">
                    <table id="MainTable" class="table table-bordered table-condensed" >
                        <thead>
                            <tr style="background-color:#f5f5f5;">
                                <th>@Html.Translate("Local Account")</th>
                                <th style="width:auto">@Html.Translate("Local Account Description")</th>
                                <th style="width:300px">@Html.Translate("Group Account (Click cell to edit)")</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(ConsolidationGroupAccountLineMapping Mapping in Model.Mappings)
                            {
                                <tr style="height:45px" class="@( (Mapping.GroupAccountLineID <= 0) ? "error" : "success")" onclick="ChangeMapping($(this), '@Mapping.Account', @Mapping.GroupAccountLineID)">
                                    <td>@Mapping.Account @Html.HiddenFor(m => Mapping.Account)</td>
                                    <td>@Mapping.Description</td>
                                    <td class="GroupAccountLineEditor" style="cursor:pointer;">
                                        <span>@Mapping.ConsoGroupAccountLineCode @Html.Translate(Mapping.ConsoGroupAccountLineTranslationID)</span>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row-fluid">
                <a href="/Consolidation/Index" class="btn btn-default"><i class="fa fa-ban"></i>&nbsp;@Html.Translate("Cancel")</a><span>&nbsp;</span>
                <button class="btn btn-primary" type="submit"><i class="fa fa-floppy-o"></i>&nbsp;@Html.Translate("Save")</button>
            </div>
        </div>
    </div>
}
<script type="text/javascript">
    var $SpanToShowBack;

    function ChangeMapping($this, Account, GroupAccountLineID) {
        if ($this.find("#GroupAccountLineEditor").length == 0) {
            $("#GroupAccountLineEditor").detach().insertAfter($this.find("span"));
            $("#GroupAccountLineEditor").show();
            $this.find("span").hide();
            if ($SpanToShowBack != null)
                $SpanToShowBack.show();
            $SpanToShowBack = $this.find("span");

            $("select").change(function () {
                if ($(this).val() == "-1")
                    $(this).parents('tr').removeClass().addClass('error');
                else
                    $(this).parents('tr').removeClass().addClass('success');

                $(this).parent().find("input").val($(this).val());

                if ($(this).val() > 0)
                    $(this).parent().find("span").html($(this).find('option:selected').text());
                else
                    $(this).parent().find("span").html("");

                // AJAX SAVE
                console.log($(this).closest("input").find("#Account"));
                console.log($(this).val()); // Value of Group Account
            });
        }
    }

    $(function () {
        $('#MainTable').DataTable({
            "dom": "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
            "paging": true,
            "ordering": true,
            "info": true,
            "filter": true,
            "lengthMenu": [[12, 25, 50, -1], [12, 25, 50, "All"]],
            "pageLength": 12,
        });

        $('#MainTable').show();

    });
</script>