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

{% block title %}Enquête Créée - {{ survey.title }}{% endblock %}

{% block page_title %}Enquête Créée avec Succès{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Message de succès -->
    <div class="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-check text-2xl text-green-600"></i>
        </div>
        <h2 class="text-xl font-semibold text-green-800 mb-2">Enquête créée avec succès !</h2>
        <p class="text-green-700">Votre enquête "{{ survey.title }}" est maintenant prête à être partagée.</p>
    </div>

    <!-- Informations de l'enquête -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
            Informations de l'enquête
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-600">Titre</label>
                <p class="text-gray-800 font-medium">{{ survey.title }}</p>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-600">Statut</label>
                <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full
                    {% if survey.status == 'draft' %}bg-gray-100 text-gray-700
                    {% elseif survey.status == 'active' %}bg-green-100 text-green-700
                    {% endif %}">
                    {% if survey.status == 'draft' %}Brouillon
                    {% elseif survey.status == 'active' %}Active
                    {% endif %}
                </span>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-600">Objectif de réponses</label>
                <p class="text-gray-800">{{ survey.targetResponses }} réponses</p>
            </div>
            
            {% if survey.expiryDate %}
            <div>
                <label class="block text-sm font-medium text-gray-600">Date d'expiration</label>
                <p class="text-gray-800">{{ survey.expiryDate|date('d/m/Y') }}</p>
            </div>
            {% endif %}
        </div>
        
        {% if survey.description %}
        <div class="mt-4">
            <label class="block text-sm font-medium text-gray-600">Description</label>
            <p class="text-gray-800">{{ survey.description }}</p>
        </div>
        {% endif %}
    </div>

    <!-- Lien de partage -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-share-alt text-blue-500 mr-2"></i>
            Lien de partage
        </h3>
        
        <div class="space-y-4">
            <!-- Lien URL -->
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-2">Lien direct de l'enquête</label>
                <div class="flex items-center space-x-2">
                    <input type="text" 
                           id="surveyUrl"
                           value="{{ publicUrl }}" 
                           readonly
                           class="flex-1 border border-gray-300 rounded-md px-3 py-2 bg-gray-50 text-sm">
                    <button onclick="copyToClipboard('surveyUrl')" 
                            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                        <i class="fas fa-copy mr-1"></i> Copier
                    </button>
                </div>
                <p class="text-xs text-gray-500 mt-1">Partagez ce lien avec vos participants</p>
            </div>

            <!-- QR Code (simulé) -->
            <div class="text-center">
                <div class="inline-block p-4 bg-gray-100 rounded-lg">
                    <div class="w-32 h-32 bg-white border border-gray-300 flex items-center justify-center rounded">
                        <i class="fas fa-qrcode text-4xl text-gray-400"></i>
                    </div>
                </div>
                <p class="text-sm text-gray-600 mt-2">Code QR (à implémenter)</p>
            </div>
        </div>
    </div>

    <!-- Options de partage -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-paper-plane text-green-500 mr-2"></i>
            Partager l'enquête
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Email -->
            <button onclick="shareByEmail()" 
                    class="flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
                <i class="fas fa-envelope text-blue-600 text-xl mr-3"></i>
                <div class="text-left">
                    <div class="font-medium text-gray-800">Email</div>
                    <div class="text-sm text-gray-600">Partager par email</div>
                </div>
            </button>

            <!-- WhatsApp -->
            <button onclick="shareByWhatsApp()" 
                    class="flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
                <i class="fab fa-whatsapp text-green-600 text-xl mr-3"></i>
                <div class="text-left">
                    <div class="font-medium text-gray-800">WhatsApp</div>
                    <div class="text-sm text-gray-600">Partager sur WhatsApp</div>
                </div>
            </button>

            <!-- SMS -->
            <button onclick="shareBySMS()" 
                    class="flex items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
                <i class="fas fa-sms text-purple-600 text-xl mr-3"></i>
                <div class="text-left">
                    <div class="font-medium text-gray-800">SMS</div>
                    <div class="text-sm text-gray-600">Partager par SMS</div>
                </div>
            </button>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex justify-center space-x-4">
        <a href="{{ path('app_survey_manage', {id: survey.id}) }}" 
           class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
            <i class="fas fa-cog mr-2"></i>
            Gérer l'enquête
        </a>
        <a href="{{ path('app_survey_index') }}" 
           class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg">
            <i class="fas fa-list mr-2"></i>
            Retour aux enquêtes
        </a>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    element.setSelectionRange(0, 99999);
    
    try {
        document.execCommand('copy');
        // Feedback visuel
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check mr-1"></i> Copié !';
        button.classList.add('bg-green-600');
        button.classList.remove('bg-blue-600');
        
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('bg-green-600');
            button.classList.add('bg-blue-600');
        }, 2000);
    } catch (err) {
        alert('Erreur lors de la copie');
    }
}

function shareByEmail() {
    const url = document.getElementById('surveyUrl').value;
    const subject = encodeURIComponent('Enquête de satisfaction - {{ survey.title }}');
    const body = encodeURIComponent(`Bonjour,

Vous êtes invité(e) à participer à notre enquête de satisfaction : "{{ survey.title }}"

Pour répondre à l'enquête, cliquez sur le lien suivant :
${url}

{% if survey.expiryDate %}Cette enquête expire le {{ survey.expiryDate|date('d/m/Y') }}.{% endif %}

Merci pour votre participation !`);
    
    window.location.href = `mailto:?subject=${subject}&body=${body}`;
}

function shareByWhatsApp() {
    const url = document.getElementById('surveyUrl').value;
    const text = encodeURIComponent(`🎯 Enquête de satisfaction : "{{ survey.title }}"

Votre avis nous intéresse ! Cliquez sur le lien pour répondre :
${url}

{% if survey.expiryDate %}⏰ Expire le {{ survey.expiryDate|date('d/m/Y') }}{% endif %}

Merci ! 🙏`);
    
    window.open(`https://wa.me/?text=${text}`, '_blank');
}

function shareBySMS() {
    const url = document.getElementById('surveyUrl').value;
    const text = encodeURIComponent(`Enquête: "{{ survey.title }}" - Répondez ici: ${url}`);
    
    window.location.href = `sms:?body=${text}`;
}
</script>

{% endblock %}