{% extends 'base.html' %}

{% block title %}Offer Details: {{ offer.code }}{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Offer Details: {{ offer.code }}</h5>
        <div>
            <a href="{% url 'offer_update' offer.pk %}" class="btn btn-primary btn-sm">Edit</a>
            <a href="{% url 'offer_list' %}" class="btn btn-secondary btn-sm">Back to List</a>
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-md-6">
                <h6 class="text-muted">Basic Information</h6>
                <table class="table table-borderless">
                    <tr>
                        <th style="width: 150px;">Code:</th>
                        <td><span class="badge bg-primary">{{ offer.code }}</span></td>
                    </tr>
                    <tr>
                        <th>Name:</th>
                        <td>{{ offer.name }}</td>
                    </tr>
                    <tr>
                        <th>Description:</th>
                        <td>{{ offer.description|default:"-" }}</td>
                    </tr>
                    <tr>
                        <th>Slug:</th>
                        <td>{{ offer.slug|default:"-" }}</td>
                    </tr>
                    <tr>
                        <th>Status:</th>
                        <td>
                            {% if offer.is_active %}
                                <span class="badge bg-success">Active</span>
                            {% else %}
                                <span class="badge bg-danger">Inactive</span>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6 class="text-muted">Validity & Priority</h6>
                <table class="table table-borderless">
                    <tr>
                        <th style="width: 150px;">Valid From:</th>
                        <td>{{ offer.start_date|default:"-" }}</td>
                    </tr>
                    <tr>
                        <th>Valid Until:</th>
                        <td>{{ offer.end_date|default:"-" }}</td>
                    </tr>
                    <tr>
                        <th>Priority:</th>
                        <td>{{ offer.priority }}</td>
                    </tr>
                    <tr>
                        <th>Created At:</th>
                        <td>{{ offer.created_at }}</td>
                    </tr>
                    <tr>
                        <th>Updated At:</th>
                        <td>{{ offer.updated_at }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <hr>

        <div class="row mb-4">
            <div class="col-md-6">
                <h6 class="text-muted">Offer Rules</h6>
                <table class="table table-borderless">
                    <tr>
                        <th style="width: 150px;">Type:</th>
                        <td>{{ offer.get_offer_type_display }}</td>
                    </tr>
                    {% if offer.offer_type == 'percentage' %}
                    <tr>
                        <th>Percentage:</th>
                        <td>{{ offer.discount_percentage }}%</td>
                    </tr>
                    <tr>
                        <th>Max Discount:</th>
                        <td>{{ offer.max_discount_amount|default:"No Limit" }}</td>
                    </tr>
                    {% elif offer.offer_type == 'fixed_amount' %}
                    <tr>
                        <th>Amount:</th>
                        <td>{{ offer.discount_amount }}</td>
                    </tr>
                    {% elif offer.offer_type == 'buy_x_get_y' %}
                    <tr>
                        <th>Buy Quantity:</th>
                        <td>{{ offer.buy_quantity }}</td>
                    </tr>
                    <tr>
                        <th>Get Quantity:</th>
                        <td>{{ offer.get_quantity }}</td>
                    </tr>
                    <tr>
                        <th>Get Discount %:</th>
                        <td>{{ offer.get_discount_percent }}%</td>
                    </tr>
                    <tr>
                        <th>Gift Product:</th>
                        <td>{{ offer.gift_product|default:"-" }}</td>
                    </tr>
                    {% endif %}
                    <tr>
                        <th>Min Purchase:</th>
                        <td>{{ offer.minimum_purchase_amount|default:"-" }}</td>
                    </tr>
                    <tr>
                        <th>Max Purchase:</th>
                        <td>{{ offer.maximum_purchase_amount|default:"-" }}</td>
                    </tr>
                    <tr>
                        <th>Min Quantity:</th>
                        <td>{{ offer.minimum_quantity|default:"-" }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6 class="text-muted">Usage Limits & Settings</h6>
                <table class="table table-borderless">
                    <tr>
                        <th style="width: 150px;">Max Uses (Total):</th>
                        <td>{{ offer.usage_limit_total|default:"Unlimited" }}</td>
                    </tr>
                    <tr>
                        <th>Max Uses (User):</th>
                        <td>{{ offer.usage_limit_per_user|default:"Unlimited" }}</td>
                    </tr>
                    <tr>
                        <th>Used Count:</th>
                        <td>{{ offer.used_count }}</td>
                    </tr>
                    <tr>
                        <th>Auto Apply:</th>
                        <td>{{ offer.auto_apply|yesno:"Yes,No" }}</td>
                    </tr>
                    <tr>
                        <th>Exclude Sale:</th>
                        <td>{{ offer.exclude_sale_items|yesno:"Yes,No" }}</td>
                    </tr>
                    <tr>
                        <th>First Order Only:</th>
                        <td>{{ offer.first_order_only|yesno:"Yes,No" }}</td>
                    </tr>
                    <tr>
                        <th>Apply to All:</th>
                        <td>{{ offer.apply_to_all|yesno:"Yes,No" }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-12">
                <h6 class="text-muted">Applicability</h6>
                
                <div class="mb-3">
                    <strong>Brands:</strong><br>
                    {% if offer.brands %}
                        {% for brand in offer.brands %}
                            <span class="badge bg-info text-dark me-1">{{ brand }}</span>
                        {% endfor %}
                    {% else %}
                        <span class="text-muted">All Brands (if Apply to All is checked) or None</span>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <strong>Categories:</strong><br>
                    {% if offer.categories %}
                        {% for category in offer.categories %}
                            <span class="badge bg-info text-dark me-1">{{ category }}</span>
                        {% endfor %}
                    {% else %}
                        <span class="text-muted">All Categories (if Apply to All is checked) or None</span>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <strong>Products:</strong><br>
                    {% if offer.products %}
                        {% for product in offer.products %}
                            <span class="badge bg-info text-dark me-1">{{ product }}</span>
                        {% endfor %}
                    {% else %}
                        <span class="text-muted">All Products (if Apply to All is checked) or None</span>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <strong>Services:</strong><br>
                    {% if offer.services.all %}
                        {% for service in offer.services.all %}
                            <span class="badge bg-info text-dark me-1">{{ service.service_name }}</span>
                        {% endfor %}
                    {% else %}
                        <span class="text-muted">All Services (if Apply to All is checked) or None</span>
                    {% endif %}
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}