<?php
session_start();
include "config.php";

// Redirect if user is not logged in
if (!isset($_SESSION['user'])) {
    header("Location: index.php");
    exit();
}

// Get user details from session
$user = $_SESSION['user'];

//echo "Welcome " . htmlspecialchars($user['name'] ?? 'User') . "<br>"; //echo
"Email: " . htmlspecialchars($user['email'] ?? '') . "<br />"; //echo "Phone: "
. htmlspecialchars($user['phone'] ?? '') . "<br />"; ?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      name="description"
      content="Vali is a responsive and free admin theme built with Bootstrap 5, SASS and PUG.js. It's fully customizable and modular."
    />
    <!-- Twitter meta-->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:site" content="@pratikborsadiya" />
    <meta property="twitter:creator" content="@pratikborsadiya" />
    <!-- Open Graph Meta-->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Vali Admin" />
    <meta property="og:title" content="Vali - Free Bootstrap 5 admin theme" />
    <meta
      property="og:url"
      content="http://pratikborsadiya.in/blog/vali-admin"
    />
    <meta
      property="og:image"
      content="http://pratikborsadiya.in/blog/vali-admin/hero-social.png"
    />
    <meta
      property="og:description"
      content="Vali is a responsive and free admin theme built with Bootstrap 5, SASS and PUG.js. It's fully customizable and modular."
    />
    <title>Vali Admin - Free Bootstrap 5 Admin Template</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <!-- Font-icon css-->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
    />
  </head>

  <body class="app sidebar-mini">
    <!-- Navbar-->
    <header class="app-header">
      <a class="app-header__logo" href="index.php">Krunal Gamit</a>
      <!-- Sidebar toggle button--><a
        class="app-sidebar__toggle"
        href="#"
        data-toggle="sidebar"
        aria-label="Hide Sidebar"
      ></a>
      <!-- Navbar Right Menu-->
      <ul class="app-nav">
        <li class="app-search">
          <input class="app-search__input" type="search" placeholder="Search" />
          <button class="app-search__button">
            <i class="bi bi-search"></i>
          </button>
        </li>

        <!-- User Menu-->
        <li class="dropdown">
          <a
            class="app-nav__item"
            href="#"
            data-bs-toggle="dropdown"
            aria-label="Open Profile Menu"
            ><i class="bi bi-person fs-4"></i
          ></a>
          <ul class="dropdown-menu settings-menu dropdown-menu-right">
            <li>
              <a class="dropdown-item" href="page-user.html"
                ><i class="bi bi-person me-2 fs-5"></i> Profile</a
              >
            </li>
            <li>
              <a class="dropdown-item" href="logout.php"
                ><i class="bi bi-box-arrow-right me-2 fs-5"></i> Logout</a
              >
            </li>
          </ul>
        </li>
      </ul>
    </header>
    <!-- Sidebar menu-->
    <div class="app-sidebar__overlay" data-toggle="sidebar"></div>
    <aside class="app-sidebar">
      <div class="app-sidebar__user">
        <img
          class="app-sidebar__user-avatar"
          src="https://randomuser.me/api/portraits/men/1.jpg"
          alt="User Image"
        />
        <div>
          <p class="app-sidebar__user-name">
            <?php echo htmlspecialchars($user['name'] ?? 'User') ?>
          </p>
          <p class="app-sidebar__user-designation">IT EXPERT</p>
        </div>
      </div>
      <ul class="app-menu">
        <li>
          <a class="app-menu__item active" href="dashboard.php"
            ><i class="app-menu__icon bi bi-speedometer"></i
            ><span class="app-menu__label">Dashboard</span></a
          >
        </li>
        <li class="treeview">
          <a class="app-menu__item" href="#" data-toggle="treeview"
            ><i class="app-menu__icon bi bi-laptop"></i
            ><span class="app-menu__label">UI Elements</span
            ><i class="treeview-indicator bi bi-chevron-right"></i
          ></a>
          <ul class="treeview-menu">
            <li>
              <a class="treeview-item" href="bootstrap-components.html"
                ><i class="icon bi bi-circle-fill"></i> Bootstrap Elements</a
              >
            </li>
            <li>
              <a
                class="treeview-item"
                href="https://icons.getbootstrap.com/"
                target="_blank"
                rel="noopener"
                ><i class="icon bi bi-circle-fill"></i> Font Icons</a
              >
            </li>
            <li>
              <a class="treeview-item" href="ui-cards.html"
                ><i class="icon bi bi-circle-fill"></i> Cards</a
              >
            </li>
            <li>
              <a class="treeview-item" href="widgets.html"
                ><i class="icon bi bi-circle-fill"></i> Widgets</a
              >
            </li>
          </ul>
        </li>
        <li class="treeview">
          <a class="app-menu__item" href="#" data-toggle="treeview"
            ><i class="app-menu__icon bi bi-ui-checks"></i
            ><span class="app-menu__label">Forms</span
            ><i class="treeview-indicator bi bi-chevron-right"></i
          ></a>
          <ul class="treeview-menu">
            <li>
              <a class="treeview-item" href="form-components.html"
                ><i class="icon bi bi-circle-fill"></i> Form Components</a
              >
            </li>
            <li>
              <a class="treeview-item" href="form-samples.html"
                ><i class="icon bi bi-circle-fill"></i> Form Samples</a
              >
            </li>
          </ul>
        </li>
        <li class="treeview">
          <a class="app-menu__item" href="#" data-toggle="treeview"
            ><i class="app-menu__icon bi bi-table"></i
            ><span class="app-menu__label">Tables</span
            ><i class="treeview-indicator bi bi-chevron-right"></i
          ></a>
          <ul class="treeview-menu">
            <li>
              <a class="treeview-item" href="table-basic.html"
                ><i class="icon bi bi-circle-fill"></i> Basic Tables</a
              >
            </li>
            <li>
              <a class="treeview-item" href="table-data-table.html"
                ><i class="icon bi bi-circle-fill"></i> Data Tables</a
              >
            </li>
          </ul>
        </li>
        <li class="treeview">
          <a class="app-menu__item" href="#" data-toggle="treeview"
            ><i class="app-menu__icon bi bi-file-earmark"></i
            ><span class="app-menu__label">Pages</span
            ><i class="treeview-indicator bi bi-chevron-right"></i
          ></a>
          <ul class="treeview-menu">
            <li>
              <a class="treeview-item" href="blank-page.html"
                ><i class="icon bi bi-circle-fill"></i> Blank Page</a
              >
            </li>
            <li>
              <a class="treeview-item" href="page-login.html"
                ><i class="icon bi bi-circle-fill"></i> Login Page</a
              >
            </li>
            <li>
              <a class="treeview-item" href="page-lockscreen.html"
                ><i class="icon bi bi-circle-fill"></i> Lockscreen Page</a
              >
            </li>
            <li>
              <a class="treeview-item" href="page-user.html"
                ><i class="icon bi bi-circle-fill"></i> User Page</a
              >
            </li>
            <li>
              <a class="treeview-item" href="page-invoice.html"
                ><i class="icon bi bi-circle-fill"></i> Invoice Page</a
              >
            </li>
            <li>
              <a class="treeview-item" href="page-mailbox.html"
                ><i class="icon bi bi-circle-fill"></i> Mailbox</a
              >
            </li>
            <li>
              <a class="treeview-item" href="page-error.html"
                ><i class="icon bi bi-circle-fill"></i> Error Page</a
              >
            </li>
          </ul>
        </li>
        <li>
          <a class="app-menu__item" href="docs.html"
            ><i class="app-menu__icon bi bi-code-square"></i
            ><span class="app-menu__label">Docs</span></a
          >
        </li>
      </ul>
    </aside>
    <main class="app-content">
      <div class="app-title">
        <div>
          <h1><i class="bi bi-speedometer"></i> Dashboard</h1>
          <p>A free and open source Bootstrap 5 admin template</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
          <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
        </ul>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-3">
          <div class="widget-small primary coloured-icon">
            <i class="icon bi bi-people fs-1"></i>
            <div class="info">
              <h4>Users</h4>
              <p><b>5</b></p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="widget-small info coloured-icon">
            <i class="icon bi bi-heart fs-1"></i>
            <div class="info">
              <h4>Likes</h4>
              <p><b>25</b></p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="widget-small warning coloured-icon">
            <i class="icon bi bi-folder2 fs-1"></i>
            <div class="info">
              <h4>Uploades</h4>
              <p><b>10</b></p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="widget-small danger coloured-icon">
            <i class="icon bi bi-star fs-1"></i>
            <div class="info">
              <h4>Stars</h4>
              <p><b>500</b></p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="tile">
            <h3 class="tile-title">Weekly Sales - Last week</h3>
            <div class="ratio ratio-16x9">
              <div id="salesChart"></div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="tile">
            <h3 class="tile-title">Support Requests</h3>
            <div class="ratio ratio-16x9">
              <div id="supportRequestChart"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- Essential javascripts for application to work-->
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    <!-- Page specific javascripts-->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"
    ></script>
    <script type="text/javascript">
      const salesData = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "${value}",
          },
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            smooth: true,
          },
        ],
        tooltip: {
          trigger: "axis",
          formatter: "<b>{b0}:</b> ${c0}",
        },
      };

      const supportRequests = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Support Requests",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: 300,
                name: "In Progress",
              },
              {
                value: 50,
                name: "Delayed",
              },
              {
                value: 100,
                name: "Complete",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      const salesChartElement = document.getElementById("salesChart");
      const salesChart = echarts.init(salesChartElement, null, {
        renderer: "svg",
      });
      salesChart.setOption(salesData);
      new ResizeObserver(() => salesChart.resize()).observe(salesChartElement);

      const supportChartElement = document.getElementById(
        "supportRequestChart"
      );
      const supportChart = echarts.init(supportChartElement, null, {
        renderer: "svg",
      });
      supportChart.setOption(supportRequests);
      new ResizeObserver(() => supportChart.resize()).observe(
        supportChartElement
      );
    </script>
    <!-- Google analytics script-->
    <script type="text/javascript">
      if (document.location.hostname == "pratikborsadiya.in") {
        (function (i, s, o, g, r, a, m) {
          i["GoogleAnalyticsObject"] = r;
          (i[r] =
            i[r] ||
            function () {
              (i[r].q = i[r].q || []).push(arguments);
            }),
            (i[r].l = 1 * new Date());
          (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
          a.async = 1;
          a.src = g;
          m.parentNode.insertBefore(a, m);
        })(
          window,
          document,
          "script",
          "//www.google-analytics.com/analytics.js",
          "ga"
        );
        ga("create", "UA-72504830-1", "auto");
        ga("send", "pageview");
      }
    </script>
  </body>
</html>
