100 lines
4.5 KiB
HTML
100 lines
4.5 KiB
HTML
{% extends 'layout/base_template.html' %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-5">
|
|
<div class="row">
|
|
<!-- Principal Subscription Title and Image -->
|
|
<div class="col-md-12 mb-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body text-center">
|
|
{% if principal_subscription_obj.subscription.image %}
|
|
<img src="{{ principal_subscription_obj.subscription.image.url }}" class="img-fluid rounded mb-3" alt="{{ principal_subscription_obj.subscription.title }}" style="max-height: 200px;">
|
|
{% endif %}
|
|
<h3 class="card-title">{{ principal_subscription_obj.subscription.title }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subscription and Principal Info -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card shadow-sm h-100 bg-dark text-light border-gold">
|
|
<div class="card-header border-bottom-gold">
|
|
<h5 class="card-title text-gold"><i class="bi bi-info-circle"></i> Subscription Info</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p><strong>Principal:</strong> {{ principal_subscription_obj.principal.first_name }} {{ principal_subscription_obj.principal.last_name }}</p>
|
|
<p><strong>Status:</strong> {{ principal_subscription_obj.get_status_display }}</p>
|
|
<p><strong>Start Date:</strong> {{ principal_subscription_obj.start_date }}</p>
|
|
<p><strong>End Date:</strong> {{ principal_subscription_obj.end_date }}</p>
|
|
<p><strong>Auto Renew:</strong> {{ principal_subscription_obj.auto_renew|yesno:"Yes,No" }}</p>
|
|
<p><strong>Cancelled:</strong> {% if principal_subscription_obj.cancelled %}<span class="badge bg-danger">Yes</span>{% else %}<span class="badge bg-success">No</span>{% endif %}</p>
|
|
|
|
{% if principal_subscription_obj.coupon_code %}
|
|
<p><strong>Coupon Code:</strong> {{ principal_subscription_obj.coupon_code }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cancellation and Payment Info -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card shadow-sm h-100 bg-dark text-light border-gold">
|
|
<div class="card-header border-bottom-gold">
|
|
<h5 class="card-title text-gold"><i class="bi bi-credit-card"></i> Cancellation and Payment Info</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p><strong>Order ID:</strong> {{ principal_subscription_obj.order_id|default:"Not Provided" }}</p>
|
|
<p><strong>Grace Period Ends:</strong> {{ principal_subscription_obj.grace_period_end_date|default:"Not Provided" }}</p>
|
|
<p><strong>Stripe Subscription ID:</strong> {{ principal_subscription_obj.stripe_subscription_id|default:"Not Provided" }}</p>
|
|
<p><strong>Comments:</strong> {{ principal_subscription_obj.comments|default:"Not Provided" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cancellation Button -->
|
|
{% if principal_subscription_obj.auto_renew and not principal_subscription_obj.cancelled %}
|
|
<div class="col-md-12 mb-4">
|
|
<div class="card shadow-sm bg-dark text-light border-gold">
|
|
<div class="card-body text-center">
|
|
<h5 class="text-gold">Cancel Subscription</h5>
|
|
<form method="POST" action="{% url 'manage_subscriptions:cancel_subscription' %}">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="subscription_id" value="{{ principal_subscription_obj.id }}">
|
|
<button type="submit" class="btn btn-outline-gold">Cancel Subscription</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
<style>
|
|
.bg-dark {
|
|
background-color: #000 !important;
|
|
}
|
|
.text-light {
|
|
color: #f8f9fa !important;
|
|
}
|
|
.text-gold {
|
|
color: #d4af37 !important;
|
|
}
|
|
.border-gold {
|
|
border: 2px solid #d4af37 !important;
|
|
}
|
|
.border-bottom-gold {
|
|
border-bottom: 2px solid #d4af37 !important;
|
|
}
|
|
.btn-outline-gold {
|
|
color: #d4af37;
|
|
border-color: #d4af37;
|
|
}
|
|
.btn-outline-gold:hover {
|
|
background-color: #d4af37;
|
|
color: #000;
|
|
}
|
|
</style>
|