<div [@routerTransition] class="locator">
    <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor grid-route-header">
        <div class="kt-subheader kt-grid__item" id="kt-subheader-controller">
            <div class="filter-location">
                    <select style="width: 100%;" (change)="onChange($event)" class="form-control kt-select2 mapLocation" data-placeholder="Select Location" id="locationSelectInputMap" tabindex="-1" aria-hidden="true" name="txtLocation" ngModel = {{filters.locationFilter}}>
                        <option  *ngFor="let location of locations" value="{{location.id}}" [selected]="location.id === txtLocation">{{location.name}}</option>
                    </select>
            </div>
            <div class="filter-date-range">
                <div class="input-group" id="map_datepicker">
                    <input type="text" class="form-control" readonly="" name="dateRangeFilter" placeholder="Select date range" #dr  id="dateRangeFilterMap">
                    <input type="hidden" class="form-control" readonly="" name="hiddenStartDate"  #dr ngModel = {{filters.startDate}} id="hiddenStartDateMap">
                    <input type="hidden" class="form-control" readonly="" name="hiddenEndDate"  #dr ngModel = {{filters.endDate}} id="hiddenEndDateMap">
                    <div class="input-group-append">
                        <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
                    </div>
                </div>
            </div>
			<div class="col-md-3 btnContainerHeader filter-button">
				<button class="btn btn-pill btn-badge btn-primary" (click)="showFlyOut(1)">{{"Apply" | localize}}</button>
                <button class="btn btn-pill btn-badge btn-primary btnToggleMore" id="getting_started_toggle" type="reset" (click)="showFlyOut(0)">{{"Filters" | localize}}</button>
			</div> 
			<div class="filter-interval">
			</div>
            
        </div>
        
    </div>

    <div>
        <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
            <div class="kt-portlet kt-portlet--mobile">
                <div class="kt-portlet__body body-map">
                    <div class="row align-items-center">
                        <div class="col-xl-12">
                            <agm-map 
                                [latitude]="lat"
                                [longitude]="lng"
                                (mapReady)="mapReady($event)"
                                [fitBounds]="markers.length > 0 || latestLog.length > 0 || delmarkers.length > 0 || driverP.length > 0"
                                [zoom]="zoom"
                                >
                                
                                <!-- [fitBounds]="markers.length > 0 || latestLog.length > 0 || delmarkers.length > 0 || driverP.length > 0" -->
                                <agm-marker 
                                    *ngFor="let m of latestLog; let i = index"
                                    [latitude]="m.lat"
                                    [longitude]="m.lng"
                                    [iconUrl]="null"
                                    [agmFitBounds]="true"
                                    [visible]="false"
                                    >
                                </agm-marker>
                                <agm-marker 
                                    *ngFor="let m of markers; let i = index"
                                    [latitude]="m.lat"
                                    [longitude]="m.lng"
                                    [iconUrl]="null"
                                    [agmFitBounds]="true"
                                    [visible]="false"
                                    >
                                </agm-marker>
                                <agm-marker 
                                    *ngFor="let m of delmarkers; let i = index"
                                    [latitude]="m.lat"
                                    [longitude]="m.lng"
                                    [iconUrl]="null"
                                    [agmFitBounds]="true"
                                    [visible]="false"
                                    >
                                </agm-marker>
                                <agm-marker 
                                    *ngFor="let m of driverP; let i = index"
                                    [latitude]="m.lat"
                                    [longitude]="m.lng"
                                    [iconUrl]="null"
                                    [agmFitBounds]="true"
                                    [visible]="false"
                                    >
                                </agm-marker>
                                
                                <!-- PickUp routesPin -->
                                <!-- <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m" maxZoom=14> -->
                                    <agm-overlay 
                                    *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng"
                                    >
                                        <span style="width:15px;height:15px;font-size: 30px;" [ngStyle]="{'color': m.color}">
                                            <i class="fas fa-map-marker"></i>
                                            <div style="position: absolute; height: inherit;width: 23px;top: 8px;text-align: center;">
                                                    <span style="font-size: 10px;color:#fff;position: relative;bottom: 18px;">{{m.label}}</span>
                                            </div>
                                        </span>
                                        <agm-info-window>
                                            <span>{{"PickUp" | localize}}</span><br>
                                            <span>{{"Driver" | localize}}: {{m.driverName}}</span><br>
                                            <span>{{"OrderId" | localize}}: {{m.orderId}}</span><br>
                                            <span *ngIf="laboratoryMapFeatureEdition == true">{{m.companyName}}</span><br>
                                            <span>{{"Eta" | localize}}: {{m.eta}}</span><br>
                                        </agm-info-window>
                                    </agm-overlay>
                                    
                                <!-- </agm-marker-cluster> -->
                                
                                <!-- Delivery routesPin -->
                                <!-- <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m" maxZoom=14> -->
                                    <div  *ngIf="laboratoryMapFeatureEdition == true; else elseBlock">

                                        <agm-overlay
                                            *ngFor="let m of delmarkers; let i = index"
                                            [latitude]="m.lat" [longitude]="m.lng"
                                        >
                                            <span style="width:15px;height:15px;font-size: 42px;" [ngStyle]="{'color': m.color}">
                                                <i class="fas fa-map-pin"></i>
                                                <span style="font-size: 10px;color:#fff;margin-left: -20px;position: absolute;margin-top: 8px;"></span>
                                            </span>
                                            <agm-info-window  *ngIf="m.driverName != null">
                                                <span>{{"Delivery" | localize}}</span><br>
                                                <span >{{m.companyName}}</span><br>
                                                <span>{{"Eta" | localize}}: {{m.eta}}</span><br>
                                                </agm-info-window>
                                        </agm-overlay>
                                    </div>

                                    <ng-template #elseBlock>
                                        <agm-overlay
                                            *ngFor="let m of delmarkers; let i = index" [latitude]="m.lat" [longitude]="m.lng"
                                            
                                        >
                                            <span style="width:15px;height:15px;font-size: 42px;" [ngStyle]="{'color': m.color}">
                                                <i class="fas fa-map-pin"></i>
                                                <span style="font-size: 10px;color:#fff;margin-left: -20px;position: absolute;margin-top: 8px;">{{m.label}}</span>
                                            </span>
                                            <agm-info-window>
                                                <span>{{"Delivery" | localize}}</span><br>
                                                <span>{{"Driver" | localize}}: {{m.driverName}}</span><br>
                                                <span>{{"OrderId" | localize}}: {{m.orderId}}</span><br>
                                                <span>{{"Eta" | localize}}: {{m.eta}}</span><br>
                                                <button class="btn btn-primary btn-elevate btn-pill btn-sm" (click)="moveOrder.show(m.orderId)">{{"MoveOrder" | localize}}</button>
                                                </agm-info-window>
                                        </agm-overlay>
                                    </ng-template>
                                    
                                <!-- </agm-marker-cluster> -->

                                <!-- Latest Location fleetsPin -->
                                <agm-overlay 
                                    *ngFor="let m of latestLog; let i = index" [latitude]="m.lat" [longitude]="m.lng"
                                    >
                                        <span style="width:15px;height:15px;font-size: 30px;" [ngStyle]="{'color': m.color}">
                                            <i class="fas fa-car"></i>
                                            <span style="font-size: 10px;color:#fff;margin-left: -20px;position: absolute;margin-top: 8px;"></span>
                                        </span>
                                        <agm-info-window>
                                            <span>Driver: {{m.driverName}}</span><br>
                                            <span>Time: {{m.eta}}</span><br>
                                        </agm-info-window>
                                </agm-overlay>
                                
                                <!-- driverPin -->
                                <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m" maxZoom=14>
                                    <agm-overlay 
                                        *ngFor="let m of driverP; let i = index" [latitude]="m.lat" [longitude]="m.lng"
                                        >
                                            
                                            <div class="speech-bubble" [ngStyle]="{'background': m.color, 'border-top-color': m.color}" style="border-left: 8px solid transparent;border-right: 8px solid transparent; border-radius: 25px;position: relative;left: -18%;">
                                                <span style="color:#fff;">{{m.label}}</span>
                                            </div>
                                            
                                            <agm-info-window>
                                                <span>Time: {{m.eta}}</span><br>
                                            </agm-info-window>
                                    </agm-overlay>
                                </agm-marker-cluster>
                                
                            </agm-map>
                            <mapFlyOutComponent #mapFlyOutComponent [filters] = 'filters' [route] = 'route'  [active] = 'active' *ngIf="laboratoryMapFeatureEdition == false"></mapFlyOutComponent>
                            <laboratoryMapFlyOutComponent #laboratoryMapFlyOutComponent [filters] = 'filters' [route] = 'route' [routeIds] = 'routeIds' [routeSel] = 'routeSel'  [active] = 'active' [activeD] = 'activeD' [activeF] = 'activeF' *ngIf="laboratoryMapFeatureEdition == true"></laboratoryMapFlyOutComponent> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <moveOrder #moveOrder [filters]="filters"></moveOrder>
</div>  
<!-- </div> -->
    