<?php
// dashboard.php — First Heritage Bank Dashboard (Bootstrap 5 + PHP)

// Path to data file
$dataFile = __DIR__ . '/data.json';

// Load or initialize data
if (!file_exists($dataFile)) die("data.json not found.");
$data = json_decode(file_get_contents($dataFile), true);
if (!$data) die("Invalid data.json");

// Extract variables for convenience
$acct = $data['account'];
$txns = $data['transactions'];
// Sort transactions by date (newest first)
usort($txns, function($a, $b) {
    return strtotime($b['date']) - strtotime($a['date']);
});


// Simple monthly totals for chart
$now = new DateTime();
$credits = 0; $debits = 0;
foreach ($txns as $t) {
    $tDate = new DateTime($t['date']);
    if ($now->diff($tDate)->days <= 30) {
        if ($t['type']==='credit') $credits += $t['amount'];
        else $debits += $t['amount'];
    }
}


?>

    <!-- Sidebar -->
<?php
// Read data.json to get live balance and percentages
$dataFile = __DIR__ . '/data.json';
$data = json_decode(file_get_contents($dataFile), true);

function getUserIP() {
    if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
        return $_SERVER['HTTP_CLIENT_IP'];
    } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
        // Handles cases behind proxies or load balancers
        return explode(',', $_SERVER['HTTP_X_FORWARDED_FOR'])[0];
    } else {
        return $_SERVER['REMOTE_ADDR'];
    }
}

// graceful fallback
$totalBalance = $data['account']['balance'] ?? 0;
$incomePercent = $data['account']['income_percentage'] ?? 65;
$debitPercent = $data['account']['debit_percentage'] ?? 35;
?>

<!doctype html>
<html lang="en">
<head>
    
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>First Heritage Bank — Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">



<!--- THIS IS MOBILE STYLE -->

<style>


  @media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 auto;
    width: 100% !important;
  }
}


