{% extends 'base.html' %}

{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2>Add New Expense</h2>
    <a href="{{ url_for('admin_expenses') }}" class="btn-outline">← Back to Expenses</a>
  </div>

  <div class="card">
    <h3>Expense Information</h3>
    
    <form method="post" class="form" enctype="multipart/form-data">
      {{ form.hidden_tag() }}
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Date <span style="color: #dc2626;">*</span></label>
          {{ form.date(type='date') }}
        </div>
        
        <div class="field">
          <label class="label">Category <span style="color: #dc2626;">*</span></label>
          {{ form.category() }}
        </div>
      </div>
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Amount <span style="color: #dc2626;">*</span></label>
          {{ form.amount(step='0.01', placeholder='0.00') }}
        </div>
        
        <div class="field">
          <label class="label">Receipt (Optional)</label>
          {{ form.receipt() }}
          <small style="color: #666;">Upload receipt image for expense verification</small>
        </div>
      </div>
      
      <div class="field">
        <label class="label">Description <span style="color: #dc2626;">*</span></label>
        {{ form.description(rows='3', placeholder='Detailed description of the expense...') }}
      </div>
      
      <div style="margin-top: 24px;">
        {{ form.submit(class_='btn-primary') }}
        <a href="{{ url_for('admin_expenses') }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

  <!-- Instructions -->
  <div class="card" style="margin-top: 20px;">
    <h3>How to Add an Expense</h3>
    <div style="color: #666; font-size: 14px; line-height: 1.6;">
      <p style="margin: 0 0 8px 0;"><strong>1. Expense Details:</strong> Fill in date, category, amount, and description</p>
      <p style="margin: 0 0 8px 0;"><strong>2. Receipt Upload:</strong> Upload receipt image for verification (optional but recommended)</p>
      <p style="margin: 0 0 8px 0;"><strong>3. Auto-Approval:</strong> Admin expenses are automatically approved</p>
      <p style="margin: 0;"><strong>4. Tracking:</strong> All expenses are tracked for reporting and analysis</p>
    </div>
  </div>
{% endblock %}