{% extends "base.html" %}
{% block title %}Payments & Banking{% endblock %}
{% block page_title %}Payments & Banking{% endblock %}

{% block content %}
<style>
  .payment-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
  }
  .payment-card:hover {
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }
  .payment-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  .payment-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
  }
  .payment-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
    font-family: 'SF Mono', monospace;
  }
  .payment-empty {
    opacity: 0.4;
    font-style: italic;
  }
  .section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin: 2rem 0 1rem;
    font-weight: 600;
  }
  .form-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .copy-btn {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
  }
  .copy-btn:hover {
    opacity: 1;
    color: var(--accent-primary);
  }
  .link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.35rem 0.9rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    color: var(--accent-primary);
    background: rgba(0,212,255,0.06);
  }
  .link-btn:hover {
    background: rgba(0,212,255,0.12);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
  }
  .link-btn i {
    font-size: 0.75rem;
  }
  .link-btn-success {
    color: var(--accent-success);
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.2);
  }
  .link-btn-success:hover {
    background: rgba(16,185,129,0.12);
    border-color: var(--accent-success);
  }
  .link-btn-purple {
    color: #8B5CF6;
    background: rgba(139,92,246,0.06);
    border-color: rgba(139,92,246,0.2);
  }
  .link-btn-purple:hover {
    background: rgba(139,92,246,0.12);
    border-color: #8B5CF6;
  }
  /* ─── QR CODE DISPLAY ─── */
  .qr-preview {
    width: 180px;
    height: 180px;
    border-radius: 16px;
    border: 2px dashed var(--border-color);
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .qr-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
  }
  .qr-preview .qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
  }
  .qr-upload-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .file-input-glass {
    position: relative;
    overflow: hidden;
    display: inline-block;
  }
  .file-input-glass input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
  .file-input-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0,212,255,0.08);
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  .file-input-label:hover {
    background: rgba(0,212,255,0.15);
  }
  .file-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: monospace;
  }
</style>

<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h4 class="mb-1" style="font-weight: 700;">Payment Methods</h4>
    <p style="color: var(--text-secondary); font-size: 0.9rem;">Manage how your business receives payments</p>
  </div>
  <button class="btn-glass" onclick="toggleEdit()">
    <i class="fas fa-pen me-2"></i>Edit Details
  </button>
</div>

