
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
<?php
// DB configuration
$host = 'localhost';
$dbname = 'balubaid_nissan_test_drive';
$user = 'balubaid_nissan_test_drive';
$pass = 'Vision@2050';

$conn = new mysqli($host, $user, $pass, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Filters
$where = "WHERE 1=1";
if (!empty($_GET['vehicle'])) {
    $vehicle = $conn->real_escape_string($_GET['vehicle']);
    $where .= " AND vehicle = '$vehicle'";
}
if (!empty($_GET['gender'])) {
    $gender = $conn->real_escape_string($_GET['gender']);
    $where .= " AND gender = '$gender'";
}
if (!empty($_GET['agegroup'])) {
    $agegroup = $conn->real_escape_string($_GET['agegroup']);
    $where .= " AND agegroup = '$agegroup'";
}
if (!empty($_GET['from']) && !empty($_GET['to'])) {
    $from = $conn->real_escape_string($_GET['from']);
    $to = $conn->real_escape_string($_GET['to']);
    $where .= " AND submitted_at BETWEEN '$from' AND '$to'";
}

// Queries
$total_registered = $conn->query("SELECT COUNT(*) as total FROM xx_nissan_test_drive_vu WHERE status='Registered'")->fetch_assoc()['total'];
$total_started = $conn->query("SELECT COUNT(*) as total FROM xx_nissan_test_drive_vu WHERE start_date IS NOT NULL")->fetch_assoc()['total'];
$total_completed = $conn->query("SELECT COUNT(*) as total FROM xx_nissan_test_drive_vu WHERE status='Completed'")->fetch_assoc()['total'];
$avg_journey = $conn->query("SELECT AVG(journey_duration) as avg_j FROM xx_nissan_test_drive_vu WHERE journey_duration IS NOT NULL")->fetch_assoc()['avg_j'];
$avg_drive = $conn->query("SELECT AVG(test_drive_duration) as avg_d FROM xx_nissan_test_drive_vu WHERE test_drive_duration IS NOT NULL")->fetch_assoc()['avg_d'];

$data_result = $conn->query("SELECT * FROM xx_nissan_test_drive_vu $where ORDER BY submitted_at DESC");

$age_data = $conn->query("SELECT agegroup, COUNT(*) as count FROM xx_nissan_test_drive_vu $where GROUP BY agegroup");
$vehicle_data = $conn->query("SELECT vehicle, COUNT(*) as count FROM xx_nissan_test_drive_vu $where GROUP BY vehicle");
$gender_data = $conn->query("SELECT gender, COUNT(*) as count FROM xx_nissan_test_drive_vu $where GROUP BY gender");
$rating_data = $conn->query("SELECT experience_rating, COUNT(*) as count FROM xx_nissan_test_drive_vu WHERE experience_rating IS NOT NULL GROUP BY experience_rating");

?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nissan Petromin Test Drive Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body { background-color: #f8f9fa; font-family: 'Segoe UI', sans-serif; }
    .card { box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
    .theme-header { background: #c8102e; color: white; padding: 1rem; margin-bottom: 1rem; }
    .filter-form input, .filter-form button { margin-right: 10px; margin-bottom: 10px; }
    canvas { max-width: 100%; height: auto; }
    th, td { vertical-align: middle !important; }
  </style>
</head>
<body>
  <div class="container">
    <div class="theme-header text-center rounded">
      <h2>Nissan Petromin Test Drive Dashboard</h2>
    </div>

    <div class="row text-center mb-4">
      <div class="col-md-3 col-6 mb-3">
        <div class="card">
          <div class="card-body bg-light">
            <h5>Total Registered</h5>
            <h3><?= $total_registered ?></h3>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-6 mb-3">
        <div class="card">
          <div class="card-body bg-light">
            <h5>Total Started</h5>
            <h3><?= $total_started ?></h3>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-6 mb-3">
        <div class="card">
          <div class="card-body bg-light">
            <h5>Total Completed</h5>
            <h3><?= $total_completed ?></h3>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-6 mb-3">
        <div class="card">
          <div class="card-body bg-light">
            <h5>Avg Journey Duration (s)</h5>
            <h3><?= round($avg_journey, 2) ?></h3>
          </div>
        </div>
      </div>
    </div>

    <div class="text-center mb-4">
      <form class="filter-form d-flex flex-wrap justify-content-center" method="GET">
        <input type="text" name="vehicle" placeholder="Vehicle" class="form-control" style="max-width: 150px;">
        <input type="text" name="gender" placeholder="Gender" class="form-control" style="max-width: 150px;">
        <input type="text" name="agegroup" placeholder="Age Group" class="form-control" style="max-width: 150px;">
        <input type="datetime-local" name="from" class="form-control">
        <input type="datetime-local" name="to" class="form-control">
        <button class="btn btn-danger">Apply</button>
      </form>
    </div>

    <div class="row">
      <div class="col-md-6 mb-3"><canvas id="ageChart"></canvas></div>
      <div class="col-md-6 mb-3"><canvas id="vehicleChart"></canvas></div>
      <div class="col-md-6 mb-3"><canvas id="genderChart"></canvas></div>
      <div class="col-md-6 mb-3"><canvas id="ratingChart"></canvas></div>
    </div>

    <div class="table-responsive mt-4">
      <table class="table table-bordered table-striped">
        <thead class="table-danger">
          <tr>
            <th>ID</th><th>Name</th><th>Mobile</th><th>Email</th><th>Vehicle</th><th>Status</th><th>Submitted At</th>
          </tr>
        </thead>
        <tbody>
          <?php while($row = $data_result->fetch_assoc()): ?>
            <tr>
              <td><?= $row['test_drive_id'] ?></td>
              <td><?= $row['first_name'] . ' ' . $row['last_name'] ?></td>
              <td><?= $row['mobile'] ?></td>
              <td><?= $row['email'] ?></td>
              <td><?= $row['vehicle'] ?></td>
              <td><?= $row['status'] ?></td>
              <td><?= $row['submitted_at'] ?></td>
            </tr>
          <?php endwhile; ?>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const drawPie = (ctxId, labels, data) => {
      new Chart(document.getElementById(ctxId), {
        type: 'pie',
        data: {
          labels: labels,
          datasets: [{
            label: ctxId,
            data: data,
            backgroundColor: ['#c8102e', '#f7c600', '#333', '#66BB6A', '#29b6f6', '#8e24aa']
          }]
        }
      });
    };

    drawPie('ageChart', [<?php while($row = $age_data->fetch_assoc()) echo "'{$row['agegroup']}',"; ?>], [<?php $age_data->data_seek(0); while($row = $age_data->fetch_assoc()) echo "{$row['count']},"; ?>]);
    drawPie('vehicleChart', [<?php while($row = $vehicle_data->fetch_assoc()) echo "'{$row['vehicle']}',"; ?>], [<?php $vehicle_data->data_seek(0); while($row = $vehicle_data->fetch_assoc()) echo "{$row['count']},"; ?>]);
    drawPie('genderChart', [<?php while($row = $gender_data->fetch_assoc()) echo "'{$row['gender']}',"; ?>], [<?php $gender_data->data_seek(0); while($row = $gender_data->fetch_assoc()) echo "{$row['count']},"; ?>]);
    drawPie('ratingChart', [<?php while($row = $rating_data->fetch_assoc()) echo "'Rating {$row['experience_rating']}',"; ?>], [<?php $rating_data->data_seek(0); while($row = $rating_data->fetch_assoc()) echo "{$row['count']},"; ?>]);
  </script>
</body>
</html>