website/admin/dashboard.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin Dashboard - Sky Art Shop</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
    <link rel="stylesheet" href="/admin/css/admin-style.css" />
    <style>
      :root {
        --primary-gradient: #202023;
        --sidebar-width: 250px;
        --transition-speed: 0.3s;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        background-color: #f8f9fa;
        overflow-x: hidden;
      }

      /* Sidebar Styles */
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: var(--sidebar-width);
        background: var(--primary-gradient);
        padding: 20px;
        color: white;
        overflow-y: auto;
        transition: all var(--transition-speed) ease;
        z-index: 1000;
      }

      .sidebar-brand {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 30px;
        text-align: center;
        padding: 10px;
        color: white;
        letter-spacing: 1px;
      }

      .sidebar-menu {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .sidebar-menu li {
        margin-bottom: 5px;
      }

      .sidebar-menu a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        display: flex;
        align-items: center;
        padding: 12px 15px;
        border-radius: 8px;
        transition: all 0.3s ease;
        font-size: 0.95rem;
      }

      .sidebar-menu a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        transform: translateX(5px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .sidebar-menu a.active {
        background: #667eea;
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      }

      .sidebar-menu i {
        margin-right: 12px;
        font-size: 1.2rem;
        width: 24px;
        text-align: center;
      }

      /* Main Content */
      .main-content {
        margin-left: var(--sidebar-width);
        padding: 30px;
        min-height: 100vh;
        transition: margin-left var(--transition-speed) ease;
      }

      /* Top Bar */
      .top-bar {
        background: white;
        padding: 25px 30px;
        border-radius: 12px;
        margin-bottom: 30px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
        animation: slideDown 0.4s ease;
      }

      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .top-bar h3 {
        margin: 0;
        font-size: 1.75rem;
        color: #2c3e50;
      }

      .top-bar p {
        margin: 5px 0 0 0;
        color: #6c757d;
      }

      /* Live Stats Cards - Enhanced */
      .stat-card {
        background: white;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: block;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
      }

      .stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--primary-gradient);
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }

      .stat-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3);
        border-color: #667eea;
      }

      .stat-card:hover::before {
        transform: scaleX(1);
      }

      .stat-card:active {
        transform: translateY(-4px) scale(1.01);
      }

      .stat-card h6 {
        color: #6c757d;
        margin-bottom: 15px;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
      }

      .stat-card h2 {
        color: #2c3e50;
        margin: 10px 0;
        font-weight: 700;
        font-size: 2.5rem;
      }

      .stat-card .stat-icon {
        font-size: 2.5rem;
        opacity: 0.2;
        position: absolute;
        right: 20px;
        top: 20px;
      }

      .stat-link {
        color: #667eea;
        font-size: 0.9rem;
        margin-top: 15px;
        display: inline-flex;
        align-items: center;
        font-weight: 600;
        transition: all 0.2s ease;
      }

      .stat-link i {
        margin-left: 5px;
        transition: transform 0.2s ease;
      }

      .stat-card:hover .stat-link i {
        transform: translateX(5px);
      }

      /* Quick Action Cards - Enhanced */
      .action-card {
        background: white;
        border-radius: 12px;
        padding: 35px 25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
      }

      .action-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--primary-gradient);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
      }

      .action-card:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        border-color: #667eea;
      }

      .action-card:hover::after {
        opacity: 0.05;
      }

      .action-card * {
        position: relative;
        z-index: 1;
      }

      .action-card i {
        font-size: 3rem;
        margin-bottom: 15px;
        transition: transform 0.3s ease;
      }

      .action-card:hover i {
        transform: scale(1.1) rotate(5deg);
      }

      .action-card h6 {
        font-weight: 600;
        font-size: 1rem;
        margin: 0;
        color: #2c3e50;
      }

      /* Buttons */
      .btn-view-site {
        background: var(--primary-gradient);
        color: white;
        border: none;
        padding: 12px 28px;
        border-radius: 8px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      }

      .btn-view-site:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        color: white;
      }

      .btn-logout {
        background: #dc3545;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .btn-logout:hover {
        background: #c82333;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .sidebar {
          transform: translateX(-100%);
        }

        .sidebar.active {
          transform: translateX(0);
        }

        .main-content {
          margin-left: 0;
        }

        .top-bar {
          flex-direction: column;
          gap: 15px;
        }
      }

      /* Loading Animation */
      .loading {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid rgba(102, 126, 234, 0.3);
        border-radius: 50%;
        border-top-color: #667eea;
        animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Section Headings */
      .section-heading {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 40px 0 20px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .section-heading::after {
        content: "";
        flex: 1;
        height: 2px;
        background: linear-gradient(to right, #667eea, transparent);
      }
    </style>
  </head>
  <body>
    <!-- Sidebar -->
    <div class="sidebar">
      <div class="sidebar-brand">Sky Art Shop</div>
      <ul class="sidebar-menu">
        <li>
          <a href="/admin/dashboard" class="active"
            ><i class="bi bi-speedometer2"></i> Dashboard</a
          >
        </li>
        <li>
          <a href="/admin/homepage"
            ><i class="bi bi-house"></i> Homepage Editor</a
          >
        </li>
        <li>
          <a href="/admin/products"><i class="bi bi-box"></i> Products</a>
        </li>
        <li>
          <a href="/admin/portfolio"><i class="bi bi-easel"></i> Portfolio</a>
        </li>
        <li>
          <a href="/admin/blog"><i class="bi bi-newspaper"></i> Blog</a>
        </li>
        <li>
          <a href="/admin/pages"
            ><i class="bi bi-file-text"></i> Custom Pages</a
          >
        </li>
        <li>
          <a href="/admin/media-library"
            ><i class="bi bi-images"></i> Media Library</a
          >
        </li>
        <li>
          <a href="/admin/menu"><i class="bi bi-list"></i> Menu</a>
        </li>
        <li>
          <a href="/admin/settings"><i class="bi bi-gear"></i> Settings</a>
        </li>
        <li>
          <a href="/admin/users"><i class="bi bi-people"></i> Users</a>
        </li>
        <li>
          <a href="/admin/customers"
            ><i class="bi bi-person-hearts"></i> Customers</a
          >
        </li>
      </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Top Bar -->
      <div class="top-bar">
        <div>
          <h3>Welcome, <span id="userName">Admin</span></h3>
          <p class="mb-0 text-muted">Manage your online shop</p>
        </div>
        <div>
          <a href="/" target="_blank" class="btn-view-site me-2"
            ><i class="bi bi-eye"></i> View Site</a
          >
          <button class="btn-logout" id="logoutBtn">
            <i class="bi bi-box-arrow-right"></i> Logout
          </button>
        </div>
      </div>

      <!-- Stats Cards -->
      <div class="row">
        <div class="col-md-3 mb-4">
          <a href="/admin/products.html" class="stat-card">
            <i class="bi bi-box stat-icon"></i>
            <h6>Total Products</h6>
            <h2 id="productCount"><span class="loading"></span></h2>
            <span class="stat-link"
              >Manage <i class="bi bi-arrow-right"></i
            ></span>
          </a>
        </div>
        <div class="col-md-3 mb-4">
          <a href="/admin/portfolio.html" class="stat-card">
            <i class="bi bi-easel stat-icon"></i>
            <h6>Portfolio Projects</h6>
            <h2 id="projectCount"><span class="loading"></span></h2>
            <span class="stat-link"
              >Manage <i class="bi bi-arrow-right"></i
            ></span>
          </a>
        </div>
        <div class="col-md-3 mb-4">
          <a href="/admin/blog.html" class="stat-card">
            <i class="bi bi-newspaper stat-icon"></i>
            <h6>Blog Posts</h6>
            <h2 id="blogCount"><span class="loading"></span></h2>
            <span class="stat-link"
              >Manage <i class="bi bi-arrow-right"></i
            ></span>
          </a>
        </div>
        <div class="col-md-3 mb-4">
          <a href="/admin/pages.html" class="stat-card">
            <i class="bi bi-file-text stat-icon"></i>
            <h6>Custom Pages</h6>
            <h2 id="pageCount"><span class="loading"></span></h2>
            <span class="stat-link"
              >Manage <i class="bi bi-arrow-right"></i
            ></span>
          </a>
        </div>
      </div>

      <!-- Quick Actions -->
      <h4 class="section-heading">
        <i class="bi bi-lightning-fill"></i> Quick Actions
      </h4>
      <div class="row">
        <div class="col-md-3 mb-4">
          <a href="/admin/homepage.html" class="text-decoration-none">
            <div class="action-card">
              <i class="bi bi-house-fill text-success"></i>
              <h6>Homepage Editor</h6>
            </div>
          </a>
        </div>
        <div class="col-md-3 mb-4">
          <a
            href="/admin/products.html?action=create"
            class="text-decoration-none"
          >
            <div class="action-card">
              <i class="bi bi-plus-circle-fill text-primary"></i>
              <h6>Add New Product</h6>
            </div>
          </a>
        </div>
        <div class="col-md-3 mb-4">
          <a href="/admin/blog.html?action=create" class="text-decoration-none">
            <div class="action-card">
              <i class="bi bi-file-earmark-plus-fill text-info"></i>
              <h6>Create Blog Post</h6>
            </div>
          </a>
        </div>
        <div class="col-md-3 mb-4">
          <a
            href="/admin/portfolio.html?action=create"
            class="text-decoration-none"
          >
            <div class="action-card">
              <i class="bi bi-brush-fill text-warning"></i>
              <h6>Add Portfolio Project</h6>
            </div>
          </a>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/admin/js/auth.js"></script>
    <script>
      // Load dashboard statistics
      async function loadDashboardStats() {
        try {
          const response = await fetch("/api/admin/dashboard/stats", {
            credentials: "include",
          });
          const data = await response.json();
          if (data.success) {
            document.getElementById("productCount").textContent =
              data.stats.products;
            document.getElementById("projectCount").textContent =
              data.stats.projects;
            document.getElementById("blogCount").textContent = data.stats.blog;
            document.getElementById("pageCount").textContent = data.stats.pages;

            // Update user name
            if (data.user && (data.user.name || data.user.email)) {
              document.getElementById("userName").textContent =
                data.user.name || data.user.email;
            }
          }
        } catch (error) {
          console.error("Failed to load stats:", error);
        }
      }

      // Initialize - check auth then load stats
      document.addEventListener("DOMContentLoaded", function () {
        checkAuth().then((authenticated) => {
          if (authenticated) {
            loadDashboardStats();
          }
        });
      });
    </script>
  </body>
</html>