<!-- VIEW MODE -->
<div id="viewMode">
  {% if payments %}
  <!-- UPI Section -->
  <div class="section-title"><i class="fas fa-qrcode me-2"></i>UPI & Digital</div>
  <div class="row g-4 mb-4">
    <div class="col-lg-4 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(0,212,255,0.1); color: #00D4FF;"><i class="fas fa-mobile-alt"></i></div>
        <div class="payment-label">UPI ID</div>
        <div class="payment-value" id="displayUpiId">{{ payments.upi_id or '—' }}</div>
        {% if payments.upi_id %}<i class="fas fa-copy copy-btn position-absolute" style="top: 1.5rem; right: 1.5rem;" onclick="copyToClipboard('{{ payments.upi_id }}')" title="Copy"></i>{% endif %}
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(16,185,129,0.1); color: #10B981;"><i class="fas fa-link"></i></div>
        <div class="payment-label">UPI Payment Link</div>
        <div class="payment-value" style="font-size: 0.85rem;">{{ payments.upi_link or '—' }}</div>
        {% if payments.upi_link %}
        <a href="{{ payments.upi_link }}" target="_blank" class="link-btn link-btn-success">
          <i class="fas fa-external-link-alt"></i>Open UPI Link
        </a>
        {% endif %}
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(139,92,246,0.1); color: #8B5CF6;"><i class="fas fa-image"></i></div>
        <div class="payment-label">QR Code</div>
        {% if qr_url %}
          <div class="qr-preview mt-2">
            <img src="{{ qr_url }}" alt="Payment QR Code">
          </div>
          <a href="{{ qr_url }}" target="_blank" class="link-btn link-btn-purple mt-2">
            <i class="fas fa-expand"></i>View Full Size
          </a>
        {% else %}
          <div class="qr-preview mt-2">
            <div class="qr-placeholder">
              <i class="fas fa-qrcode" style="font-size: 2rem; opacity: 0.3;"></i>
              <span style="font-size: 0.8rem;">No QR uploaded</span>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Bank Section -->
  <div class="section-title"><i class="fas fa-university me-2"></i>Banking Details</div>
  <div class="row g-4 mb-4">
    <div class="col-lg-3 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(245,158,11,0.1); color: #F59E0B;"><i class="fas fa-landmark"></i></div>
        <div class="payment-label">Bank Name</div>
        <div class="payment-value">{{ payments.bank_name or '—' }}</div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(244,114,182,0.1); color: #F472B6;"><i class="fas fa-hashtag"></i></div>
        <div class="payment-label">Account Number</div>
        <div class="payment-value">{{ payments.bank_account_number or '—' }}</div>
        {% if payments.bank_account_number %}<i class="fas fa-copy copy-btn position-absolute" style="top: 1.5rem; right: 1.5rem;" onclick="copyToClipboard('{{ payments.bank_account_number }}')" title="Copy"></i>{% endif %}
      </div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(239,68,68,0.1); color: #EF4444;"><i class="fas fa-code"></i></div>
        <div class="payment-label">IFSC Code</div>
        <div class="payment-value">{{ payments.bank_ifsc or '—' }}</div>
        {% if payments.bank_ifsc %}<i class="fas fa-copy copy-btn position-absolute" style="top: 1.5rem; right: 1.5rem;" onclick="copyToClipboard('{{ payments.bank_ifsc }}')" title="Copy"></i>{% endif %}
      </div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(99,102,241,0.1); color: #6366F1;"><i class="fas fa-sticky-note"></i></div>
        <div class="payment-label">Transfer Notes</div>
        <div class="payment-value" style="font-size: 0.85rem;">{{ payments.bank_transfer_details or '—' }}</div>
      </div>
    </div>
  </div>

  <!-- Gateways -->
  <div class="section-title"><i class="fas fa-globe me-2"></i>Payment Gateways</div>
  <div class="row g-4 mb-4">
    <div class="col-lg-4 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(0,212,255,0.1); color: #00D4FF;"><i class="fas fa-shopping-cart"></i></div>
        <div class="payment-label">Gateway Link</div>
        <div class="payment-value" style="font-size: 0.85rem;">{{ payments.payment_gateway_link or '—' }}</div>
        {% if payments.payment_gateway_link %}
        <a href="{{ payments.payment_gateway_link }}" target="_blank" class="link-btn">
          <i class="fas fa-external-link-alt"></i>Open Gateway
        </a>
        {% endif %}
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(16,185,129,0.1); color: #10B981;"><i class="fas fa-credit-card"></i></div>
        <div class="payment-label">Payment Link</div>
        <div class="payment-value" style="font-size: 0.85rem;">{{ payments.payment_link or '—' }}</div>
        {% if payments.payment_link %}
        <a href="{{ payments.payment_link }}" target="_blank" class="link-btn link-btn-success">
          <i class="fas fa-external-link-alt"></i>Open Payment Link
        </a>
        {% endif %}
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(139,92,246,0.1); color: #8B5CF6;"><i class="fab fa-cc-stripe"></i></div>
        <div class="payment-label">Stripe Key</div>
        <div class="payment-value" style="font-size: 0.8rem;">{{ payments.stripe_key or '—' }}</div>
        {% if payments.stripe_key %}<i class="fas fa-copy copy-btn position-absolute" style="top: 1.5rem; right: 1.5rem;" onclick="copyToClipboard('{{ payments.stripe_key }}')" title="Copy"></i>{% endif %}
      </div>
    </div>
  </div>

  <!-- Business Messaging -->
  <div class="section-title"><i class="fas fa-comments me-2"></i>Business Messaging</div>
  <div class="row g-4 mb-4">
    <div class="col-lg-6 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(16,185,129,0.1); color: #10B981;"><i class="fab fa-whatsapp"></i></div>
        <div class="payment-label">WhatsApp Business</div>
        <div class="payment-value">{{ payments.whatsapp_business_link or '—' }}</div>
        {% if payments.whatsapp_business_link %}
        <a href="https://wa.me/{{ payments.whatsapp_business_link|replace('+','')|replace(' ','') }}" target="_blank" class="link-btn link-btn-success">
          <i class="fab fa-whatsapp"></i>Start Chat
        </a>
        {% endif %}
      </div>
    </div>
    <div class="col-lg-6 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(0,212,255,0.1); color: #00D4FF;"><i class="fab fa-telegram"></i></div>
        <div class="payment-label">Telegram Business</div>
        <div class="payment-value">{{ payments.telegram_business_link or '—' }}</div>
        {% if payments.telegram_business_link %}
        <a href="{{ payments.telegram_business_link if payments.telegram_business_link.startswith('http') else 'https://t.me/' + payments.telegram_business_link }}" target="_blank" class="link-btn">
          <i class="fab fa-telegram"></i>Open Telegram
        </a>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- International -->
  <div class="section-title"><i class="fas fa-globe-americas me-2"></i>International</div>
  <div class="row g-4">
    <div class="col-lg-4 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(59,130,246,0.1); color: #3B82F6;"><i class="fab fa-paypal"></i></div>
        <div class="payment-label">PayPal</div>
        <div class="payment-value" style="font-size: 0.85rem;">{{ payments.paypal_link or '—' }}</div>
        {% if payments.paypal_link %}
        <a href="{{ payments.paypal_link }}" target="_blank" class="link-btn">
          <i class="fab fa-paypal"></i>Open PayPal
        </a>
        {% endif %}
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="payment-card">
        <div class="payment-icon" style="background: rgba(139,92,246,0.1); color: #8B5CF6;"><i class="fas fa-bolt"></i></div>
        <div class="payment-label">Razorpay Key</div>
        <div class="payment-value" style="font-size: 0.8rem;">{{ payments.razorpay_key or '—' }}</div>
        {% if payments.razorpay_key %}<i class="fas fa-copy copy-btn position-absolute" style="top: 1.5rem; right: 1.5rem;" onclick="copyToClipboard('{{ payments.razorpay_key }}')" title="Copy"></i>{% endif %}
      </div>
    </div>
  </div>

  {% else %}
  <div class="text-center py-5">
    <div class="mb-4" style="width: 80px; height: 80px; border-radius: 24px; background: rgba(255,255,255,0.05); display: inline-flex; align-items: center; justify-content: center;">
      <i class="fas fa-credit-card" style="font-size: 2rem; color: var(--text-secondary);"></i>
    </div>
    <h5 style="color: var(--text-primary);">No Payment Methods Configured</h5>
    <p style="color: var(--text-secondary); max-width: 400px; margin: 0 auto;">Your payment details from registration are missing. Add them now to display on your dashboard and business profiles.</p>
    <button class="btn-glass mt-3" onclick="toggleEdit()">
      <i class="fas fa-plus me-2"></i>Configure Payments
    </button>
  </div>
  {% endif %}
