<div class="invoice-manage-map">
    <div class="query-condition-wrapper">
        <form class="form-inline">
            <div class="div-row">
                <div class="form-group clear-padding" ng-class="{true:'col-sm-4',false:'col-sm-3'}[expandAllQueryCondition]">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'OrderIdentifier' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtOrderIdentifierOptions"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group clear-padding" ng-class="{true:'col-sm-4',false:'col-sm-3'}[expandAllQueryCondition]">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'OrderAmount' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtStartOrderAmountOptions" ng-class="{true:'input-width-normal',false:'input-width-small'}[expandAllQueryCondition]"></div><span class="span-seperate">-</span><div dx-text-box="searchEntityOptions.txtEndOrderAmountOptions" ng-class="{true:'input-width-normal',false:'input-width-small'}[expandAllQueryCondition]"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group clear-padding" ng-class="{true:'col-sm-4',false:'col-sm-3'}[expandAllQueryCondition]">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'VendorName' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtVendorNameOptions"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-3 clear-padding" style="text-align:center;" ng-show="!expandAllQueryCondition">
                    <div class="dx-field" style="margin-top: 4px;">
                        <button type="button" class="btn btn-primary invoice-btn" ng-click="queryRelevanceDataList()" translate="Query"></button><span ng-click="toggleQueryCondition()">{{'MoreCondition' | translate}}<i class="fa fa-angle-down" aria-hidden="true"></i></span>
                    </div>
                </div>
            </div>
            <div class="div-row" ng-show="expandAllQueryCondition">
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'PurchaseDate' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtStartOrderDateOptions" class="input-width-normal"></div><span class="span-seperate">-</span><div dx-text-box="searchEntityOptions.txtEndOrderDateOptions" class="input-width-normal"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'IsIncludedInTaxAmount' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-select-box="searchEntityOptions.selectboxIsIncludedInTaxAmountOptions"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'AcceptNO' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtAcceptNOOptions"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="div-row" ng-show="expandAllQueryCondition">
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'FaceTaxAmount' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtStartAmountOptions" class="input-width-normal"></div><span class="span-seperate">-</span><div dx-text-box="searchEntityOptions.txtEndAmountOptions" class="input-width-normal"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'BuyerName' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtBuyerNameOptions"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'InvoiceKPRQ' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtStartInvoiceDateOptions" class="input-width-normal"></div><span class="span-seperate">-</span><div dx-text-box="searchEntityOptions.txtEndInvoiceDateOptions" class="input-width-normal"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="div-row" ng-show="expandAllQueryCondition">
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'InvoiceStatus' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-select-box="searchEntityOptions.selectboxInvoiceStatusOptions"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'invoiceNumber' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-text-box="searchEntityOptions.txtInvoiceNumberOptions"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'InvoiceSource' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-select-box="searchEntityOptions.selectboxInvoiceSourceOptions"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="div-row" ng-show="expandAllQueryCondition">
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field">
                        <div class="dx-field-label col-sm-5 label-title-style">{{'InvoiceFPLX' | translate}}：</div>
                        <div class="dx-field-value col-sm-7">
                            <div dx-select-box="searchEntityOptions.selectboxInvoiceTypeOptions"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field-label col-sm-5 label-title-style">{{'ProductionType' | translate}}：</div>
                    <div class="dx-field-value col-sm-7">
                        <div dx-select-box="searchEntityOptions.selectboxProductTypeOptions"></div>
                    </div>
                </div>
                <div class="form-group col-sm-4 clear-padding">
                    <div class="dx-field-label col-sm-5 label-title-style">{{'VoucherNO' | translate}}：</div>
                    <div class="dx-field-value col-sm-7">
                        <div dx-text-box="searchEntityOptions.txtVoucherNOOptions"></div>
                    </div>
                </div>
            </div>
            <div class="div-row " style="text-align:right;padding-top:10px;" ng-show="expandAllQueryCondition">
                <button type="button" class="btn btn-primary invoice-btn" ng-click="queryRelevanceDataList()" translate="Query"></button><span ng-click="toggleQueryCondition()">{{'Fold' | translate}}<i class="fa fa-angle-up" aria-hidden="true"></i></span>
            </div>
        </form>
    </div>
    <div class="operation-btn-row">
        <button type="button" class="btn btn-secondary invoice-btn" ng-click="showRevelanceModal()" translate="TicketMatchingInfo"></button><button type="button" class="btn btn-vat-invoice-not-important invoice-btn" ng-click="" translate="RelatePO"></button>
    </div>
    <div class="search-result-wrapper gridContainer">
        <div id="invoiceManageMapList" ></div>
    </div>

    <div class="page-footer">
        <ack-pagination page-options="pagingOptions" refresh-table="thisDXGridService.refreshTable()"></ack-pagination>

    </div>

    <invoice-relevance-modal is-show="isShowModal" relevance-type="relevanceType" relevance-data-model="selectedInvoice" is-four="isFour" on-closed="queryRelevanceDataList()"></invoice-relevance-modal>
</div>