<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel | Manage Transactions</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
    <style>
    body {
      min-height: 100vh;
      overflow-x: hidden;
    }

     /* Preloader Overlay */
    #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--color-navy);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
    }

    /* Loader Circles */
    .loader {
    display: flex;
    gap: 10px;
    }

    .loader span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4e00ff, #09afff);
    animation: bounce 1.4s infinite ease-in-out;
    }

    .loader span:nth-child(2) {
    animation-delay: 0.2s;
    }
    .loader span:nth-child(3) {
    animation-delay: 0.4s;
    }

    @keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.3);
        opacity: 1;
    }
    }

    /* Hide on load */
    .loaded #preloader {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #sidebar {
      width: 250px;
      background-color: #1e1e2f;
      color: #fff;
      min-height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      transition: all 0.3s;
      z-index: 1030;
    }

    #sidebar .nav-link {
      color: #adb5bd;
    }

    #sidebar .nav-link.active {
      background-color: #343a40;
      color: #fff;
    }

    #content {
      margin-left: 250px;
      transition: all 0.3s;
      padding: 20px;
    }

    #sidebar.collapsed {
      margin-left: -250px;
    }

    #content.expanded {
      margin-left: 0;
    }

    .card-summary {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
      padding: 20px;
    }

    .card-icon {
      font-size: 2.5rem;
      color: #0d6efd;
    }

    .closeSidebar {
        display: none;
    }

    .status-badge {
      text-transform: capitalize;
    }

    @media (max-width: 768px) {
      #sidebar {
        position: fixed;
        height: 100vh;
        margin-left: -250px;
      }

      #sidebar.show {
        margin-left: 0;
      }

      #content {
        margin-left: 0;
      }

      .closeSidebar {
        display: flex;
      }
    }
  </style>
</head>
<body>

    <div id="preloader">
        <div class="loader">
            <span></span>
            <span></span>
            <span></span>
        </div>  
    </div>

    <!-- Top Navbar -->
  <nav class="navbar navbar-dark bg-dark d-md-none">
    <div class="container-fluid">
      <button class="btn btn-outline-light" id="menu-toggle"><i class="bi bi-list"></i></button>
      <span class="navbar-brand ms-2">Admin Panel</span>
    </div>
  </nav>

  <!-- Sidebar -->
  <nav id="sidebar" class="d-flex flex-column p-3">
    <div class="mb-3 align-items-center justify-content-end closeSidebar">
        <button class="btn btn-outline-light" id="sidebar-toggle"><i class="bi bi-x"></i></button>
    </div>
    <h3 class="text-center mb-4 d-none d-md-block">Admin Panel</h3>
    <ul class="nav nav-pills flex-column mb-auto">
      <li><a href="/admin-dashboard" class="nav-link"><i class="bi bi-speedometer2 me-2"></i>Dashboard</a></li>
      <li><a href="/manage-users" class="nav-link"><i class="bi bi-people me-2"></i>Users</a></li>
      <li><a href="/manage-transactions" class="nav-link active"><i class="bi bi-cash-stack me-2"></i>Transactions</a></li>
      <li><a href="/manage-earnings" class="nav-link"><i class="bi bi-cash-coin"></i>Earnings</a></li>
      <li><a href="/logout.php" class="nav-link text-danger mt-auto"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
    </ul>
  </nav>

  <!-- Main Content -->
  <div id="content">
    <h2 class="mb-4">Manage Transactions</h2>
    <div id="alertContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1055;"></div>

     <!-- Tabs -->
    <ul class="nav nav-tabs mb-4" id="transactionTabs">
      <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#deposits">Deposits</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#withdrawals">Withdrawals</a>
      </li>
    </ul>

    <div class="tab-content">
        <!-- Deposits -->
        <div class="tab-pane fade show active" id="deposits">
            <div class="table-responsive">
                <table class="table table-striped align-middle">
                    <thead>
                    <tr>
                        <th>User ID</th>
                        <th>USD Amount</th>
                        <th>Crypto Amount</th>
                        <th>Crypto Type</th>
                        <th>Wallet</th>
                        <th>Proof</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="depositTableBody">
                    <!-- JS will populate this -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- withdrawals -->
        <div class="tab-pane fade" id="withdrawals">
            <div class="table-responsive">
                <table class="table table-striped align-middle">
                    <thead>
                    <tr>
                        <th>User ID</th>
                        <th>USD Amount</th>
                        <th>Crypto Amount</th>
                        <th>Crypto Type</th>
                        <th>Wallet</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="withdrawalTableBody">
                    <!-- JS will populate this -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
  </div>
    

   <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const menuToggle = document.getElementById('menu-toggle');
    const sidebarToggle = document.getElementById('sidebar-toggle');
    const sidebar = document.getElementById('sidebar');

    window.addEventListener("load", () => {
        document.body.classList.add("loaded");
    });

    menuToggle.addEventListener('click', () => {
      sidebar.classList.toggle('show');
    });
    sidebarToggle.addEventListener('click', () => {
      sidebar.classList.remove('show');
    });
  </script>
  <script src="/manage_Transactions.js"></script>
</body>
</html>