templates/manual_payment.html

{% extends "base.html" %}

{% block title %}Manual Payment - TexLab{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-primary text-white py-3">
          <div class="d-flex align-items-center">
            <i class="fas fa-info-circle me-2"></i>
            <h4 class="mb-0">{{ instructions.title }}</h4>
          </div>
        </div>
        <div class="card-body p-4">
          <div class="alert alert-info">
            <i class="fas fa-exclamation-circle me-2"></i>
            Please follow these instructions carefully to complete your payment.
          </div>
          
          <div class="card mb-4">
            <div class="card-header bg-light py-3">
              <h5 class="mb-0">Payment Instructions</h5>
            </div>
            <div class="card-body">
              <ol class="mb-0">
                {% for step in instructions.steps %}
                <li class="mb-3">{{ step }}</li>
                {% endfor %}
              </ol>
            </div>
          </div>
          
          <div class="card mb-4">
            <div class="card-header bg-light py-3">
              <h5 class="mb-0">Transaction Details</h5>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <div class="d-flex justify-content-between">
                    <span>Plan:</span>
                    <strong>{{ plan.name }}</strong>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="d-flex justify-content-between">
                    <span>Amount:</span>
                    <strong>{{ plan.price }} BDT</strong>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="d-flex justify-content-between">
                    <span>Transaction ID:</span>
                    <strong>{{ tran_id }}</strong>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="d-flex justify-content-between">
                    <span>Payment Method:</span>
                    <strong>{{ method|title }}</strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <strong>{{ instructions.confirmation }}</strong>
          </div>
          
          <div class="d-grid gap-3 d-md-flex justify-content-md-center mt-4">
            <a href="{{ url_for('pricing.manual_payment_confirm', method=method, plan_id=plan_id) }}" class="btn btn-primary-gradient btn-lg">
              <i class="fas fa-check-circle me-2"></i>I've Completed Payment
            </a>
            <a href="{{ url_for('pricing.pricing') }}" class="btn btn-outline-secondary btn-lg">
              <i class="fas fa-times me-2"></i>Cancel
            </a>
          </div>
        </div>
      </div>
      
      <div class="text-center mt-4">
        <small class="text-muted">
          <i class="fas fa-lock me-1"></i>
          Secure payment processing
        </small>
      </div>
    </div>
  </div>
</div>

<style>
  .card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }
  
  .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
  }
</style>
{% endblock %}