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

{% block title %}{{ 'user_alerts.title'|trans }} - {{ 'app.name'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block body %}
<div class="container py-5">
    <!-- Messages flash -->
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('user_dashboard') }}">{{ 'user_alerts.breadcrumb'|trans }}</a></li>
            <li class="breadcrumb-item active">{{ 'user_alerts.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-bell me-2" style="color: var(--aef-blue-primary);"></i>
                                {{ 'user_alerts.page_title'|trans }}
                            </h1>
                            <p class="aef-text-muted mb-0">
                                {{ 'user_alerts.description'|trans }}
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newAlertModal">
                                <i class="fas fa-plus me-2"></i>{{ 'user_alerts.new_alert'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Alertes actives -->
    <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-bell me-2"></i>{{ 'user_alerts.active_alerts'|trans }} ({{ alerts|length }})
                    </h4>
                </div>
                <div class="card-body p-4">
                    {% if alerts|length > 0 %}
                        {% for alert in alerts %}
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-md-8">
                                            <h6 class="mb-1">{{ alert.name }}</h6>
                                            <p class="text-muted small mb-1">
                                                {% if alert.keywords %}
                                                    {{ 'user_alerts.keywords'|trans }}: {{ alert.keywords }}
                                                {% endif %}
                                                {% if alert.category %}
                                                    | {{ 'user_alerts.category'|trans }}: {{ alert.category.name }}
                                                {% endif %}
                                                {% if alert.minPrice or alert.maxPrice %}
                                                    | {{ 'user_alerts.price'|trans }}: {{ alert.minPrice ?? '0' }}€ - {{ alert.maxPrice ?? '∞' }}€
                                                {% endif %}
                                            </p>
                                            <small class="text-muted">
                                                {{ 'user_alerts.created_on'|trans }} {{ alert.createdAt|date('d/m/Y') }}
                                                {% if alert.lastNotificationAt %}
                                                    | {{ 'user_alerts.last_notification'|trans }}: {{ alert.lastNotificationAt|date('d/m/Y') }}
                                                {% endif %}
                                            </small>
                                        </div>
                                        <div class="col-md-4 text-md-end">
                                            <div class="btn-group" role="group">
                                                <a href="{{ path('user_alerts_edit', {id: alert.id}) }}" class="btn btn-outline-primary btn-sm">
                                                    <i class="fas fa-edit"></i> {{ 'user_alerts.modify'|trans }}
                                                </a>
                                                <form method="post" action="{{ path('user_alerts_toggle', {id: alert.id}) }}" class="d-inline">
                                                    <button type="submit" class="btn btn-outline-{{ alert.active ? 'warning' : 'success' }} btn-sm">
                                                        <i class="fas fa-{{ alert.active ? 'pause' : 'play' }}"></i>
                                                        {{ alert.active ? 'user_alerts.pause'|trans : 'user_alerts.activate'|trans }}
                                                    </button>
                                                </form>
                                                <form method="post" action="{{ path('user_alerts_delete', {id: alert.id}) }}" class="d-inline" onsubmit="return confirm('{{ 'user_alerts.delete_confirm'|trans|e('js') }}')">
                                                    <button type="submit" class="btn btn-outline-danger btn-sm">
                                                        <i class="fas fa-trash"></i> {{ 'user_alerts.delete'|trans }}
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <!-- Message si aucune alerte -->
                        <div class="text-center py-5">
                            <i class="fas fa-bell-slash fa-4x mb-3" style="color: var(--aef-beige-primary);"></i>
                            <h5 class="mb-3">{{ 'user_alerts.no_alerts'|trans }}</h5>
                            <p class="text-muted mb-4">
                                {{ 'user_alerts.no_alerts_description'|trans }}
                            </p>
                            <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#newAlertModal">
                                <i class="fas fa-plus me-2"></i>{{ 'user_alerts.create_first_alert'|trans }}
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Suggestions d'alertes -->
    <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-lightbulb me-2"></i>{{ 'user_alerts.suggestions.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 text-center">
                                    <i class="fas fa-palette fa-2x mb-3" style="color: var(--aef-blue-primary);"></i>
                                    <h6>{{ 'user_alerts.suggestions.paintings.title'|trans }}</h6>
                                    <p class="small text-muted mb-3">{{ 'user_alerts.suggestions.paintings.description'|trans }}</p>
                                    <button class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-plus me-1"></i>{{ 'user_alerts.suggestions.create_alert'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 aef-interactive">
                                <div class="card-body text-center">
                                    <i class="fas fa-chair fa-2x mb-3" style="color: var(--aef-beige-primary);"></i>
                                    <h6>{{ 'user_alerts.suggestions.furniture.title'|trans }}</h6>
                                    <p class="small text-muted mb-3">{{ 'user_alerts.suggestions.furniture.description'|trans }}</p>
                                    <button class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-plus me-1"></i>{{ 'user_alerts.suggestions.create_alert'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 aef-interactive">
                                <div class="card-body text-center">
                                    <i class="fas fa-gem fa-2x mb-3" style="color: var(--aef-blue-primary);"></i>
                                    <h6>{{ 'user_alerts.suggestions.jewelry.title'|trans }}</h6>
                                    <p class="small text-muted mb-3">{{ 'user_alerts.suggestions.jewelry.description'|trans }}</p>
                                    <button class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-plus me-1"></i>{{ 'user_alerts.suggestions.create_alert'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Nouvelle Alerte -->
<div class="modal fade" id="newAlertModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            {{ form_start(alertForm, {'action': path('user_alerts'), 'method': 'POST'}) }}
            <div class="modal-header" style="background: var(--aef-gradient-blue); color: white;">
                <h5 class="modal-title">
                    <i class="fas fa-bell me-2"></i>{{ 'user_alerts.modal.title'|trans }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        {{ form_label(alertForm.name, null, {'label_attr': {'class': 'form-label'}}) }}
                        {{ form_widget(alertForm.name) }}
                        {{ form_help(alertForm.name) }}
                    </div>
                    <div class="col-md-6 mb-3">
                        {{ form_label(alertForm.category, null, {'label_attr': {'class': 'form-label'}}) }}
                        {{ form_widget(alertForm.category) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        {{ form_label(alertForm.style, null, {'label_attr': {'class': 'form-label'}}) }}
                        {{ form_widget(alertForm.style) }}
                    </div>
                    <div class="col-md-6 mb-3">
                        {{ form_label(alertForm.period, null, {'label_attr': {'class': 'form-label'}}) }}
                        {{ form_widget(alertForm.period) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        {{ form_label(alertForm.minPrice, null, {'label_attr': {'class': 'form-label'}}) }}
                        {{ form_widget(alertForm.minPrice) }}
                    </div>
                    <div class="col-md-6 mb-3">
                        {{ form_label(alertForm.maxPrice, null, {'label_attr': {'class': 'form-label'}}) }}
                        {{ form_widget(alertForm.maxPrice) }}
                    </div>
                </div>
                <div class="mb-3">
                    {{ form_label(alertForm.keywords, null, {'label_attr': {'class': 'form-label'}}) }}
                    {{ form_widget(alertForm.keywords) }}
                    {{ form_help(alertForm.keywords) }}
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        {{ form_label(alertForm.country, null, {'label_attr': {'class': 'form-label'}}) }}
                        {{ form_widget(alertForm.country) }}
                    </div>
                    <div class="col-md-6 mb-3">
                        {{ form_label(alertForm.region, null, {'label_attr': {'class': 'form-label'}}) }}
                        {{ form_widget(alertForm.region) }}
                    </div>
                </div>
                <div class="form-check">
                    {{ form_widget(alertForm.emailNotification) }}
                    {{ form_label(alertForm.emailNotification, null, {'label_attr': {'class': 'form-check-label'}}) }}
                    {{ form_help(alertForm.emailNotification) }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-2"></i>Créer l'alerte
                </button>
            </div>
            {{ form_end(alertForm) }}
        </div>
    </div>
</div>

{% block javascripts %}
    {{ parent() }}
    <script>
        // Debug et correction pour la modale des alertes
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🔧 Initialisation modal alertes');
            
            const alertModal = document.getElementById('newAlertModal');
            if (!alertModal) {
                console.error('❌ Modale newAlertModal non trouvée');
                return;
            }
            
            console.log('✅ Modale trouvée, boutons cliquables');
            
            // Event listeners pour le debug et corrections
            alertModal.addEventListener('show.bs.modal', function(e) {
                console.log('🔔 Ouverture modale');
            });
            
            alertModal.addEventListener('shown.bs.modal', function(e) {
                console.log('✅ Modale alerte ouverte');
                
                // UNIQUEMENT pour cette modale spécifique (newAlertModal)
                const modal = e.target;
                
                // Application spécifique à cette modale seulement (pas globale !)
                modal.style.zIndex = '1060';  // Juste au-dessus des modales standards
                modal.style.pointerEvents = 'auto';
                
                // Focus sur le premier champ
                const firstInput = modal.querySelector('input, select, textarea');
                if (firstInput) {
                    setTimeout(() => firstInput.focus(), 100);
                }
            });
            
            alertModal.addEventListener('hidden.bs.modal', function(e) {
                console.log('✅ Modale fermée');
                
                // Nettoyage simple
                setTimeout(() => {
                    document.querySelectorAll('.modal-backdrop:not(.show)').forEach(backdrop => {
                        backdrop.remove();
                    });
                }, 100);
            });
        });
    </script>
{% endblock %}

{% endblock %}