<?php /* expenses/form.php */ ?>

<div class="d-flex justify-content-between align-items-center mb-3">
  <h5 class="fw-semibold mb-0">
    <i class="bi bi-wallet2 me-2 text-danger"></i>Add Expense
  </h5>
  <a href="<?= APP_URL ?>/expenses" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>Back
  </a>
</div>

<div class="row justify-content-center">
  <div class="col-md-7 col-lg-6">
    <div class="card">
      <div class="card-header bg-transparent fw-semibold small">
        <i class="bi bi-receipt me-1"></i>Expense Details
      </div>
      <div class="card-body">
        <form method="POST" action="<?= APP_URL ?>/expenses/create">
          <?= Auth::csrfField() ?>

          <div class="row g-3">

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Category *</label>
              <select name="expense_category_id" class="form-select" required>
                <option value="">— Select Category —</option>
                <?php foreach ($categories as $c): ?>
                <option value="<?= $c['id'] ?>"><?= e($c['category_name']) ?></option>
                <?php endforeach; ?>
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Date *</label>
              <input type="date" name="expense_date" class="form-control"
                     value="<?= date('Y-m-d') ?>" required>
            </div>

            <div class="col-12">
              <label class="form-label small fw-semibold">Title / Description *</label>
              <input type="text" name="title" class="form-control" required
                     placeholder="e.g. Monthly rent, Electricity bill, Staff salary…">
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Amount *</label>
              <div class="input-group">
                <span class="input-group-text"><?= e(setting('currency_symbol','Rs.')) ?></span>
                <input type="number" name="amount" id="amt-input"
                       class="form-control form-control-lg fw-bold"
                       step="0.01" min="0.01" required
                       placeholder="0.00"
                       oninput="updateAmtDisplay()">
              </div>
              <div id="amt-display" class="text-muted small mt-1" style="min-height:18px"></div>
            </div>

            <div class="col-md-6">
              <label class="form-label small fw-semibold">Reference No.</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-receipt"></i></span>
                <input type="text" name="reference" class="form-control"
                       placeholder="Receipt / bill no.">
              </div>
            </div>

            <div class="col-12">
              <label class="form-label small fw-semibold">Note</label>
              <textarea name="note" class="form-control" rows="2"
                        placeholder="Optional additional details…"></textarea>
            </div>

            <div class="col-12 d-flex gap-2">
              <button type="submit" class="btn btn-danger px-4 fw-semibold flex-grow-1">
                <i class="bi bi-check-circle me-1"></i>Save Expense
              </button>
              <a href="<?= APP_URL ?>/expenses" class="btn btn-outline-secondary px-4">
                Cancel
              </a>
            </div>

          </div>
        </form>
      </div>
    </div>

    <!-- Recent expenses quick reference -->
    <?php
    $recent = Database::fetchAll(
        "SELECT e.title, e.amount, e.expense_date, ec.category_name
         FROM expenses e
         JOIN expense_categories ec ON ec.id = e.expense_category_id
         ORDER BY e.id DESC LIMIT 5"
    );
    if (!empty($recent)):
    ?>
    <div class="card mt-3">
      <div class="card-header bg-transparent fw-semibold small">
        <i class="bi bi-clock-history me-1"></i>Recent Expenses
      </div>
      <div class="card-body p-0">
        <table class="table table-sm mb-0">
          <tbody>
            <?php foreach ($recent as $r): ?>
            <tr>
              <td>
                <div class="small fw-semibold"><?= e($r['title']) ?></div>
                <small class="text-muted"><?= e($r['category_name']) ?></small>
              </td>
              <td class="text-muted small"><?= fDate($r['expense_date']) ?></td>
              <td class="text-end fw-semibold text-danger"><?= currency($r['amount']) ?></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
    </div>
    <?php endif; ?>

  </div>
</div>

<script>
function updateAmtDisplay() {
  const val = parseFloat(document.getElementById('amt-input').value) || 0;
  const sym = '<?= e(setting("currency_symbol","Rs.")) ?>';
  const el  = document.getElementById('amt-display');
  if (val > 0) {
    el.textContent = sym + ' ' + val.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2});
    el.className = 'fw-bold text-danger small mt-1';
  } else {
    el.textContent = '';
  }
}
</script>
