<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-name-header-1 nowrap">Opportunity Filter & report</div>
                <div class="text-title-header-1 nowrap mgT10">View opportunity</div>
            </div>
        </div>
    </div>
    <button type="button" class="popup-back-button bg-transparent pd0-i biger-3-time" ng-click="closeTarget('#popupOpportunityFilterReportDisplay')"></button>
</div>
<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="scrollDisplayFilter" on-scroll="scrollContent('scrollDisplayFilter')">
            <div class="box-setting-4 no-saperator">
                <div class="title">View Query</div>
            </div>
            <ul>
                <li class="box-setting-4 box-expandable">
                    <div class="content content-in h175px overhidden">
                        <div class="itm row-one-content">
                            <div class="layout-fixed">
                                <div class="v-top-i">
                                    <div class="subname clr-black uppercase">{{dataFilterOppotunities.searchByCreateDay == false  ? 'Search by created day' : 'Search by start day'}}</div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT8">
                                <div>
                                    <div class="layout-fixed w-auto-i left">
                                        <div class="text-date-1 lowercase">{{dataFilterOppotunities.starttimeFomat.split('-').join('/')}}</div>
                                        <div class="w15px text-center pdB2">
                                            <svg class="h6px" viewBox="0 0 14 14"> <g> <g> <path fill="#b1c7d7" d="M5.396,13.433C8.037,10.859,12,7,12,7S8.037,3.141,5.396,0.567C5.033,0.218,4.543,0,4,0    C2.896,0,2,0.896,2,2v10c0,1.104,0.896,2,2,2C4.543,14,5.033,13.782,5.396,13.433z" /> </g> </g> </svg>
                                        </div>
                                        <div class="text-date-1 lowercase">{{dataFilterOppotunities.endtimeFomat.split('-').join('/')}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10" ng-if="dataFilterOppotunities.customer.id != '' && dataFilterOppotunities.customer.id != null ">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Client name</div>
                                            <div class="text">{{dataFilterOppotunities.customer.first_name}} {{dataFilterOppotunities.customer.last_name}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10" ng-if="dataFilterOppotunities.addrress.length > 0">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Address</div>
                                            <div class="text">{{dataFilterOppotunities.addrress}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10" ng-if="dataFilterOppotunities.city.length > 0 || dataFilterOppotunities.zipcode.length > 0">
                                <div class="v-top-i" ng-if="dataFilterOppotunities.city.length > 0">
                                    <div class="text-title-4">City</div>
                                    <div class="text">
                                        <div ng-repeat="cityItem in dataFilterOppotunities.city">{{cityItem.city}}</div>
                                    </div>
                                </div>
                                <div class="v-top-i" ng-if="dataFilterOppotunities.zipcode.length > 0">
                                    <div class="text-title-4">Zip code</div>
                                    <div class="text">
                                        <div ng-repeat="zipItem in dataFilterOppotunities.zipcode">{{zipItem.postal_code}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10" ng-if="dataFilterOppotunities.phone.length > 0">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Phone number</div>
                                            <div class="text">{{dataFilterOppotunities.phone}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10" ng-if="dataFilterOppotunities.leadsource.length > 0">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Lead source</div>
                                            <div class="text" >
                                                <div ng-repeat="leadItem in dataFilterOppotunities.leadsource">{{leadItem.key}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10" ng-if="dataFilterOppotunities.rep.length > 0">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Representative</div>
                                            <div class="text">
                                                <div ng-repeat="repItem in dataFilterOppotunities.rep">{{repItem.name}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10" ng-if="dataFilterOppotunities.assignee.length > 0">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Assignee</div>
                                            <div class="text">
                                                <div ng-repeat="assginItem in dataFilterOppotunities.assignee">{{assginItem.name}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="text-title-4">Status</div>
                                    <div class="text">{{dataFilterOppotunities.statusShow}}</div>
                                </div>
                                <div class="v-top-i" {{dataFilterOppotunities.statusShow}}>
                                    <div class="text-title-4">Sub status</div>
                                    <div class="text">{{dataFilterOppotunities.subStatusShow}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="more-overlay clear" onclick="toggleExpand(this)" ng-click="resizes('scrollDisplayFilter')">
                            <div class="h40px layout-fixed w-auto-i center pdT10">
                                <div class="text-link-1 pdR10">
                                    <span class="more-text">See more</span>
                                    <span class="less-text">See less</span>
                                </div>
                                <div>
                                    <button type="button" class="more-icon bg-transparent pd0-i relative">
                                        <svg class="h12px clr-symbol-clickable" style="position: absolute; left: 4px; top: 1px" viewBox="0 0 210 210"> <path d="M25,80C11.215,80,0,91.215,0,105s11.215,25,25,25c13.785,0,25-11.215,25-25S38.785,80,25,80z" fill="#F19338 " /> <path d="M105,80c-13.785,0-25,11.215-25,25s11.215,25,25,25c13.785,0,25-11.215,25-25S118.785,80,105,80z" fill="#F19338 " /> <path d="M185,80c-13.785,0-25,11.215-25,25s11.215,25,25,25c13.785,0,25-11.215,25-25S198.785,80,185,80z" fill="#F19338" /> </svg>
                                        <svg class="h24px" viewBox="0 0 512 512">  <path style="fill:#1075BB;" d="M196.267,375.467H47.787C24.747,375.467,0,359.253,0,332.8V46.933C0,22.187,23.04,0,47.787,0h417.28  C489.813,0,512,22.187,512,46.933v243.2c0,5.12-3.413,8.533-8.533,8.533c-5.12,0-8.533-3.413-8.533-8.533v-243.2  c0-15.36-14.507-29.867-29.867-29.867H47.787c-15.36,0-30.72,14.507-30.72,29.867V332.8c0,15.36,16.213,25.6,30.72,25.6h148.48  c5.12,0,8.533,3.413,8.533,8.533S201.387,375.467,196.267,375.467" /> <path style="fill:#FDC794;" d="M375.467,512L263.68,396.8c-40.107-40.107-40.107-104.96,0-145.067l0,0  c40.107-40.107,104.96-40.107,145.067,0L512,349.867V512H375.467z" /> <path style="fill:#FFF;" d="M288.427,372.907l35.84,35.84c4.267,4.267,9.387,5.973,15.36,5.973l0,0  c46.933-3.413,83.627-40.107,87.04-87.04l0,0c0-5.973-1.707-11.093-5.973-15.36l-35.84-35.84c-26.453-26.453-69.973-26.453-96.427,0  l0,0C261.12,302.933,261.12,345.6,288.427,372.907" /> <path style="fill:#FFFFFF;" d="M366.933,354.133c-16.213,16.213-24.747,40.96-34.987,58.88c2.56,0.853,5.12,1.707,8.533,0.853  c46.933-3.413,83.627-40.107,87.04-87.04c0-2.56,0-4.267-0.853-6.827h-0.853C407.04,331.093,383.147,337.067,366.933,354.133" /> <path style="fill:#F9A671;" d="M418.133,477.867c-2.56,0-4.267-0.853-5.973-2.56c-3.413-3.413-3.413-8.533,0-11.947l55.467-55.467  c3.413-3.413,8.533-3.413,11.947,0c3.413,3.413,3.413,8.533,0,11.947l-55.467,55.467C422.4,477.013,420.693,477.867,418.133,477.867  " /> </svg>
                                    </button>
                                    <button type="button" class="less-icon bg-transparent pd0-i relative">
                                        <svg class="h16px clr-symbol-clickable" viewBox="0 0 407.437 407.437"> <polygon points="203.718,84.507 386.258,266.453 407.437,245.205 203.718,42.15 0,245.205 21.179,266.453  " /> <polygon points="0,344.039 21.179,365.287 203.718,183.341 386.258,365.287 407.437,344.039 203.718,140.984  " /> </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="box-setting-4 no-saperator">
                <div class="title">Results found</div>
            </div>
            <ul>
                <li class="box-setting-4 box-expandable" ng-repeat="item in dataOppFilter" ng-click="oppFilterClick(item)">
                    <div class="content content-in h175px overhidden">
                        <div class="itm row-one-content">
                            <div class="layout-fixed">
                                <div class="w25px v-top-i pdT5">
                                    <div class="stt-1">{{item.no}}</div>
                                </div>
                                <div>
                                    <div class="name clr-black capitalize">{{item.first_name.length > 0 || item.last_name.length >0 ? item.first_name +' '+item.last_name : 'N/A'}}</div>
                                </div>

                                <div class="w40px clear v-bottom-i clear" ng-if="item.recordingfile">
                                    <button class="bg-transparent pd0-i biger-3-time right" type="button" ng-click="initPlayAudio(item.recordingfile)">
                                        <svg class="block h20px clr-symbol-clickable" viewBox="0 0 491.4 491.4"> <path d="M491.4,0.7H2.9v354.7h488.4V0.7H491.4z M247.2,262.8c-46.7,0-84.8-37.7-84.8-84.8c0-46.7,37.7-84.8,84.8-84.8    c46.7,0,84.8,37.7,84.8,84.8C331.5,224.7,293.8,262.8,247.2,262.8z" /> <circle cx="87.5" cy="451.4" r="39.3" /> <g> <path d="M475,440.1H139.2c1.4,7.5,1.4,15.1,0,22.6H475c6.2,0,11.3-5.1,11.3-11.3C486.3,445.2,481.2,440.1,475,440.1z" /> <path d="M26.7,440.1H11.3c-6.2,0-11.3,5.1-11.3,11.3c0,6.2,5.1,11.3,11.3,11.3h15.4C25.4,455.2,25.4,447.6,26.7,440.1z" /> </g> <polygon points="214.9,228.6 279.4,178 214.9,127.5   " /> </svg>
                                    </button>
                                </div>
                                
                            </div>
                            <div class="layout-fixed mgT8">
                                <div>
                                    <div class="layout-fixed w-auto-i left">
                                        <div class="text-title-4">Created date: </div>
                                        <div class="text-date-1 lowercase pdL3">{{item.startDateShow}}</div>
                                    </div>
                                </div>
                                <div>
                                    <div class="layout-fixed w-auto-i left">
                                        <div class="text-title-4">Due date: </div>
                                        <div class="text-date-1 lowercase pdL3">{{item.dueFrom}}</div>
                                        <div class="w15px text-center pdB2">
                                            <svg class="h6px" viewBox="0 0 14 14"> <g> <g> <path fill="#b1c7d7" d="M5.396,13.433C8.037,10.859,12,7,12,7S8.037,3.141,5.396,0.567C5.033,0.218,4.543,0,4,0    C2.896,0,2,0.896,2,2v10c0,1.104,0.896,2,2,2C4.543,14,5.033,13.782,5.396,13.433z" /> </g> </g> </svg>
                                        </div>
                                        <div class="text-date-1 lowercase">{{item.dueTo}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Address - City - Zip code</div>
                                            <div class="text">{{item.street.length > 0 ? item.street : 'N/A'}} - {{item.city.length > 0 ? item.city : 'N/A'}} - {{item.zipcode.length > 0 ? item.zipcode : 'N/A'}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Phone number</div>
                                            <div class="text">{{item.phone == null || item.phone == '' ? item.caller_id : item.phone}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Lead source</div>
                                            <div class="text">{{item.leadsource}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Representative</div>
                                            <div class="text">{{item.representative}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Assignee</div>
                                            <div class="text">{{item.assignName}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="text-title-4">Status</div>
                                    <div class="text">{{item.tabName == null || item.tabName == '' ? 'Call List' : item.tabName}}</div>
                                </div>
                                <div class="v-top-i">
                                    <div class="text-title-4">Sub status</div>
                                    <div class="text">{{item.tabName == null || item.tabName == '' ? item.direction : item.subTabName}}</div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Follow-Up</div>
                                            <div class="text" ng-if="item.description.length == 0 || item.description.length == null">N/A</div>
                                            <div class="text" ng-if="item.description.length != 0 && item.description.length != null">{{item.description}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-fixed mgT10">
                                <div class="v-top-i">
                                    <div class="layout-fixed">
                                        <div class="v-top-i">
                                            <div class="text-title-4">Fail note</div>
                                            <div class="text">{{item.followup_note}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="more-overlay clear" onclick="toggleExpand(this)" ng-click="resizes('scrollDisplayFilter')">
                            <div class="h40px layout-fixed w-auto-i center pdT10">
                                <div class="text-link-1 pdR10">
                                    <span class="more-text">See more</span>
                                    <span class="less-text">See less</span>
                                </div>
                                <div>
                                    <button type="button" class="more-icon bg-transparent pd0-i relative">
                                        <svg class="h12px clr-symbol-clickable" style="position: absolute; left: 4px; top: 1px" viewBox="0 0 210 210"> <path d="M25,80C11.215,80,0,91.215,0,105s11.215,25,25,25c13.785,0,25-11.215,25-25S38.785,80,25,80z" fill="#F19338 " /> <path d="M105,80c-13.785,0-25,11.215-25,25s11.215,25,25,25c13.785,0,25-11.215,25-25S118.785,80,105,80z" fill="#F19338 " /> <path d="M185,80c-13.785,0-25,11.215-25,25s11.215,25,25,25c13.785,0,25-11.215,25-25S198.785,80,185,80z" fill="#F19338" /> </svg>
                                        <svg class="h24px" viewBox="0 0 512 512">  <path style="fill:#1075BB;" d="M196.267,375.467H47.787C24.747,375.467,0,359.253,0,332.8V46.933C0,22.187,23.04,0,47.787,0h417.28  C489.813,0,512,22.187,512,46.933v243.2c0,5.12-3.413,8.533-8.533,8.533c-5.12,0-8.533-3.413-8.533-8.533v-243.2  c0-15.36-14.507-29.867-29.867-29.867H47.787c-15.36,0-30.72,14.507-30.72,29.867V332.8c0,15.36,16.213,25.6,30.72,25.6h148.48  c5.12,0,8.533,3.413,8.533,8.533S201.387,375.467,196.267,375.467" /> <path style="fill:#FDC794;" d="M375.467,512L263.68,396.8c-40.107-40.107-40.107-104.96,0-145.067l0,0  c40.107-40.107,104.96-40.107,145.067,0L512,349.867V512H375.467z" /> <path style="fill:#FFF;" d="M288.427,372.907l35.84,35.84c4.267,4.267,9.387,5.973,15.36,5.973l0,0  c46.933-3.413,83.627-40.107,87.04-87.04l0,0c0-5.973-1.707-11.093-5.973-15.36l-35.84-35.84c-26.453-26.453-69.973-26.453-96.427,0  l0,0C261.12,302.933,261.12,345.6,288.427,372.907" /> <path style="fill:#FFFFFF;" d="M366.933,354.133c-16.213,16.213-24.747,40.96-34.987,58.88c2.56,0.853,5.12,1.707,8.533,0.853  c46.933-3.413,83.627-40.107,87.04-87.04c0-2.56,0-4.267-0.853-6.827h-0.853C407.04,331.093,383.147,337.067,366.933,354.133" /> <path style="fill:#F9A671;" d="M418.133,477.867c-2.56,0-4.267-0.853-5.973-2.56c-3.413-3.413-3.413-8.533,0-11.947l55.467-55.467  c3.413-3.413,8.533-3.413,11.947,0c3.413,3.413,3.413,8.533,0,11.947l-55.467,55.467C422.4,477.013,420.693,477.867,418.133,477.867  " /> </svg>
                                    </button>
                                    <button type="button" class="less-icon bg-transparent pd0-i relative">
                                        <svg class="h16px clr-symbol-clickable" viewBox="0 0 407.437 407.437"> <polygon points="203.718,84.507 386.258,266.453 407.437,245.205 203.718,42.15 0,245.205 21.179,266.453  " /> <polygon points="0,344.039 21.179,365.287 203.718,183.341 386.258,365.287 407.437,344.039 203.718,140.984  " /> </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <ion-infinite-scroll on-infinite="LoadMoreDisplayFilter()" ng-if="checkLoadMoreDisplayFilter" distance="1%"> </ion-infinite-scroll>
            </ul>
        </ion-scroll>
    </div>
</div>