/* ===== MOBILE VIEW REWORK (Imperial Premium Style) ===== */
@media (max-width: 768px) {
    
  

  body {
    background-color: #ffffff !important;
  }

 .sidebar {
  position: fixed !important;
  left: -250px;
  top: 0;
  width: 230px;
  height: 100vh;
  background: #0a2c75 !important;
  color: white;
  transition: left 0.3s ease-in-out;
  z-index: 1050;
}
.sidebar.active {
  left: 0 !important;
}


  /* Simplify topbar */
  .topbar {
    margin: 0 !important;
    padding: 10px 15px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    justify-content: center !important;
    text-align: center;
  }

  .topbar .fw-semibold {
    font-size: 1.1rem !important;
    color: #222 !important;
    width: 100%;
  }

  /* Main content container */
  .content {
    margin: 0 !important;
    padding: 1rem !important;
  }

  /* Greeting section */
  .content .card.mb-4 {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    padding: 0 !important;
  }

  .content .card.mb-4 h4 {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #111 !important;
  }

  .content .card.mb-4 p {
    font-size: 0.9rem !important;
    color: #555 !important;
    margin-bottom: 1rem;
  }

  /* Buttons (Deposit / Transfer Fund) */
  .content .card.mb-4 .btn {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    
  }

  .content .card.mb-4 .btn-primary {
    background-color: #0b5ed7 !important;
    border: none !important;
  }

  .content .card.mb-4 .btn-danger {
    background-color: #d9534f !important;
    border: none !important;
  }

  .content .card.mb-4 .d-flex {
    justify-content: center !important;
    gap: 10px !important;
  }

  /* Blue balance card */
  .content .row.g-4 .col-md-4:first-child .card {
    background-color: #0a2c75 !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  }

  .content .row.g-4 .col-md-4:first-child .card .text-muted {
    color: #c8d3f0 !important;
  }

  .content .row.g-4 .col-md-4:first-child .card h4 {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  .content .row.g-4 .col-md-4:first-child .card .small.text-muted {
    color: #d5dcf5 !important;
  }

  /* Adjust other summary cards */
  .content .row.g-4 .col-md-4:nth-child(2) .card,
  .content .row.g-4 .col-md-4:nth-child(3) .card {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    text-align: center;
  }

  /* Transaction cards */
  .txn-card {
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 15px !important;
  }

  /* Chart cards */
  .content .col-lg-4 .card,
  .content .col-lg-6 .card {
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
    padding: 15px !important;
  }

  /* Adjust spacing between sections */
  .row {
    margin: 0 !important;
  }
}

</style>
<!--- END OF MOBILE STYLE -->


<style>
:root {
  --primary: #0b5ed7;
  --danger: #dc3545;
  --light: #f8f9fa;
}

body {
  background: #f4f6fa;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== Sidebar ===== */
.sidebar {
  padding: 0rem !important;
  width: 250px;
  min-height: 100vh;
  background: var(--primary);
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  transition: all 0.3s ease;
  z-index: 1050;
}

.sidebar .nav-link {
  color: #fff;
  opacity: 0.9;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

/* ===== Topbar ===== */
.topbar {
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 0 1rem;
  margin-left: 250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ===== Main Content ===== */
.content {
  margin-left: 250px;
  padding: 2rem;
}

.card {
  border: none;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
}

.txn-row:hover {
  background: #f8f9fa;
}

.badge-credit {
  color: green;
}

.badge-debit {
  color: #dc3545;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: -250px;
    top: 0;
    height: 100%;
    z-index: 1050;
  }

  .sidebar.show {
    left: 0;
  }

  .topbar {
    margin-left: 0;
    padding-left: 3.5rem; /* space for toggle button */
  }

  .content {
    margin-left: 0;
    padding: 1rem;
  }

  .sidebar-toggle {
    display: inline-block;
    cursor: pointer;
    color: var(--primary);
    font-size: 1.5rem;
  }

  /* Adjust text and table layout */
  .table-responsive {
    overflow-x: auto;
  }

  .card h4 {
    font-size: 1.1rem;
  }

  .topbar img {
    width: 35px;
    height: 35px;
  }

  body.sidebar-open {
    overflow: hidden;
  }
}

/* ===== Small Devices ===== */
@media (max-width: 575.98px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    gap: 0.5rem;
  }

  .topbar .fw-semibold {
    font-size: 0.95rem;
  }

  .topbar span.text-muted {
    font-size: 0.8rem;
  }

  .content {
    padding: 1rem 0.5rem;
  }

  .card {
    padding: 1rem;
  }
}


/* ====== Modern Transaction Card Style ====== */
.txn-card {
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  padding: 15px 20px;
  margin-bottom: 15px;
  box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,0.05);
  transition: all 0.2s ease-in-out;
}

.txn-card:hover {
  transform: scale(1.01);
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.08);
}

.txn-id {
  font-weight: 600;
  color: #2d3748;
  font-size: 1rem;
}

.txn-ref {
  color: #0d6efd;
  font-weight: 500;
  text-decoration: none;
}

.txn-ref:hover {
  text-decoration: underline;
}

.txn-amount {
  font-weight: 600;
  font-size: 1.1rem;
}

.txn-amount.debit {
  color: #dc3545;
}

.txn-amount.credit {
  color: #198754;
}

.txn-status {
  color: #198754;
  font-weight: 500;
}

.txn-meta {
  color: #6c757d;
  font-size: 0.9rem;
}

.txn-type {
  color: #495057;
  font-weight: 600;
}

</style>

</head>
<body>
    
    

<div class="sidebar d-flex flex-column p-3">
  <div style="border-bottom: solid #fe473a;">
      <img style="margin-top:0.5rem;" src="whitelogo.png"/>
      <p style="text-align: center;font-size: 11px;margin-bottom: 0.5rem;">  Smart Banking for the Good Heritage.</p>
  <!--<h5 class="mb-3 text-center fw-bold text-white">First Heritage Bank</h5>-->
</div>
  <!-- Account Summary Box -->
  <div class="card text-center mb-3 shadow-sm" style="border:none;padding: 10px;">
    <div class="card-body p-2">
      <div class="fw-semibold text-muted small">Available Balance</div>
      <div class="fs-5 fw-bold mb-2">$<?php echo number_format($totalBalance, 2); ?></div>

      <div class="d-flex justify-content-between small">
        <span class="text-success">Income <?php echo $incomePercent; ?>%</span>
        <span class="text-danger">Debit <?php echo $debitPercent; ?>%</span>
      </div>

      <!-- Progress bar -->
      <div class="progress mt-1" style="height:6px;">
        <div class="progress-bar bg-success" role="progressbar" style="width: <?php echo $incomePercent; ?>%"></div>
        <div class="progress-bar bg-danger" role="progressbar" style="width: <?php echo $debitPercent; ?>%"></div>
      </div>

      <!-- Quick Action Buttons -->
      <div class="d-grid gap-2 mt-2">
        <a href="transfer.php" class="btn btn-sm btn-primary">Transfer</a>
        <a href="pay_bills.php" class="btn btn-sm btn-outline-primary">Pay Bills</a>
      </div>
    </div>
  </div>

  <!-- Navigation -->
<ul class="nav nav-pills flex-column mb-auto">
  <li class="nav-item">
    <a href="dashboard.php" class="nav-link active">
      <i class="bi bi-speedometer2 me-2"></i> Dashboard
    </a>
  </li>
  <li class="nav-item">
    <a href="myaccount.php" class="nav-link">
      <i class="bi bi-person-circle me-2"></i> My Account
    </a>
  </li>
  <li class="nav-item">
    <a href="account_summary.php" class="nav-link">
      <i class="bi bi-bar-chart-line me-2"></i> Account Summary
    </a>
  </li>
  <li class="nav-item">
    <a href="transfer.php" class="nav-link">
      <i class="bi bi-arrow-left-right me-2"></i> Transfer
    </a>
  </li>
  <li class="nav-item">
    <a href="deposit_check.php" class="nav-link">
      <i class="bi bi-cash-stack me-2"></i> Deposit Check
    </a>
  </li>
  
   <li class="nav-item">
    <a href="pay_bills.php" class="nav-link">
      <i class="bi bi-cash-stack me-2"></i> Pay Bills
    </a>
  </li>
  
  <li class="nav-item">
    <a href="kyc_status.php" class="nav-link">
      <i class="bi bi-shield-check me-2"></i> KYC Status
    </a>
  </li>
  <li class="nav-item">
    <a href="link_card.php" class="nav-link">
      <i class="bi bi-credit-card-2-front me-2"></i> Link Card
    </a>
  </li>
  <li class="nav-item">
    <a href="business_loan.php" class="nav-link">
      <i class="bi bi-briefcase me-2"></i> Business Support Loan
    </a>
  </li>
  <li class="nav-item">
    <a href="support.php" class="nav-link">
      <i class="bi bi-life-preserver me-2"></i> Support
    </a>
  </li>
  <li class="nav-item">
    <a href="account_settings.php" class="nav-link">
      <i class="bi bi-gear me-2"></i> Settings
    </a>
  </li>
</ul>


  <div class="mt-auto text-center small opacity-75 text-white">&copy; 2025 First Heritage Bank</div>
</div>


<!-- Topbar -->
<div style="padding: 20px;" class="topbar">
    <div class="sidebar-toggle d-lg-none me-2" onclick="toggleSidebar()">
  <i  class="bi bi-list"></i>
</div>


<div class="mobile-only-logo">
  <img style="width:150px;" src="whitelogo.png" alt="First Heritage Bank">
</div>

  <div class="fw-semibold">Welcome to First Heritage Bank</div>
  
  <! -- HERE IS THE PROFILE PICTURE SIDE -->
  
 <style>
 
 /* === Position profile picture to top-right === */
.profile-top-right {
  position: absolute;
  top: 15px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2000;
}

.profile-top-right span {
  font-size: 0.85rem;
  color: #6c757d;
}

/* Adjust spacing for mobile */
@media (max-width: 768px) {
  .profile-top-right {
    top: 25px;
    right: 15px;
    flex-direction: row-reverse; /* puts profile pic on far right */
  }
  .profile-top-right span {
    display: none; /* optional: hide IP on mobile */
  }
}



/* Custom styling for the popup menu */
.account-dropdown {
  width: 280px;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: none;
}
.account-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.account-dropdown .dropdown-item i {
  color: #0b5ed7;
}
.account-balance {
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
}
.account-balance small {
  color: #6c757d;
}


/* ===== Enhanced Blue Balance Card (Mobile + Desktop) ===== */
.main-balance-card {
  background-color: #0a2c75 !important;
  color: #ffffff !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  padding: 20px !important;
  text-align: left;
}

.main-balance-card h4 {
  font-size: 1.8rem !important;
  font-weight: 700;
  margin: 0;
}

.main-balance-card img {
  object-fit: cover;
}

.main-balance-card .text-light {
  color: #e0e6f5 !important;
}

@media (max-width: 768px) {
  .main-balance-card {
    text-align: center !important;
    padding: 25px 20px !important;
  }

  .main-balance-card h4 {
    font-size: 1.6rem !important;
  }

  .main-balance-card img {
    width: 55px !important;
    height: 55px !important;
    margin-top: 10px;
  }

  .main-balance-card .text-center div {
    font-size: 0.9rem;
  }
}

</style>


<!-- HERE IS THE PROFILE PICTURE SIDE -->
<div class="profile-top-right">
  <span class="text-muted small">IP: <?= htmlspecialchars(getUserIP()) ?></span>

  <div class="dropdown">
    <img 
      src="<?= htmlspecialchars($acct['profile_pic']) ?>" 
      alt="Profile" 
      class="rounded-circle dropdown-toggle" 
      width="40" 
      height="40" 
      role="button" 
      data-bs-toggle="dropdown" 
      aria-expanded="false"
      style="cursor: pointer;"
    >

    <!-- Dropdown Menu -->
    <div class="dropdown-menu dropdown-menu-end account-dropdown p-0">

      <div class="account-balance">
        <small>CHECKING ACCOUNT</small>
        <div class="fs-5 fw-bold mb-2">$<?= number_format($totalBalance, 2); ?></div>
        <small>$<?= number_format($totalBalance, 2); ?></small>
      </div>

      <a class="dropdown-item" href="transfer.php">
        <i class="bi bi-arrow-left-right"></i> Transfer Funds
      </a>
      <hr class="my-1">

      <a class="dropdown-item" href="myaccount.php">
        <i class="bi bi-person"></i> View Profile
      </a>
      <a class="dropdown-item" href="account_settings.php">
        <i class="bi bi-gear"></i> Account Settings
      </a>
      <a class="dropdown-item" href="support.php">
        <i class="bi bi-lock"></i> Open Support
      </a>
      <a class="dropdown-item" href="login-activity.php">
        <i class="bi bi-activity"></i> Login Activity
      </a>

      <hr class="my-2">

      <form method="post" action="logout.php" class="px-3 pb-2">
        <button type="submit" class="btn btn-outline-primary w-100">
          <i class="bi bi-box-arrow-right me-2"></i> Sign out
        </button>
      </form>

    </div>
  </div>
</div>
<!-- HERE IS THE END PROFILE PICTURE SIDE -->

  
   <!-- HERE IS THE END PROFILE PICTURE SIDE -->
       
</div>



<!-- Content -->
<div class="content">
    <!-- Greeting Header -->
    
<div class="card mb-4 p-3 d-flex flex-md-row flex-column justify-content-between align-items-center">
  <div>
    

<style>
    /* Hide logo by default (desktop/tablet) */
.mobile-only-logo {
  display: none;
}

/* Show only on mobile */
@media (max-width: 768px) {
  .mobile-only-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }

  .mobile-only-logo img {
    width: 150px;
    height: auto;
  }
}

