{% extends "base.html" %}

{% block content %}

<div class="page-hero">
    <div>
        <h2><i class="bi bi-ticket-perforated text-primary"></i> {{ l('Discount Coupons', 'ডিসকাউন্ট কুপন') }}</h2>
        <p class="page-subtitle">{{ l('Create promotional discount codes for sales', 'বিক্রয়ের জন্য নতুন প্রোমো কুপন কোড তৈরি করুন') }}</p>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white border-bottom py-3 px-4">
        <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-plus-circle text-primary me-2"></i>{{ l('Create Coupon', 'নতুন কুপন তৈরি করুন') }}</h5>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="/add-coupon">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        <div class="row g-4">
            <!-- LEFT COLUMN: Code & Type -->
            <div class="col-md-6 border-end-md pe-md-4">
                <div class="d-flex align-items-center mb-3 text-primary fw-bold">
                    <i class="bi bi-tag me-2 fs-5"></i>
                    <span>{{ l('1. Coupon Code & Type', '১. কুপন কোড ও ধরন') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Coupon Code', 'কুপন কোড') }} <span class="text-danger">*</span></label>
                    <input class="form-control form-control-lg fs-6" name="code" placeholder="EID2026, DISCOUNT10" required style="text-transform:uppercase">
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Discount Type', 'ছাড়ের ধরন') }}</label>
                        <select class="form-select" name="discount_type">
                            <option value="percent">{{ l('Percent (%)', 'শতকরা (%)') }}</option>
                            <option value="flat">{{ l('Flat Amount (৳)', 'নির্দিষ্ট টাকা (৳)') }}</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Discount Value', 'পরিমাণ') }} <span class="text-danger">*</span></label>
                        <input class="form-control" name="value" placeholder="10" required>
                    </div>
                </div>
            </div>

            <!-- RIGHT COLUMN: Expiry & Limits -->
            <div class="col-md-6 ps-md-4">
                <div class="d-flex align-items-center mb-3 text-success fw-bold">
                    <i class="bi bi-calendar-check me-2 fs-5"></i>
                    <span>{{ l('2. Expiry & Usage Limit', '২. কুপনের মেয়াদের সীমা') }}</span>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Expiry Date', 'মেয়াদ উত্তীর্ণের তারিখ') }}</label>
                        <input type="date" class="form-control" name="expiry_date">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Max Usage Limit', 'সর্বোচ্চ ব্যবহারের সীমা') }}</label>
                        <input class="form-control" name="usage_limit" placeholder="{{ l('e.g. 100', 'যেমন: ১০০') }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end align-items-center mt-4 pt-3 border-top">
            <button type="submit" class="btn btn-primary btn-lg px-5 fw-bold shadow-sm">
                <i class="bi bi-plus-circle me-1"></i> {{ l('Create Coupon', 'কুপন তৈরি করুন') }}
            </button>
        </div>

        </form>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
    <div class="card-header bg-light border-bottom py-3 px-4">
        <h5 class="fw-bold text-dark mb-0"><i class="bi bi-ticket-perforated text-primary me-2"></i>{{ l('Coupons List', 'বিদ্যমান ডিসকাউন্ট কুপনসমূহ') }}</h5>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th class="ps-4">{{ l('Code', 'কুপন কোড') }}</th>
                    <th>{{ l('Type', 'ধরন') }}</th>
                    <th>{{ l('Value', 'মূল্য/ছাড়') }}</th>
                    <th>{{ l('Expiry Date', 'মেয়াদ') }}</th>
                    <th>{{ l('Usage Count', 'ব্যবহার সংখ্যা') }}</th>
                    <th>{{ l('Status', 'অবস্থা') }}</th>
                    <th class="pe-4 text-end">{{ l('Action', 'অ্যাকশন') }}</th>
                </tr>
            </thead>
            <tbody>
            {% for c in coupons %}
                <tr>
                    <td class="ps-4 fw-bold text-primary">{{ c.code }}</td>
                    <td><span class="badge bg-light text-dark border">{{ c.discount_type }}</span></td>
                    <td class="fw-bold text-success">{{ "%.2f"|format(c.value or 0) }}{{ '%' if c.discount_type == 'percent' else ' ৳' }}</td>
                    <td>{{ c.expiry_date.strftime('%d-%m-%Y') if c.expiry_date else '—' }}</td>
                    <td>{{ c.used_count }}{% if c.usage_limit %} / {{ c.usage_limit }}{% endif %}</td>
                    <td>
                        {% if c.active %}
                        <span class="badge bg-success py-1.5 px-3">{{ l('Active', 'সক্রিয়') }}</span>
                        {% else %}
                        <span class="badge bg-secondary py-1.5 px-3">{{ l('Inactive', 'নিষ্ক্রিয়') }}</span>
                        {% endif %}
                    </td>
                    <td class="pe-4 text-end">
                        <form method="post" action="/toggle-coupon/{{ c.id }}" class="d-inline">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <button class="btn btn-outline-warning btn-sm me-1">{{ l('Toggle', 'অবস্থা বদলান') }}</button>
                        </form>
                        <form method="post" action="/delete-coupon/{{ c.id }}" class="d-inline" onsubmit="return confirm('{{ l('Delete this coupon?', 'কুপনটি ডিলিট করতে চান?') }}')">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash me-1"></i>{{ l('Delete', 'ডিলিট') }}</button>
                        </form>
                    </td>
                </tr>
            {% else %}
                <tr><td colspan="7" class="text-center text-muted py-5"><i class="bi bi-ticket fs-1 d-block mb-2 opacity-50"></i>{{ l('No coupons created yet.', 'এখনও কোনো কুপন তৈরি করা হয়নি।') }}</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}