<div class="app-content">
    <div class="app-content-inner content-pd">
        <ion-scroll class="scroll-area" direction="y" has-bouncing="false" overflow-scroll="false" delegate-handle="scrollFilterReport">
            <div class="box-setting-4 no-saperator" ng-if="hideViewAll">
                <div class="content content-in">
                    <div class="itm">
                        <label class="label-form-field-1">View Client</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-click="focusHandle($event)">
                                    <input type="text" class="h32px" value="{{customerShow}}" placeholder="">
                                    <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="showCustomer" ng-change="showsInActiveCustomers(showCustomer)">
                                        <option value="all">All</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Deactivated</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-expandable expand box-setting-4 form-field-container no-saperator">
                <div class="title clear">
                    Filter & Report
                    <div class="more-overlay no-item-more right biger-3-time pdT3 pdR5" onclick="toggleExpand(this)" ng-click="resizeScroll('scrollFilterReport')">
                        <button type="button" class="more-icon bg-transparent pd0-i block">
                            <svg class="h14px clr-symbol-clickable" viewBox="0 0 458.852 458.852"> <path d="M0,115.086l229.426,228.679l229.426-228.679H0z M72.594,145.086h313.664L229.426,301.408L72.594,145.086z" /> </svg>
                        </button>
                        <button type="button" class="less-icon bg-transparent pd0-i block">
                            <svg class="h14px clr-symbol-clickable" viewBox="0 0 458.852 458.852"> <path d="M0,115.086l229.426,228.679l229.426-228.679H0z M72.594" /> </svg>
                        </button>
                    </div>
                </div>
                <div class="item-expandable content content-in">
                    <div class="itm">
                        <label class="label-form-field-1">Saved queries</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-click="focusHandle($event)">
                                    <input type="text" class="h32px" value="{{queryId.name||'New Query'}}" placeholder="">
                                    <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-options="option.name for option in dataCusQuery track by option.id" ng-model="queryId">
                                        <option value="">New query</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Company name</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-click="focusHandle($event)">
                                    <input autocomplete="off" class="ion-autocomplete" ion-autocomplete="" item-value-key="company_name" item-view-value-key="company_name"
                                           items-method="filterCompanyNameSearch(query)" items-method-value-key="items" items-removed-method="filterCompanyNameSearchRemoved(callback)"
                                           items-clicked-method="filterCompanyNameSearchClicked(callback)" ng-model="exportdatafilter.companyName"
                                           placeholder="" type="text" max-selected-items="1" external-model="exportdata.companyName" model-to-item-method="modelToItemCompanyName(modelValue)">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed input-1-group">
                            <div class="layout-w-1:2">
                                <label class="label-form-field-1">City</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-click="focusHandle($event)">
                                            <input autocomplete="off" class="ion-autocomplete" ion-autocomplete="" item-value-key="city" item-view-value-key="city"
                                                   items-method="filterCitySearch(query)" items-method-value-key="items" items-removed-method="filterCitySearchRemoved(callback)"
                                                   items-clicked-method="filterCitySearchClicked(callback)" ng-model="exportdatafilter.city"
                                                   placeholder="" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="label-form-field-1">State</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-click="focusHandle($event)">
                                            <input type="text" class="h32px" value="{{exportdatafilter.state||''}}" placeholder="">
                                            <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="exportdatafilter.state">
                                                <option value="">Select</option>
                                                <option value="MN">MN</option>
                                                <option value="WI">WI</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="label-form-field-1">Zip code</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-click="focusHandle($event)">
                                            <input autocomplete="off" class="ion-autocomplete" ion-autocomplete="" item-value-key="postal_code" item-view-value-key="postal_code"
                                                   items-method="filterZipSearch(query)" items-method-value-key="items" items-removed-method="filterZipSearchRemoved(callback)"
                                                   items-clicked-method="filterZipSearchClicked(callback)" ng-model="exportdatafilter.zip"
                                                   placeholder="" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed input-1-group">
                            <div>
                                <label class="label-form-field-1" ng-class="{ 'has-errors' : exportdatafilter.customerSince_start.$invalid || exportdatafilter.customerSince_end.$invalid }">Client since</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : exportdatafilter.customerSince_start.$invalid  }" ng-click="focusHandle($event)">
                                            <input type="text" class="h32px" name="exportdatafilter.customerSince_start" placeholder="Start" value="{{exportdatafilter.customerSince_start| date: 'MM/dd/yyyy'}}">
                                            <div class="field-overlay datetime" date="" ion-datetime-picker="" ng-model="exportdatafilter.customerSince_start" name="customerSince_start" only-valid="{'before': 'today', 'inclusive': true}">
                                                {{exportdatafilter.customerSince_start| date: 'MM/dd/yyyy'}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : exportdatafilter.customerSince_end.$invalid  }" ng-click="focusHandle($event)">
                                            <input type="text" class="h32px" name="exportdatafilter.customerSince_end" placeholder="End" value="{{exportdatafilter.customerSince_end| date: 'MM/dd/yyyy'}}">
                                            <div class="field-overlay datetime" date="" ion-datetime-picker="" ng-model="exportdatafilter.customerSince_end" name="customerSince_end" only-valid="{'before': 'today', 'inclusive': true}">
                                                {{exportdatafilter.customerSince_end| date: 'MM/dd/yyyy'}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Lead source</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-click="focusHandle($event)">
                                    <input type="text" class="h32px" value="{{exportdatafilter.leadSource.name||'All'}}" placeholder="">
                                    <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-options="option.name for option in leadsources track by option.id" ng-model="exportdatafilter.leadSource">
                                        <option value="">All</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Referred by</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-click="focusHandle($event)">
                                    <input autocomplete="off" class="ion-autocomplete" ion-autocomplete="" item-value-key="id" item-view-value-key="name"
                                           items-method="filterCustomerForSearch(query)" items-method-value-key="items" items-removed-method="filterRefferedcustomerSearchRemoved(callback)"
                                           items-clicked-method="filterRefferedcustomerSearchClicked(callback)" max-selected-items="1" ng-model="exportdatafilter.refferedcustomer"
                                           placeholder="" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed input-1-group">
                            <div>
                                <label class="label-form-field-1" ng-class="{ 'has-errors' : exportdatafilter.lastService_start.$invalid || exportdatafilter.lastService_end.$invalid }">Last service date</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : exportdatafilter.lastService_start.$invalid  }" ng-click="focusHandle($event)">
                                            <input type="text" class="h32px" name="exportdatafilter.lastService_start" placeholder="Start" value="{{exportdatafilter.lastService_start| date: 'MM/dd/yyyy'}}">
                                            <div class="field-overlay datetime" date="" ion-datetime-picker="" ng-model="exportdatafilter.lastService_start" name="lastService_start" only-valid="{'before': 'today', 'inclusive': true}">
                                                {{exportdatafilter.lastService_start| date: 'MM/dd/yyyy'}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : exportdatafilter.lastService_end.$invalid  }" ng-click="focusHandle($event)">
                                            <input type="text" class="h32px" name="exportdatafilter.lastService_end" placeholder="End" value="{{exportdatafilter.lastService_end| date: 'MM/dd/yyyy'}}">
                                            <div class="field-overlay datetime" date="" ion-datetime-picker="" ng-model="exportdatafilter.lastService_end" name="lastService_end" only-valid="{'before': 'today', 'inclusive': true}">
                                                {{exportdatafilter.lastService_end| date: 'MM/dd/yyyy'}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Last field worker</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-click="focusHandle($event)">
                                    <input autocomplete="off" class="ion-autocomplete" ion-autocomplete="" item-value-key="id" item-view-value-key="name"
                                           items-method="filterLastFieldWorkerSearch(query)" items-method-value-key="items" items-removed-method="filterLastFieldWorkerSearchRemoved(callback)"
                                           items-clicked-method="filterLastFieldWorkerSearchClicked(callback)" ng-model="exportdatafilter.lastFieldWorker"
                                           placeholder="" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Client review</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-click="focusHandle($event)">
                                    <input type="text" class="h32px" value="{{exportdatafilter.customerReview.name||'All'}}" placeholder="">
                                    <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-options="option.name for option in reviews track by option.id" ng-model="exportdatafilter.customerReview">
                                        <option value="">All</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Appointment type</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-click="focusHandle($event)">
                                    <input autocomplete="off" class="ion-autocomplete" ion-autocomplete="" item-value-key="id" item-view-value-key="name"
                                           items-method="filterAppointmentTypeSearch(query)" items-method-value-key="items" items-removed-method="filterAppointmentTypeSearchRemoved(callback)"
                                           items-clicked-method="filterAppointmentTypeSearchClicked(callback)" ng-model="exportdatafilter.appointmentType"
                                           placeholder="" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed">
                            <div class="pdB5">
                                <label class="label-form-field-1">Jobsite exist</label>
                            </div>
                            <div class="w60px clear">
                                <div class="checkedbox-toggle-1 block-i right">
                                    <input type="checkbox" ng-model="exportdatafilter.jobsiteExist" name="jobsiteExist" value=""><i></i><span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed">
                            <div class="pdB5">
                                <label class="label-form-field-1">Client flag</label>
                            </div>
                            <div class="w60px clear">
                                <div class="checkedbox-toggle-1 block-i right">
                                    <input type="checkbox" ng-model="exportdatafilter.customerFlag" name="customerFlag" value=""><i></i><span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm" ng-if="queryId == 'new'">
                        <div class="layout-fixed">
                            <div>
                                <button type="button" ng-click="beforeSaveQuery()" class="button-form-field-2 h38px full-w">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-scroll>
    </div>
</div>
<div class="app-control">
    <div class="layout-fixed full-h pdT2">
        <div class="full-h">
            <button class="popup-back-button button-form-field-1 darkgray position-left full" type="button" ng-click="closeTarget('#customerPopupFilterReport');">
                Cancel
            </button>
        </div>
        <div class="full-h">
            <button class="button-form-field-1 green position-right full pdR15" type="submit" ng-click="submitTypeFilter('Export')">
                <div class="icon relative">
                    <svg class="h14px" viewBox="0 0 58 58"> <path d="M57.981,32.676L57.53,32h-0.009l-3.583-5.381l-2.421-3.628l0.004-0.002L47.535,17H36v2h10.465l8.679,13H39v7H19v-7H2.856   l8.679-13H22v-2H10.465L0.431,32.031l-0.014,0.001L0,32.655v0.206v0.396v19.359C0,54.482,1.519,56,3.385,56h51.23   C56.481,56,58,54.482,58,52.616V33.239v-0.429l-0.014-0.036L57.981,32.676z" /> </svg>
                    <svg class="h14px" style="position: absolute; left: 0px; top: 0" viewBox="0 0 511 511"> <path d="M159.5,151c1.919,0,3.839-0.732,5.303-2.196L248,65.607V303.5c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5V65.607   l83.197,83.197c1.464,1.464,3.384,2.196,5.303,2.196s3.839-0.732,5.303-2.196c2.929-2.93,2.929-7.678,0-10.607l-96-96   c-0.011-0.011-0.024-0.021-0.035-0.032c-0.164-0.162-0.335-0.318-0.514-0.465c-0.086-0.071-0.177-0.132-0.266-0.199   c-0.107-0.08-0.212-0.163-0.323-0.238c-0.104-0.069-0.212-0.13-0.318-0.193c-0.104-0.062-0.206-0.127-0.313-0.185   c-0.106-0.057-0.215-0.104-0.323-0.155c-0.114-0.054-0.227-0.111-0.344-0.159c-0.103-0.042-0.208-0.077-0.312-0.114   c-0.127-0.046-0.252-0.094-0.381-0.133c-0.101-0.031-0.204-0.053-0.307-0.079c-0.135-0.035-0.268-0.072-0.406-0.099   c-0.112-0.022-0.224-0.034-0.336-0.051c-0.13-0.02-0.258-0.043-0.39-0.056c-0.185-0.018-0.371-0.024-0.557-0.028   C255.618,40.008,255.56,40,255.5,40s-0.118,0.008-0.178,0.009c-0.186,0.004-0.372,0.01-0.557,0.028   c-0.132,0.013-0.26,0.037-0.39,0.056c-0.112,0.017-0.224,0.029-0.336,0.051c-0.138,0.027-0.271,0.065-0.406,0.099   c-0.102,0.026-0.205,0.048-0.306,0.079c-0.13,0.039-0.255,0.087-0.381,0.133c-0.104,0.038-0.209,0.072-0.312,0.114   c-0.117,0.048-0.23,0.105-0.344,0.159c-0.108,0.051-0.217,0.099-0.323,0.155c-0.107,0.057-0.21,0.123-0.314,0.185   c-0.106,0.063-0.213,0.123-0.317,0.192c-0.112,0.075-0.218,0.158-0.325,0.239c-0.088,0.066-0.179,0.127-0.265,0.198   c-0.179,0.147-0.35,0.302-0.514,0.465c-0.011,0.011-0.024,0.021-0.035,0.032l-96,96c-2.929,2.93-2.929,7.678,0,10.607   C155.661,150.268,157.581,151,159.5,151z" /> </svg>
                </div>
                Export
            </button>
        </div>
        <div class="full-h">
            <button type="submit" class="button-form-field-1 position-right full pdR15" ng-click="submitTypeFilter('Display')">
                <svg class="icon h14px" viewBox="0 0 51.913 51.913"> <path d="M50.957,7c0-4.596-12.577-7-25-7s-25,2.404-25,7c0,1.042,0.652,1.97,1.796,2.784l17.204,23.542v17.525l0.062,1.062h1  l0.457-0.018l10.481-10.481v-8.088L49.16,9.784C50.305,8.97,50.957,8.042,50.957,7z M25.957,2c14.04,0,23,2.961,23,5s-8.96,5-23,5  s-23-2.961-23-5S11.917,2,25.957,2z" /> </svg>
                View
            </button>
        </div>
    </div>
</div>
