<?php include 'includes/header.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Admin Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f4f8ff; /* light blue background */
    }
    .sidebar {
      height: 100vh;
      width: 250px;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #fff; /* blue from logo */
      color: blue;
      padding-top: 10px;
      overflow-y: auto;
    }
    .sidebar .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px 0;
    }
    .sidebar .logo img {
      max-width: 150px;
    }
    .sidebar a {
      display: block;
      padding: 12px 20px;
      color: black;
      text-decoration: none;
      transition: 0.3s;
      font-weight:bold;
    }
    .sidebar a:hover {
      background-color: #09306d; /* darker blue */
    }
    .main-content {
      margin-left: 250px;
      padding: 80px 40px 40px 40px;
    }
    .header {
      background-color: #f4f8ff;
      padding: 20px;
      margin-bottom: 15px;
    }
    .cards {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 30px;
    }
    .card-box {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      flex: 1 1 250px;
      padding: 30px;
      text-align: center;
      transition: transform 0.3s;
    }
    .card-box:hover {
      transform: translateY(-5px);
    }
    .card-box h5 {
      color: #0d47a1; /* blue title */
      font-size: 18px;
    }
    .card-box p {
      font-size: 32px;
      font-weight: bold;
      margin-top: 10px;
      color: #1a1a1a; /* dark gray text */
    }
    @media (max-width: 768px) {
      .sidebar {
        position: relative;
        width: 100%;
        height: auto;
      }
      .main-content {
        margin-left: 0;
        padding: 60px 20px 20px 20px;
      }
      .cards {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

<!-- Sidebar -->
<div class="sidebar">
  <div class="logo">
    <img src="/sunrediant/assets/images/logo.png" alt="Logo">
  </div>
  <a href="dashboard.php">Dashboard</a>
  <a href="main_website_conatcts.php">Home Page Contacts</a>
  <a href="contact-us.php">Contacts Page Contacts</a>
        <a href="servicescontact.php" class="active"> Services Contact</a>
  <a href="logout.php">Logout</a>
</div>

<!-- Main Content -->
<div class="main-content">
  <div class="header">
    <h2 style="color:#0d47a1;">Welcome To Admin Panel</h2>
    <p>Here's an overview of your contact form submissions.</p>
  </div>

  <div class="cards">
  <?php
include 'config.php';
try {
    $contactMessagesCount    = $conn->query("SELECT COUNT(*) FROM contact_messages")->fetchColumn();
    $sunrediantContactsCount = $conn->query("SELECT COUNT(*) FROM sunrediant_contacts")->fetchColumn();
    $contactFormCount        = $conn->query("SELECT COUNT(*) FROM contact_form")->fetchColumn();
} catch (PDOException $e) {
    echo "<p style='color:red;'>❌ Error: " . htmlspecialchars($e->getMessage()) . "</p>";
}
?>

<div class="card-box"><h5>Contact Messages</h5><p><?= $contactMessagesCount ?? 0 ?></p></div>
<div class="card-box"><h5>Sunrediant Contacts</h5><p><?= $sunrediantContactsCount ?? 0 ?></p></div>
<div class="card-box"><h5>Service Contacts</h5><p><?= $contactFormCount ?? 0 ?></p></div>

  </div>
</div>

</body>
</html>
<?php include 'includes/footer.php'; ?>