</style>

    <h4 class="fw-bold mb-1">Good day, <?= htmlspecialchars($acct['owner']) ?></h4>
    <p class="text-muted mb-0">At a glance summary of your account!</p>
  </div>
  <div class="mt-3 mt-md-0 d-flex gap-2">
    <a href="deposit_check.php" class="btn btn-primary fw-semibold">Deposit →</a>
    <a href="transfer.php" class="btn btn-danger fw-semibold">Transfer Fund →</a>
  </div>
</div>

  <div class="row g-4">
    <div class="col-md-4">
  <div class="card p-3 main-balance-card">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <div class="text-start">
        <div class="text-muted small text-light">Available Balance</div>
        <h4 class="fw-bold mt-1">$ <?=number_format($acct['balance'],2)?></h4>
      </div>
      <img src="<?= htmlspecialchars($acct['profile_pic']) ?>" 
           alt="Profile" width="45" height="45"
           class="rounded-circle border border-light shadow-sm">
    </div>

    <div class="text-center mt-3">
        <div class="text-light small mb-1">Account Name: <span class="fw-bold"><?=htmlspecialchars($acct['owner'])?></span></div>
        
      <div class="text-light small mb-1">Linked Cards: <span class="fw-bold"><?=$acct['linked_cards']?></span></div>
      <div class="text-light small mb-1">FICO Score: <span class="fw-bold"><?=$acct['fico_score']?></span></div>
      <div class="text-light small">IP Address: <span class="fw-bold"><?= htmlspecialchars(getUserIP()) ?></span></div>
    </div>
  </div>
