@model IEnumerable<PantheonRA.WebApi.Contracts.PayOrderBankAccountResponse>
@using PantheonRA.BackOffice.Models

@{
    ViewBag.Title = Loc.BankAccountsIndex;
    Layout = null;
    var decimalFormat = "{0:N2}";
}

<div class="tabs-container">
    @Html.Hidden("BankAccountsIndex", Url.Action("BankAccountsIndex", "PayOrders"))
    <ul class="nav nav-tabs horizontal-menu ">
        <li class="active divided-tab-1">
            <a data-toggle="tab" href="#home" class="local-tab">@Loc.BankAccounts</a>
        </li>
    </ul>
</div>

<div class="tab-content no-padding">
    <div id="home" class="tab-pane fade in active">
        <div class="form-horizontal form-md form-right p-b-xl">
            @foreach (var bank in Model)
            {
            <div class="bank-data-row p-l-sm p-r-md" data-bank="@bank.BankNo">
                <div class="row">
                    <div class="col-xs-5 list-padding"><b>@bank.BankNo. @bank.Bank</b></div>
                    <div class="col-xs-7 list-padding text-right bank-acc-trn">@bank.Trn (@bank.Currency)</div>
                </div>
                <div class="row">
                    <div class="col-xs-3">
                        <p>@Loc.InitialState</p>
                    </div>
                    <div class="col-xs-3">
                        <p>@Loc.BankAccPayment</p>
                    </div>
                    <div class="col-xs-3">
                        <p>@Loc.FinalStateShort</p>
                    </div>
                    <div class="col-xs-3">
                        <p>@Loc.BankAccSent</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3">
                        <p><b>@string.Format(decimalFormat, bank.InitialState)</b></p>
                    </div>
                    <div class="col-xs-3">
                        <p><b>@string.Format(decimalFormat, bank.Payment)</b></p>
                    </div>
                    <div class="col-xs-3">
                        <p><b>@string.Format(decimalFormat, bank.FinalState)</b></p>
                    </div>
                    <div class="col-xs-3">
                        <p><b>@string.Format(decimalFormat, bank.Sent)</b></p>
                    </div>
                </div>
            </div>
            }
        </div>
    </div>

    <div id="bank-footer" class="bank-data-footer bank-data-row p-l-sm p-r-md">
        <div class="row">
            <div class="col-xs-3">
                <p>@Loc.InitialState</p>
            </div>
            <div class="col-xs-3">
                <p>@Loc.BankAccPayment</p>
            </div>
            <div class="col-xs-3">
                <p>@Loc.FinalStateShort</p>
            </div>
            <div class="col-xs-3">
                <p>@Loc.BankAccSent</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3">
                <p><b>@string.Format(decimalFormat, Model.Sum(q => q.InitialState))</b></p>
            </div>
            <div class="col-xs-3">
                <p><b>@string.Format(decimalFormat, Model.Sum(q => q.Payment))</b></p>
            </div>
            <div class="col-xs-3">
                <p><b>@string.Format(decimalFormat, Model.Sum(q => q.FinalState))</b></p>
            </div>
            <div class="col-xs-3">
                <p><b>@string.Format(decimalFormat, Model.Sum(q => q.Sent))</b></p>
            </div>
        </div>
    </div>
</div>

        @Scripts.Render("~/bundles/payOrders")
        <script>
            $(document).ready(function () {
                initializeBankAccounts();

                setBankPanelWidth();
            });

            function setBankPanelWidth() {
                let parentWidth = $("#home").width();

                $("#bank-footer").css("min-width", parentWidth + "px");
            }
        </script>

        @* TODO: remove after refactor *@
        @section pageScripts{
            @Scripts.Render("~/bundles/validation")
            <script src="~/Scripts/global-script.js"></script>
        }

        <style>
            .divided-content-toggle {
                top: 32px !important;
            }
        </style>
