<div class="row">

  <!-- Left Card: Route Activity by Zone -->
  <div class="col-xl-7">
    <div class="card">
      <div class="d-flex card-header justify-content-between align-items-center">
        <h4 class="header-title">Route Activity by Zone</h4>
        <div class="dropdown">
          <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="ri-more-2-fill"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-animated dropdown-menu-end">
            <a href="javascript:void(0);" class="dropdown-item">Live Status</a>
            <a href="javascript:void(0);" class="dropdown-item">Route Density</a>
            <a href="javascript:void(0);" class="dropdown-item">Export KML</a>
            <a href="javascript:void(0);" class="dropdown-item">Show Anomalies</a>
          </div>
        </div>
      </div>

      <div class="card-body">
        <div class="row">
          <div class="col-lg-8">
            <div id="world-map-markers" class="mt-3 mb-3" style="height: 317px"></div>
          </div>
          <div class="col-lg-4" dir="ltr">
            <div id="country-chart" class="apex-charts" data-colors="#17a497"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Right Card: Material Volume Breakdown -->
  <div class="col-xl-5">
    <div class="card">
      <div class="d-flex card-header justify-content-between align-items-center">
        <h4 class="header-title">Material Volume Breakdown</h4>
        <a href="javascript:void(0);" class="btn btn-sm btn-info">Export <i class="ri-download-line ms-1"></i></a>
      </div>

      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-borderless table-hover table-nowrap table-centered m-0">
            <thead class="border-top border-bottom bg-light-subtle border-light">
              <tr>
                <th class="py-1">Material</th>
                <th class="py-1">Avg. Weight</th>
                <th class="py-1">Pickups</th>
                <th class="py-1">Total Collected</th>
                <th class="py-1">Source</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Organic</td>
                <td>14.2 kg</td>
                <td>214</td>
                <td>3,452 kg</td>
                <td>AR App</td>
              </tr>
              <tr>
                <td>Plastics</td>
                <td>7.9 kg</td>
                <td>182</td>
                <td>1,436 kg</td>
                <td>WhatsApp Bot</td>
              </tr>
              <tr>
                <td>Paper</td>
                <td>6.1 kg</td>
                <td>98</td>
                <td>689 kg</td>
                <td>Manual Entry</td>
              </tr>
              <tr>
                <td>Glass</td>
                <td>9.4 kg</td>
                <td>47</td>
                <td>442 kg</td>
                <td>Telegram Bot</td>
              </tr>
              <tr>
                <td>Metal</td>
                <td>4.5 kg</td>
                <td>36</td>
                <td>162 kg</td>
                <td>Facebook Pages</td>
              </tr>
              <tr>
                <td>Textiles</td>
                <td>3.1 kg</td>
                <td>22</td>
                <td>68 kg</td>
                <td>AR App</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="text-center">
          <a href="#!" class="text-primary text-decoration-underline fw-bold btn mb-2">View All</a>
        </div>
      </div>
    </div>
  </div>

</div>
