<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cashlog</title>
<link rel="icon" href="https://ik.imagekit.io/tadmfld9t/cashlog.png?updatedAt=1763169515625">
<style>
  /* ---- Variables ---- */
  :root {
    --dark-red: #8B0000;
    --navy-blue: #000080;
    --white: #FFFFFF;
    --black: #000000;
  }

  /* ---- Global ---- */
  body, html {
    margin: 0;
    font-family: Arial, sans-serif;
    scroll-behavior: smooth;
    background: var(--white);
    color: var(--black);
  }

  h2 {
    margin-top: 0;
  }

  /* ---- Navigation ---- */
  nav {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 100;
  }

  nav.scrolled {
    padding: 5px 20px;
  }

  nav img {
    height: 40px;
    transition: height 0.3s ease;
  }

  nav.scrolled img {
    height: 30px;
  }

  nav a {
    text-decoration: none;
    color: var(--black);
    margin-left: 20px;
    font-weight: bold;
  }

  /* ---- Hero ---- */
  #hero {
    background: var(--dark-red);
    color: var(--white);
    padding: 120px 20px 60px;
    text-align: center;
  }

  #hero h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
  }

  #hero p {
    font-size: 1.2em;
  }

  /* ---- Sections ---- */
  section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: auto;
  }

  /* ---- Transaction Form ---- */
  #transaction-form {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
  }

  #transaction-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
  }

  #transaction-form input, #transaction-form select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  #transaction-form button {
    margin-top: 15px;
    background: var(--dark-red);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
  }

  #transaction-form button:hover {
    background: #a00000;
  }

  /* ---- Transaction Log ---- */
  #transaction-log table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }

  #transaction-log th, #transaction-log td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
  }

  #transaction-log th {
    background: var(--dark-red);
    color: var(--white);
  }

  #transaction-log tr:hover {
    background: #f1f1f1;
    cursor: pointer;
  }

  /* ---- Financial Statements ---- */
  .statement {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .statement .details, .statement .charts {
    flex: 1;
    min-width: 300px;
  }

  .statement table {
    width: 100%;
    border-collapse: collapse;
  }

  .statement table th, .statement table td {
    padding: 8px;
    border: 1px solid #ccc;
  }

  .statement h3 {
    margin-top: 0;
  }

  /* ---- Charts ---- */
  canvas {
    width: 100% !important;
    height: 300px !important;
    background: #fff;
    border-radius: 10px;
  }

  /* ---- Cashflow Section ---- */
  #cashflow {
    background: var(--navy-blue);
    color: var(--white);
  }

  /* ---- Responsive ---- */
  @media(max-width: 768px){
    nav a {
      margin-left: 10px;
      font-size: 0.9em;
    }

    .statement {
      flex-direction: column;
    }
  }
</style>
</head>
<body>

<!-- Navigation -->
<nav id="navbar">
  <img src="https://ik.imagekit.io/tadmfld9t/cashlog.png?updatedAt=1763169515625" alt="Cashlog Logo">
  <div>
    <a href="#hero">Home</a>
    <a href="#transaction-form">Transactions</a>
    <a href="#income-statement">Income</a>
    <a href="#cashflow">Cashflow</a>
    <a href="#balance-sheet">Balance</a>
  </div>
</nav>

<!-- Hero Section -->
<section id="hero">
  <h1>Welcome Bekky</h1>
  <p>Introduction to Cashlog bookkeeping system</p>
</section>

<!-- Transaction Form -->
<section id="transaction-form">
  <h2>Add New Transaction</h2>
  <form id="form">
    <label for="date">Transaction Date</label>
    <input type="date" id="date" required>

    <label for="description">Description</label>
    <input type="text" id="description" required>

    <label for="amount">Amount</label>
    <input type="number" id="amount" step="0.01" required>

    <label for="type">Transaction Type</label>
    <select id="type" required>
      <option value="">Select Type</option>
      <option value="Debit">Debit</option>
      <option value="Credit">Credit</option>
      <option value="Transfer">Transfer</option>
    </select>

    <label for="category">Category</label>
    <select id="category" required>
      <option value="">Select Category</option>
      <option value="Revenue">Revenue</option>
      <option value="Expenses">Expenses</option>
      <option value="Assets">Assets</option>
      <option value="Liabilities">Liabilities</option>
      <option value="Equity">Equity</option>
      <option value="Cash">Cash</option>
      <option value="Bank">Bank</option>
    </select>

    <label for="account">Account/Reference</label>
    <input type="text" id="account">

    <button type="submit">Add Transaction</button>
  </form>
