{% extends 'base.html' %}

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

  <!-- Summary Cards -->
  <div class="grid cols-4" style="gap: 20px; margin-bottom: 20px;">
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #059669;">💰 Pending</h3>
      <div style="font-size: 2em; font-weight: bold; color: #059669;">
        {{ expenses|selectattr('status', 'equalto', 'pending')|list|length }}
      </div>
      <small style="color: #666;">PKR {{ "%.2f"|format(pending_expenses) }}</small>
    </div>
    
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #10b981;">✅ Approved</h3>
      <div style="font-size: 2em; font-weight: bold; color: #10b981;">
        {{ expenses|selectattr('status', 'equalto', 'approved')|list|length }}
      </div>
      <small style="color: #666;">PKR {{ "%.2f"|format(approved_expenses) }}</small>
    </div>
    
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #dc2626;">❌ Rejected</h3>
      <div style="font-size: 2em; font-weight: bold; color: #dc2626;">
        {{ expenses|selectattr('status', 'equalto', 'rejected')|list|length }}
      </div>
      <small style="color: #666;">PKR {{ "%.2f"|format(rejected_expenses) }}</small>
    </div>
    
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #1f2937;">💼 Total</h3>
      <div style="font-size: 2em; font-weight: bold; color: #1f2937;">
        {{ expenses|length }}
      </div>
      <small style="color: #666;">PKR {{ "%.2f"|format(total_expenses) }}</small>
    </div>
  </div>

  <!-- Expenses List -->
  <div class="card">
    <h3>All Expenses</h3>
    {% if expenses %}
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Date</th>
              <th>Category</th>
              <th>Amount</th>
              <th>Description</th>
              <th>Status</th>
              <th>Receipt</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for expense in expenses %}
              <tr style="background-color: {% if expense.status == 'pending' %}#fffbeb{% elif expense.status == 'approved' %}#f0fdf4{% elif expense.status == 'rejected' %}#fef2f2{% endif %};">
                <td><strong>#{{ expense.id }}</strong></td>
                <td>{{ expense.date|date_format }}</td>
                <td>
                  <span style="background: #e0e7ff; color: #3730a3; padding: 4px 8px; border-radius: 12px; font-size: 12px;">
                    {{ expense.category }}
                  </span>
                </td>
                <td><strong>{{ expense.amount|currency }}</strong></td>
                <td>
                  <span style="color: #666;">{{ expense.description[:50] }}{% if expense.description|length > 50 %}...{% endif %}</span>
                </td>
                <td>
                  {% if expense.status == 'pending' %}
                    <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⏳ Pending</span>
                  {% elif expense.status == 'approved' %}
                    <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">✅ Approved</span>
                  {% elif expense.status == 'rejected' %}
                    <span style="background: #fee2e2; color: #991b1b; padding: 4px 8px; border-radius: 12px; font-size: 12px;">❌ Rejected</span>
                  {% endif %}
                </td>
                <td>
                  {% if expense.receipt_path %}
                    <a href="{{ url_for('view_upload', filename=expense.receipt_path) }}" target="_blank" class="btn-outline" style="font-size: 12px;">📄 View</a>
                  {% else %}
                    <span style="color: #9ca3af;">-</span>
                  {% endif %}
                </td>
                <td>
                  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    {% if expense.status == 'pending' %}
                      <form method="post" action="{{ url_for('admin_expense_approve', expense_id=expense.id) }}" style="display: inline;">
                        <button type="submit" class="btn-primary" style="font-size: 12px;">✅ Approve</button>
                      </form>
                      <button onclick="showRejectForm({{ expense.id }})" class="btn-outline" style="font-size: 12px; color: #dc2626;">❌ Reject</button>
                    {% else %}
                      <span style="color: #9ca3af; font-size: 12px;">Processed</span>
                    {% endif %}
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div style="text-align: center; padding: 40px 20px;">
        <div style="font-size: 48px; color: #d1d5db; margin-bottom: 16px;">💰</div>
        <p style="color: #666; margin: 0 0 8px 0; font-size: 16px;">No expenses yet</p>
        <p style="color: #9ca3af; margin: 0; font-size: 14px;">Add your first expense to get started</p>
        <a href="{{ url_for('admin_expense_new') }}" class="btn-primary" style="margin-top: 16px;">Add First Expense</a>
      </div>
    {% endif %}
  </div>

  <!-- Reject Form Modal -->
  <div id="rejectModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; min-width: 400px;">
      <h3>Reject Expense</h3>
      <form id="rejectForm" method="post">
        <div class="field">
          <label class="label">Reason for Rejection <span style="color: #dc2626;">*</span></label>
          <textarea name="admin_notes" rows="4" required placeholder="Please provide a reason for rejecting this expense..." style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-family: inherit;"></textarea>
        </div>
        <div style="margin-top: 20px;">
          <button type="submit" class="btn-outline" style="color: #dc2626;">❌ Reject Expense</button>
          <button type="button" onclick="hideRejectForm()" class="btn-outline" style="margin-left: 12px;">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="grid cols-2" style="gap: 20px; margin-top: 20px;">
    <div class="card">
      <h3>Quick Actions</h3>
      <div style="display: flex; flex-direction: column; gap: 12px;">
        <a href="{{ url_for('admin_employees') }}" class="btn-outline">👥 Manage Employees</a>
        <a href="{{ url_for('admin_attendance') }}" class="btn-outline">📅 Manage Attendance</a>
        <a href="{{ url_for('admin_payments') }}" class="btn-outline">💳 Process Payments</a>
      </div>
    </div>
    
    <div class="card">
      <h3>Expense Management Tips</h3>
      <div style="color: #666; font-size: 14px; line-height: 1.6;">
        <p style="margin: 0 0 8px 0;"><strong>📋 Categories:</strong> Organize expenses by type (General, Travel, Food, Supplies, etc.)</p>
        <p style="margin: 0 0 8px 0;"><strong>📄 Receipts:</strong> Always upload receipts for expense verification</p>
        <p style="margin: 0 0 8px 0;"><strong>✅ Auto-Approval:</strong> Admin expenses are automatically approved</p>
        <p style="margin: 0;"><strong>📊 Tracking:</strong> Monitor expense patterns and costs by category</p>
      </div>
    </div>
  </div>

  <script>
    function showRejectForm(expenseId) {
      document.getElementById('rejectModal').style.display = 'block';
      document.getElementById('rejectForm').action = '/admin/expenses/' + expenseId + '/reject';
    }
    
    function hideRejectForm() {
      document.getElementById('rejectModal').style.display = 'none';
    }
  </script>
{% endblock %}