</div>

<!-- EDIT MODE -->
<div id="editMode" style="display: none;">
  <form method="POST" action="{{ url_for('payments.update') }}" enctype="multipart/form-data">
    
    <div class="section-title"><i class="fas fa-qrcode me-2"></i>UPI & Digital Payments</div>
    <div class="form-section">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label">UPI ID</label>
          <input type="text" class="form-control-glass" name="upi_id" value="{{ payments.upi_id if payments else '' }}" placeholder="example@upi">
        </div>
        <div class="col-md-6">
          <label class="form-label">UPI Link</label>
          <input type="text" class="form-control-glass" name="upi_link" value="{{ payments.upi_link if payments else '' }}" placeholder="upi://pay?pa=...">
        </div>
        <div class="col-12">
          <label class="form-label">QR Code Image</label>
          <div class="qr-upload-wrap mt-2">
            {% if qr_url %}
            <div class="qr-preview">
              <img src="{{ qr_url }}" alt="Current QR Code">
            </div>
            {% endif %}
            <div class="file-input-glass">
              <input type="file" name="qr_code" id="qrInput" accept="image/png,image/jpeg,image/jpg,image/gif,image/webp,image/svg+xml" onchange="showFileName(this)">
              <label for="qrInput" class="file-input-label">
                <i class="fas fa-cloud-upload-alt"></i>
                <span id="qrLabelText">Choose QR Image</span>
              </label>
            </div>
            <span class="file-name" id="qrFileName"></span>
          </div>
          <small style="color: var(--text-secondary); opacity: 0.7;">Allowed: PNG, JPG, GIF, WEBP, SVG. Max 5MB recommended.</small>
        </div>
      </div>
    </div>

    <div class="section-title"><i class="fas fa-university me-2"></i>Banking Details</div>
    <div class="form-section">
      <div class="row g-3">
        <div class="col-md-4"><label class="form-label">Bank Name</label><input type="text" class="form-control-glass" name="bank_name" value="{{ payments.bank_name if payments else '' }}"></div>
        <div class="col-md-4"><label class="form-label">Account Number</label><input type="text" class="form-control-glass" name="bank_account_number" value="{{ payments.bank_account_number if payments else '' }}"></div>
        <div class="col-md-4"><label class="form-label">IFSC Code</label><input type="text" class="form-control-glass" name="bank_ifsc" value="{{ payments.bank_ifsc if payments else '' }}"></div>
        <div class="col-12"><label class="form-label">Transfer Details / Notes</label><textarea class="form-control-glass" name="bank_transfer_details" rows="2">{{ payments.bank_transfer_details if payments else '' }}</textarea></div>
      </div>
    </div>

    <div class="section-title"><i class="fas fa-globe me-2"></i>Payment Gateways</div>
    <div class="form-section">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Payment Gateway Link</label><input type="text" class="form-control-glass" name="payment_gateway_link" value="{{ payments.payment_gateway_link if payments else '' }}"></div>
        <div class="col-md-6"><label class="form-label">Payment Link</label><input type="text" class="form-control-glass" name="payment_link" value="{{ payments.payment_link if payments else '' }}"></div>
        <div class="col-md-4"><label class="form-label">Stripe Key</label><input type="text" class="form-control-glass" name="stripe_key" value="{{ payments.stripe_key if payments else '' }}"></div>
        <div class="col-md-4"><label class="form-label">PayPal Link</label><input type="text" class="form-control-glass" name="paypal_link" value="{{ payments.paypal_link if payments else '' }}"></div>
        <div class="col-md-4"><label class="form-label">Razorpay Key</label><input type="text" class="form-control-glass" name="razorpay_key" value="{{ payments.razorpay_key if payments else '' }}"></div>
      </div>
    </div>

    <div class="section-title"><i class="fas fa-comments me-2"></i>Business Messaging</div>
    <div class="form-section">
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">WhatsApp Business Number</label><input type="text" class="form-control-glass" name="whatsapp_business_link" value="{{ payments.whatsapp_business_link if payments else '' }}" placeholder="Phone number with country code"></div>
        <div class="col-md-6"><label class="form-label">Telegram Business Link</label><input type="text" class="form-control-glass" name="telegram_business_link" value="{{ payments.telegram_business_link if payments else '' }}" placeholder="@username or link"></div>
      </div>
    </div>

    <div class="d-flex gap-3 mt-4">
      <button type="submit" class="btn-glass"><i class="fas fa-save me-2"></i>Save All Changes</button>
      <button type="button" class="btn btn-outline-glass" onclick="toggleEdit()">Cancel</button>
    </div>
  </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
function toggleEdit() {
  const view = document.getElementById('viewMode');
  const edit = document.getElementById('editMode');
  if (view.style.display === 'none') {
    view.style.display = 'block';
    edit.style.display = 'none';
  } else {
    view.style.display = 'none';
    edit.style.display = 'block';
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
}

function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => {
    const toast = document.createElement('div');
    toast.textContent = 'Copied!';
    toast.style.cssText = 'position: fixed; bottom: 2rem; right: 2rem; background: var(--accent-primary); color: #000; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; z-index: 9999; animation: fadeInUp 0.3s ease;';
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 2000);
  });
}

function showFileName(input) {
  const nameSpan = document.getElementById('qrFileName');
  const labelText = document.getElementById('qrLabelText');
  if (input.files && input.files[0]) {
    nameSpan.textContent = input.files[0].name;
    labelText.textContent = 'Change Image';
  } else {
    nameSpan.textContent = '';
    labelText.textContent = 'Choose QR Image';
  }
}
</script>
{% endblock %}