<!-- 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">
        <!-- <span class="pull-left" style="font-size: 18px;">
            {{"Routes" | localize}}
        </span> -->
        <div>
            <div class="btn-group" role="group" aria-label="Basic example">
                <button class="btn btn-xl float-right" [ngClass]="active == 1 ? 'clicked' : ''" (click)="routeClick()">{{"Route" | localize}}</button>
                <button class="btn btn-xl float-right" [ngClass]="active == 2 ? 'clicked' : ''" (click)="fleetClick()">{{"Fleet" | localize}}</button>
                <button class="btn btn-xl float-right" [ngClass]="active == 3 ? 'clicked' : ''" (click)="driverClick()">{{"Driver" | localize}}</button>
            </div>
            <button class="btn btn-primary btn-pill btn-badge btn-xl float-right" (click)="applyFilter()">{{"Apply" | localize}}</button>
            <hr>
            <div class="row" *ngIf="active == 1">
                
                    <!-- (add)="plotRouteMarker()" 
                    (remove)="plotRouteMarker()"  -->
                    <ng-select 
                        #select
                        class="custom"
                        [closeOnSelect]="false" 
                        [items]="data" 
                        bindValue="routeId" 
                        bindLabel="zone"
                        [multiple]="true" 
                        [(ngModel)]="route" 
                        (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' | localize}}"/>
                            <hr>
                            <button (click)="selectAll()" class="btn btn-sm btn-secondary">{{"SelectAll" | localize}}</button>
                            <button (click)="unselectAll()" class="btn btn-sm btn-secondary">{{"UnselectAll" | localize}}</button>
                        </ng-template>
                        
                        <ng-template ng-label-tmp let-item="item">
                            <span style="padding:10px; display: block;"  [ngStyle]="{'background-color': routeRandColor[item.routeId]}">
                                    <span style="background-color: #000; color:#fff ;padding:2px 4px; display: block;">{{item.zone}}</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.zone}}
                        </ng-template>
                    </ng-select>
            </div>
 
            <!-- (add)="plotFleetMarker()" 
            (remove)="plotFleetMarker()"  -->
            <div class="row" *ngIf="active == 2">
                    <ng-select 
                    #select
                    class="custom"
                    [closeOnSelect]="false" 
                    [items]="data" 
                    bindValue="userId" 
                    bindLabel="fullName"
                    [multiple]="true" 
                    [(ngModel)]="driver"
                    (clear)="clearAll()"
                    (add)="addRouteId($event)"
                    [searchable]="false">
                    <ng-template ng-header-tmp>
                        <input style="width: 100%; line-height: 24px" type="text" (input)="select.filter($event.target.value)" placeholder="Driver Name"/>
                        <hr>
                        <button (click)="selectAll()" class="btn btn-sm btn-secondary">{{"SelectAll" | localize}}</button>
                        <button (click)="unselectAll()" class="btn btn-sm btn-secondary">{{"UnselectAll" | localize}}</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.name}}
                            </span>
                        </span>
                    </ng-template>
                        
                    <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="userId" let-search="searchTerm" >
                        <input id="item-{{userId}}" type="checkbox" [ngModel]="item$.selected"/>
                        {{item.name}}
                    </ng-template>
                </ng-select>
            </div>

            <!-- (add)="plotDriverMarker()" 
            (remove)="plotDriverMarker()"  -->
            <div class="row" *ngIf="active == 3">
                <ng-select 
                    #select
                    class="custom"
                    [closeOnSelect]="false" 
                    [items]="data" 
                    bindValue="userId" 
                    bindLabel="fullName"
                    [multiple]="true" 
                    [(ngModel)]="driver" 
                    (clear)="clearAll()"
                    (add)="addRouteId($event)"
                    [searchable]="false">
                    <ng-template ng-header-tmp>
                        <input style="width: 100%; line-height: 24px" type="text" (input)="select.filter($event.target.value)" placeholder="Driver Name"/>
                        <hr>
                        <button (click)="selectAll()" class="btn btn-sm btn-secondary">{{"SelectAll" | localize}}</button>
                        <button (click)="unselectAll()" class="btn btn-sm btn-secondary">{{"UnselectAll" | localize}}</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.name}}</span>
                                </span>
                    </ng-template>
                        
                    <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="userId" let-search="searchTerm" >
                        <input id="item-{{userId}}" type="checkbox" [ngModel]="item$.selected"/>
                        {{item.name}}
                    </ng-template>
                </ng-select>
            </div>
            <hr>
        </div>

        <div>
            <div class="row">
                <label class="col-md-6 col-form-label">{{'ShowDeliveryPoints' | localize}}:</label>
                <div class="col-md-6">
                    <span class="kt-switch kt-switch--icon-check">
                        <label>
                            <input type="checkbox" name="deliveryCheck" (click)="showDelivery($event)" [checked]="deliveryCheck">
                            <span></span>
                        </label>
                    </span>
                </div>
                <label class="col-md-6 col-form-label">{{'ShowPickUpPoints' | localize}}:</label>
                <div class="col-md-6">
                    <span class="kt-switch kt-switch--icon-check">
                        <label>
                            <input type="checkbox" name="pickupCheck" (click)="showPickUp($event)" [checked]="pickupCheck">
                            <span></span>
                        </label>
                    </span>
                </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>

                <!-- <h3>{{'Legend' | localize}}</h3>
                <div>
                    <i class="fas fa-map-marker"></i>{{'Destination' | localize}}
                </div>
                <div>
                    <i class="fas fa-car"></i>{{'VechicleLocation' | localize}}
                </div>
            </div> -->
        </div>
    </div>  
</div>
