<!-- begin::Quick Sidebar -->
<div class="kt-quick-panel__content">
    
    <div class="kt-portlet__head">
        <span class="pull-left flyout-title">
            {{"Filters" | localize}}
        </span>
        <a href="javascript:;" class="kt-quick-panel__close quick-panel-action-button" id="getting_started_close">
            <i class="flaticon2-delete"></i>
        </a>
    </div>
    <div class="kt-portlet__body">
        <div>
            <div class="btn-group" role="group" aria-label="Basic example">
                <span class="btn btn-xl float-right" [ngClass]="active == 1 ? 'clicked' : ''">{{"Route" | localize}}</span>
                <button class="btn btn-xl float-right" [ngClass]="activeF == 1 ? 'clicked' : ''" (click)="plotFleetMarker()">{{"Fleet" | localize}}</button>
                <button class="btn btn-xl float-right" [ngClass]="activeD == 1 ? 'clicked' : ''" (click)="plotDriverMarker()">{{"Driver" | localize}}</button>
            </div>
            <button class="btn btn-primary btn-pill btn-badge btn-xl float-right" (click)="plotRouteMarker()">{{"Apply" | localize}}</button>
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <ng-select 
                            #select
                            class="custom"
                            [closeOnSelect]="false" 
                            [items]="data" 
                            bindValue="routeId" 
                            bindLabel="searchTerm"
                            [multiple]="true" 
                            [(ngModel)]="routeSel" 
                            (add)="addRoute($event)"
                            (remove)="plotRouteMarker()" 
                            (clear)="clearAll()"
                            [searchable]="false">
                            <ng-template ng-header-tmp>
                                <input style="width: 100%; line-height: 24px" type="text" (input)="select.filter($event.target.value)" placeholder="Search"/>
                                <hr>
                                <button (click)="selectAll()" class="btn btn-sm btn-secondary">Select all</button>
                                <button (click)="unselectAll()" class="btn btn-sm btn-secondary">Unselect all</button>
                            </ng-template>
                            
                            <ng-template ng-label-tmp let-item="item">
                                    <span style="padding:10px; display: block;"  [ngStyle]="{'background-color': item.color}">
                                            <span style="background-color: #000; color:#fff ;padding:2px 4px; display: block;"> {{item.searchTerm}} </span>
                                        </span>
                            </ng-template>
                                
                            <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="routeId" let-search="searchTerm" >
                                <input id="item-{{routeId}}" type="checkbox" [ngModel]="item$.selected"/>
                                {{item.searchTerm}}
                            </ng-template>
                        </ng-select>
                    </div>
                </div>
                <hr>
                
                <div class="row">
                    <div class="col-md-9">
                        <ng-select 
                            #select2
                            class="custom"
                            [closeOnSelect]="true" 
                            [items]="locations" 
                            bindValue="geocode" 
                            bindLabel="companyName"
                            [(ngModel)]="recenter" 
                            [searchable]="false">
                            <ng-template ng-header-tmp>
                                <input style="width: 100%; line-height: 24px" type="text" (input)="select2.filter($event.target.value)" placeholder="Search"/>
                            </ng-template>
                                
                            <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="geocode" let-search="companyName" >
                                {{item.companyName}}
                            </ng-template>
                        </ng-select>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-primary btn-pill btn-badge btn-xs float-right" (click)="reCenteMap()">{{"Go" | localize}}</button>
                    </div>
                </div>
                <hr>
            </div>

            <div>
                <div class="row">
                    <div class="col-md-4" *ngFor="let item of routeType; let i = index" >
                        <label class="col-form-label center">{{item.description}}</label>
                        <div style="text-align: center;">
                            <span class="kt-switch kt-switch--icon-check" >
                                <label>
                                    <input type="checkbox" [name]="item.routeTypeCode" [checked]="true" (click)="clickRouteType($event, item.id)">
                                    <span [ngStyle]="{'background-color': item.displayColor}" ></span>
                                </label>
                            </span>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="legendClass">
                    <div class="kt-portlet__head">
                        <div class="kt-portlet__head-label">
                            <h3 class="kt-portlet__head-title">
                                {{'Legend' | localize}}
                            </h3>
                        </div>
                    </div>
                    <div class="kt-portlet__body">
                        <div>
                            <i class="fas fa-map-marker"></i>&nbsp;&nbsp;&nbsp;{{'PickUp' | localize}}
                        </div>
                        <div>
                            <i class="fas fa-map-pin"></i>&nbsp;&nbsp;&nbsp;{{'Delivery' | localize}}
                        </div>
                        <div>
                            <i class="fas fa-car"></i>&nbsp;&nbsp;&nbsp;{{'VechicleLocation' | localize}}
                        </div>
                </div>
            </div>
        </div>
    </div>  
</div>
