<div class="app-header bg-header-1">
    <div class="layout-fixed full-h text-center">
        <div class="full-h v-bottom-i pdB15">
            <div class="app-content-header bg-header-1">
                <div class="text-title-header-1 nowrap mgT5">Filter</div>
            </div>
        </div>
    </div>
    <button class="popup-close-button bg-transparent pd0-i" type="button" ng-click="closeTarget('#popupPaymentFilter')">
        <svg class="block h18px" viewBox="0 0 64 64"><path fill="#FFF" d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59   c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59   c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0   L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z" /></svg>
    </button>
</div>
<!-- <div class="app-content"> -->
    <form  class="app-content content-pd pdB2" id="formPaymentFilter" name="formPaymentFilter" ng-submit="validateForm('formPaymentFilter')" novalidate="">
        <button type="submit" id="submitFormFilter" style="display:none;">submit</button>
        <div class="app-content-inner content-pd">
            <ion-scroll class="scroll-area" direction="y" has-bouncing="false" overflow-scroll="false" delegate-handle="scrollerpopupPayMentFilter" on-scroll="scrollContent('scrollerpopupPayMentFilter')">
                <div class="box-setting-4 no-saperator">
                    <div class="content content-in">
                        <div class="itm" >
                            <label class="label-form-field-1">Date type:</label>
                            <div class="layout-fixed">
                                <div>
                                    <div class="input-form-field-1">
                                        <input type="text" class="h32px" value="{{Input_value.dateType}}" ng-init="Input_value.dateType = 'Due date' ">
                                        <div class="sign-r clear">
                                            <button class="bg-transparent full-h right pdR10" type="button">
                                                <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                            </button>
                                        </div>
                                        <select class="field-overlay" ng-model="dataFilterPayment.dateType" ng-init="dataFilterPayment.dateType = 'due' " ng-change="setValueForInput(dataFilterPayment.dateType,'datetype')">
                                            <option value="due">Due date</option>
                                            <option value="invoice">Invoice Date</option>
                                            <option value="payment">Payment Date</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="itm">
                            <div class="layout-fixed input-1-group">
                                <div>
                                    <label class="label-form-field-1">Date Range</label>
                                    <div class="layout-fixed">
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : dataFilterPayment.form.$invalid  }">
                                            <input type="text" class="h32px" name="dataFilterPayment.form" placeholder="Start time" value="{{dataFilterPayment.form| date: 'MM/dd/yyyy'}}">
                                            <div class="field-overlay datetime" date="" required ion-datetime-picker="" ng-model="dataFilterPayment.form" name="start_time" only-valid="{'before': 'today', 'inclusive': true}">
                                                {{dataFilterPayment.form| date: 'MM/dd/yyyy'}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div class="layout-fixed">
                                        <div>
                                            <div class="input-form-field-1" ng-class="{ 'has-errors' : dataFilterPayment.to.$invalid  }">
                                                <input type="text" class="h32px" name="dataFilterPayment.to" placeholder="End time" value="{{dataFilterPayment.to| date: 'MM/dd/yyyy'}}">
                                                <div class="field-overlay datetime" date="" required ion-datetime-picker="" ng-model="dataFilterPayment.to" name="end_time" only-valid="{'after': dataFilterPayment.form, 'inclusive': true}">
                                                    {{dataFilterPayment.to| date: 'MM/dd/yyyy'}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="itm">
                            <label class="label-form-field-1">Estimate/ Invoice:</label>
                            <div class="layout-fixed">
                                <div>
                                    <div class="input-form-field-1">
                                        <input autocomplete="off" 
                                        class="ion-autocomplete" 
                                        ion-autocomplete="" 
                                        item-value-key="id" 
                                        item-view-value-key="name"
                                        items-method="searchAutocomplete(query,'estInv')" 
                                        items-method-value-key="items" 
                                        items-removed-method="removeItemAutoComplete(callback,'estInv')"
                                        items-clicked-method="clickOnItemAutocomplete(callback,'estInv')" 
                                        max-selected-items="100" 
                                        ng-model="autocompleteList.estimateInvoice"
                                        placeholder="Find Estimate/ Invoice" 
                                        type="text" >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="itm">
                            <label class="label-form-field-1">Method:</label>
                            <div class="layout-fixed">
                                <div>
                                    <div class="input-form-field-1">
                                        <input autocomplete="off" 
                                        class="ion-autocomplete" 
                                        ion-autocomplete="" 
                                        item-value-key="label" 
                                        item-view-value-key="label"
                                        items-method="searchAutocomplete(query,'method')" 
                                        items-method-value-key="items" 
                                        items-removed-method="removeItemAutoComplete(callback,'method')"
                                        items-clicked-method="clickOnItemAutocomplete(callback,'method')" 
                                        max-selected-items="100" 
                                        ng-model="autocompleteList.paymentMethod"
                                        placeholder="Find Method" 
                                        type="text" >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="itm" >
                            <label class="label-form-field-1">Estimate/ Invoice total from:</label>
                            <div class="layout-fixed">
                                <div>
                                    <div class="input-form-field-1">
                                        <input type="number" class="h32px" ng-model="dataFilterPayment.totalFrom">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="itm" >
                            <label class="label-form-field-1">Estimate/ Invoice total to:</label>
                            <div class="layout-fixed">
                                <div>
                                    <div class="input-form-field-1">
                                        <input type="number" class="h32px" ng-model="dataFilterPayment.totalTo">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="itm" >
                            <label class="label-form-field-1">Invoice balance from:</label>
                            <div class="layout-fixed">
                                <div>
                                    <div class="input-form-field-1">
                                        <input type="number" class="h32px" ng-model="dataFilterPayment.balanceFrom">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="itm" >
                            <label class="label-form-field-1">Invoice balance to:</label>
                            <div class="layout-fixed">
                                <div>
                                    <div class="input-form-field-1">
                                        <input type="number" class="h32px" ng-model="dataFilterPayment.balanceTo">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="itm" >
                            <label class="label-form-field-1">Job status:</label>
                            <div class="layout-fixed">
                                <div>
                                    <div class="input-form-field-1">
                                        <input type="text" class="h32px" value="{{Input_value.jobStatus}}" ng-init="Input_value.jobStatus = 'Select Job Status' ">
                                        <div class="sign-r clear">
                                            <button class="bg-transparent full-h right pdR10" type="button">
                                                <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                            </button>
                                        </div>
                                        <select class="field-overlay" ng-model="dataFilterPayment.jobStatus" ng-init="dataFilterPayment.jobStatus = '' " ng-change="setValueForInput(dataFilterPayment.jobStatus,'jobStatus')">
                                         <option value="">Select Job Status</option>
                                         <option value="installed">Installed</option>
                                         <option value="notyetinstalled">Not Yet Installed</option>
                                     </select>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="itm">
                        <div class="layout-fixed input-1-group">
                            <div>
                                <label class="label-form-field-1">Last service date:</label>
                                <div class="layout-fixed">
                                    <div class="input-form-field-1" ng-class="{ 'has-errors' : dataFilterPayment.form.$invalid  }">
                                        <input type="text" class="h32px" name="dataFilterPayment.serviceForm" placeholder="Start time" value="{{dataFilterPayment.serviceForm| date: 'MM/dd/yyyy'}}">
                                        <div class="field-overlay datetime" date="" required ion-datetime-picker="" ng-model="dataFilterPayment.serviceForm" name="start_time" only-valid="{'before': 'today', 'inclusive': true}">
                                            {{dataFilterPayment.serviceForm| date: 'MM/dd/yyyy'}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : dataFilterPayment.serviceTo.$invalid  }">
                                            <input type="text" class="h32px" name="dataFilterPayment.serviceTo" placeholder="End time" value="{{dataFilterPayment.serviceTo| date: 'MM/dd/yyyy'}}">
                                            <div class="field-overlay datetime" date="" required ion-datetime-picker="" ng-model="dataFilterPayment.serviceTo" name="end_time" only-valid="{'after': dataFilterPayment.serviceForm, 'inclusive': true}">
                                                {{dataFilterPayment.serviceTo| date: 'MM/dd/yyyy'}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Estimate/ Invoice created user:</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1">
                                    <input autocomplete="off" 
                                    class="ion-autocomplete" 
                                    ion-autocomplete="" 
                                    item-value-key="id" 
                                    item-view-value-key="name"
                                    items-method="searchAutocomplete(query,'invcreateduser')" 
                                    items-method-value-key="items" 
                                    items-removed-method="removeItemAutoComplete(callback,'invcreateduser')"
                                    items-clicked-method="clickOnItemAutocomplete(callback,'invcreateduser')" 
                                    max-selected-items="100" 
                                    ng-model="autocompleteList.createdUser"
                                    placeholder="Find Find Estimate/ Invoice Create User" 
                                    type="text" >
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Estimate/ Invoice edit user:</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1">
                                    <input autocomplete="off" 
                                    class="ion-autocomplete" 
                                    ion-autocomplete="" 
                                    item-value-key="id" 
                                    item-view-value-key="name"
                                    items-method="searchAutocomplete(query,'inveditduser')" 
                                    items-method-value-key="items" 
                                    items-removed-method="removeItemAutoComplete(callback,'inveditduser')"
                                    items-clicked-method="clickOnItemAutocomplete(callback,'inveditduser')" 
                                    max-selected-items="100" 
                                    ng-model="autocompleteList.modifiedUser"
                                    placeholder="Find Estimate/ Invoice Edit User" 
                                    type="text" >
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Payment user:</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1">
                                    <input autocomplete="off" 
                                    class="ion-autocomplete" 
                                    ion-autocomplete="" 
                                    item-value-key="id" 
                                    item-view-value-key="name"
                                    items-method="searchAutocomplete(query,'paymentuser')" 
                                    items-method-value-key="items" 
                                    items-removed-method="removeItemAutoComplete(callback,'paymentuser')"
                                    items-clicked-method="clickOnItemAutocomplete(callback,'paymentuser')" 
                                    max-selected-items="100" 
                                    ng-model="autocompleteList.paymentUser"
                                    placeholder="Find Payment user" 
                                    type="text" >
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Payment Status:</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1">
                                    <input autocomplete="off" 
                                    class="ion-autocomplete" 
                                    ion-autocomplete="" 
                                    item-value-key="id" 
                                    item-view-value-key="name"
                                    items-method="searchAutocomplete(query,'paymentstatus')" 
                                    items-method-value-key="items" 
                                    items-removed-method="removeItemAutoComplete(callback,'paymentstatus')"
                                    items-clicked-method="clickOnItemAutocomplete(callback,'paymentstatus')" 
                                    max-selected-items="100" 
                                    ng-model="autocompleteList.status"
                                    placeholder="Find Payment Status" 
                                    type="text" >
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm" >
                        <label class="label-form-field-1">Check or CC#:</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1">
                                    <input type="number" class="h32px" ng-model="dataFilterPayment.checkOrCreditNumber">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-scroll>
    </div>
</form>
<!-- </div> -->
<div class="app-control">
    <div class="layout-fixed full-h pdT2">
        <div class="w42px full-h relative">
            <button class="bg-transparent pd0-i full text-left pdL10-i" type="button" onclick="openQuickOption(this)">
                <svg class="h20px" viewBox="0 0 460.713 460.713"><rect y="115.356" width="302" height="30" fill="#FFFFFF" /><polygon points="335.786,202.231 398.25,264.694 460.713,202.232  " fill="#FFFFFF" /><rect y="315.356" width="302" height="30" fill="#FFFFFF" /><rect y="215.356" width="302" height="30" fill="#FFFFFF" /></svg>
            </button>
            <div class="quick-popup box-popup-1 display-bottom-left mgB55" onclick="closeQuickOption(this)">
                <div class="popup-content w140px">
                    <ul class="list-item-03">
                        <li onclick="">
                            <div class="layout-fixed">
                                <div class="icon-area">
                                    <svg class="h15px" viewBox="0 0 423.755 423.755"><path d="M43.84,281.457c-18.585-44.869-18.586-94.29,0-139.159c10.649-25.709,26.678-48.152,46.86-66.135l60.86,60.86V15.099   H29.635l39.88,39.88c-64.293,58.426-88.5,153.2-53.391,237.959c14.167,34.202,37.07,64.159,66.234,86.634   c28.275,21.789,61.873,36.201,97.162,41.677l4.601-29.646C120.778,381.774,68.337,340.597,43.84,281.457z" fill="#FFFFFF" /><path d="M407.516,292.938c21.652-52.272,21.652-109.848,0-162.12c-14.167-34.202-37.071-64.159-66.234-86.633   C313.007,22.395,279.409,7.983,244.12,2.507l-4.601,29.646c63.342,9.829,115.783,51.005,140.28,110.146   c18.586,44.869,18.586,94.29,0,139.159c-10.649,25.709-26.678,48.152-46.859,66.135l-60.86-60.86v121.924h121.924l-39.801-39.801   C377.118,348.099,395.334,322.348,407.516,292.938z" fill="#FFFFFF" /></svg>
                                </div>
                                <div class="name-area text-link-1">
                                    Reset all
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="popup-overlay"></div>
            </div>
        </div>
        <div class="full-h">
            <button class="button-form-field-1 darkgray position-left full" type="button" ng-click="closeTarget('#popupPaymentFilter');">
                Cancel
            </button>
        </div>
        <div class="full-h">
            <button class="button-form-field-1 position-right full" type="button"  onclick="getElementById('submitFormFilter').click()" ng-click="submitTypeFilter('view')">
                <svg class="icon h12px" viewBox="0 0 174.239 174.239"><path d="M172.032,161.492l-27.432-27.429c-0.277-0.277-0.633-0.399-0.939-0.624c26.711-31.913,25.119-79.643-4.86-109.622  C123.441,8.459,103.019,0,81.3,0C59.579,0,39.158,8.459,23.8,23.817c-31.707,31.707-31.707,83.298,0,115.001  c15.358,15.363,35.779,23.822,57.5,23.822c19.285,0,37.524-6.698,52.125-18.944c0.222,0.303,0.342,0.654,0.616,0.927l27.432,27.429  c1.458,1.458,3.369,2.188,5.28,2.188s3.824-0.729,5.28-2.188C174.949,169.135,174.949,164.409,172.032,161.492z M81.3,147.705  c-17.733,0-34.403-6.908-46.941-19.446c-25.883-25.883-25.883-67.994,0-93.882C46.897,21.838,63.568,14.935,81.3,14.935  c17.73,0,34.403,6.903,46.941,19.441c25.883,25.888,25.883,67.999,0,93.882C115.701,140.796,99.031,147.705,81.3,147.705z" /></svg>
                Search
            </button>
        </div>
        <div class="full-h">
            <button class="button-form-field-1 position-right full blue-grayness" type="button"  onclick="getElementById('submitFormFilter').click()" ng-click="submitTypeFilter('export')">
                Export To Excel
            </button>
        </div>
    </div>
</div>
