@model PantheonRA.BackOffice.Models.OutstandingItemsFilterModel
@using PantheonRA.BackOffice.Enums
@using PantheonRA.WebApi.Contracts

@{
    ViewBag.Title = Loc.OpenItems;
}

@Html.Hidden("OutstandingItemsPrintUrl", Url.Action("OutstandingItemsPrintPAAS", "OutstandingItems"))
<input type="hidden" id="ConfirmLoc" value="@Loc.Confirm" />

<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,
                     "printOutstandingItems('{0}')",
                     null
                 ),
                PrintType = ReportFormName.OutstandingItems,
                PrintButtonId = "printButton"
            })
        </div>

        <form id="outstanding-items-form" action="@Url.Action("PrintDocument", "OutstandingItems")" 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-6">
                    <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.Date, Loc.OpenDate, new { @id = "lblOpenDate", @class = "control-label" })
                        @Html.LabelFor(model => model.Date, Loc.DueDate, new { @id = "lblDueDate", @class = "control-label" })
                        <div class="input-group">
                            <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                            @Html.TextBox("Date", Model.Date.ToString(Loc.DateFormat), new { @id = "DateFrom", @class = "form-control 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.Subject, new { @class = "control-label SubjSubject" })
                        @Html.Label(Loc.Buyer, new { @class = "control-label SubjBuyer" })
                        @Html.Label(Loc.Supplier, new { @class = "control-label SubjSupplier" })
                        <div class="SubjSubject">
                            <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-splitter=","
                                    data-allow-clear="true"
                                    data-search-width="800"
                                    onchange="ChangeFormValue('@Model.SubjectId', 'Subject');"></select>
                        </div>
                        <div class="SubjBuyer">
                            <select id="SubjectId"
                                    name="SubjectId"
                                    data-placeholder="@Loc.Subject"
                                    class="form-control select2withAPI"
                                    data-url=@Url.Action("SearchBuyers", "OutstandingItems")
                                    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-splitter=","
                                    data-search-width="800"
                                    data-allow-clear="true"
                                    onchange="ChangeFormValue('@Model.SubjectId', 'Subject');"></select>
                        </div>
                        <div class="SubjSupplier">
                            <select id="SubjectId"
                                    name="SubjectId"
                                    data-placeholder="@Loc.Subject"
                                    class="form-control select2withAPI"
                                    data-url=@Url.Action("SearchSuppliers", "OutstandingItems")
                                    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-splitter=","
                                    data-search-width="800"
                                    data-allow-clear="true"
                                    onchange="ChangeFormValue('@Model.SubjectId', 'Subject');"></select>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        @Html.Label(Loc.TypeOfSubject, new { @class = "control-label" })
                        <select name="Type"
                                id="Type"
                                class="form-control select2"
                                data-url="">
                            <option value="@OutstandingItemSubjectType.Buyers">@Loc.Buyers</option>
                            <option value="@OutstandingItemSubjectType.Suppliers">@Loc.Suppliers</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        @Html.Label(Loc.TypeOfView, new { @class = "control-label" })
                        <select name="DetailedByBill" id="DetailedByBill"
                                data-placeholder="@Loc.DetailedByBills"
                                class="form-control select2"
                                data-url="">
                            <option value="08P" selected>@Loc.DetailedByDocument</option>
                            <option value="32Q">@Loc.DetailedByDocumentWithValue</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        @Html.Label(Loc.Status, new { @class = "control-label" })
                        <select name="OpenItem" id="OpenItem"
                                data-placeholder="@Loc.OpenItems"
                                class="form-control select2 margin-left-0"
                                data-search-left="-50"
                                data-search-width="200"
                                data-url="">
                            <option value="open">@Loc.OutsItemsOpen</option>
                            <option value="due">@Loc.OutsItemsDue</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>

        <div class="project-list">
            <div class="document-list outstandingitems-list">
                <table id="outstandingitems" data-grid-id="outstanding-items" data-url="@Url.Action("OutstandingItemsList", "OutstandingItems")" class="list-table">
                    <thead>
                        <tr>
                            <th>@Loc.LinkDoc</th>
                            <th><span id="thSubjectType">@Loc.Subject</span></th>
                            <th class="08P" id="Key">@Loc.Key</th>
                            <th>@Loc.Account</th>
                            <th>@Loc.DateTimeDue</th>
                            <th>@Loc.InvoiceDate</th>
                            @*<th class="08P" id="Document">@Loc.Document</th>*@
                            <th>@Loc.Debit</th>
                            <th>@Loc.Credit</th>
                            <th>@Loc.Balance</th>
                            <th>@Loc.Currency</th>
                            @*<th>@Loc.Name2</th>*@
                            @*<th class="08P" id="Note">@Loc.Note</th>*@
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @Html.Hidden("LblSubject", Loc.Subject)
    @Html.Hidden("LblBuyer", Loc.Buyer)
    @Html.Hidden("LblSupplier", Loc.Supplier)
</div>

<script src="~/Scripts/custom/outstandingitems/outstandingitems.js"></script>
<script src="~/Scripts/custom/global-helpers.js"></script>

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

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