<div class="stats-grid">
  <!-- Today's Revenue -->
  <div class="card stat-card">
    <div class="stat-icon purple">
      <i class="fas fa-calendar-day"></i>
    </div>
    <div class="stat-info">
      <span class="stat-label">Doanh Thu Ngày</span>
      <span class="stat-value"><%= stats.today.toLocaleString('vi-VN') %> đ</span>
    </div>
  </div>

  <!-- Week's Revenue -->
  <div class="card stat-card">
    <div class="stat-icon teal">
      <i class="fas fa-calendar-week"></i>
    </div>
    <div class="stat-info">
      <span class="stat-label">Doanh Thu Tuần</span>
      <span class="stat-value"><%= stats.week.toLocaleString('vi-VN') %> đ</span>
    </div>
  </div>

  <!-- Month's Revenue -->
  <div class="card stat-card">
    <div class="stat-icon success">
      <i class="fas fa-calendar-alt"></i>
    </div>
    <div class="stat-info">
      <span class="stat-label">Doanh Thu Tháng</span>
      <span class="stat-value"><%= stats.month.toLocaleString('vi-VN') %> đ</span>
    </div>
  </div>

  <!-- Year's Revenue -->
  <div class="card stat-card">
    <div class="stat-icon warning">
      <i class="fas fa-chart-line"></i>
    </div>
    <div class="stat-info">
      <span class="stat-label">Doanh Thu Năm</span>
      <span class="stat-value"><%= stats.year.toLocaleString('vi-VN') %> đ</span>
    </div>
  </div>
</div>

<div class="dashboard-layout">
  <!-- Chart Card -->
  <div class="card">
    <div class="chart-header">
      <h2 class="chart-title"><i class="fas fa-chart-area" style="color: var(--accent-teal); margin-right: 0.5rem;"></i>Xu Hướng Doanh Thu (7 Ngày Gần Nhất)</h2>
    </div>
    <div class="chart-container">
      <svg class="chart-svg" id="revenue-chart" viewBox="0 0 600 250" preserveAspectRatio="none">
        <defs>
          <linearGradient id="chart-gradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="var(--accent-purple)" stop-opacity="0.8"/>
            <stop offset="100%" stop-color="var(--accent-teal)" stop-opacity="0.1"/>
          </linearGradient>
          <linearGradient id="glow-gradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="var(--accent-purple)"/>
            <stop offset="100%" stop-color="var(--accent-teal)"/>
          </linearGradient>
        </defs>
        <!-- Grid lines are drawn by JS -->
        <g id="chart-grid"></g>
        <!-- Area path -->
        <path id="chart-area-path" fill="url(#chart-gradient)" stroke="none" opacity="0.3"></path>
        <!-- Line path -->
        <path id="chart-line-path" class="chart-path" stroke="url(#glow-gradient)"></path>
        <!-- Interactive dots -->
        <g id="chart-points"></g>
        <!-- X and Y axis labels -->
        <g id="chart-labels"></g>
      </svg>
    </div>
  </div>

  <!-- Active Vehicles and Quick Stats -->
  <div class="card" style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
      <h2 class="chart-title" style="margin-bottom: 0.5rem;">
        <i class="fas fa-spinner fa-spin" style="color: var(--warning); margin-right: 0.5rem;"></i>Xe Đang Hoạt Động (<%= stats.activeCount %>)
      </h2>
      <p style="font-size: 0.85rem; color: var(--text-secondary);">Danh sách xe đang có học viên thuê sân tập thực tế</p>
    </div>

    <div class="active-vehicles-list">
      <% if (activeVehicles.length === 0) { %>
        <div style="text-align: center; padding: 3rem 1rem; color: var(--text-muted);">
          <i class="fas fa-car-side" style="font-size: 2.5rem; margin-bottom: 1rem; display: block; opacity: 0.5;"></i>
          Hiện tại không có xe nào đang hoạt động.
        </div>
      <% } else { %>
        <% activeVehicles.forEach(vehicle => { %>
          <div class="active-vehicle-item" data-end-time="<%= vehicle.end_time %>">
            <div class="v-info-group">
              <span class="v-plate"><%= vehicle.plate_number %></span>
              <div>
                <div class="v-name"><%= vehicle.name %></div>
                <div style="display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem;">
                  <span class="v-type-badge">
                    <%= vehicle.type === 'D' ? 'Hạng D' : 
                        vehicle.type === 'B_MANUAL' ? 'Số Sàn B' : 
                        vehicle.type === 'B_AUTO' ? 'Số Tự Động B' : 'Xe Tải C' %>
                  </span>
                  <span class="v-student"><i class="far fa-user"></i> <%= vehicle.student_name %></span>
                </div>
              </div>
            </div>
            <div class="v-timer">
              <div class="v-time-left" id="timer-<%= vehicle.id %>">--:--:--</div>
              <div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem;">
                Hết giờ: <%= new Date(vehicle.end_time).toLocaleTimeString('vi-VN', {hour: '2-digit', minute:'2-digit'}) %>
              </div>
            </div>
          </div>
        <% }) %>
      <% } %>
    </div>

    <div style="border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-top: auto;">
      <h3 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 1rem;">Trạng Thái Hạm Đội Xe</h3>
      <div style="display: flex; justify-content: space-between; gap: 0.5rem;">
        <div style="text-align: center; flex: 1;">
          <div class="badge badge-success" style="font-size: 1rem; padding: 0.5rem 1rem; margin-bottom: 0.25rem;"><%= stats.availableCount %></div>
          <div style="font-size: 0.75rem; color: var(--text-secondary);">Đang Rảnh</div>
        </div>
        <div style="text-align: center; flex: 1;">
          <div class="badge badge-warning" style="font-size: 1rem; padding: 0.5rem 1rem; margin-bottom: 0.25rem;"><%= stats.activeCount %></div>
          <div style="font-size: 0.75rem; color: var(--text-secondary);">Hoạt Động</div>
        </div>
        <div style="text-align: center; flex: 1;">
          <div class="badge badge-danger" style="font-size: 1rem; padding: 0.5rem 1rem; margin-bottom: 0.25rem;"><%= stats.maintenanceCount %></div>
          <div style="font-size: 0.75rem; color: var(--text-secondary);">Bảo Dưỡng</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Embedded JSON data for client chart scripts -->
<script>
  window.CHART_DATA = <%- chartData %>;
</script>
