<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shipment Risk Dashboard</title>
  <link rel="stylesheet" href="/css/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="dashboard">
    <!-- Header -->
    <header class="header">
      <h1>Shipment Risk Dashboard</h1>
      <p class="subtitle">Identifying at-risk shipments before they're late</p>
    </header>

    <!-- Stats Cards -->
    <section class="stats-grid">
      <div class="stat-card">
        <div class="stat-value" id="total-in-transit">--</div>
        <div class="stat-label">In Transit</div>
      </div>
      <div class="stat-card high-risk">
        <div class="stat-value" id="high-risk-count">--</div>
        <div class="stat-label">High Risk</div>
      </div>
      <div class="stat-card moderate-risk">
        <div class="stat-value" id="moderate-risk-count">--</div>
        <div class="stat-label">Moderate Risk</div>
      </div>
      <div class="stat-card">
        <div class="stat-value" id="on-time-rate">--%</div>
        <div class="stat-label">Historical On-Time Rate</div>
      </div>
    </section>

    <!-- Filters -->
    <section class="filters">
      <div class="filter-group">
        <label for="region-filter">Region:</label>
        <select id="region-filter">
          <option value="">All Regions</option>
        </select>
      </div>
      <div class="filter-group">
        <label for="risk-filter">Minimum Risk:</label>
        <select id="risk-filter">
          <option value="0">All</option>
          <option value="40">Moderate+ (40+)</option>
          <option value="70" selected>High Only (70+)</option>
        </select>
      </div>
      <button id="refresh-btn" class="btn">Refresh Data</button>
    </section>

    <!-- Main Content Grid -->
    <div class="main-grid">
      <!-- At-Risk Shipments Table -->
      <section class="card shipments-card">
        <h2>At-Risk Shipments</h2>
        <div class="table-container">
          <table id="shipments-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Risk</th>
                <th>Driver</th>
                <th>Warehouse</th>
                <th>Region</th>
                <th>Scheduled Arrival</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              <tr><td colspan="7" class="loading">Loading shipments...</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- Charts Section -->
      <section class="card chart-card">
        <h2>Risk Distribution</h2>
        <canvas id="risk-chart"></canvas>
      </section>

      <section class="card chart-card">
        <h2>On-Time Trend (30 Days)</h2>
        <canvas id="trend-chart"></canvas>
      </section>
    </div>

    <!-- Shipment Detail Modal -->
    <div id="modal" class="modal hidden">
      <div class="modal-content">
        <button class="modal-close" onclick="closeModal()">&times;</button>
        <h2>Shipment Details</h2>
        <div id="modal-body"></div>
      </div>
    </div>
  </div>

  <script src="/js/dashboard.js"></script>
</body>
</html>
