

<!-- 📍 RouteStops Container - Layout com Sidebar -->
<div class="route-stops-container">
  
  <!-- 🗺️ ÁREA PRINCIPAL DO MAPA - SEMPRE VISÍVEL -->
  <div class="map-main-area">
    
    <!-- 🔄 Loading Estado -->
    <div *ngIf="isLoading" class="map-loading-state">
      <div class="d-flex align-items-center justify-content-center h-100">
        <div class="text-center">
          <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">Carregando...</span>
          </div>
          <h5>Carregando Paradas</h5>
          <p class="text-muted">Preparando mapa e dados...</p>
        </div>
      </div>
    </div>
    
    <!-- 🗺️ MAPA - Sempre renderizar, independente de ter paradas ou não -->
    <app-route-map
      *ngIf="!isLoading"
      #routeMap
      [routeSteps]="[]"
      [selectedStopId]="selectedRouteStop?.id || null"
      [isOnline]="isOnline"
      [vehicleGpsTrack]="vehicleGpsTrack"
      [showGpsTrack]="showGpsTrack"
      [showPlannedRoute]="showPlannedRoute"
      [showCurrentRoute]="showCurrentRoute"
      [currentRouteOrigin]="currentRouteOrigin"
      [currentRouteDestination]="currentRouteDestination"
      (stopSelected)="onMapStopClick($event)"
      (mapReady)="onMapReady($event)"
      (currentRouteCalculated)="onCurrentRouteCalculated($event)"
      (plannedRouteToggled)="showPlannedRoute = $event"
      (gpsTrackToggled)="showGpsTrack = $event"
      (currentRouteToggled)="showCurrentRoute = $event">
    </app-route-map>
  </div>
  
  <!-- 📋 SIDEBAR DIREITA - Lista de Paradas -->
  <div class="sidebar-right">
    <div class="sidebar-content">
      
      <!-- Header da Sidebar -->
      <div class="sidebar-header">
        <h3>
          <i class="fas fa-list-ol"></i>
          Paradas da Rota
        </h3>
        <div class="sidebar-stats">
          <span class="badge bg-primary">{{ routeStops.length }}</span>
          <div class="connection-status">
            <i class="fas fa-circle" [class.text-success]="isOnline" [class.text-warning]="!isOnline"></i>
            <small>{{ isUsingFallback ? 'Offline' : 'Online' }}</small>
          </div>
        </div>
      </div>
      
      <!-- Conteúdo da Sidebar -->
      <div class="sidebar-body">
        
        <!-- Estado de Carregamento -->
        <div *ngIf="isLoading" class="loading-state">
          <div class="d-flex align-items-center justify-content-center p-3">
            <div class="spinner-border text-primary me-2" role="status">
              <span class="visually-hidden">Carregando...</span>
            </div>
            <span>Carregando...</span>
          </div>
        </div>
        
        <!-- Lista de Paradas -->
        <div *ngIf="!isLoading && routeStops.length > 0" class="stops-list-sidebar">
          <div 
            *ngFor="let stop of routeStops; let i = index"
            class="stop-card-sidebar"
            [class.selected]="selectedRouteStop?.id === stop.id"
            (click)="onStopSelected(stop)">
            
            <!-- Número da Sequência -->
            <div class="stop-sequence-sidebar">
              {{ stop.sequence }}
            </div>
            
            <!-- Informações da Parada -->
            <div class="stop-info-sidebar">
              <div class="stop-address-sidebar">
                <strong>{{ stop.location.address }}</strong>
              </div>
              <div class="stop-location-sidebar">
                <small class="text-muted">
                  {{ stop.location.city }} - {{ stop.location.state }}
                </small>
              </div>
              <div class="stop-badges-sidebar">
                <span class="badge badge-sm" 
                      [class.bg-primary]="stop.type === 'pickup'"
                      [class.bg-success]="stop.type === 'delivery'"
                      [class.bg-warning]="stop.type === 'fuel'"
                      [class.bg-info]="stop.type === 'rest'">
                  {{ getTypeLabel(stop.type) }}
                </span>
                <span class="badge badge-sm bg-secondary ms-1">
                  {{ getStatusLabel(stop.status) }}
                </span>
              </div>
            </div>
            
            <!-- Ações da Parada -->
            <div class="stop-actions-sidebar">
              <button 
                class="btn btn-xs btn-outline-primary"
                (click)="onStopEdit(stop); $event.stopPropagation()"
                title="Editar">
                <i class="fas fa-edit"></i>
              </button>
              <button 
                class="btn btn-xs btn-outline-success"
                (click)="onMapStopClick(stop); $event.stopPropagation()"
                title="Localizar">
                <i class="fas fa-map-marker-alt"></i>
              </button>
              <button 
                class="btn btn-xs btn-outline-danger"
                (click)="onStopDelete(stop); $event.stopPropagation()"
                title="Remover">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- Estado Vazio -->
        <div *ngIf="!isLoading && routeStops.length === 0" class="empty-state-sidebar">
          <div class="text-center p-3">
            <i class="fas fa-map-pin fa-2x text-muted mb-2"></i>
            <h6>Nenhuma parada</h6>
            <p class="text-muted small">Adicione paradas para começar.</p>
            <button class="btn btn-sm btn-primary" (click)="onNewStopClick()">
              <i class="fas fa-plus"></i> Adicionar
            </button>
          </div>
        </div>
      </div>
      
      <!-- Footer da Sidebar -->
      <div class="sidebar-footer" *ngIf="routeStops.length > 0">
        <div class="sidebar-summary">
          <small class="text-muted">
            <strong>{{ routeStops.length }}</strong> paradas
            <span *ngIf="getStopsWithFiscalDocuments() > 0">
              • <strong>{{ getStopsWithFiscalDocuments() }}</strong> com docs
            </span>
          </small>
        </div>
        <button class="btn btn-sm btn-primary w-100 mt-2" (click)="onNewStopClick()">
          <i class="fas fa-plus"></i> Nova Parada
        </button>
      </div>
    </div>
    
    <!-- 📝 PAINEL DE DETALHES (expansível) -->
    <div class="details-panel" *ngIf="selectedRouteStop && !isFormVisible" [class.expanded]="showDetailsPanel">
      <div class="details-header">
        <h5>
          <i class="fas fa-info-circle"></i>
          Parada {{ selectedRouteStop.sequence }}
        </h5>
        <button 
          class="btn btn-sm btn-outline-secondary"
          (click)="toggleDetailsPanel()"
          title="Expandir/Recolher">
          <i class="fas" [class.fa-chevron-up]="showDetailsPanel" [class.fa-chevron-down]="!showDetailsPanel"></i>
        </button>
      </div>
      
      <div class="details-body" *ngIf="showDetailsPanel">
        <!-- Endereço -->
        <div class="detail-item">
          <i class="fas fa-map-marker-alt text-primary"></i>
          <div>
            <strong>{{ selectedRouteStop.location.address }}</strong>
            <br><small class="text-muted">{{ selectedRouteStop.location.city }} - {{ selectedRouteStop.location.state }}</small>
          </div>
        </div>
        
        <!-- Documento Fiscal -->
        <div class="detail-item" *ngIf="selectedRouteStop.fiscalDocument">
          <i class="fas fa-file-invoice text-info"></i>
          <div>
            <strong>{{ selectedRouteStop.fiscalDocument.documentType }}</strong>
            <br><small>{{ selectedRouteStop.fiscalDocument.documentNumber }}</small>
            <br><small class="text-success">R$ {{ selectedRouteStop.fiscalDocument.totalValue | number:'1.2-2' }}</small>
          </div>
        </div>
        
        <!-- Observações -->
        <div class="detail-item" *ngIf="selectedRouteStop.notes">
          <i class="fas fa-sticky-note text-warning"></i>
          <div>
            <strong>Observações</strong>
            <br><small>{{ selectedRouteStop.notes }}</small>
          </div>
        </div>
        
        <!-- Ações -->
        <div class="detail-actions">
          <button class="btn btn-sm btn-primary" (click)="onStopEdit(selectedRouteStop)">
            <i class="fas fa-edit"></i> Editar
          </button>
          <button class="btn btn-sm btn-success" (click)="onMapStopClick(selectedRouteStop)">
            <i class="fas fa-map-marker-alt"></i> Ver no Mapa
          </button>
        </div>
      </div>
    </div>
    
    <!-- 📝 FORMULÁRIO (quando visível) -->
    <div class="form-panel" *ngIf="isFormVisible">
      <div class="form-header">
        <h5>
          <i class="fas fa-edit"></i>
          {{ formMode === 'create' ? 'Nova Parada' : 'Editar Parada' }}
        </h5>
        <button class="btn btn-sm btn-outline-secondary" (click)="onFormCancel()">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="form-body">
        <div class="alert alert-info">
          <i class="fas fa-construction"></i>
          <strong>Em desenvolvimento:</strong> Formulário será implementado em breve.
        </div>
      </div>
    </div>
  </div>

  <!-- 🔄 LOADING OVERLAY -->
  <div class="loading-overlay" *ngIf="isLoading" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999;">
    <div class="loading-content" style="background: white; padding: 30px; border-radius: 10px; text-align: center;">
      <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
      <p class="mt-2">Carregando paradas...</p>
    </div>
  </div> 

</div>