<?php
// kyc_status.php — Fixed version (Bootstrap 5 + PHP)

// Show all errors for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Load account data
$dataFile = __DIR__ . '/data.json';
if (!file_exists($dataFile)) {
    // fallback sample data
    $data = [
        "account" => [
            "owner" => "Demo User",
            "balance" => 0,
            "ip_address" => "127.0.0.1",
            "profile_pic" => "https://via.placeholder.com/40",
            "income_percentage" => 65,
            "debit_percentage" => 35
        ],
        "transactions" => []
    ];
} else {
    $data = json_decode(file_get_contents($dataFile), true);
    if (!$data || !isset($data['account'])) {
        die("⚠️ Invalid or corrupted data.json");
    }
}

$acct = $data['account'];

// Load KYC data
$kycFile = __DIR__ . '/kyc.json';
$defaultKyc = [
    "kyc" => [
        "level" => "Verified",
        "status" => "Approved",
        "approved_date" => "2025-09-10",
        "documents" => [
            [
                "id" => "doc1",
                "type" => "ID Card",
                "name" => "driver_license.jpg",
                "submitted" => "2025-09-01",
                "status" => "Approved"
            ]
        ]
    ]
];

if (!file_exists($kycFile)) {
    file_put_contents($kycFile, json_encode($defaultKyc, JSON_PRETTY_PRINT));
    $kycData = $defaultKyc;
} else {
    $kycData = json_decode(file_get_contents($kycFile), true);
    if (!$kycData) $kycData = $defaultKyc;
}

// Handle form submission
$msg = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $dtype = trim($_POST['doc_type'] ?? '');
    $dname = trim($_POST['doc_name'] ?? '');
    if ($dtype && $dname) {
        $doc = [
            "id" => uniqid('doc_'),
            "type" => $dtype,
            "name" => $dname,
            "submitted" => date('Y-m-d'),
            "status" => "Pending"
        ];
        $kycData['kyc']['documents'][] = $doc;
        $kycData['kyc']['status'] = 'Pending Review';
        file_put_contents($kycFile, json_encode($kycData, JSON_PRETTY_PRINT));
        $msg = "✅ Document submitted.";
    } else {
        $msg = "⚠️ Please provide document type and name.";
    }
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>KYC Status | First Heritage Bank</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    :root { --primary:#0b5ed7; --danger:#dc3545; --light:#f8f9fa; }
    body { background:#f4f6fa; font-family:"Segoe UI",Roboto,Arial,sans-serif; }
    .sidebar { width:250px; min-height:100vh; background:var(--primary); color:#fff; position:fixed; left:0; top:0; 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 { 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; }
    .content { margin-left:250px; padding:2rem; }
    .card { border:none; box-shadow:0 0.25rem 0.5rem rgba(0,0,0,0.05); }
    @media (max-width:991.98px){ .sidebar{left:-250px;} .sidebar.show{left:0;} .topbar{margin-left:0;padding-left:3.5rem;}
      .content{margin-left:0;padding:1rem;} .sidebar-toggle{display:inline-block;cursor:pointer;color:var(--primary);font-size:1.5rem;} }
  </style>
</head>
<body>
  <!-- Sidebar -->
  <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>
    </div>

    <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">$<?=number_format($acct['balance'],2)?></div>
        <div class="d-flex justify-content-between small">
          <span class="text-success">Income <?=$acct['income_percentage']?>%</span>
          <span class="text-danger">Debit <?=$acct['debit_percentage']?>%</span>
        </div>
        <div class="progress mt-1" style="height:6px;">
          <div class="progress-bar bg-success" style="width: <?=$acct['income_percentage']?>%"></div>
          <div class="progress-bar bg-danger" style="width: <?=$acct['debit_percentage']?>%"></div>
        </div>
        <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-light">Pay Bills</a>
        </div>
      </div>
    </div>

 <ul class="nav nav-pills flex-column mb-auto">
  <li class="nav-item">
    <a href="dashboard.php" class="nav-link">
      <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 active">
      <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 class="topbar">
    <div class="sidebar-toggle d-lg-none me-2" onclick="toggleSidebar()"><i class="bi bi-list"></i></div>
    <div class="fw-semibold">Welcome, <?=htmlspecialchars($acct['owner'])?></div>
    <! -- HERE IS THE PROFILE PICTURE SIDE -->
  
 <style>
/* 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;
}
</style>


<div class="d-flex align-items-center gap-3">
  

  <!-- Profile dropdown trigger -->
  <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">$<?php echo number_format($totalBalance, 2); ?></div>
        <small>$<?php echo 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="ccount_settings.php">
        <i class="bi bi-gear"></i> Account Setting
      </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 -->
  </div>

  <!-- Main Content -->
  <div class="content">
    <h4>KYC Status</h4>
    <?php if($msg): ?><div class="alert alert-info"><?=$msg?></div><?php endif; ?>

    <div class="card p-3 mb-3">
      <div class="d-flex justify-content-between">
        <div>
          <div class="text-muted small">Verification Level</div>
          <div class="fw-bold"><?=htmlspecialchars($kycData['kyc']['level'])?></div>
          <div class="small text-muted">Status: <?=htmlspecialchars($kycData['kyc']['status'])?></div>
        </div>
        <div class="text-end">
          <div class="text-muted small">Approved</div>
          <div class="fw-bold"><?=htmlspecialchars($kycData['kyc']['approved_date'])?></div>
        </div>
      </div>
    </div>

    <div class="row g-3">
      <div class="col-md-5">
        <div class="card p-3">
          <h6>Submit Document </h6>
          <form method="post">
            <div class="mb-2">
              <label class="form-label small">Document type</label>
              <input class="form-control form-control-sm" name="doc_type" placeholder="ID Card / Utility Bill" required>
            </div>
            <div class="mb-2">
              <label class="form-label small">Document filename (demo)</label>
              <input class="form-control form-control-sm" name="doc_name" placeholder="passport.jpg" required>
            </div>
            <div class="text-end">
              <button class="btn btn-primary btn-sm" type="submit">Submit Document</button>
            </div>
          </form>
        </div>
      </div>

      <div class="col-md-7">
        <div class="card p-3">
          <h6>Submitted Documents</h6>
          <ul class="list-group list-group-flush">
            <?php foreach($kycData['kyc']['documents'] as $doc): ?>
              <li class="list-group-item d-flex justify-content-between align-items-start">
                <div>
                  <div class="fw-bold"><?=htmlspecialchars($doc['type'])?></div>
                  <div class="small text-muted"><?=htmlspecialchars($doc['name'])?> • <?=htmlspecialchars($doc['submitted'])?></div>
                </div>
                <div>
                  <?php
                  $status = htmlspecialchars($doc['status']);
                  $badge = $status === 'Approved' ? 'bg-success' : ($status === 'Pending' ? 'bg-warning text-dark' : 'bg-secondary');
                  ?>
                  <span class="badge <?=$badge?>"><?=$status?></span>
                </div>
              </li>
            <?php endforeach; ?>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <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>
