<!-- DISCOUNT SYSTEM - TEMPLATE SNIPPETS -->

<!-- 1. PRODUCT PAGE - Display Discount Badge -->
<!-- Include in shop/product_detail.html or similar -->
<div class="product-pricing">
    {% with discount=product.get_active_discount %}
        {% if discount %}
            <div class="discount-badge badge-danger">
                {% if discount.discount_type == 'percentage' %}
                    <span class="discount-percent">{{ discount.discount_value }}% OFF</span>
                {% else %}
                    <span class="discount-fixed">₦{{ discount.discount_value }} OFF</span>
                {% endif %}
            </div>
            <div class="pricing">
                <span class="original-price" style="text-decoration: line-through;">
                    ₦{{ product.price }}
                </span>
                <span class="discounted-price text-success fw-bold">
                    ₦{{ discount.calculate_discounted_price|floatformat:2 }}
                </span>
                <small class="text-muted">{{ discount.name }}</small>
            </div>
        {% else %}
            <div class="pricing">
                <span class="price fw-bold">₦{{ product.price }}</span>
            </div>
        {% endif %}
    {% endwith %}
</div>


<!-- 2. PRODUCT CARD - Mini Discount Display -->
<!-- Include in product grid items -->
<div class="product-card">
    <!-- Product image -->
    {% with discount=product.get_active_discount %}
        {% if discount %}
            <div class="discount-ribbon">
                {% if discount.discount_type == 'percentage' %}
                    {{ discount.discount_value }}% OFF
                {% else %}
                    Save ₦{{ discount.discount_value }}
                {% endif %}
            </div>
        {% endif %}
    {% endwith %}
    <!-- Rest of product card -->
</div>


<!-- 3. CART PAGE - Discount Code Input and Summary -->
<!-- Include in shop/cart.html -->
<div class="cart-summary card">
    <div class="card-header">
        <h5>Order Summary</h5>
    </div>
    <div class="card-body">
        <!-- Subtotal -->
        <div class="summary-row">
            <span>Subtotal:</span>
            <span>₦{{ cart_totals.subtotal|floatformat:2 }}</span>
        </div>
        
        <!-- Discount Code Input -->
        <div class="discount-input-section my-3">
            <form method="post" action="{% url 'shop:apply_discount_code' %}" class="discount-form">
                {% csrf_token %}
                <div class="input-group">
                    <input 
                        type="text" 
                        name="code" 
                        class="form-control" 
                        placeholder="Enter discount code"
                        maxlength="50"
                    >
                    <button type="submit" class="btn btn-outline-primary">Apply</button>
                </div>
                <small class="form-text text-muted">
                    Enter a promotional code if you have one
                </small>
            </form>
        </div>
        
        <!-- Applied Discount Display -->
        {% if applied_discount %}
            <div class="alert alert-success" role="alert">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <strong>{{ applied_discount.name }}</strong>
                        {% if applied_discount.code %}
                            <br><small class="badge bg-primary">{{ applied_discount.code }}</small>
                        {% endif %}
                    </div>
                    <form method="post" action="{% url 'shop:remove_discount_code' %}" style="display: inline;">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-link text-danger">Remove</button>
                    </form>
                </div>
            </div>
            
            <!-- Discount Amount -->
            <div class="summary-row text-success">
                <span>Discount:</span>
                <span>-₦{{ cart_totals.discount_amount|floatformat:2 }}</span>
            </div>
        {% endif %}
        
        <!-- Total -->
        <div class="summary-row fw-bold border-top pt-2 mt-2">
            <span>Total:</span>
            <span>₦{{ cart_totals.total|floatformat:2 }}</span>
        </div>
        
        <!-- Savings Message -->
        {% if cart_totals.discount_amount > 0 %}
            <div class="alert alert-info mt-3">
                <i class="fas fa-check-circle"></i>
                You're saving <strong>₦{{ cart_totals.discount_amount|floatformat:2 }}</strong> with this discount!
            </div>
        {% endif %}
    </div>
</div>


<!-- 4. CHECKOUT PAGE - Discount Summary -->
<!-- Include in shop/checkout.html -->
<div class="order-review">
    <h5>Order Details</h5>
    
    <table class="table">
        <tr>
            <td>Subtotal</td>
            <td class="text-end">₦{{ order.subtotal|floatformat:2 }}</td>
        </tr>
        {% if order.discount %}
            <tr class="table-success">
                <td>
                    Discount ({{ order.discount.name }})
                    {% if order.discount.code %}
                        <br><small class="text-muted">Code: {{ order.discount.code }}</small>
                    {% endif %}
                </td>
                <td class="text-end text-success">-₦{{ order.discount_amount|floatformat:2 }}</td>
            </tr>
        {% endif %}
        <tr class="fw-bold">
            <td>Total</td>
            <td class="text-end">₦{{ order.total|floatformat:2 }}</td>
        </tr>
    </table>