</div>


<div class="account-section">

  <!-- Checking Account -->
  <h4>Checking Account</h4>
  <a href="transfer.php" class="link">Transfer Fund</a>
  <div class="account-card">
    <div class="account-info">
      <span class="icon">💳</span>
      <span class="acct-num">*****81782</span>
    </div>
    <div class="balance">$<?php echo number_format($totalBalance, 2); ?><span class="currency">USD</span></div>
  </div>

  <!-- Loans and Credit -->
  <h4>Loans and lines of credit</h4>
  <a href="#" class="link">Pay bills</a>
  <div class="loan-card">
    <div class="account-info">
      <span class="icon">🏦</span>
      <span class="acct-num">Business Support Loan</span>
    </div>
    <div class="balance">$ <?=number_format($acct['business_support_loan']['amount'],2)?></div>
  </div>

  <!-- FICO Credit Score -->
  <div class="fico-card">
    <div class="account-info">
      <span class="icon">📈</span>
      <span class="acct-num">FICO Credit Score</span>
    </div>
    <div class="balance">
      <?=$acct['fico_score']?><span class="status-dot"></span>
    </div>
  </div>
</div>


<style>
    
    .account-section {
  font-family: 'Inter', Arial, sans-serif;
  background: #fff;
  color: #111;
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
}

