<ion-header no-border>
  <ion-navbar transparent>
    <button ion-button menuToggle>
      <ion-icon name="menu-outline"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<!--<div class="findme" (click)="gotome()"><img src="assets/img/findme.png" /></div>-->

<div *ngIf="checkStart== 'iniciado'" class="waze" (click)="waze()">
  <img src="assets/img/waze.png" />
  <span>Usar Waze</span>
</div>
<!--
<div *ngIf="checkStart== 'iniciado'" class="gmaps" (click)="gmaps()"><img src="assets/img/gmaps.png" /></div>
-->

<agm-map [latitude]="latitude" [clickableIcons]="clickableIcons" [longitude]="longitude" [styles]="styles" [zoom]="zoom" [zoomControl]="false" id="map" [streetViewControl]="false" (onMapLoad)='loadAPIWrapper($event)'>
  <agm-marker [visible]="checkStart != 'iniciado'" [latitude]="latitude" [longitude]="longitude" [iconAnchorX]="5" [iconAnchorY]="5" [iconHeight]="10" [iconWidth]="10" [iconUrl]="'assets/img/icono.go.png'">
    <agm-info-window><b>Estás aquí</b></agm-info-window>
  </agm-marker>
  <agm-direction [visible]="checkStart == 'iniciado'" (onChange)="changeDirectionConductor($event)" [origin]="origin" [destination]="destination" [renderOptions]="renderOptions" [markerOptions]="markerOptions"></agm-direction>
</agm-map>
<div *ngIf="checkStart == 'iniciado'" class="bubble_driver_info">
  Llegada en: {{driverInformation.timer}} <br />
  Distancia: {{driverInformation.distance}} <br />
  Referencia: {{driverInformation.actual}}
</div>

<ion-pullup (onExpand)="footerExpanded()" class="PullContainer" (onCollapse)="footerCollapsed()" [(state)]="footerState">
  <ion-pullup-tab [footer]="pullup" (tap)="toggleFooter()" class="pullUp_">
    <ion-icon class="arrowUp" *ngIf="footerState == 0"></ion-icon>
    <ion-icon class="arrowDown" *ngIf="footerState == 1"></ion-icon>
  </ion-pullup-tab>
  <div align="center" (tap)="toggleFooter()" class="toolbar_">
    <h3>Servicios</h3>
  </div>
  <ion-content class="MapContent">
    <div *ngIf="checkStart== 'iniciado'" text-center>
        <!--<ion-img class="truckLo"></ion-img>-->
        <br>
        <h4><b>DESTINO:</b><br /> {{voy}}</h4>
        <br>
        <button ion-button full color="primary" (tap)="stop(idServIniciado,'entregado')">
          Entregado
        </button>
        <br />
        <button ion-button full color="danger" (tap)="stop(idServIniciado,'devuelto')">
          Devuelto
        </button>
        <br />
        <b>Comentario cliente:</b><br />
        {{comentario}}
    </div>
    <ion-row>
      <div *ngIf="checkStart== 'NoIniciado'" class="noinit">
      <div *ngIf="arrayService.length == 0" text-center><h4>No tienes servicios pendiente</h4></div>
      <ion-col col-12 col-xl-6 *ngFor="let data of arrayService; let i=index">
          <ion-card class="schedu-list" text-wrap (tap)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" no-padding align="center">
            <ion-row no-padding>
              <!--
              <div *ngIf="data.status == '5' && data.is_evaluate =='1'" class="clsTerminado" align="center">
                <label class="fnt-Terminado">TERMINADO - PATENTE {{data.plate}}</label>
              </div>
              -->
              <div *ngIf="data.status == '3'  || data.status == '7'" class="clsEnCurso" align="center">
                <label class="fnt-Terminado">POR INICIAR (A {{(getDistanceFromLatLonInKm(latitude,longitude,data.lat,data.lng))}} KM)</label>
              </div>
              <!--
              <div *ngIf="data.status == '5' && data.is_evaluate =='0'" class="clsPorValorizar" align="center">
                <div (click)="valorizar()">
                  <label class="fnt-Terminado">VALORIZAR - PATENTE {{data.plate}}</label>
                  <ion-icon class="iconStar"></ion-icon>
                </div>
              </div>
              <div *ngIf="data.status == '1' && data.is_evaluate =='0'" class="clsEnEspera" align="center">
                <label class="fnt-Espera">EN ESPERA - PATENTE {{data.plate}}</label>
              </div>
              -->
            </ion-row>
            <ion-row no-padding class="containerItem">
              <ion-col col-3 class="wraperColumn">
                  <table width="100%">
                      <tr align="center">
                          <label class="medium">
                            <b>CLIENTE</b>
                          </label>
                        </tr>
                    <tr align="center">
                    <label class="small">
                      {{data.user_fullname}}
                    </label>
                  </tr>
                </table>
              </ion-col>
              <ion-col col-6 align="center" class="itemCenter">
                <label class="fntTitLabel">
                  <strong>Pedido:</strong> # {{data.id}}
                </label>
                <!--
                <label class="fntTitLabel">
                  
                </label>
                -->
                <br>
                <button ion-button round (tap)="start(data.id,data.lat,data.lng,data.address_street,data.address_city,data.notes)" class="btn btn-iniciar">
                  INICIAR
                </button>
                <br />
                {{data.notes}}
              </ion-col>
              <ion-col col-3 class="wraperColumnRight">
                <br>
                <table width="100%">
                    <tr align="center">
                        <label class="medium">
                          <b>ENTREGA</b>
                        </label>
                      </tr>
                  <tr align="center">
                    <label class="small" style="text-transform:uppercase;">
                      {{data.address_street}}, {{data.address_city}}
                    </label>
                  </tr>
                </table>
              </ion-col>
            </ion-row>
          </ion-card>
      </ion-col>
    </div>
    </ion-row>
  </ion-content>
</ion-pullup>
