{% extends 'base.html' %}

{% block content %}
  <h2>Submit Payment Proof</h2>
  
  <div class="card">
    <form method="post" class="form" enctype="multipart/form-data">
      {{ form.hidden_tag() }}
      
      <div class="field">
        <label class="label">Payment Method</label>
        {{ form.account_id(id="paymentMethod") }}
        <small style="color: #666;">Select the payment method you used</small>
      </div>
      
      <!-- Account Details Display -->
      <div id="accountDetails" class="card" style="margin: 16px 0; padding: 16px; background-color: #f9fafb; border: 1px solid #e5e7eb; display: none;">
        <h4 style="margin: 0 0 12px 0; color: #059669;">Account Details</h4>
        <div id="accountInfo">
          <!-- Account information will be loaded here -->
        </div>
      </div>
      
      <div class="field">
        <label class="label">Amount</label>
        {{ form.amount(step='0.01') }}
        <small style="color: #666;">Amount you paid</small>
      </div>
      
      <div class="field">
        <label class="label">Reference/Transaction ID</label>
        {{ form.reference_id(placeholder="e.g., UPI123456789, TXN987654321") }}
        <small style="color: #666;">Bank/UPI reference number or transaction ID</small>
      </div>
      
      <div class="field">
        <label class="label">Screenshot/Proof</label>
        <div style="margin-bottom: 8px;">
          {{ form.screenshot_file(accept="image/*") }}
          <small style="color: #666; display: block; margin-top: 4px;">Upload screenshot image (JPG, PNG, etc.)</small>
        </div>
        <div style="margin-top: 12px;">
          <label style="color: #666; font-size: 14px;">OR paste screenshot link:</label>
          {{ form.screenshot_link(placeholder="https://example.com/screenshot.jpg") }}
          <small style="color: #666; display: block; margin-top: 4px;">If you prefer to upload to cloud storage first</small>
        </div>
      </div>
      
      <div class="field">
        <label class="label">Additional Notes</label>
        {{ form.note(placeholder="Any additional information about the payment") }}
        <small style="color: #666;">Optional: Add any relevant details</small>
      </div>
      
      <div style="margin-top: 20px;">
        {{ form.submit(class_='btn-primary') }}
        <a href="{{ url_for('online_payment_home') }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

  <!-- Payment Instructions -->
  <div class="card" style="margin-top: 16px;">
    <h3>How to Submit Payment Proof</h3>
    <ol style="margin: 0; padding-left: 20px;">
      <li><strong>Make the payment</strong> to the selected account using the provided details</li>
      <li><strong>Take a screenshot</strong> of the payment confirmation or receipt</li>
      <li><strong>Upload the screenshot</strong> to cloud storage (Google Drive, Dropbox, etc.)</li>
      <li><strong>Copy the link</strong> and paste it in the screenshot field above</li>
      <li><strong>Enter the reference ID</strong> from your bank/UPI app</li>
      <li><strong>Submit the form</strong> - admin will verify and approve your payment</li>
    </ol>
    
          <div style="margin-top: 16px; padding: 12px; background-color: #fef3c7; border-radius: 6px; border-left: 4px solid #f59e0b;">
        <strong>⚠️ Important:</strong> Your payment will be marked as pending until admin verifies and approves it. 
        This usually takes 1-2 business days.
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const paymentMethodSelect = document.getElementById('paymentMethod');
      const accountDetails = document.getElementById('accountDetails');
      const accountInfo = document.getElementById('accountInfo');
      
      // Show account details when payment method is selected
      paymentMethodSelect.addEventListener('change', function() {
        const selectedAccountId = this.value;
        if (selectedAccountId) {
          loadAccountDetails(selectedAccountId);
        } else {
          accountDetails.style.display = 'none';
        }
      });
      
      function loadAccountDetails(accountId) {
        fetch(`/api/account/${accountId}/details`)
          .then(response => response.json())
          .then(data => {
            if (data.error) {
              accountInfo.innerHTML = '<p style="color: #dc2626;">Error loading account details</p>';
            } else {
              accountInfo.innerHTML = `
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                  <div>
                    <strong>Account Name:</strong> ${data.name}<br>
                    <strong>Bank/Provider:</strong> ${data.bank_name}<br>
                    <strong>Account Holder:</strong> ${data.holder_name}
                  </div>
                  <div>
                    <strong>Account Number:</strong> ${data.account_number}<br>
                    <strong>IFSC/SWIFT:</strong> ${data.ifsc_swift}<br>
                    <strong>Instructions:</strong> ${data.payment_instructions}
                  </div>
                </div>
              `;
              accountDetails.style.display = 'block';
            }
          })
          .catch(error => {
            console.error('Error:', error);
            accountInfo.innerHTML = '<p style="color: #dc2626;">Error loading account details</p>';
          });
      }
      
      // Load account details if one is pre-selected
      if (paymentMethodSelect.value) {
        loadAccountDetails(paymentMethodSelect.value);
      }
    });
  </script>
{% endblock %}