{% extends "admin_layout.html" %}

{% block title %}{{ t('entities.projects','Projects') }} - {{ app_settings.title if app_settings else t('app.name','Survey Manager') }}{% endblock %}

{% block admin_content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">{{ t('projects.management','Projects Management') }}</h1>
    <a href="{{ url_for('project.create') }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>{{ t('projects.add_project','Add Project') }}
    </a>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="fas fa-project-diagram me-2"></i>{{ t('projects.all_projects','All Projects') }} ({{ projects|length }})
        </h5>
    </div>
    <div class="card-body">
        {% if projects %}
            <div class="table-responsive">
                <table class="table table-hover data-table">
                    <thead>
                        <tr>
                            <th>{{ t('common.id','ID') }}</th>
                            <th>{{ t('common.name','Name') }}</th>
                            <th>{{ t('common.slug','Slug') }}</th>
                            <th>{{ t('public.survey','Survey') }}</th>
                            <th>{{ t('projects.start_date','Start Date') }}</th>
                            <th>{{ t('projects.end_date','End Date') }}</th>
                            <th>{{ t('common.actions','Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for project in projects %}
                        <tr>
                            <td>{{ project.id }}</td>
                            <td><div class="fw-semibold">{{ project.name }}</div></td>
                            <td><code>{{ project.slug or '-' }}</code></td>
                            <td>
                                {% if project.survey_name %}
                                    <span class="badge bg-info">{{ project.survey_name }}</span>
                                {% else %}
                                    <span class="text-muted">{{ t('features.no_survey','No survey') }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if project.start_date %}
                                    {{ project.start_date.strftime('%b %d, %Y') }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if project.end_date %}
                                    {{ project.end_date.strftime('%b %d, %Y') }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    {% if project.slug %}
                                        <button class="btn btn-outline-success share-btn" 
                                                data-slug="{{ project.slug }}" 
                                                data-name="{{ project.name }}"
                                                title="{{ t('projects.share_survey','Share Survey') }}">
                                            <i class="fas fa-share-alt"></i>
                                        </button>
                                    {% endif %}
                                    <a href="{{ url_for('project.results', project_id=project.id) }}" class="btn btn-outline-info" title="{{ t('projects.results','Results') }}">
                                        <i class="fas fa-chart-bar"></i>
                                    </a>
                                    <a href="{{ url_for('project.edit', project_id=project.id) }}" class="btn btn-outline-primary" title="{{ t('common.edit','Edit') }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ url_for('project.delete', project_id=project.id) }}" class="btn btn-outline-danger btn-delete" data-name="{{ project.name }}" title="{{ t('common.delete','Delete') }}">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-project-diagram fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">{{ t('projects.no_projects','No projects found') }}</h5>
                <p class="text-muted">{{ t('projects.create_first','Get started by creating your first project.') }}</p>
                <a href="{{ url_for('project.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>{{ t('projects.add_first','Add First Project') }}
                </a>
            </div>
        {% endif %}
    </div>
</div>

<!-- Share Project Modal -->
<div class="modal fade" id="shareModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-share-alt me-2"></i>{{ t('projects.share_survey','Share Survey') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <h4 id="projectName"></h4>
                    <p class="text-muted">{{ t('projects.share_hint','Share this link with participants to access the survey') }}</p>
                </div>
                
                <div class="row">
                    <!-- QR Code -->
                    <div class="col-md-6">
                        <div class="card bg-light h-100">
                            <div class="card-body text-center">
                                <h6 class="card-title">
                                    <i class="fas fa-qrcode me-2"></i>{{ t('projects.qr_code','QR Code') }}
                                </h6>
                                <div id="qrCode" class="mb-3"></div>
                                <small class="text-muted">{{ t('projects.scan_mobile','Scan with mobile device') }}</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- URL -->
                    <div class="col-md-6">
                        <div class="card bg-light h-100">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="fas fa-link me-2"></i>{{ t('projects.survey_url','Survey URL') }}
                                </h6>
                                <div class="mb-3">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="surveyUrl" readonly>
                                        <button class="btn btn-outline-primary" type="button" id="copyUrlBtn" title="{{ t('projects.copy_url','Copy URL') }}">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="d-grid gap-2">
                                    <button class="btn btn-success" id="openSurveyBtn" target="_blank">
                                        <i class="fas fa-external-link-alt me-2"></i>{{ t('projects.open_survey','Open Survey') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Share Options -->
                <div class="mt-4">
                    <h6>{{ t('projects.share_via','Share via:') }}</h6>
                    <div class="d-flex gap-2 flex-wrap">
                        <button class="btn btn-primary btn-sm" id="shareEmail">
                            <i class="fab fa-envelope me-1"></i>{{ t('projects.email','Email') }}
                        </button>
                        <button class="btn btn-info btn-sm" id="shareWhatsApp">
                            <i class="fab fa-whatsapp me-1"></i>{{ t('projects.whatsapp','WhatsApp') }}
                        </button>
                        
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('common.close','Close') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const shareModal = new bootstrap.Modal(document.getElementById('shareModal'));
    let currentSurveyUrl = '';
    let currentProjectName = '';
    
    // Handle share button clicks
    document.querySelectorAll('.share-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const slug = this.dataset.slug;
            const projectName = this.dataset.name;
            
            // Build URLs
            const baseUrl = window.location.origin;
            const fullUrl = `${baseUrl}/survey/${slug}`;
            
            currentSurveyUrl = fullUrl;
            currentProjectName = projectName;
            
            // Update modal content
            document.getElementById('projectName').textContent = projectName;
            document.getElementById('surveyUrl').value = fullUrl;
            
            
            // Clear previous QR code
            document.getElementById('qrCode').innerHTML = '';
            
            // Generate QR Code using QRCode.js library
            const qrCode = new QRCode(document.getElementById('qrCode'), {
                text: fullUrl,
                width: 200,
                height: 200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.M
            });
            
            // Update open survey button
            document.getElementById('openSurveyBtn').onclick = function() {
                window.open(fullUrl, '_blank');
            };
            
            // Show modal
            shareModal.show();
        });
    });
    
    // Copy URL functionality
    document.getElementById('copyUrlBtn').addEventListener('click', function() {
        const urlInput = document.getElementById('surveyUrl');
        urlInput.select();
        urlInput.setSelectionRange(0, 99999); // For mobile devices
        navigator.clipboard.writeText(urlInput.value).then(function() {
            showNotification('success', '{{ t('projects.url_copied','URL copied to clipboard!') }}');
        });
    });
    
    
    
    // Share via Email
    document.getElementById('shareEmail').addEventListener('click', function() {
        const subject = encodeURIComponent("{{ t('projects.share_email_subject','Survey:') }} " + currentProjectName);
        const body = encodeURIComponent("{{ t('projects.share_email_body','Hi! Please take this survey:') }} " + currentSurveyUrl);
        window.open(`mailto:?subject=${subject}&body=${body}`);
    });
    
    // Share via WhatsApp
    document.getElementById('shareWhatsApp').addEventListener('click', function() {
        const text = encodeURIComponent("{{ t('projects.share_whatsapp_text','Hi! Please take this survey:') }} " + currentProjectName + " - " + currentSurveyUrl);
        window.open(`https://wa.me/?text=${text}`);
    });
    
    
});
</script>

<!-- QRCode.js Library (supports `new QRCode(...)`) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
{% endblock %}