<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>PeHunt | Dashboard</title>
  <!-- Google Fonts + Font Awesome 6 (Free) -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(145deg, #f4f7fc 0%, #eef2f5 100%);
      min-height: 100vh;
      color: #1a2c3e;
    }

    /* custom scroll */
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    ::-webkit-scrollbar-track {
      background: #e2e8f0;
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background: #b9c8e8;
      border-radius: 10px;
    }

    /* Dashboard layout */
    .dashboard {
      display: flex;
      min-height: 100vh;
      position: relative;
    }

    /* ========= SIDEBAR ========= */
    .sidebar {
      width: 280px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(2px);
      box-shadow: 8px 0 28px rgba(0, 0, 0, 0.04);
      border-right: 1px solid rgba(72, 94, 144, 0.12);
      transition: all 0.25s ease;
      flex-shrink: 0;
      z-index: 10;
    }

    .sidebar-brand {
      padding: 28px 24px 20px 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .brand-name {
      font-size: 28px;
      font-weight: 800;
      background: linear-gradient(135deg, #0F2B3D, #1D5A7A);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -0.5px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .brand-name i {
      background: none;
      -webkit-background-clip: unset;
      background-clip: unset;
      color: #1D5A7A;
      font-size: 26px;
    }

    .testing-badge {
      display: inline-block;
      background: #eef2ff;
      margin-top: 12px;
      padding: 6px 14px;
      border-radius: 40px;
      font-size: 0.75rem;
      font-weight: 600;
      color: #1e4a76;
      letter-spacing: 0.3px;
      border: 1px solid rgba(29, 90, 122, 0.2);
      backdrop-filter: blur(2px);
    }

    .testing-badge i {
      font-size: 0.7rem;
      margin-right: 6px;
      color: #2c7da0;
    }

    .sidebar-nav {
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 18px;
      border-radius: 18px;
      font-weight: 500;
      font-size: 0.95rem;
      color: #2c4b66;
      transition: all 0.2s;
      cursor: default;
    }

    .nav-item i {
      width: 24px;
      font-size: 1.2rem;
      color: #547c9e;
      transition: 0.2s;
    }

    .nav-item.active {
      background: linear-gradient(115deg, #eef5ff, #e2edf7);
      color: #0f5575;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02);
      border-left: 3px solid #2b7a62;
    }

    .nav-item.active i {
      color: #1f6e5c;
    }

    .nav-item:not(.active):hover {
      background: rgba(255, 255, 255, 0.7);
      color: #135b7a;
      transform: translateX(4px);
    }

    /* ========= MAIN CONTENT ========= */
    .main-content {
      flex: 1;
      padding: 28px 32px;
      overflow-x: auto;
    }

    /* header top area */
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 32px;
      gap: 16px;
    }

    .page-title h1 {
      font-size: 1.7rem;
      font-weight: 700;
      color: #0a2f44;
      letter-spacing: -0.3px;
    }

    .page-title p {
      font-size: 0.8rem;
      color: #5b7f9c;
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .virtual-meta {
      background: white;
      padding: 8px 20px;
      border-radius: 100px;
      font-size: 0.8rem;
      font-weight: 500;
      color: #1d5a7a;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
      border: 1px solid #cbdde9;
    }

    /* Wallet Cards Grid (3) */
    .wallet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      margin-bottom: 40px;
    }

    .wallet-card {
      background: white;
      border-radius: 28px;
      padding: 22px 20px;
      transition: all 0.25s ease;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.02), 0 6px 6px rgba(0, 0, 0, 0.03);
      border: 1px solid rgba(0, 0, 0, 0.04);
      backdrop-filter: blur(2px);
    }

    .wallet-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 36px -12px rgba(0, 32, 64, 0.12);
      border-color: rgba(52, 152, 126, 0.2);
    }

    .wallet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .wallet-header h3 {
      font-size: 1.1rem;
      font-weight: 600;
      color: #2c4e6e;
    }

    .wallet-icon {
      background: #eef3fa;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 24px;
      color: #2b7a62;
      font-size: 1.4rem;
    }

    .wallet-balance {
      font-size: 2.4rem;
      font-weight: 800;
      color: #1a3c4f;
      letter-spacing: -1px;
      margin-top: 8px;
    }

    .balance-label {
      font-size: 0.7rem;
      font-weight: 500;
      color: #779bb3;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Transaction Cards (UPI & Bank Payout) */
    .transaction-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 28px;
      margin-bottom: 20px;
    }

    .tx-card {
      background: white;
      border-radius: 32px;
      padding: 24px;
      transition: all 0.2s;
      border: 1px solid rgba(0, 0, 0, 0.03);
      box-shadow: 0 16px 28px -12px rgba(0, 0, 0, 0.08);
    }

    .tx-card:hover {
      box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.12);
    }

    .tx-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px dashed #e9edf2;
      padding-bottom: 14px;
      margin-bottom: 20px;
    }

    .tx-title h2 {
      font-size: 1.45rem;
      font-weight: 700;
      color: #173e54;
    }

    .tx-amount-badge {
      background: #f0f4f9;
      padding: 6px 14px;
      border-radius: 40px;
      font-weight: 700;
      font-size: 1rem;
      color: #2b7a62;
    }

    .charge-row {
      background: #f9fafc;
      border-radius: 24px;
      padding: 12px 16px;
      margin: 16px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
    }

    .charge-detail {
      display: flex;
      gap: 28px;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .charge-item {
      display: flex;
      align-items: baseline;
      gap: 12px;
      background: white;
      padding: 6px 18px;
      border-radius: 60px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .charge-item span:first-child {
      font-weight: 500;
      color: #5e7f99;
    }

    .charge-item span:last-child {
      font-weight: 800;
      font-size: 1.2rem;
      color: #1a526e;
    }

    .total-charge-line {
      margin-top: 20px;
      background: #eef3fc;
      border-radius: 20px;
      padding: 12px 18px;
      display: flex;
      justify-content: space-between;
      font-weight: 700;
      font-size: 1rem;
      border: 1px solid #dae8f2;
    }

    .total-charge-line span:first-child {
      color: #1b5a77;
    }

    .total-charge-line span:last-child {
      font-size: 1.2rem;
      color: #1f5e4c;
    }

    hr {
      margin: 18px 0;
      border: none;
      height: 1px;
      background: linear-gradient(to right, #e0e8f0, transparent);
    }

    /* extra micro */
    .footer-note {
      text-align: center;
      margin-top: 48px;
      font-size: 0.7rem;
      color: #8aaec2;
      font-weight: 500;
    }

    /* Responsive Magic */
    @media (max-width: 880px) {
      .sidebar {
        width: 100%;
        position: relative;
        box-shadow: none;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }
      .dashboard {
        flex-direction: column;
      }
      .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 16px 12px;
      }
      .nav-item {
        padding: 8px 16px;
        font-size: 0.8rem;
        background: rgba(255,255,240,0.7);
        border-radius: 40px;
      }
      .nav-item i {
        font-size: 1rem;
      }
      .sidebar-brand {
        text-align: center;
        padding: 20px 16px 12px;
      }
      .testing-badge {
        display: inline-flex;
        margin-top: 8px;
      }
      .main-content {
        padding: 20px 18px;
      }
      .wallet-balance {
        font-size: 1.9rem;
      }
    }

    @media (max-width: 520px) {
      .tx-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .charge-detail {
        flex-direction: column;
        gap: 10px;
      }
      .charge-item {
        justify-content: space-between;
      }
      .wallet-header h3 {
        font-size: 1rem;
      }
    }

    /* glass effect for cards global */
    .wallet-card, .tx-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(2px);
    }

    /* ensure zero values are consistent */
    .highlight-zero {
      font-weight: 800;
    }

    /* hover micro animations */
    .charge-item:hover {
      background: #f0f5fa;
      transition: 0.1s;
    }
  </style>
</head>
<body>
<div class="dashboard">
  <!-- SIDEBAR: contains all menu items from original screenshot -->
  <aside class="sidebar">
    <div class="sidebar-brand">
      <div class="brand-name">
        <i class="fas fa-hippo"></i> PeHunt
      </div>
      <div class="testing-badge">
        <i class="fas fa-flask"></i> Testing (AID - 16)
      </div>
    </div>
    <nav class="sidebar-nav">
      <div class="nav-item active">
        <i class="fas fa-tachometer-alt"></i> <span>Dashboard</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-layer-group"></i> <span>Panel Resource</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-concierge-bell"></i> <span>Services</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-wallet"></i> <span>Collection Wallet</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-paper-plane"></i> <span>Payout Wallet</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-chart-line"></i> <span>RR Wallet</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-file-alt"></i> <span>Reports</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-headset"></i> <span>Support</span>
      </div>
    </nav>
  </aside>

  <!-- MAIN DASHBOARD -->
  <main class="main-content">
    <div class="top-bar">
      <div class="page-title">
        <h1>Financial Overview</h1>
        <p><i class="fas fa-sync-alt fa-fw"></i> Real-time static snapshot · all values as per current status</p>
      </div>
      <div class="virtual-meta">
        <i class="fas fa-clock"></i> Live · ZERO balances
      </div>
    </div>

    <!-- THREE WALLET CARDS: Collection, Payout, RR Wallet -->
    <div class="wallet-grid">
      <!-- Collection Wallet Card -->
      <div class="wallet-card">
        <div class="wallet-header">
          <h3><i class="fas fa-hand-holding-usd" style="margin-right: 6px;"></i> Collection Wallet</h3>
          <div class="wallet-icon"><i class="fas fa-inbox"></i></div>
        </div>
        <div class="wallet-balance">0</div>
        <div class="balance-label">Current Balance (INR)</div>
      </div>
      <!-- Payout Wallet Card -->
      <div class="wallet-card">
        <div class="wallet-header">
          <h3><i class="fas fa-arrow-up"></i> Payout Wallet</h3>
          <div class="wallet-icon"><i class="fas fa-arrow-right-to-bracket"></i></div>
        </div>
        <div class="wallet-balance">0</div>
        <div class="balance-label">Available for Payout</div>
      </div>
      <!-- RR Wallet Card (Reserve / Rolling Reserve) -->
      <div class="wallet-card">
        <div class="wallet-header">
          <h3><i class="fas fa-shield-alt"></i> RR Wallet</h3>
          <div class="wallet-icon"><i class="fas fa-lock"></i></div>
        </div>
        <div class="wallet-balance">0</div>
        <div class="balance-label">Reserve / Risk Reserve</div>
      </div>
    </div>

    <!-- UPI COLLECTION + BANK PAYOUT (with Charge & GST details & Total Charge) -->
    <div class="transaction-section">
      <!-- UPI COLLECTION block -->
      <div class="tx-card">
        <div class="tx-title">
          <h2><i class="fas fa-mobile-alt"></i> UPI Collection</h2>
          <div class="tx-amount-badge">Amount: 0</div>
        </div>
        <!-- Charge and GST as per screenshot: Charge & GST both 0 -->
        <div class="charge-row">
          <div class="charge-detail">
            <div class="charge-item"><span><i class="fas fa-percent"></i> Charge</span> <span>0</span></div>
            <div class="charge-item"><span><i class="fas fa-taxi"></i> GST</span> <span>0</span></div>
          </div>
        </div>
        <!-- Additional Charge + GST breakdown line (explicit 0s) -->
        <div style="display: flex; justify-content: space-between; padding: 8px 6px 0px 6px; font-size: 0.85rem; color: #487e9e;">
          <span><i class="far fa-circle"></i> Charge amount</span>
          <span>₹0.00</span>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 4px 6px; font-size: 0.85rem; color: #487e9e;">
          <span><i class="fas fa-receipt"></i> GST (18% on Charge)</span>
          <span>₹0.00</span>
        </div>
        <!-- Total Charge: 0 (as requested) -->
        <div class="total-charge-line">
          <span><i class="fas fa-charging-station"></i> Total Charge (Fee + GST)</span>
          <span>₹0</span>
        </div>
        <!-- extra note: explicit static zero matching screenshot -->
        <hr>
        <div style="font-size: 0.7rem; text-align: right; color: #7c9cba;">Last settled: N/A | TDR: 0%</div>
      </div>

      <!-- BANK PAYOUT card -->
      <div class="tx-card">
        <div class="tx-title">
          <h2><i class="fas fa-university"></i> Bank Payout</h2>
          <div class="tx-amount-badge">Amount: 0</div>
        </div>
        <!-- Charge & GST group display -->
        <div class="charge-row">
          <div class="charge-detail">
            <div class="charge-item"><span><i class="fas fa-percent"></i> Charge</span> <span>0</span></div>
            <div class="charge-item"><span><i class="fas fa-taxi"></i> GST</span> <span>0</span></div>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 8px 6px 0px 6px; font-size: 0.85rem; color: #487e9e;">
          <span><i class="fas fa-coins"></i> Payout Charge</span>
          <span>₹0.00</span>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 4px 6px; font-size: 0.85rem; color: #487e9e;">
          <span><i class="fas fa-receipt"></i> GST on Charge</span>
          <span>₹0.00</span>
        </div>
        <!-- Total Charge: 0 (second occurrence as per original) -->
        <div class="total-charge-line">
          <span><i class="fas fa-charging-station"></i> Total Charge (Fee + GST)</span>
          <span>₹0</span>
        </div>
        <hr>
        <div style="font-size: 0.7rem; text-align: right; color: #7c9cba;">NEFT/IMPS · settlement T+1</div>
      </div>
    </div>

    <!-- EXTRA METRICS to match screenshot: Additional static Charge / GST rows and total charges double check (already shown above) 
         but we also replicate the subtle "Charge GST Charge GST 0 0 0 0" layout in an elegant way 
         and also show both "Total Charge: 0" for each method, fully present. 
         Also include original numbers for zero consistency. -->
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin: 28px 0 12px 0;">
      <div style="flex:1; background: #ffffffc9; border-radius: 28px; padding: 12px 20px; border: 1px solid rgba(0,0,0,0.03); backdrop-filter: blur(2px);">
        <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;">
          <span style="font-weight: 600;"><i class="fas fa-bolt"></i> UPI Summary</span>
          <span style="background: #f0f4fa; padding: 4px 12px; border-radius: 24px;">Charge: 0</span>
          <span style="background: #f0f4fa; padding: 4px 12px; border-radius: 24px;">GST: 0</span>
          <span class="highlight-zero" style="color:#2b7a62;">Total Charge: 0</span>
        </div>
      </div>
      <div style="flex:1; background: #ffffffc9; border-radius: 28px; padding: 12px 20px; border: 1px solid rgba(0,0,0,0.03); backdrop-filter: blur(2px);">
        <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;">
          <span style="font-weight: 600;"><i class="fas fa-building-columns"></i> Bank Payout Summary</span>
          <span style="background: #f0f4fa; padding: 4px 12px; border-radius: 24px;">Charge: 0</span>
          <span style="background: #f0f4fa; padding: 4px 12px; border-radius: 24px;">GST: 0</span>
          <span class="highlight-zero" style="color:#2b7a62;">Total Charge: 0</span>
        </div>
      </div>
    </div>

    <!-- Additional row to match exactly the "Charge GST Charge GST" layout from screenshot 
         and also the 0 0 0 0 pattern in a clean design -->
    <div class="widget-row" style="background: rgba(255,255,245,0.6); border-radius: 28px; padding: 16px 20px; margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;">
      <div><i class="fas fa-chart-simple"></i> <strong>Fee Breakdown</strong></div>
      <div class="badge-set" style="display: flex; gap: 20px; flex-wrap: wrap;">
        <span><i class="fas fa-bolt"></i> Charge: 0</span>
        <span><i class="fas fa-percent"></i> GST: 0</span>
        <span><i class="fas fa-bolt"></i> Charge: 0</span>
        <span><i class="fas fa-percent"></i> GST: 0</span>
      </div>
      <div style="font-weight: 500; background: #eaf1f9; padding: 6px 15px; border-radius: 30px;">All applicable taxes: 0</div>
    </div>

    <!-- Overall total charge recap (twice? already in card but also additional emphasis) -->
    <div style="display: flex; gap: 18px; justify-content: flex-end; margin-top: 28px; flex-wrap: wrap;">
      <div style="background: white; border-radius: 50px; padding: 10px 24px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);"><i class="fas fa-receipt"></i> Total Charge (UPI) : 0</div>
      <div style="background: white; border-radius: 50px; padding: 10px 24px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);"><i class="fas fa-receipt"></i> Total Charge (Bank Payout) : 0</div>
    </div>

    <!-- footer hint: all data matches the screenshot exactly (0 values, wallets, charge & gst sections) -->
    <div class="footer-note">
      <i class="fas fa-database"></i> Static demo dashboard — PeHunt · all metrics reflect current snapshot &nbsp;|&nbsp; <i class="fas fa-charging-station"></i> Collection Wallet | Payout Wallet | RR Wallet = 0 &nbsp;|&nbsp; UPI / Bank charges = 0
    </div>
  </main>
</div>
</body>
</html><?php /**PATH C:\xampp\htdocs\phunt\resources\views/welcome.blade.php ENDPATH**/ ?>