<?php
require("includes/check_auth_user.php");
require("includes/dbconnect.php");
include('includes/function.php');

$zdb = $_SESSION["zdbyear_" . $dbname];
mysqli_select_db($conn, $zdb);

// Fetch shipment data with statuses
$getQuerydata = mysqli_query($conn, "
    SELECT 
        origin,
        destination,
        COUNT(*) AS totalshipment,
        SUM(CASE WHEN status = 1 THEN 1 ELSE 0 END) AS origin_count,
        SUM(CASE WHEN status = 5 THEN 1 ELSE 0 END) AS transit_count,
        SUM(CASE WHEN status = 7 THEN 1 ELSE 0 END) AS destination_count,
        SUM(CASE WHEN status = 9 THEN 1 ELSE 0 END) AS delivered_count
    FROM shipment
    GROUP BY origin, destination
    ORDER BY origin, destination
") or die(mysqli_error($conn));

$shipments = [];
while ($fetdata = mysqli_fetch_assoc($getQuerydata)) {
    $shipments[] = $fetdata;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shipment Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      background: #f8f9fa;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .shipment-card {
      border-radius: 15px;
      padding: 20px;
      background: #fff;
      box-shadow: 0px 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.2s ease-in-out;
    }
    .shipment-card:hover {
      transform: translateY(-5px);
    }
    .badge {
      font-size: 0.9rem;
      padding: 0.5em 0.8em;
      border-radius: 8px;
    }
    .search-box {
      max-width: 300px;
    }
  </style>
</head>
<body>
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold text-primary">📦 Shipment Overview (Cards)</h4>
    <input type="text" id="searchBox" class="form-control search-box" placeholder="Search...">
  </div>

  <div class="row g-4" id="shipmentCards">
    <?php foreach ($shipments as $s): ?>
      <div class="col-md-4 shipment-card-wrapper">
        <div class="shipment-card">
          <h5 class="mb-2"><?= htmlspecialchars($s['origin']) ?> → <?= htmlspecialchars($s['destination']) ?></h5>
          <p class="text-muted mb-3">Total Shipments: <span class="fw-bold"><?= $s['totalshipment'] ?></span></p>
          
          <div class="mb-2">
            <span class="badge bg-secondary">Origin: <?= $s['origin_count'] ?></span>
            <span class="badge bg-warning text-dark">Transit: <?= $s['transit_count'] ?></span>
          </div>
          <div class="mb-2">
            <span class="badge bg-info text-dark"> Destination: <?= $s['destination_count'] ?></span>
            <span class="badge bg-success">Delivered: <?= $s['delivered_count'] ?></span>
          </div>

          <div class="progress mt-3" style="height:8px;">
            <?php 
              $progress = $s['totalshipment'] > 0 
                          ? round(($s['delivered_count'] / $s['totalshipment']) * 100) 
                          : 0;
            ?>
            <div class="progress-bar bg-primary" role="progressbar" style="width: <?= $progress ?>%;"></div>
          </div>
          <small class="text-muted"><?= $progress ?>% Delivered</small>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  // Card Search
  $("#searchBox").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#shipmentCards .shipment-card-wrapper").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
</script>
</body>
</html>
