<div class="row gy-4">
  <div class="col-xxl-8">
    <div class="row gy-4">
      <div class="col-xxl-4 col-sm-6" onclick="window.location.href='pending-shipping'">
        <?php
        $pendingShipping = 0;

        $result = mysqli_query($conn, "SELECT COUNT(*) as total FROM packages WHERE status = 'Pending'");
        if ($result) {
          $row = mysqli_fetch_assoc($result);
          $pendingShipping = $row['total'];
        }
        ?>
        <div class="card p-3 shadow-2 radius-8 border input-form-light h-100 bg-gradient-end-1">
          <div class="card-body p-0">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">

              <div class="d-flex align-items-center gap-2">
                <span class="mb-0 w-48-px h-48-px bg-primary-600 flex-shrink-0 text-white d-flex justify-content-center align-items-center rounded-circle h6 mb-0">
                  <iconify-icon icon="mingcute:user-follow-fill" class="icon"></iconify-icon>
                </span>
                <div>
                  <span class="mb-2 fw-medium text-secondary-light text-sm">Pending Shipping</span>
                  <h6 class="fw-semibold"><?= $pendingShipping ?></h6>
                </div>
              </div>

              <div id="new-user-chart" class="remove-tooltip-title rounded-tooltip-value"></div>
            </div>
            <!-- <p class="text-sm mb-0">Increase by <span class="bg-success-focus px-1 rounded-2 fw-medium text-success-main text-sm">+200</span> this week</p> -->
          </div>
        </div>
      </div>

      <div class="col-xxl-4 col-sm-6" onclick="window.location.href='processing-shipping'">
        <?php
        $processingShipping = 0;

        $result = mysqli_query($conn, "SELECT COUNT(*) as total FROM packages WHERE status = 'processing'");
        if ($result) {
          $row = mysqli_fetch_assoc($result);
          $processingShipping = $row['total'];
        }
        ?>
        <div class="card p-3 shadow-2 radius-8 border input-form-light h-100 bg-gradient-end-2">
          <div class="card-body p-0">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">

              <div class="d-flex align-items-center gap-2">
                <span class="mb-0 w-48-px h-48-px bg-success-main flex-shrink-0 text-white d-flex justify-content-center align-items-center rounded-circle h6">
                  <iconify-icon icon="mdi:truck-plus-outline" class="icon"></iconify-icon>
                </span>
                <div>
                  <span class="mb-2 fw-medium text-secondary-light text-sm">Processing Shipping</span>
                  <h6 class="fw-semibold"><?= $processingShipping ?></h6>
                </div>
              </div>
              <div id="active-user-chart" class="remove-tooltip-title rounded-tooltip-value"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xxl-4 col-sm-6" onclick="window.location.href='completed-shipping'">
        <?php
        $completedShipping = 0;

        $result = mysqli_query($conn, "SELECT COUNT(*) as total FROM packages WHERE status = 'completed'");
        if ($result) {
          $row = mysqli_fetch_assoc($result);
          $completedShipping = $row['total'];
        }
        ?>
        <div class="card p-3 shadow-2 radius-8 border input-form-light h-100 bg-gradient-end-3">
          <div class="card-body p-0">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">

              <div class="d-flex align-items-center gap-2">
                <span class="mb-0 w-48-px h-48-px bg-yellow text-white foklex-shrink-0 d-flex justify-content-center align-items-center rounded-circle h6">
                  <iconify-icon icon="mdi:truck-plus-outline" class="icon"></iconify-icon>
                </span>
                <div>
                  <span class="mb-2 fw-medium text-secondary-light text-sm">Completed Shipping</span>
                  <h6 class="fw-semibold"><?= $completedShipping ?></h6>
                </div>
              </div>

              <div id="total-sales-chart" class="remove-tooltip-title rounded-tooltip-value"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xxl-4 col-sm-6" onclick="window.location.href='profile'">
        <div class="card p-3 shadow-2 radius-8 border input-form-light h-100 bg-gradient-end-4">
          <div class="card-body p-0">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">

              <div class="d-flex align-items-center gap-2">
                <span class="mb-0 w-48-px h-48-px bg-purple text-white flex-shrink-0 d-flex justify-content-center align-items-center rounded-circle h6">
                  <iconify-icon icon="mdi:lock" class="icon"></iconify-icon>
                </span>
                <div>
                  <span class="mb-2 fw-medium text-secondary-light text-sm">Change Password</span>
                </div>
              </div>

              <div id="conversion-user-chart" class="remove-tooltip-title rounded-tooltip-value"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xxl-4 col-sm-6" onclick="window.location.href='profile'">
        <div class="card p-3 shadow-2 radius-8 border input-form-light h-100 bg-gradient-end-5">
          <div class="card-body p-0">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">

              <div class="d-flex align-items-center gap-2">
                <span class="mb-0 w-48-px h-48-px bg-pink text-white flex-shrink-0 d-flex justify-content-center align-items-center rounded-circle h6">
                  <iconify-icon icon="mdi:leads" class="icon"></iconify-icon>
                </span>
                <div>
                  <span class="mb-2 fw-medium text-secondary-light text-sm">Profile</span>
                </div>
              </div>

              <div id="leads-chart" class="remove-tooltip-title rounded-tooltip-value"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xxl-4 col-sm-6" onclick="window.location.href='logout'">
        <div class="card p-3 shadow-2 radius-8 border input-form-light h-100 bg-gradient-end-6">
          <div class="card-body p-0">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-1 mb-8">

              <div class="d-flex align-items-center gap-2">
                <span class="mb-0 w-48-px h-48-px bg-cyan text-white flex-shrink-0 d-flex justify-content-center align-items-center rounded-circle h6">
                  <iconify-icon icon="mdi:logout" class="icon"></iconify-icon>
                </span>
                <div>
                  <span class="mb-2 fw-medium text-secondary-light text-sm">Logout</span>
                  <!-- <h6 class="fw-semibold">$3,00,700</h6> -->
                </div>
              </div>

              <div id="total-profit-chart" class="remove-tooltip-title rounded-tooltip-value"></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>


</div>