@model PantheonRA.BackOffice.Models.AccountCardFilterModel
@using PantheonRA.BackOffice.Enums

@{
    ViewBag.Title = Loc.AccountCard;
}

@Html.Hidden("AcKey", Model.AcKey)
<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("~/Views/Reports/_ReportsTabNavigation.cshtml")

        <div class="row buttons-tabbed">
            @Html.Partial("~/Views/Shared/Components/_PrintMenuButton.cshtml", new PantheonRA.BackOffice.Models.PrintMenuDropdownViewModel {
                PrintButtonGroup = ReportsHelper.FormatReportTree(
                    Model.ReportTree,
                    "printAccountCard('{0}')",
                    null
                ),
                PrintType = ReportFormName.AccountCard,
            })
        </div>

        <form id="account-card-form" action="@Url.Action("PrintDocument", "AccountCard")" method="post" target="_blank">
            <div class="row document-head">
                @Html.HiddenFor(model => model.DefaultDecimalPlacesPrice)
                @Html.HiddenFor(model => model.DefaultDecimalPlacesQuantity)
                @Html.HiddenFor(model => model.DefaultDecimalPlacesValue)
                <div class="col-md-2 col-xs-12">
                    <div class="form-group">
                        <label class="control-label">@Loc.SearchFilter</label>
                        @Html.TextBoxFor(model => model.Keywords, new { @id = "Keywords", @class = "form-control search-input", @placeholder = Loc.Search, autocomplete = "off" })
                    </div>
                </div>
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.DateFrom, Loc.DateFrom, new { @class = "control-label" })
                        <div class="input-group">
                            <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                            @Html.TextBox("DateFrom", Model.DateFrom.ToString(Loc.DateFormat), new { @id = "DateFrom", @class = "form-control datepicker filter-datepicker input-horizontal-small-label", @autocomplete = "off" })
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.DateTo, Loc.DateTo, new { @class = "control-label" })
                        <div class="input-group">
                            <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                            @Html.TextBox("DateTo", Model.DateTo.ToString(Loc.DateFormat), new { @id = "DateTo", @class = "form-control datepicker filter-datepicker input-horizontal-small-label", @autocomplete = "off" })
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        @Html.Label(Loc.Account, new { @class = "control-label" })
                        <select id="Accounts"
                                name="Accounts"
                                data-placeholder="@Loc.Account"
                                class="form-control select2withAPI select2-w400"
                                data-url="@Url.Action("SearchAccounts", "AccountCard")"
                                data-column-names="@Loc.Account,@Loc.Name"
                                data-bootstrap-columns="col-md-4,col-md-8"
                                data-selector-separator=" | "
                                data-allow-clear="true"
                                data-search-width="400"
                                onchange="ChangeFormValue('@Model.Accounts', 'Accounts');"></select>
                    </div>
                </div>
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        @Html.Label(Loc.Subject, new { @class = "control-label" })
                        <select id="SubjectId"
                                name="SubjectId"
                                data-placeholder="@Loc.Subject"
                                class="form-control select2withAPI"
                                data-url="@Url.Action("SearchSubjects", "TravelOrdersDistances")"
                                data-column-names="@Loc.Company,@Loc.Name,@Loc.Address,@Loc.Post"
                                data-bootstrap-columns="col-md-4,col-md-4,col-md-3,col-md-1"
                                data-selector-separator=" | "
                                data-allow-clear="true"
                                data-search-width="800"
                                data-search-left="-400"
                                onchange="ChangeFormValue('@Model.SubjectId', 'Subject');"></select>
                    </div>
                </div>
            </div>

        </form>

        <div class="project-list">
            <div class="document-list accountcard-list width-99">
                <table id="accountcard" data-grid-id="account-card" data-url="@Url.Action("AccountCardDataList", "AccountCard")" class="list-table">
                    <thead>
                        <tr>
                            <th>@Loc.Key</th>
                            <th>@Loc.Date</th>
                            <th>@Loc.Account</th>
                            <th>@Loc.Subject</th>
                            <th>@Loc.Document</th>
                            <th>@Loc.Date</th>
                            <th>@Loc.LinkDoc</th>
                            <th class="dt-head-right">@Loc.Debit</th>
                            <th class="dt-head-right">@Loc.Credit</th>
                            <th class="dt-head-right">@Loc.Currency</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <!-- Footer -->
        <div class="row document-footer document-footer-sm">
            <div class="col-md-5 hidden-sm hidden-xs"></div>
            <div class="col-md-2 col-xs-4">
                <div class="form-group text-center">
                    <span>@Loc.Debit:</span>
                    <span id="DebitSum" class="font-bold"></span>
                </div>
            </div>
            <div class="col-md-2 col-xs-4">
                <div class="form-group text-center">
                    <span>@Loc.Credit:</span>
                    <span id="CreditSum" class="font-bold"></span>
                </div>
            </div>
            <div class="col-md-3 col-xs-4 document-head-highlight-input">
                <div class="form-group text-center">
                    <span>@Loc.Balance: </span><span id="BalanceSum" class="font-bold"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="ConfirmLoc" value="@Loc.Confirm" />
<input type="hidden" id="AccountCardPrintUrl" value="@Url.Action("AccountCardPrint", "AccountCard")" />
<script src="~/Scripts/custom/accountcard/accountcard.js"></script>

<script>
    $(document).ready(function () {
        initializeAccountCard();
    });
</script>

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