{% extends 'base.html.twig' %}

{% block title %}{{ 'user_newsletter.title'|trans }} - {{ parent() }}{% endblock %}

{% block body %}
<div class="container py-5">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('user_dashboard') }}">{{ 'user_dashboard.title'|trans }}</a></li>
            <li class="breadcrumb-item active">{{ 'user_newsletter.title'|trans }}</li>
        </ol>
    </nav>

    <!-- En-tête -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card aef-texture-section border-0 shadow-sm">
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="aef-title h3 mb-2">
                                <i class="fas fa-envelope me-2" style="color: var(--aef-blue-primary);"></i>
                                {{ 'user_newsletter.title'|trans }}
                            </h1>
                            <p class="aef-text-muted mb-0">
                                {{ 'user_newsletter.description'|trans }}
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            {% if subscription.isSubscribed %}
                                <span class="badge" style="background-color: var(--aef-blue-primary); font-size: 1rem;">
                                    <i class="fas fa-check me-1"></i>{{ 'user_newsletter.status.subscribed'|trans }}
                                </span>
                            {% else %}
                                <span class="badge bg-secondary" style="font-size: 1rem;">
                                    <i class="fas fa-times me-1"></i>{{ 'user_newsletter.status.not_subscribed'|trans }}
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Préférences -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header" style="background: var(--aef-gradient-blue); color: white;">
                    <h4 class="mb-0">
                        <i class="fas fa-cog me-2"></i>{{ 'user_newsletter.preferences.title'|trans }}
                    </h4>
                </div>
                <div class="card-body p-4">
                    <!-- Messages flash -->
                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>{{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                    
                    {{ form_start(newsletterForm) }}
                        <!-- Abonnement -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                {{ form_widget(newsletterForm.isSubscribed) }}
                                {{ form_label(newsletterForm.isSubscribed) }}
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Fréquence -->
                        <div class="mb-4">
                            {{ form_label(newsletterForm.frequency) }}
                            <div class="row mt-3">
                                {% for choice in newsletterForm.frequency %}
                                    <div class="col-md-6 mb-2">
                                        <div class="form-check">
                                            {{ form_widget(choice) }}
                                            <label class="form-check-label" for="{{ choice.vars.id }}">
                                                <strong>{{ choice.vars.label }}</strong><br>
                                                <small class="text-muted">
                                                    {% if choice.vars.value == 'weekly' %}
                                                        {{ 'user_newsletter.frequency.weekly_description'|trans }}
                                                    {% else %}
                                                        {{ 'user_newsletter.frequency.monthly_description'|trans }}
                                                    {% endif %}
                                                </small>
                                            </label>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Types de contenu -->
                        <div class="mb-4">
                            {{ form_label(newsletterForm.contentTypes) }}
                            <div class="row mt-3">
                                {% for choice in newsletterForm.contentTypes %}
                                    <div class="col-md-6 mb-3">
                                        <div class="form-check">
                                            {{ form_widget(choice) }}
                                            <label class="form-check-label" for="{{ choice.vars.id }}">
                                                {% set icon = 'fas fa-plus-circle' %}
                                                {% set color = 'var(--aef-blue-primary)' %}
                                                {% if choice.vars.value == 'events' %}
                                                    {% set icon = 'fas fa-calendar' %}
                                                    {% set color = 'var(--aef-beige-primary)' %}
                                                {% elseif choice.vars.value == 'articles' %}
                                                    {% set icon = 'fas fa-newspaper' %}
                                                {% elseif choice.vars.value == 'promotions' %}
                                                    {% set icon = 'fas fa-tag' %}
                                                    {% set color = 'var(--aef-beige-primary)' %}
                                                {% endif %}
                                                
                                                <i class="{{ icon }} me-2" style="color: {{ color }};"></i>
                                                <strong>{{ choice.vars.label }}</strong><br>
                                                <small class="text-muted">
                                                    {% if choice.vars.value == 'newItems' %}
                                                        {{ 'user_newsletter.content_types.new_items_description'|trans }}
                                                    {% elseif choice.vars.value == 'events' %}
                                                        {{ 'user_newsletter.content_types.events_description'|trans }}
                                                    {% elseif choice.vars.value == 'articles' %}
                                                        {{ 'user_newsletter.content_types.articles_description'|trans }}
                                                    {% else %}
                                                        {{ 'user_newsletter.content_types.promotions_description'|trans }}
                                                    {% endif %}
                                                </small>
                                            </label>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>

                        <!-- Boutons -->
                        <div class="d-flex gap-3">
                            {{ form_row(newsletterForm.save) }}
                            {{ form_row(newsletterForm.unsubscribe) }}
                        </div>
                    {{ form_end(newsletterForm) }}
                </div>
            </div>
        </div>
    </div>

    <!-- Dernières newsletters -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header" style="background: var(--aef-gradient-beige); color: white;">
                    <h4 class="mb-0">
                        <i class="fas fa-history me-2"></i>{{ 'user_newsletter.recent.title'|trans }}
                    </h4>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 aef-interactive">
                                <div class="card-body">
                                    <h6 class="mb-2">{{ 'user_newsletter.recent.newsletter_of'|trans({'%date%': '15 juin 2024'}) }}</h6>
                                    <p class="small text-muted mb-3">{{ 'user_newsletter.recent.sample1_title'|trans }}</p>
                                    <a href="#" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye me-1"></i>{{ 'user_newsletter.recent.read'|trans }}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 aef-interactive">
                                <div class="card-body">
                                    <h6 class="mb-2">{{ 'user_newsletter.recent.newsletter_of'|trans({'%date%': '8 juin 2024'}) }}</h6>
                                    <p class="small text-muted mb-3">{{ 'user_newsletter.recent.sample2_title'|trans }}</p>
                                    <a href="#" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye me-1"></i>{{ 'user_newsletter.recent.read'|trans }}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 aef-interactive">
                                <div class="card-body">
                                    <h6 class="mb-2">{{ 'user_newsletter.recent.newsletter_of'|trans({'%date%': '1er juin 2024'}) }}</h6>
                                    <p class="small text-muted mb-3">{{ 'user_newsletter.recent.sample3_title'|trans }}</p>
                                    <a href="#" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye me-1"></i>{{ 'user_newsletter.recent.read'|trans }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}