{% extends "base.html" %}

{% block title %}کوپن‌های تخفیف | {{ site_name }}{% endblock %}

{% block meta_description %}مشاهده و استفاده از کوپن‌های تخفیف ویژه بازار آنلاین ۷۲۴{% endblock %}

{% block content %}
<div class="container py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('index') }}">خانه</a></li>
            <li class="breadcrumb-item active">کوپن‌های تخفیف</li>
        </ol>
    </nav>

    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold">
            <i class="fas fa-ticket-alt text-primary me-2"></i>
            کوپن‌های تخفیف ویژه
        </h1>
        <p class="text-muted">با استفاده از کوپن‌های تخفیف، خرید خود را با قیمت مناسب‌تر انجام دهید</p>
    </div>

    {% if coupons %}
        <div class="row g-4">
            {% for coupon in coupons %}
                <div class="col-md-6 col-lg-4">
                    <div class="coupon-card">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <span class="coupon-code">{{ coupon.code }}</span>
                            </div>
                            <span class="badge bg-success">
                                <i class="fas fa-check-circle me-1"></i> فعال
                            </span>
                        </div>
                        
                        <div class="coupon-discount mb-2">
                            {% if coupon.discount_type == 'percent' %}
                                {{ coupon.discount_value }}<span>%</span>
                            {% else %}
                                {{ coupon.discount_value|persian_price }} <span>تومان</span>
                            {% endif %}
                        </div>
                        
                        <p class="text-white-50 small mb-2">
                            {% if coupon.discount_type == 'percent' %}
                                تخفیف درصدی
                            {% else %}
                                تخفیف مبلغی
                            {% endif %}
                        </p>
                        
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="coupon-expiry">
                                <i class="fas fa-clock me-1"></i>
                                اعتبار تا {{ coupon.end_date|jalali_date }}
                            </span>
                            {% if coupon.min_order_amount > 0 %}
                                <span class="coupon-expiry">
                                    <i class="fas fa-shopping-bag me-1"></i>
                                    حداقل {{ coupon.min_order_amount|persian_price }} تومان
                                </span>
                            {% endif %}
                        </div>
                        
                        {% if coupon.usage_limit %}
                            <div class="coupon-expiry mb-2">
                                <i class="fas fa-users me-1"></i>
                                {{ coupon.used_count|persian_number }} از {{ coupon.usage_limit|persian_number }} بار استفاده شده
                            </div>
                        {% endif %}
                        
                        <div class="d-grid gap-2 mt-3">
                            <button class="coupon-use-btn" onclick="copyCoupon('{{ coupon.code }}')">
                                <i class="fas fa-copy me-2"></i> کپی کد تخفیف
                            </button>
                            <a href="{{ url_for('products') }}" class="btn btn-outline-light btn-sm">
                                <i class="fas fa-shopping-bag me-2"></i> مشاهده محصولات
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-5">
            <i class="fas fa-ticket-alt fa-4x text-muted mb-3 d-block"></i>
            <h3 class="mb-2">هیچ کوپن تخفیفی در حال حاضر فعال نیست</h3>
            <p class="text-muted">به زودی کوپن‌های تخفیف جدیدی اضافه خواهد شد</p>
            <a href="{{ url_for('products') }}" class="btn btn-primary mt-3">
                <i class="fas fa-shopping-bag me-2"></i> مشاهده محصولات
            </a>
        </div>
    {% endif %}
</div>

<script>
function copyCoupon(code) {
    navigator.clipboard.writeText(code).then(function() {
        showToast('✅ کد تخفیف ' + code + ' کپی شد', 'success');
    }, function() {
        // fallback
        const input = document.createElement('input');
        input.value = code;
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
        showToast('✅ کد تخفیف ' + code + ' کپی شد', 'success');
    });
}
</script>
{% endblock %}