.account-section h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.account-section .link {
  display: inline-block;
  color: #0a48db;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.account-card,
.loan-card,
.fico-card {
  background: #e9edf8;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}

.account-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-weight: 500;
  margin-bottom: 6px;
}

.icon {
  font-size: 1.2rem;
}

.balance {
  font-size: 1.3rem;
  font-weight: 700;
  color: #000;
}

.currency {
  font-size: 0.9rem;
  color: #777;
  font-weight: 500;
  margin-left: 4px;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #37d48a;
  border-radius: 50%;
  margin-left: 6px;
}

/* Optional for mobile view */
@media (max-width: 768px) {
  .account-section {
    padding: 15px;
  }
  .balance {
    font-size: 1.2rem;
  }
}

</style>

    <div class="col-md-4">
      <div class="card p-3">
        <div class="text-muted small">Linked Cards</div>
        <h4 class="fw-bold mt-1"><?=$acct['linked_cards']?></h4>
        <div class="mt-3 small text-muted">FICO Score <?=$acct['fico_score']?></div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3">
        <div class="text-muted small">Business Support Loan</div>
        <h4 style="color: #0b5ed7;" class="fw-bold mt-1">$ <?=number_format($acct['business_support_loan']['amount'],2)?></h4>
        <div class="small text-muted">Status: <?=$acct['business_support_loan']['status']?> | Rate <?=$acct['business_support_loan']['interest_rate']?>%</div>
      </div>
    </div>
  </div>

  <div class="row mt-4 g-4">
    <div class="col-lg-8">
      <div class="card p-3">
        <div class="d-flex justify-content-between align-items-center">
          <h6 class="fw-bold mb-0">Recent Transactions</h6>
          <span class="text-muted small">Last 30 Days</span>
        </div>
        <hr>
        <div class="mt-3">
  <?php foreach ($txns as $t): 
    $txnId = "MOR/" . strtoupper(substr(md5($t['date'] . rand()), 0, 8)) . "-1025";
    $txnRef = "ONLINE TRANSFER/" . strtoupper(substr(md5($t['description']), 0, 4)) . "/" . rand(1000,9999);
  ?>
    <div class="txn-card">
      <div class="d-flex justify-content-between align-items-center mb-1">
        <div class="txn-id"><?= $txnId ?></div>
        <div class="txn-type text-end"><?= ucfirst($t['type']) ?></div>
      </div>
      <div class="txn-meta mb-1"><?= (new DateTime($t['date']))->format('d M Y, g:i a') ?></div>
      <a href="#" class="txn-ref"><?= $txnRef ?></a>
      <div class="d-flex justify-content-between align-items-center mt-2">
        <div>
          <span class="txn-amount <?= $t['type']==='credit'?'credit':'debit' ?>">
            <?= $t['type']==='credit'?'+':'-' ?><?= number_format($t['amount'], 2) ?> USD
          </span>
          <div class="txn-status"><?= ucfirst($t['status']) ?></div>
        </div>
        <button class="btn btn-outline-primary btn-sm"
          data-bs-toggle="modal"
          data-bs-target="#txnModal"
          data-txn='<?= json_encode($t, JSON_HEX_APOS|JSON_HEX_AMP|JSON_HEX_TAG) ?>'>
          View Details
        </button>
      </div>
    </div>
  <?php endforeach; ?>
</div>

      </div>
    </div>
    <div class="col-lg-4">
      <div class="card p-3">
        <h6 class="fw-bold mb-3">Balance Flow (30 Days)</h6>
        <canvas id="chartBalance" height="220"></canvas>
      </div>
      
      <div class="card p-3">
        <h6 class="fw-bold mb-3">Category Breakdown</h6>
        <canvas id="chartCategory" height="180"></canvas>
      </div>
    </div>
    
    
  </div>

  <!-- ✅ NEW ACCOUNT SUMMARY & GRAPHS SECTION -->
  <div class="row mt-5 g-4">
    <!-- Account Summary -->
    <div class="col-lg-6">
      <div class="card p-3">
        <h6 class="fw-bold mb-3">Account Summary</h6>
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between">
            <span>Total Balance:</span>
            <span class="fw-bold text-success">$<?=number_format($acct['balance'],2)?></span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>Total Credits:</span>
            <span class="fw-bold text-success">$<?=number_format($credits,2)?></span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>Total Debits:</span>
            <span class="fw-bold text-danger">$<?=number_format($debits,2)?></span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>Linked Cards:</span>
            <span><?=$acct['linked_cards']?></span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>FICO Score:</span>
            <span><?=$acct['fico_score']?></span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>Loan Status:</span>
            <span><?=$acct['business_support_loan']['status']?></span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Extra Graphs -->
    <div class="col-lg-6">
      <div class="card p-3 mb-4">
        <h6 class="fw-bold mb-3">Income vs Expenses Trend</h6>
        <canvas id="chartTrend" height="180"></canvas>
      </div>
      
    </div>
  </div>

  <!-- ✅ SUPPORT AREA -->
  <div class="row mt-5">
    <div class="col-lg-12">
      <div class="card p-4">
        <div class="d-flex align-items-center mb-3">
          <i class="bi bi-life-preserver fs-4 text-primary me-2"></i>
          <h6 class="fw-bold mb-0">Customer Support</h6>
        </div>
        <p class="text-muted small mb-3">
          Our dedicated support team is available 24/7 to assist with any inquiries about your account, transactions, or loan status.  
          Reach out via any of the methods below or visit your nearest branch.
        </p>
        <ul class="list-unstyled mb-0 small">
          <a href="support.php" class="btn btn-sm btn-primary">Open Support</a>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Transaction Modal -->
<div class="modal fade" id="txnModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Transaction Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="txnDetails"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
// Chart
const ctx = document.getElementById('chartBalance');
new Chart(ctx, {
  type:'doughnut',
  data:{
    labels:['Income','Expenses'],
    datasets:[{
      data:[<?=$credits?>,<?=$debits?>],
      backgroundColor:['#198754','#dc3545']
    }]
  },
  options:{plugins:{legend:{position:'bottom'}}}
});

// Transaction modal
const txnModal=document.getElementById('txnModal');
txnModal.addEventListener('show.bs.modal',e=>{
  const btn=e.relatedTarget;
  const txn=JSON.parse(btn.getAttribute('data-txn'));
  const el=document.getElementById('txnDetails');
  el.innerHTML=`
    <ul class="list-group">
      <li class="list-group-item"><strong>Date:</strong> ${new Date(txn.date).toLocaleString()}</li>
      <li class="list-group-item"><strong>Description:</strong> ${txn.description}</li>
      <li class="list-group-item"><strong>Category:</strong> ${txn.category}</li>
      <li class="list-group-item"><strong>Type:</strong> ${txn.type}</li>
      <li class="list-group-item"><strong>Status:</strong> ${txn.status}</li>
      <li class="list-group-item"><strong>Reference:</strong> ${txn.reference}</li>
      <li class="list-group-item"><strong>Amount:</strong> $${Number(txn.amount).toFixed(2)}</li>
    </ul>`;
});

// ✅ NEW GRAPHS
const trendCtx = document.getElementById('chartTrend');
new Chart(trendCtx, {
  type: 'line',
  data: {
    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    datasets: [
      {
        label: 'Income',
        data: [2000,2500,2300,2800,2600,3000,3200,3100,3500,3400,3700,3900],
        borderColor: '#198754',
        fill: false,
        tension: 0.3
      },
      {
        label: 'Expenses',
        data: [1500,1600,1550,1700,1800,1900,2000,1950,2100,2200,2300,2400],
        borderColor: '#dc3545',
        fill: false,
        tension: 0.3
      }
    ]
  },
  options: {
    plugins: { legend: { position: 'bottom' } },
    scales: { y: { beginAtZero: true } }
  }
});

const catCtx = document.getElementById('chartCategory');
new Chart(catCtx, {
  type: 'bar',
  data: {
    labels: ['Utilities','Shopping','Food','Travel','Savings','Other'],
    datasets: [{
      label: 'Spending by Category',
      data: [500,800,600,400,1200,300],
      backgroundColor: ['#0d6efd','#198754','#ffc107','#dc3545','#20c997','#6c757d']
    }]
  },
  options: {
    plugins: { legend: { display: false } },
    scales: { y: { beginAtZero: true } }
  }
});
</script>

<script>
function toggleSidebar() {
  const sidebar = document.querySelector('.sidebar');
  sidebar.classList.toggle('show');
  document.body.classList.toggle('sidebar-open');
}
</script>

<script>
// ✅ Keep your existing toggleSidebar() exactly as is
function toggleSidebar() {
  const sidebar = document.querySelector('.sidebar');
  sidebar.classList.toggle('show');
  document.body.classList.toggle('sidebar-open');

  // Handle overlay when sidebar is shown
  let overlay = document.querySelector('.sidebar-overlay');
  if (!overlay) {
    overlay = document.createElement('div');
    overlay.className = 'sidebar-overlay';
    document.body.appendChild(overlay);
    overlay.addEventListener('click', () => toggleSidebar());
  }

  // Show or hide overlay
  overlay.style.display = sidebar.classList.contains('show') ? 'block' : 'none';
}
</script>

<style>
/* ✅ Sidebar overlay for mobile close */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 1040;
  display: none;
}
</style>
 

</body>
</html>