</section>

<!-- Transaction Log -->
<section id="transaction-log">
  <h2>Transaction Log</h2>
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Type</th>
        <th>Category</th>
        <th>Amount</th>
        <th>Balance</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="log-body">
      <!-- Transactions appear here -->
    </tbody>
  </table>
</section>

<!-- Income Statement -->
<section id="income-statement">
  <h2>Income Statement</h2>
  <div class="statement">
    <div class="details">
      <h3>Statement</h3>
      <table>
        <tbody>
          <tr><td>Revenue</td><td id="income-revenue">0</td></tr>
          <tr><td>Expenses</td><td id="income-expenses">0</td></tr>
          <tr><td>Net Income</td><td id="income-net">0</td></tr>
        </tbody>
      </table>
    </div>
    <div class="charts">
      <h3>Revenue vs Expenses</h3>
      <canvas id="incomeChart"></canvas>
    </div>
  </div>
</section>

<!-- Cashflow Statement -->
<section id="cashflow">
  <h2>Cashflow Statement</h2>
  <div class="statement">
    <div class="charts">
      <h3>Ratios</h3>
      <p id="working-capital">Working Capital: 0</p>
      <p id="cash-flow-margin">Cash Flow Margin: 0</p>
      <p id="free-cash-flow">Free Cash Flow: 0</p>
    </div>
    <div class="details">
      <h3>Statement</h3>
      <table>
        <tbody>
          <tr><td>Operating Activities</td><td id="cf-operating">0</td></tr>
          <tr><td>Investing Activities</td><td id="cf-investing">0</td></tr>
          <tr><td>Financing Activities</td><td id="cf-financing">0</td></tr>
          <tr><td>Net Cash Flow</td><td id="cf-net">0</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<!-- Balance Sheet -->
<section id="balance-sheet">
  <h2>Balance Sheet</h2>
  <div class="statement">
    <div class="details">
      <h3>Statement</h3>
      <table>
        <tbody>
          <tr><td>Assets</td><td id="bs-assets">0</td></tr>
          <tr><td>Liabilities</td><td id="bs-liabilities">0</td></tr>
          <tr><td>Equity</td><td id="bs-equity">0</td></tr>
        </tbody>
      </table>
    </div>
    <div class="charts">
      <h3>Asset Distribution</h3>
      <canvas id="balanceChart"></canvas>
    </div>
  </div>
</section>

<script>
/* ---- NAVIGATION SCROLL EFFECT ---- */
window.addEventListener('scroll', () => {
  const nav = document.getElementById('navbar');
  if(window.scrollY > 100) {
    nav.classList.add('scrolled');
  } else {
    nav.classList.remove('scrolled');
  }
});

/* ---- TRANSACTIONS ---- */
let transactions = JSON.parse(localStorage.getItem('transactions')) || [];

const form = document.getElementById('form');
const logBody = document.getElementById('log-body');

function saveTransactions() {
  localStorage.setItem('transactions', JSON.stringify(transactions));
}