</div>


<!-- 5. ORDER CONFIRMATION EMAIL -->
<!-- Include in email templates -->
<h3>Order Summary</h3>

<table style="width: 100%;">
    <tr>
        <td>Subtotal</td>
        <td style="text-align: right;">₦{{ order.subtotal }}</td>
    </tr>
    {% if order.discount %}
        <tr style="background-color: #d4edda;">
            <td>
                <strong>Discount</strong><br>
                <small>{{ order.discount.name }}</small>
                {% if order.discount.code %}
                    <br><small>(Code: {{ order.discount.code }})</small>
                {% endif %}
            </td>
            <td style="text-align: right; color: #28a745;">
                <strong>-₦{{ order.discount_amount }}</strong>
            </td>
        </tr>
    {% endif %}
    <tr style="font-weight: bold; border-top: 2px solid #000;">
        <td>Total Amount</td>
        <td style="text-align: right;">₦{{ order.total }}</td>
    </tr>
</table>

{% if order.discount %}
    <p style="color: #28a745; margin-top: 10px;">
        <strong>Great savings!</strong> You saved ₦{{ order.discount_amount }} with 
        <strong>{{ order.discount.name }}</strong>
    </p>
{% endif %}


<!-- 6. ADMIN - Display Discount Status -->
<!-- For custom admin templates -->
<div class="discount-info">
    <h4>{{ discount.name }}</h4>
    
    <dl class="row">
        <dt class="col-sm-3">Type:</dt>
        <dd class="col-sm-9">
            {{ discount.get_discount_type_display }}
            - {{ discount.discount_value }}{% if discount.discount_type == 'percentage' %}%{% else %} ₦{% endif %}
        </dd>
        
        <dt class="col-sm-3">Status:</dt>
        <dd class="col-sm-9">
            {% if discount.is_valid %}
                <span class="badge bg-success">Active</span>
            {% else %}
                <span class="badge bg-danger">Inactive</span>
            {% endif %}
        </dd>
        
        <dt class="col-sm-3">Valid Period:</dt>
        <dd class="col-sm-9">
            {{ discount.start_date }} to {{ discount.end_date }}
        </dd>
        
        <dt class="col-sm-3">Usage:</dt>
        <dd class="col-sm-9">
            {{ discount.usage_count }}
            {% if discount.usage_limit %}
                / {{ discount.usage_limit }}
            {% else %}
                (unlimited)
            {% endif %}
        </dd>
    </dl>
</div>


<!-- 7. APPLICABLE DISCOUNTS LIST -->
<!-- Show available discounts to customers -->
<div class="available-discounts">
    <h5>Available Discounts</h5>
    <div class="list-group">
        {% for discount in available_discounts %}
            <div class="list-group-item">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="mb-1">{{ discount.name }}</h6>
                        <p class="mb-1">{{ discount.description }}</p>
                        <small class="text-muted">
                            {% if discount.code %}
                                Code: <strong>{{ discount.code }}</strong> •
                            {% endif %}
                            Save up to
                            {% if discount.discount_type == 'percentage' %}
                                {{ discount.discount_value }}%
                            {% else %}
                                ₦{{ discount.discount_value }}
                            {% endif %}
                        </small>
                    </div>
                    <span class="badge bg-primary">
                        {% if discount.discount_type == 'percentage' %}
                            -{{ discount.discount_value }}%
                        {% else %}
                            -₦{{ discount.discount_value }}
                        {% endif %}
                    </span>
                </div>
            </div>
        {% empty %}
            <p class="text-muted">No active discounts at the moment.</p>
        {% endfor %}
    </div>
</div>

<!-- CSS for styling -->
<style>
    .discount-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #dc3545;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        z-index: 10;
    }
    
    .discount-ribbon {
        position: absolute;
        top: -5px;
        right: -30px;
        background: #dc3545;
        color: white;
        padding: 8px 40px;
        transform: rotate(45deg);
        font-size: 12px;
        font-weight: bold;
    }
    
    .original-price {
        color: #999;
        font-size: 14px;
    }
    
    .discounted-price {
        font-size: 20px;
    }
    
    .discount-input-section {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 15px 0;
    }
</style>
