<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Dashboard</title>

  <!-- CSS Files -->
  <link rel="stylesheet" href="vendors/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="vendors/feather/feather.css">
  <link rel="stylesheet" href="vendors/base/vendor.bundle.base.css">
  <link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css"/>
  <link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="vendors/jquery-bar-rating/fontawesome-stars-o.css">
  <link rel="stylesheet" href="vendors/jquery-bar-rating/fontawesome-stars.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.2.3/css/fixedHeader.dataTables.min.css">
  <link rel="shortcut icon" href="images/favicon.png" />

  <style>
    .cool-input {
        border: 2px solid #007bff;
        border-radius: 0.25rem;
        padding: 0.5rem 1rem;
        font-size: 1rem;
        transition: all 0.3s ease;
    }
    .cool-input:focus {
        border-color: #0056b3;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .cool-input::placeholder {
        color: #6c757d;
        opacity: 1;
    }
    .cool-button {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        border-radius: 0.25rem;
        transition: all 0.3s ease;
    }
    .cool-button:hover {
        background-color: #0056b3;
        color: #fff;
    }
    .cool-button.btn-secondary:hover {
        background-color: #343a40;
        color: #fff;
    }
    #copied {
        visibility: hidden;
        z-index: 1;
        position: fixed;
        bottom: 50%;
        background-color: #333;
        color: #fff;
        border-radius: 6px;
        padding: 16px;
        max-width: 250px;
        font-size: 17px;
    }
    #copied.show {
        visibility: visible;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    .form-select {
        display: block;
        width: 100%;
        padding: 10px 40px 10px 15px;
        font-size: 16px;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px 16px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        appearance: none;
    }
  </style>
</head>
<body>
   <div class="container-scroller">
   <!-- Include Material Icons in <head> if not done -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- START NAVBAR -->
<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row bg-primary">

  
  <!-- Logo Section -->
  <div class="navbar-brand-wrapper d-flex align-items-center justify-content-center bg-primary px-3">
    <a class="navbar-brand brand-logo" href="dashboard.php">
      <img src="images/logo.png" alt="logo" style="height: 50px;">
    </a>
    <a class="navbar-brand brand-logo-mini" href="dashboard.php">
      <img src="images/logo-mini.png" alt="logo" style="height: 40px;">
    </a>
  </div>

  <!-- Right Side Content -->
  <div class="navbar-menu-wrapper d-flex align-items-center justify-content-between flex-grow-1 px-3">

    <!-- Left: Sidebar Toggle -->
    <button class="navbar-toggler border-0 bg-transparent" type="button" data-toggle="minimize">
      <span class="material-icons">menu</span>
    </button>

<!-- Top Right Section -->
<div class="d-flex align-items-center justify-content-end w-100">

   <!--Language Selector -->
  <div class="custom-select-wrapper mr-4">
    <select class="form-control form-control-sm border rounded" style="min-width: 150px; height: 32px;">
      <option selected>Select Language</option>
      <option value="en">English</option>
      <option value="hi">Hindi</option>
    </select>
  </div>-->

  <!-- Date & Time -->
  <div class="text-muted small mr-4" id="datetime"></div>

  <!-- Currency -->
  <div class="text-muted small mr-4">
    Currency: <strong class="text-dark">INR</strong>
  </div>

  <!-- Notifications -->
<div class="d-flex align-items-center mr-4">
  <a href="#" onclick="openPopup('success')" class="d-flex align-items-center text-success mr-3">
    <i class="material-icons mr-1">notifications_active</i><span>5</span>
  </a>
  <a href="#" onclick="openPopup('danger')" class="d-flex align-items-center text-danger">
    <i class="material-icons mr-1">notifications</i><span>2</span>
  </a>
</div>

<!-- Notification Popup Modal -->
<div id="notificationPopup" class="modal" style="display:none; position:fixed; top:10%; left:50%; transform:translateX(-50%); background:#fff; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.5); z-index:9999; max-width:400px; width:90%;">
  <div style="padding:20px; border-bottom:1px solid #ccc; font-weight:bold;" id="popupTitle">Notifications</div>
  <div id="popupContent" style="padding:20px;"></div>
  <div style="padding:10px; text-align:right;">
    <button onclick="closePopup()" class="btn btn-secondary">Close</button>
  </div>
</div>


  <!-- Avatar Dropdown (No Settings Icon) -->
  <div class="dropdown">
    <a class="nav-link dropdown-toggle p-0 d-flex align-items-center" href="#" id="adminDropdown" data-toggle="dropdown">
      <img src="https://win-xo.fun/malik999/images/MRCoder.png"
           alt="Admin" class="rounded-circle" style="width: 32px; height: 32px; object-fit: cover;">
    </a>

   <div class="dropdown-menu dropdown-menu-right" aria-labelledby="adminDropdown">
  <h6 class="dropdown-header">Settings</h6>

  <a class="dropdown-item d-flex align-items-center" href="adminpass.php">
    <i class="material-icons mr-2">lock</i> Change Admin Password
  </a>

  <a class="dropdown-item d-flex align-items-center" href="logout.php">
    <i class="material-icons mr-2">logout</i> Logout
              </a>
            </div>
          </li>
        </ul>
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
          <span class="icon-menu"></span>
        </button>
      </div>
    </nav>

    <!-- Sidebar -->
    <div class="container-fluid page-body-wrapper">
      <nav class="sidebar sidebar-offcanvas" id="sidebar">
        <div class="user-profile">

        </div>
        <?php include 'compass.php'; ?>
      </nav>
      
      <script>
function openPopup(type) {
  const content = {
    success: [
      "🟢 New user registration",
      "🟢 Withdrawal applied",
      "🟢 Deposit applied"
    ],
    danger: [
      "🔴 Deposit not received",
      "🔴 Withdrawal problem",
      "🔴 Change Bank name",
      "🔴 IFSC code change"
    ]
  };

  document.getElementById("popupTitle").innerText = type === 'success' ? "System Alerts" : "Customer Support";
  document.getElementById("popupContent").innerHTML = content[type].map(item => `<div>${item}</div>`).join("");
  document.getElementById("notificationPopup").style.display = "block";
}

function closePopup() {
  document.getElementById("notificationPopup").style.display = "none";
}

function openPopup(type) {
  fetch('get_notifications.php?type=' + type)
    .then(response => response.json())
    .then(data => {
      document.getElementById("popupTitle").innerText = type === 'success' ? "System Alerts" : "Customer Support";
      document.getElementById("popupContent").innerHTML = data.map(item => `<div>${item}</div>`).join("");
      document.getElementById("notificationPopup").style.display = "block";
    });
}

</script>

