<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">{{setCustomerName(customerDetail.company_name,customerDetail.first_name,customerDetail.last_name)}}</div>
                <div class="app-content-header bg-header-1">
                    <div class="layout-fixed mgT10">
                        <div class="text-title-header-1 nowrap pdL40">{{appointmenthistory.length}} Appointment</div>
                        <div class="w40px clear pdR10">
                            <button class="app-setting-icon bg-transparent right biger-3-time" ng-click="openAutocomplete('ion-autocomplete-jobsite-filter')" ng-if="dataJobsiteToAutocomplete.length > 0"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button class="popup-back-button bg-transparent pd0-i biger-3-time" type="button" ng-click="closeTarget('#customerDetailPopupAppointmentHistory')"></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="scrollAppointmentHistory" on-scroll="scrollContent('scrollAppointmentHistory')">
            <input autocomplete="off"
                   class="ion-autocomplete-jobsite-filter hidden"
                   ion-autocomplete=""
                   item-value-key="id"
                   item-view-value-key="name"
                   items-clicked-method="onSelectJobsite(callback)"
                   items-removed-method="onRemoveJobsite(callback)"
                   items-method="filterAppoinmentHistory(query)"
                   items-method-value-key="items"
                   max-selected-items="1"
                   external-model="initialJobsiteFilter"
                   model-to-item-method="modelToItemMethodJobsiterFilter(modelValue)"
                   ng-model="autocomplete.jobsiteFilter"
                   placeholder="Find"
                   readonly="readonly" type="text"
                   style="width: 100vw" ng-if="dataJobsiteToAutocomplete.length > 0" />
            <div class="box-setting-4 full-w-i" ng-if="appointmenthistory.length == 0">
                <div class="content content-in">
                    <div class="itm row-one-content">
                        <div class="text">There are no appointments yet. there are no appointments at this jobsite.</div>
                    </div>
                </div>
            </div>
            <div class="stripe-1">
            <div class="box-setting-4 full-w-i" ng-repeat="(key, appointmentHistoryItem) in appointmenthistory">
                <div class="content content-in">
                    <div class="itm no-saperator">
                        <div class="layout-fixed">
                            <div class="w25px v-top-i pdT5">
                                <div class="stt-1">{{ key + 1}}</div>
                            </div>
                            <div ng-click="redirectTo(locationGetSchedule+'?appointment_id=' + appointmentHistoryItem.id + '&org_page=customers')">
                                <div class="name clr-clickable capitalize">{{ appointmentHistoryItem.fieldworkerName}} - {{appointmentHistoryItem.dateofappt == 'To Schedule' ? appointmentHistoryItem.dateofappt : changeDatetime('DT2D', appointmentHistoryItem.dateofappt)}} - {{ appointmentHistoryItem.appointmentgroupsName}}</div>
                            </div>
                            <div class="w30px clear v-top-i relative">
                                <button class="bg-transparent right biger-3-time" onclick="openQuickOption(this)">
                                    <svg class="h16px clr-symbol-clickable" viewBox="0 0 512 512"> <circle fill="#1075BB" cx="61.793" cy="256" r="61.793" /> <circle fill="#1075BB" cx="450.207" cy="256" r="61.793" /> <circle fill="#1075BB" cx="256" cy="256" r="61.793" /> </svg>
                                </button>
                                <div class="quick-popup box-popup-1 display-top-right mgT20" onclick="closeQuickOption(this)">
                                    <div class="popup-content w150px">
                                        <ul class="list-item-03">
                                            <li ng-click="viewAppnote(appointmentHistoryItem.officeNote, appointmentHistoryItem.fieldworkerNote,'all')">
                                                <div class="layout-fixed">
                                                    <div class="icon-area">
                                                        <svg class="h15px" viewBox="0 0 285 285"> <path d="M216.818,271.424H26.821V81.427h61.713c3.748,0,6.788-3.04,6.788-6.788V13.576h121.496v29.246    c0.3-0.037,0.591-0.115,0.903-0.127c1.753-0.068,5.165,0.019,9.708,1.237c0.909,0.235,1.917,0.572,2.965,0.934V6.788    c0-3.748-3.04-6.788-6.788-6.788H87.894c-1.8,0-3.532,0.714-4.803,1.985l-67.86,67.861c-1.271,1.271-1.985,2.993-1.985,4.793    v203.583c0,3.741,3.04,6.778,6.788,6.778h203.573c3.748,0,6.788-3.037,6.788-6.778V173.01c-3.68,3.612-8.554,5.592-13.576,5.765    L216.818,271.424L216.818,271.424z" fill="#FFF" /> <path d="M267.485,46.164c-4.305-4.305-7.768-4.289-8.139-4.268c-0.52,0.016-1.015,0.235-1.379,0.597l-15.422,15.422    c2.242,1.395,4.704,3.278,7.301,5.875c2.61,2.61,4.49,5.068,5.888,7.308L271.14,55.68c0.377-0.371,0.587-0.857,0.612-1.376    C271.771,53.917,271.783,50.469,267.485,46.164z" fill="#FFF" /> <path d="M254.571,110.462l-7.465,7.465l-4.966-4.96l13.347-13.347c1.15-1.15,1.831-2.703,1.905-4.323    c0.049-1.206,0.111-12.088-13.421-25.621c-13.529-13.539-24.412-13.467-25.621-13.427c-1.63,0.081-3.17,0.761-4.32,1.911    L98.851,173.325c-0.708,0.705-1.252,1.584-1.565,2.549l-16.124,48.372c-0.779,2.338-0.173,4.917,1.581,6.673    c1.735,1.744,4.32,2.345,6.655,1.565l48.384-16.131c0.959-0.321,1.818-0.865,2.533-1.552l97.032-97.035l4.958,4.96l-30.996,30.986    c-2.65,2.66-2.65,6.946,0,9.605c1.33,1.33,3.062,1.985,4.802,1.985c1.732,0,3.473-0.655,4.793-1.985l43.267-43.263    c2.647-2.647,2.647-6.939,0-9.593C261.517,107.809,257.218,107.809,254.571,110.462z" fill="#FFF" /> </svg>
                                                    </div>
                                                    <div class="name-area text-link-1">
                                                        Appoinment logs
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="popup-overlay"></div>
                                </div>
                            </div>
                        </div>
                        <div class="pdL25 layout-ov-640-pdL25 mgT10">
                            <div class="subname clr-black">{{appointmentHistoryItem.first_name + ' ' + appointmentHistoryItem.last_name}}</div>
                            <div class="text">{{appointmentHistoryItem.officeapptnote}}</div>
                        </div>
                        <div class="pdL25 layout-ov-640-pdL25 mgT10">
                            <div class="subname clr-black">{{appointmentHistoryItem.fieldworkerName}}</div>
                            <div class="text-toggleable text" ng-bind-html="toggleText(appointmentHistoryItem.fieldworkernote, 170, 200, 'more', 'less')" onclick="toggleTextExpand(this)" ng-click="resizeScroll('scrollAppointmentHistory')"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
        </ion-scroll>
    </div>
</div>
