{% extends 'base.html' %}

{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2>Employee Payments</h2>
  </div>

  <!-- Payment Form -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Process Payment</h3>
    
    {% if not employees %}
      <div style="background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; padding: 16px; border-radius: 8px; margin-bottom: 20px;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <span style="font-size: 20px;">⚠️</span>
          <div>
            <strong>No Employees Available</strong><br>
            <small>You need to add employees first before you can process payments.</small>
          </div>
        </div>
        <div style="margin-top: 12px;">
          <a href="{{ url_for('admin_employees') }}" class="btn-outline" style="font-size: 14px;">👥 Go to Employees</a>
          <a href="{{ url_for('admin_employee_new') }}" class="btn-primary" style="font-size: 14px; margin-left: 8px;">➕ Add First Employee</a>
        </div>
      </div>
    {% endif %}
    
    <form method="post" class="form" {% if not employees %}style="opacity: 0.5; pointer-events: none;"{% endif %}>
      {{ form.hidden_tag() }}
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Employee <span style="color: #dc2626;">*</span></label>
          {% if employees %}
            {{ form.employee_id() }}
          {% else %}
            <select disabled style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background: #f3f4f6; color: #9ca3af;">
              <option>No employees available</option>
            </select>
          {% endif %}
        </div>
        
        <div class="field">
          <label class="label">Date <span style="color: #dc2626;">*</span></label>
          {{ form.date(type='date') }}
        </div>
      </div>
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Payment Type <span style="color: #dc2626;">*</span></label>
          {{ form.payment_type() }}
        </div>
        
        <div class="field">
          <label class="label">Amount <span style="color: #dc2626;">*</span></label>
          {{ form.amount(step='0.01', placeholder='0.00') }}
        </div>
      </div>
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">Payment Account <span style="color: #dc2626;">*</span></label>
          {{ form.account_id() }}
        </div>
        
        <div class="field">
          <label class="label">Description</label>
          {{ form.description(placeholder='Payment description...') }}
        </div>
      </div>
      
      <div style="margin-top: 24px;">
        {{ form.submit(class_='btn-primary') }}
      </div>
    </form>
  </div>

  <!-- Payment History -->
  <div class="card">
    <h3>Payment History</h3>
    {% if payments %}
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Employee</th>
              <th>Date</th>
              <th>Type</th>
              <th>Amount</th>
              <th>Account</th>
              <th>Description</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {% for payment in payments %}
              <tr style="background-color: {% if payment.status == 'paid' %}#f0fdf4{% elif payment.status == 'pending' %}#fffbeb{% else %}#fef2f2{% endif %};">
                <td><strong>#{{ payment.id }}</strong></td>
                <td>
                  <strong>{{ payment.employee.full_name }}</strong><br>
                  <small style="color: #666;">{{ payment.employee.employee_id }}</small>
                </td>
                <td>{{ payment.date|date_format }}</td>
                <td>
                  {% if payment.payment_type == 'salary' %}
                    <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">💰 Salary</span>
                  {% elif payment.payment_type == 'bonus' %}
                    <span style="background: #e0e7ff; color: #3730a3; padding: 4px 8px; border-radius: 12px; font-size: 12px;">🎁 Bonus</span>
                  {% elif payment.payment_type == 'advance' %}
                    <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">💳 Advance</span>
                  {% elif payment.payment_type == 'expense_reimbursement' %}
                    <span style="background: #f0f9ff; color: #0369a1; padding: 4px 8px; border-radius: 12px; font-size: 12px;">📄 Reimbursement</span>
                  {% else %}
                    <span style="background: #f3f4f6; color: #374151; padding: 4px 8px; border-radius: 12px; font-size: 12px;">{{ payment.payment_type|title }}</span>
                  {% endif %}
                </td>
                <td><strong>{{ payment.amount|currency }}</strong></td>
                <td>{{ payment.account.name }}</td>
                <td>
                  {% if payment.description %}
                    <span style="color: #666;">{{ payment.description[:50] }}{% if payment.description|length > 50 %}...{% endif %}</span>
                  {% else %}
                    <span style="color: #9ca3af;">-</span>
                  {% endif %}
                </td>
                <td>
                  {% if payment.status == 'paid' %}
                    <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">✅ Paid</span>
                  {% elif payment.status == 'pending' %}
                    <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⏳ Pending</span>
                  {% else %}
                    <span style="background: #fee2e2; color: #991b1b; padding: 4px 8px; border-radius: 12px; font-size: 12px;">❌ {{ payment.status|title }}</span>
                  {% endif %}
                </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 payments yet</p>
        <p style="color: #9ca3af; margin: 0; font-size: 14px;">Process your first payment above</p>
      </div>
    {% endif %}
  </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_expenses') }}" class="btn-outline">💰 Manage Expenses</a>
      </div>
    </div>
    
    <div class="card">
      <h3>Payment Management Tips</h3>
      <div style="color: #666; font-size: 14px; line-height: 1.6;">
        <p style="margin: 0 0 8px 0;"><strong>💰 Payment Types:</strong> Salary, Bonus, Advance, Expense Reimbursement</p>
        <p style="margin: 0 0 8px 0;"><strong>🏦 Account Selection:</strong> Choose the account to withdraw payment from</p>
        <p style="margin: 0 0 8px 0;"><strong>📊 Automatic Tracking:</strong> All payments are recorded in your account ledger</p>
        <p style="margin: 0;"><strong>📈 Reporting:</strong> Track payment history for financial analysis</p>
      </div>
    </div>
  </div>
{% endblock %}
