<!-- 
  🎯 Template do RouteLocationTrackerComponent - Rastreamento de Rotas
  
  Layout otimizado para exibir informações de localização de rotas,
  incluindo origem, destino, posição atual e histórico de movimentação.
-->

<div class="route-location-container">
  
  <!-- ========================================
       🎯 HEADER - Informações da Rota
       ======================================== -->
  <div class="route-header">
    <div class="route-info">
      <h3 class="route-title">
        <i class="fas fa-route"></i>
        {{ routeData?.routeNumber || 'RT-2024-001' }}
      </h3>
      <div class="route-meta">
        <span class="route-type">{{ getRouteTypeLabel() }}</span>
        <span class="route-status" [ngClass]="getRouteStatusClass()">
          {{ getRouteStatusLabel() }}
        </span>
      </div>
    </div>
    
    <div class="route-actions">
      <button 
        class="btn-refresh" 
        (click)="refreshLocation()" 
        [disabled]="isLoading"
        title="Atualizar localização">
        <i class="fas fa-sync-alt" [ngClass]="{'fa-spin': isLoading}"></i>
      </button>
    </div>
  </div>

  <!-- ========================================
       🎯 MAIN CONTENT - Grid de 4 Colunas
       ======================================== -->
  <div class="route-content-grid">
    
    <!-- Coluna 1: Informações da Rota -->
    <div class="info-card">
      <h4><i class="fas fa-info-circle"></i> Informações da Rota</h4>
      
      <div class="info-item">
        <strong>Veículo:</strong> {{ routeData?.vehiclePlate || 'ABC-1234' }}
      </div>
      
      <div class="info-item">
        <strong>Motorista:</strong> {{ routeData?.driverName || 'João Silva' }}
      </div>
      
      <div class="info-item">
        <strong>Partida Programada:</strong> 
        {{ formatDateSafe(routeData?.scheduledDeparture) || '21/05/2024 - 08:00' }}
      </div>
      
      <div class="info-item">
        <strong>Chegada Programada:</strong> 
        {{ formatDateSafe(routeData?.scheduledArrival) || '21/05/2024 - 18:00' }}
      </div>
      
      <div class="info-item">
        <strong>Última Atualização:</strong> 
        <span class="timestamp">21/05/2024 - 14:32</span>
      </div>
    </div>

    <!-- Coluna 2: Origem -->
    <div class="location-card origin-card">
      <h4><i class="fas fa-map-marker-alt origin-icon"></i> Origem</h4>
      
      <div class="location-address">
        {{ routeData?.origin?.address || 'Av. Paulista, 1000 - Bela Vista' }}
      </div>
      
      <div class="location-city">
        {{ routeData?.origin?.city || 'São Paulo' }} - {{ routeData?.origin?.state || 'SP' }}
      </div>
      
      <div class="location-zipcode">
        CEP: {{ routeData?.origin?.zipCode || '01310-100' }}
      </div>
      
      <div class="location-status">
        <span class="status-badge status-completed">
          <i class="fas fa-check"></i> Coleta Realizada
        </span>
      </div>
    </div>

    <!-- Coluna 3: Posição Atual -->
    <div class="location-card current-card">
      <h4><i class="fas fa-crosshairs current-icon"></i> Posição Atual</h4>
      
      <div class="current-location" *ngIf="!isAddressLoading; else loadingAddress">
        <div class="location-address">
          {{ currentAddress || 'Rua Augusta, 500 - Consolação' }}
        </div>
        
        <div class="location-city">
          São Paulo - SP
        </div>
        
        <div class="location-coordinates" *ngIf="routeData?.currentLocation">
          {{ routeData?.currentLocation?.latitude }}, {{ routeData?.currentLocation?.longitude }}
        </div>
      </div>
      
      <ng-template #loadingAddress>
        <div class="loading-address">
          <i class="fas fa-spinner fa-spin"></i>
          Carregando endereço...
        </div>
      </ng-template>
      
      <div class="location-status">
        <span class="status-badge status-progress">
          <i class="fas fa-truck"></i> Em Trânsito
        </span>
      </div>
    </div>

    <!-- Coluna 4: Destino -->
    <div class="location-card destination-card">
      <h4><i class="fas fa-flag-checkered destination-icon"></i> Destino</h4>
      
      <div class="location-address">
        {{ routeData?.destination?.address || 'Rua das Flores, 123 - Vila Madalena' }}
      </div>
      
      <div class="location-city">
        {{ routeData?.destination?.city || 'São Paulo' }} - {{ routeData?.destination?.state || 'SP' }}
      </div>
      
      <div class="location-zipcode">
        CEP: {{ routeData?.destination?.zipCode || '05435-010' }}
      </div>
      
      <div class="location-status">
        <span class="status-badge status-pending">
          <i class="fas fa-clock"></i> Aguardando
        </span>
      </div>
    </div>
  </div>

  <!-- ========================================
       🎯 MAPA INTEGRADO
       ======================================== -->
  <div class="map-section">
    <h4><i class="fas fa-map"></i> Localização no Mapa</h4>
    
    <div class="map-container">
      <iframe 
        [src]="getMapEmbedUrl()"
        width="100%" 
        height="400"
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade">
      </iframe>
    </div>
  </div>

  <!-- ========================================
       🎯 HISTÓRICO DE LOCALIZAÇÕES
       ======================================== -->
  <div class="history-section">
    <h4><i class="fas fa-history"></i> Histórico de Localizações</h4>
    
    <div class="history-container" *ngIf="!isHistoryLoading; else loadingHistory">
      <div 
        class="history-item" 
        *ngFor="let item of locationHistory; let first = first"
        [ngClass]="{'current-location': first}">
        
        <div class="history-time">
          {{ formatDate(item.timestamp) }}
        </div>
        
        <div class="history-status">
          <span class="status-badge" [ngClass]="getHistoryStatusClass(item.status)">
            {{ item.status | titlecase }}
          </span>
        </div>
        
        <div class="history-address">
          {{ item.address }}
        </div>
        
        <div class="history-details" *ngIf="item.speed">
          <span class="speed-info">
            <i class="fas fa-tachometer-alt"></i>
            {{ item.speed }} km/h
          </span>
        </div>
        
        <div class="history-description" *ngIf="item.description">
          {{ item.description }}
        </div>
      </div>
    </div>
    
    <ng-template #loadingHistory>
      <div class="loading-history">
        <i class="fas fa-spinner fa-spin"></i>
        Carregando histórico de localizações...
      </div>
    </ng-template>
    
    <div class="history-actions">
      <button class="btn-load-more" (click)="loadMoreHistory()">
        <i class="fas fa-plus"></i>
        Carregar mais registros
      </button>
    </div>
  </div>
</div> 