{% extends "base.html" %}

{% block page_title %}My Scratch Cards{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
<main class="mx-auto my-8 max-w-5xl px-4 text-foreground sm:px-6">
    <h1 class="mb-8 text-center text-3xl font-bold">My Scratch &amp; Win Rewards</h1>

    {% if not user %}
    <div class="rounded-xl border border-divider bg-surface p-8 text-center shadow-sm sm:p-12">
        <p>Please log in to view and scratch your reward cards.</p>
        <a href="/auth/login" class="inline-flex min-h-11 items-center justify-center rounded-lg bg-brand px-5 py-2.5 font-semibold text-white  focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand" id="scratch-login-btn">Login Now</a>
    </div>
    {% else %}

    <div class="mb-5 text-center">
        <p class="inline-block rounded-lg border border-dashed border-brand bg-surface p-4 text-foreground">
            🚀 <strong>Want more cards?</strong> Place an order of {{ currency_symbol }}{{ scratch_card_threshold }} or
            more to earn another scratch card!
        </p>
    </div>

    <div class="mb-5 text-center text-muted">
        <p>You have <strong><span id="unscratched-counter">{{ unscratched_count }}</span></strong> unscratched
            card{% if unscratched_count != 1 %}s{% endif %}!</p>
    </div>

    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3" id="scratch-grid" data-currency-symbol="{{ currency_symbol }}"
        data-unscratched-ids="{{ unscratched_ids | json_encode }}">
        {% for card in cards %}
        <div class="scratch-card relative flex min-h-48 aspect-[4/3] cursor-pointer overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm transition duration-300 hover:-translate-y-1 hover:scale-[1.02] sm:min-h-60 {% if card.is_expired and not card.is_scratched %}border-danger/40{% endif %} {% if card.is_scratched %}revealed{% endif %}"
            id="card-{{ card.id }}"
            data-id="{{ card.id }}">
            {% if not card.is_scratched and card.expires_at %}
            <p class="scratch-expiry absolute inset-x-0 top-0 z-10 m-0 border-b border-divider bg-surface/95 px-3 py-2 text-center text-xs font-semibold text-foreground {% if card.is_expired %}text-danger{% endif %}">
                Scratch before {{ card.expires_at | date_in_tz(timezone=timezone, format="%b %d, %Y") }}
            </p>
            {% endif %}
            <div class="scratch-result flex h-full min-h-0 w-full flex-col items-center bg-surface text-center {% if card.is_scratched %}justify-start gap-0.5 overflow-hidden p-3.5{% else %}justify-center p-5{% endif %}">
                {% if card.is_expired and not card.is_scratched %}
                <div class="reward-icon mb-1 shrink-0 text-3xl sm:mb-2.5 sm:text-5xl">🎁</div>
                <div class="reward-text flex min-h-0 w-full flex-1 flex-col items-stretch">
                    <div class="reward-label shrink-0 text-xs font-semibold uppercase tracking-wider text-muted">Scratch to reveal</div>
                </div>
                {% elif card.is_scratched and card.scratched_expired %}
                <div class="reward-icon mb-1 shrink-0 text-3xl sm:mb-2.5 sm:text-5xl">⏰</div>
                <div class="reward-text flex min-h-0 w-full flex-1 flex-col items-stretch">
                    <div class="reward-label shrink-0 text-xs font-semibold uppercase tracking-wider text-muted">Card expired</div>
                    <div class="reward-desc mt-1.5 text-sm font-semibold text-success">This card was scratched after the deadline. No reward was issued.</div>
                </div>
                {% elif card.reward_type == 'coupon' %}
                <div class="reward-icon mb-1 shrink-0 text-3xl sm:mb-2.5 sm:text-5xl">🎫</div>
                <div class="reward-text flex min-h-0 w-full flex-1 flex-col items-stretch">
                    <div class="reward-label shrink-0 text-xs font-semibold uppercase tracking-wider text-muted">Coupon Code</div>
                    <div class="reward-value-code my-2 rounded-lg border border-dashed border-brand bg-canvas px-5 py-2.5 font-mono text-xl font-extrabold text-brand shadow-inner">{{ card.reward_value }}</div>
                    {% if card.reward_description %}
                    <div class="reward-desc mt-1.5 text-sm font-semibold text-success">{{ card.reward_description }}</div>
                    {% endif %}
                </div>
                {% elif card.reward_type == 'cashback' %}
                <div class="reward-icon mb-1 shrink-0 text-3xl sm:mb-2.5 sm:text-5xl">💰</div>
                <div class="reward-text flex min-h-0 w-full flex-1 flex-col items-stretch">
                    <div class="reward-label shrink-0 text-xs font-semibold uppercase tracking-wider text-muted">Cashback Value</div>
                    <div class="my-1 text-2xl font-extrabold text-success">{{ currency_symbol }}{{ card.reward_value }}</div>
                    <div class="reward-desc mt-1.5 text-sm font-semibold text-success">Credited to Wallet</div>
                </div>
                {% else %}
                <div class="reward-icon mb-1 shrink-0 text-3xl sm:mb-2.5 sm:text-5xl">🎁</div>
                <div class="reward-text flex min-h-0 w-full flex-1 flex-col items-stretch">
                    <div class="break-words text-lg font-bold">{{ card.reward_value }}</div>
                </div>
                {% endif %}
            </div>
            {% if not card.is_scratched %}
            <canvas id="canvas-{{ card.id }}" class="scratch-canvas absolute inset-0 z-20 touch-none rounded-2xl" width="300" height="200"></canvas>
            <button type="button" id="reveal-{{ card.id }}" class="absolute bottom-2 left-2 z-30 rounded-md bg-surface px-3 py-2 text-sm font-semibold text-foreground shadow focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">Reveal reward</button>
            {% endif %}
        </div>
        {% endfor %}

        {% if cards | length == 0 %}
        <div class="col-span-full rounded-xl border-2 border-dashed border-divider bg-surface px-5 py-16 text-center text-muted">
            <i class="fas fa-ticket-alt mb-5 text-5xl opacity-40"></i>
            <p>You haven't earned any scratch cards yet.</p>
            <p><small>Keep shopping to win exciting rewards!</small></p>
        </div>
        {% endif %}
    </div>

    {% endif %}
</main>

<script src="/plugins/scratch-card/assets/js/scratch_card.js"></script>
{% endblock %}