{# app/modules/loyalty/templates/loyalty/storefront/enroll.html #}
{% extends "storefront/base.html" %}

{% block title %}{{ _('loyalty.enrollment.title') }} - {{ store.name }}{% endblock %}

{% block i18n_modules %}['loyalty']{% endblock %}

{% block alpine_data %}customerLoyaltyEnroll(){% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css" media="(prefers-color-scheme: dark)">
{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center px-4 py-12 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-md w-full">
        <!-- Logo/Brand -->
        <div class="text-center mb-8">
            {% if store.logo_url %}
            <img src="{{ store.logo_url }}" alt="{{ store.name }}" class="h-16 w-auto mx-auto mb-4">
            {% endif %}
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ _('loyalty.enrollment.title') }}</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">{{ _('loyalty.enrollment.subtitle', points=program.points_per_euro if program else 1) }}</p>
        </div>

        <!-- Loading -->
        <div x-show="loading" class="text-center py-8">
            <span x-html="$icon('spinner', 'w-8 h-8 animate-spin mx-auto')" style="color: var(--color-primary)"></span>
        </div>

        <!-- No Program Available -->
        <div x-show="!loading && !program" class="bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center">
            <span x-html="$icon('exclamation-circle', 'w-12 h-12 mx-auto text-yellow-500')"></span>
            <h2 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">{{ _('loyalty.enrollment.not_available_title') }}</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">{{ _('loyalty.enrollment.not_available_message') }}</p>
        </div>

        <!-- Enrollment Form -->
        <div x-show="!loading && program && !enrolled" class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <!-- Welcome Bonus Banner -->
            <div x-show="program?.welcome_bonus_points > 0"
                 class="p-4 text-center text-white"
                 :style="'background-color: ' + (program?.card_color || 'var(--color-primary)')">
                <span x-html="$icon('gift', 'w-6 h-6 inline mr-2')"></span>
                <span class="font-semibold">{{ _('loyalty.enrollment.welcome_bonus', points=program.welcome_bonus_points if program else 0) }}</span>
            </div>

            <form @submit.prevent="submitEnrollment" class="p-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('loyalty.enrollment.form.email') }} <span class="text-red-500">*</span>
                    </label>
                    <input type="email" x-model="form.email" required
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white"
                           style="--tw-ring-color: var(--color-primary)"
                           placeholder="your@email.com">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ _('loyalty.enrollment.form.first_name') }} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" x-model="form.first_name" required
                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white"
                               placeholder="John">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ _('loyalty.enrollment.form.last_name') }}
                        </label>
                        <input type="text" x-model="form.last_name"
                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white"
                               placeholder="Doe">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('loyalty.enrollment.form.phone') }}
                    </label>
                    <input type="tel" x-model="form.phone"
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white"
                           placeholder="+352 123 456 789">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('loyalty.enrollment.form.birthday') }}
                    </label>
                    {# Use flatpickr instead of <input type="date"> — Firefox ignores
                       the html lang attribute for native date inputs, so users on FR
                       still saw mm/dd/yyyy. flatpickr enforces dd/mm/yyyy across all
                       browsers and locales (universal in Europe). #}
                    <input type="text" x-model="form.birthday"
                           placeholder="dd/mm/yyyy"
                           x-init="flatpickr($el, {
                               dateFormat: 'Y-m-d',
                               altInput: true,
                               altFormat: 'd/m/Y',
                               allowInput: true,
                               maxDate: 'today',
                               locale: '{{ current_language|default('en') }}',
                               disableMobile: false,
                               onChange: function(selectedDates, dateStr) { form.birthday = dateStr; }
                           })"
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white">
                    <p class="mt-1 text-xs text-gray-500">{{ _('loyalty.enrollment.form.birthday_hint') }}</p>
                </div>

                <div class="space-y-3 pt-2">
                    <label class="flex items-start">
                        <input type="checkbox" x-model="form.terms_accepted" required
                               class="mt-1 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                               style="color: var(--color-primary)">
                        <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">
                            {{ _('loyalty.enrollment.form.terms_agree') }}
                            <template x-if="program?.terms_text || program?.terms_cms_page_slug">
                                <a href="#" @click.prevent="showTerms = true" class="underline" style="color: var(--color-primary)">{{ _('loyalty.enrollment.form.terms') }}</a>
                            </template>
                            <template x-if="!program?.terms_text && !program?.terms_cms_page_slug">
                                <span class="underline" style="color: var(--color-primary)">{{ _('loyalty.enrollment.form.terms') }}</span>
                            </template>
                        </span>
                    </label>
                    <label class="flex items-start">
                        <input type="checkbox" x-model="form.marketing_consent"
                               class="mt-1 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                               style="color: var(--color-primary)">
                        <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">
                            {{ _('loyalty.enrollment.form.marketing_consent') }}
                        </span>
                    </label>
                </div>

                <button type="submit"
                        :disabled="enrolling || !form.email || !form.first_name || !form.terms_accepted"
                        class="w-full py-3 px-4 text-white font-semibold rounded-lg transition-colors disabled:opacity-50"
                        :style="'background-color: ' + (program?.card_color || 'var(--color-primary)')">
                    <span x-show="enrolling" x-html="$icon('spinner', 'w-5 h-5 inline animate-spin mr-2')"></span>
                    <span x-text="enrolling ? '{{ _('loyalty.enrollment.form.joining')|replace("'", "\\'") }}' : '{{ _('loyalty.enrollment.form.join_button', points=program.welcome_bonus_points if program else 0)|replace("'", "\\'") }}'"></span>
                </button>
            </form>

            <div class="px-6 pb-6 text-center">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {{ _('loyalty.enrollment.already_member') }}
                </p>
            </div>
        </div>

        <!-- Error Message -->
        <div x-show="error" class="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
            <p class="text-sm text-red-600 dark:text-red-400" x-text="error"></p>
        </div>
    </div>