function renderTransactions() {
  logBody.innerHTML = '';
  let balance = 0;
  transactions.forEach((t, index) => {
    if(t.type === 'Debit') balance += parseFloat(t.amount);
    else if(t.type === 'Credit') balance -= parseFloat(t.amount);
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${t.date}</td>
      <td>${t.description}</td>
      <td>${t.type}</td>
      <td>${t.category}</td>
      <td>${t.amount}</td>
      <td>${balance.toFixed(2)}</td>
      <td>
        <button onclick="editTransaction(${index})">Edit</button>
        <button onclick="deleteTransaction(${index})">Delete</button>
      </td>
    `;
    logBody.appendChild(row);
  });
  updateStatements();
}

function updateStatements() {
  let revenue = transactions.filter(t=>t.category==='Revenue').reduce((a,b)=>a+parseFloat(b.amount),0);
  let expenses = transactions.filter(t=>t.category==='Expenses').reduce((a,b)=>a+parseFloat(b.amount),0);
  document.getElementById('income-revenue').textContent = revenue.toFixed(2);
  document.getElementById('income-expenses').textContent = expenses.toFixed(2);
  document.getElementById('income-net').textContent = (revenue-expenses).toFixed(2);

  document.getElementById('cf-operating').textContent = (revenue - expenses).toFixed(2);
  document.getElementById('cf-investing').textContent = 0;
  document.getElementById('cf-financing').textContent = 0;
  document.getElementById('cf-net').textContent = (revenue - expenses).toFixed(2);

  const assets = transactions.filter(t=>t.category==='Assets' || t.category==='Cash' || t.category==='Bank').reduce((a,b)=>a+parseFloat(b.amount),0);
  const liabilities = transactions.filter(t=>t.category==='Liabilities').reduce((a,b)=>a+parseFloat(b.amount),0);
  const equity = assets - liabilities;
  document.getElementById('bs-assets').textContent = assets.toFixed(2);
  document.getElementById('bs-liabilities').textContent = liabilities.toFixed(2);
  document.getElementById('bs-equity').textContent = equity.toFixed(2);

  drawCharts(revenue, expenses, assets, liabilities);
}

function drawCharts(revenue, expenses, assets, liabilities){
  const incomeCanvas = document.getElementById('incomeChart');
  const balanceCanvas = document.getElementById('balanceChart');

  // Income Chart
  const ctx1 = incomeCanvas.getContext('2d');
  ctx1.clearRect(0,0,incomeCanvas.width,incomeCanvas.height);
  ctx1.fillStyle = 'green';
  ctx1.fillRect(50, incomeCanvas.height - revenue/2, 50, revenue/2);
  ctx1.fillStyle = 'red';
  ctx1.fillRect(150, incomeCanvas.height - expenses/2, 50, expenses/2);

  // Balance Pie Chart
  const ctx2 = balanceCanvas.getContext('2d');
  ctx2.clearRect(0,0,balanceCanvas.width,balanceCanvas.height);
  const total = assets + liabilities;
  let start = 0;
  // Assets slice
  let assetsAngle = (assets/total)*2*Math.PI;
  ctx2.fillStyle = 'blue';
  ctx2.beginPath();
  ctx2.moveTo(150,150);
  ctx2.arc(150,150,100,start,start+assetsAngle);
  ctx2.fill();
  start += assetsAngle;
  // Liabilities slice
  let liabilitiesAngle = (liabilities/total)*2*Math.PI;
  ctx2.fillStyle = 'orange';
  ctx2.beginPath();
  ctx2.moveTo(150,150);
  ctx2.arc(150,150,100,start,start+liabilitiesAngle);
  ctx2.fill();
}

function editTransaction(index){
  const t = transactions[index];
  document.getElementById('date').value = t.date;
  document.getElementById('description').value = t.description;
  document.getElementById('amount').value = t.amount;
  document.getElementById('type').value = t.type;
  document.getElementById('category').value = t.category;
  document.getElementById('account').value = t.account;
  transactions.splice(index,1);
  saveTransactions();
  renderTransactions();
}

function deleteTransaction(index){
  transactions.splice(index,1);
  saveTransactions();
  renderTransactions();
}

form.addEventListener('submit', e=>{
  e.preventDefault();
  const t = {
    date: document.getElementById('date').value,
    description: document.getElementById('description').value,
    amount: parseFloat(document.getElementById('amount').value),
    type: document.getElementById('type').value,
    category: document.getElementById('category').value,
    account: document.getElementById('account').value
  };
  transactions.push(t);
  saveTransactions();
  renderTransactions();
  form.reset();
});

/* ---- INITIAL RENDER ---- */
renderTransactions();
</script>

</body>
</html>