{% extends 'base.html' %}

{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2>Reject Remittance #{{ remittance.id }}</h2>
    <a href="{{ url_for('admin_supplier_remittances') }}" class="btn-outline">← Back to Remittances</a>
  </div>

  <!-- Remittance Details -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Remittance Details</h3>
    <div class="grid cols-2" style="gap: 20px;">
      <div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Supplier:</span>
          <strong>{{ remittance.supplier.name }}</strong>
        </div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Email:</span>
          <strong>{{ remittance.supplier.email }}</strong>
        </div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Date:</span>
          <strong>{{ remittance.date|date_format }}</strong>
        </div>
      </div>
      <div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Amount:</span>
          <strong style="font-size: 1.2em; color: #dc2626;">{{ remittance.amount|currency }}</strong>
        </div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Account:</span>
          <strong>{{ remittance.account.name }}</strong>
        </div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Status:</span>
          <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⏳ Pending Approval</span>
        </div>
      </div>
    </div>
    
    {% if remittance.note %}
      <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Supplier Note:</span>
        </div>
        <div style="background: #f9fafb; padding: 12px; border-radius: 6px; color: #374151; line-height: 1.6;">
          {{ remittance.note }}
        </div>
      </div>
    {% endif %}
  </div>

  <!-- Rejection Form -->
  <div class="card">
    <h3>Reject Remittance</h3>
    <form method="post" class="form">
      <div class="field">
        <label class="label">Reason for Rejection <span style="color: #dc2626;">*</span></label>
        <textarea name="admin_notes" rows="4" placeholder="Please provide a reason for rejecting this remittance..." required style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-family: inherit;"></textarea>
        <small style="color: #666;">This reason will be visible to the supplier</small>
      </div>
      
      <div style="background: #fef2f2; border: 1px solid #dc2626; border-radius: 8px; padding: 16px; margin: 20px 0;">
        <h4 style="margin: 0 0 12px 0; color: #dc2626;">⚠️ Rejection Action</h4>
        <div style="color: #666; font-size: 14px; line-height: 1.6;">
          <p style="margin: 0 0 8px 0;"><strong>When you reject this remittance:</strong></p>
          <ul style="margin: 8px 0; padding-left: 20px;">
            <li>No payment will be processed</li>
            <li>Sales will remain as "paid to supplier" status</li>
            <li>Supplier will be notified of the rejection</li>
            <li>Supplier can submit a new remittance request</li>
            <li>This action cannot be undone</li>
          </ul>
        </div>
      </div>
      
      <div style="margin-top: 24px;">
        <button type="submit" class="btn-outline" style="color: #dc2626;" onclick="return confirm('Are you sure you want to reject this remittance? This will notify the supplier.')">
          ❌ Reject Remittance
        </button>
        <a href="{{ url_for('admin_supplier_remittances') }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

  <!-- Common Rejection Reasons -->
  <div class="card" style="margin-top: 20px;">
    <h3>Common Reasons for Rejection</h3>
    <div style="color: #666; font-size: 14px; line-height: 1.6;">
      <ul style="margin: 8px 0; padding-left: 20px;">
        <li><strong>Incorrect amount:</strong> Amount doesn't match collected payments</li>
        <li><strong>Missing documentation:</strong> Payment proofs or receipts not provided</li>
        <li><strong>Account mismatch:</strong> Wrong account selected for deposit</li>
        <li><strong>Timing issues:</strong> Remittance submitted too early or late</li>
        <li><strong>Verification needed:</strong> Additional verification required</li>
        <li><strong>Other:</strong> Specify your reason above</li>
      </ul>
    </div>
  </div>
{% endblock %}