</div>

<!-- Terms & Conditions Modal -->
<div x-show="showTerms" x-cloak
     role="dialog" aria-modal="true" aria-labelledby="terms-modal-title"
     class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
     @click.self="showTerms = false"
     @keydown.escape.window="showTerms = false">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full max-h-[80vh] flex flex-col">
        <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
            <h3 id="terms-modal-title" class="text-lg font-semibold text-gray-900 dark:text-white">{{ _('loyalty.enrollment.form.terms') }}</h3>
            <button @click="showTerms = false" type="button" aria-label="{{ _('loyalty.enrollment.close') }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <span x-html="$icon('x-mark', 'w-5 h-5')"></span>
            </button>
        </div>
        {# CMS page content takes priority over legacy terms_text #}
        <div x-show="termsHtml" class="p-4 overflow-y-auto text-sm text-gray-700 dark:text-gray-300 prose dark:prose-invert max-w-none" x-html="termsHtml"></div>
        <div x-show="!termsHtml && program?.terms_text" class="p-4 overflow-y-auto text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line" x-text="program?.terms_text"></div>
        <template x-if="program?.privacy_url">
            <div class="px-4 pb-2">
                <a :href="program.privacy_url" target="_blank" class="text-sm underline" style="color: var(--color-primary)">{{ _('loyalty.enrollment.privacy_policy') }}</a>
            </div>
        </template>
        <div class="p-4 border-t dark:border-gray-700">
            <button @click="showTerms = false"
                    class="w-full py-2 px-4 text-white font-medium rounded-lg"
                    :style="'background-color: ' + (program?.card_color || 'var(--color-primary)')">
                {{ _('loyalty.enrollment.close') }}
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
{# flatpickr loaded synchronously so x-init can call flatpickr() during Alpine setup #}
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
{% if current_language and current_language != 'en' %}
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/{{ current_language }}.js"></script>
{% endif %}
<script defer src="{{ static_v(request, 'loyalty_static', path='storefront/js/loyalty-enroll.js') }}"></script>
{% endblock %}