<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" data-bs-theme="light">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <title>智慧管理平台</title>
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --success-gradient: linear-gradient(45deg, #4CCD99, #3CAEA3);
      --info-gradient: linear-gradient(45deg, #4361ee, #3a0ca3);
    }

    body {
      background-color: #f8f9fa;
      min-height: 100vh;
    }

    .navbar {
      z-index: 9999;
      box-shadow: 0 2px 15px rgba(0,0,0,0.1);
      background: var(--info-gradient) !important;
    }

    .navbar-brand {
      font-weight: 700;
      letter-spacing: 1px;
      color: white !important;
    }

    .nav-link {
      color: rgba(255,255,255,0.8) !important;
      transition: all 0.3s ease;
      border-radius: 8px;
      margin: 0 5px;
    }

    .nav-link:hover {
      color: white !important;
      background: rgba(255,255,255,0.15);
    }

    .dropdown-menu {
      border: none;
      box-shadow: 0 5px 25px rgba(0,0,0,0.1);
      border-radius: 12px;
      margin-top: 8px;
    }

    .dropdown-item {
      padding: 8px 20px;
      transition: all 0.2s ease;
    }

    .dashboard-card {
      border: none;
      border-radius: 16px;
      box-shadow: 0 5px 25px rgba(0,0,0,0.08);
      transition: transform 0.3s ease;
      background: white;
    }

    .dashboard-card:hover {
      transform: translateY(-5px);
    }

    .theme-switcher {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .theme-switcher:hover {
      transform: scale(1.1);
    }

    [data-bs-theme="dark"] {
      color-scheme: dark;
      --primary-color: #6c63ff;
      --secondary-color: #564dff;
      background-color: #1a1a1a;
    }

    [data-bs-theme="dark"] .dashboard-card {
      background: #2d2d2d;
      color: white;
    }
  </style>
</head>

<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">
      <i class="bi bi-speedometer2 me-2"></i>智慧管理
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <!-- 数据看板 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-target="dashboard">
            <i class="bi bi-grid me-1"></i>数据看板
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" data-target="sales-dashboard"><i class="bi bi-graph-up me-2"></i>进销看板</a></li>
            <li><a class="dropdown-item" href="#" data-target="finance-dashboard"><i class="bi bi-pie-chart me-2"></i>收支看板</a></li>
          </ul>
        </li>

        <!-- 进销管理 -->
        <li class="nav-item">
          <a class="nav-link" href="#" data-target="inventory-management"><i class="bi bi-boxes me-1"></i>进销管理</a>
        </li>

        <!-- 日常开支 -->
        <li class="nav-item">
          <a class="nav-link" href="#" data-target="daily-expenses"><i class="bi bi-cash-coin me-1"></i>日常开支</a>
        </li>

        <!-- 系统管理 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-target="system-management">
            <i class="bi bi-gear me-1"></i>系统管理
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" data-target="account-management"><i class="bi bi-people me-2"></i>账户管理</a></li>
            <li><a class="dropdown-item" href="#" data-target="permission-configuration"><i class="bi bi-shield-lock me-2"></i>权限配置</a></li>
            <li><a class="dropdown-item" href="#" data-target="dictionary-management"><i class="bi bi-book me-2"></i>字典管理</a></li>
          </ul>
        </li>

      </ul>

      <div class="d-flex align-items-center">
        <div class="dropdown me-3">
          <div class="theme-switcher bg-primary" data-bs-theme="light"
               onclick="document.documentElement.setAttribute('data-bs-theme','light')"></div>
          <div class="theme-switcher bg-dark mt-2" data-bs-theme="dark"
               onclick="document.documentElement.setAttribute('data-bs-theme','dark')"></div>
        </div>

        <div class="dropdown">
          <a class="btn btn-light rounded-pill" href="#" role="button" data-bs-toggle="dropdown">
            <i class="bi bi-person-circle me-2"></i>管理员
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>个人中心</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- 主内容 -->
<div class="container mt-5 pt-5">
  <iframe th:src="@{/dashboard}" width="100%" height="880" scrolling="none"></iframe>
</div>

<script src="../static/bootstrap/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="../static/bootstrap/bootstrap-icons.css">

<script type="javascript">
  document.addEventListener('DOMContentLoaded', function () {
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('.nav-link');

    // 为每个导航链接添加点击事件监听器
    navLinks.forEach(link => {
      link.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止默认的链接跳转行为

        // 获取要显示的内容标识符
        const target = this.getAttribute('data-target');

        // 更新主内容区域的内容
        // updateMainContent(target);

        changeIframeSrc(target);
      });
    });
  });

  function changeIframeSrc(target) {
    const iframe = document.querySelector('iframe');
    iframe.src = target + '.html';
  }


  function updateMainContent(target) {
    // 清空主内容区域
    const mainContent = document.querySelector('.container.mt-5.pt-5');
    mainContent.innerHTML = '';

    // 根据目标标识符更新主内容区域的内容
    switch (target) {
      case 'dashboard':
        mainContent.innerHTML = `
          <div class="col-12">
            <div class="dashboard-card p-4">
              <h3 class="mb-4"><i class="bi bi-speedometer2 me-2"></i>数据总览</h3>
              <div class="row g-4">
                <div class="col-md-3">
                  <div class="p-3 text-white rounded-3" style="background: var(--success-gradient)">
                    <h5><i class="bi bi-currency-exchange me-2"></i>今日营收</h5>
                    <h2 class="mt-2">¥ 45,680</h2>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="p-3 text-white rounded-3" style="background: var(--info-gradient)">
                    <h5><i class="bi bi-box-seam me-2"></i>库存总量</h5>
                    <h2 class="mt-2">8,452</h2>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="p-3 text-white rounded-3 bg-warning">
                    <h5><i class="bi bi-cash-stack me-2"></i>本月支出</h5>
                    <h2 class="mt-2">¥ 12,340</h2>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="p-3 text-white rounded-3 bg-secondary">
                    <h5><i class="bi bi-activity me-2"></i>运营指标</h5>
                    <h2 class="mt-2">86%</h2>
                  </div>
                </div>
              </div>
            </div>
          </div>
        `;
        break;
      case 'sales-dashboard':
        mainContent.innerHTML = '<h2>进销看板内容</h2>';
        break;
      case 'finance-dashboard':
        mainContent.innerHTML = '<h2>收支看板内容</h2>';
        break;
      case 'inventory-management':
        mainContent.innerHTML = '<h2>进销管理内容</h2>';
        break;
      case 'daily-expenses':
        mainContent.innerHTML = '<h2>日常开支内容</h2>';
        break;
      case 'system-management':
        mainContent.innerHTML = '<h2>系统管理内容</h2>';
        break;
      case 'account-management':
        mainContent.innerHTML = '<h2>账户管理内容</h2>';
        break;
      case 'permission-configuration':
        mainContent.innerHTML = '<h2>权限配置内容</h2>';
        break;
      case 'dictionary-management':
        mainContent.innerHTML = '<h2>字典管理内容</h2>';
        break;
      default:
        mainContent.innerHTML = '<h2>未找到内容</h2>';
    }
  }
</script>
</body>
</html>