{% extends "base.html" %}

{% block title %}Feedback & Support - Orchid Continuum{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">
                        <i data-feather="message-circle" class="me-2"></i>
                        Share Your Feedback
                    </h3>
                    <p class="text-muted mb-0 mt-2">
                        Help us improve the Orchid Continuum by sharing your thoughts, reporting bugs, or suggesting new features.
                    </p>
                </div>
                
                <div class="card-body">
                    <!-- Flash messages -->
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                    
                    <form method="POST" action="{{ url_for('feedback') }}">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Your Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="feedback_type" class="form-label">Type of Feedback <span class="text-danger">*</span></label>
                            <select class="form-select" id="feedback_type" name="feedback_type" required>
                                <option value="">Please select...</option>
                                <option value="bug_report">🐛 Bug Report</option>
                                <option value="feature_request">💡 Feature Request</option>
                                <option value="general_feedback">💬 General Feedback</option>
                                <option value="content_improvement">📖 Content Improvement</option>
                                <option value="ui_ux_feedback">🎨 User Interface Feedback</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="subject" class="form-label">Subject <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="subject" name="subject" 
                                   placeholder="Brief description of your feedback" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="message" class="form-label">Message <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="message" name="message" rows="6" 
                                      placeholder="Please provide detailed information about your feedback..." required></textarea>
                            <div class="form-text">
                                For bug reports, please include steps to reproduce the issue and your browser information.
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="privacy_consent" required>
                                <label class="form-check-label" for="privacy_consent">
                                    I understand that my feedback will be reviewed by the Orchid Continuum team and may be used to improve the platform.
                                </label>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
                                <i data-feather="arrow-left" class="me-1"></i>
                                Back to Home
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i data-feather="send" class="me-2"></i>
                                Submit Feedback
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Helpful Tips -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="help-circle" class="me-2"></i>
                        Feedback Guidelines
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>🐛 Bug Reports</h6>
                            <ul class="small">
                                <li>Describe what you expected vs what happened</li>
                                <li>Include steps to reproduce the issue</li>
                                <li>Mention your browser and device type</li>
                                <li>Add screenshots if helpful</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6>💡 Feature Requests</h6>
                            <ul class="small">
                                <li>Explain the problem you're trying to solve</li>
                                <li>Describe your proposed solution</li>
                                <li>Consider how it would benefit other users</li>
                                <li>Suggest alternatives if applicable</li>
                            </ul>
                        </div>
                    </div>
                    <div class="mt-3">
                        <h6>💬 General Guidelines</h6>
                        <ul class="small">
                            <li>Be specific and detailed in your descriptions</li>
                            <li>One topic per feedback submission</li>
                            <li>Check if your issue has been reported before</li>
                            <li>Be respectful and constructive</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.floating-feedback-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.floating-feedback-btn .btn {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.floating-feedback-btn .btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0,123,255,0.3);
}

@media (max-width: 768px) {
    .floating-feedback-btn {
        bottom: 20px;
        right: 20px;
    }
    
    .floating-feedback-btn .btn {
        width: 50px;
        height: 50px;
    }
}
</style>

<script>
// Auto-populate subject based on feedback type
document.getElementById('feedback_type').addEventListener('change', function() {
    const subjectField = document.getElementById('subject');
    const messageField = document.getElementById('message');
    const type = this.value;
    
    if (type && !subjectField.value) {
        const templates = {
            'bug_report': {
                subject: 'Bug: ',
                message: 'Steps to reproduce:\n1. \n2. \n3. \n\nExpected result:\n\nActual result:\n\nBrowser/Device:'
            },
            'feature_request': {
                subject: 'Feature Request: ',
                message: 'Problem to solve:\n\nProposed solution:\n\nBenefit to users:\n\nAlternatives considered:'
            },
            'general_feedback': {
                subject: 'Feedback: ',
                message: ''
            },
            'content_improvement': {
                subject: 'Content Improvement: ',
                message: 'Page/Section:\n\nCurrent issue:\n\nSuggested improvement:'
            },
            'ui_ux_feedback': {
                subject: 'UI/UX Feedback: ',
                message: 'Interface element:\n\nCurrent experience:\n\nSuggested improvement:'
            }
        };
        
        if (templates[type]) {
            subjectField.value = templates[type].subject;
            if (templates[type].message && !messageField.value) {
                messageField.value = templates[type].message;
            }
        }
    }
});

// Character count for message field
const messageField = document.getElementById('message');
const charCount = document.createElement('div');
charCount.className = 'form-text text-end';
charCount.style.fontSize = '0.875rem';
messageField.parentNode.appendChild(charCount);

function updateCharCount() {
    const length = messageField.value.length;
    charCount.textContent = `${length} characters`;
    charCount.className = `form-text text-end ${length > 500 ? 'text-success' : 'text-muted'}`;
}

messageField.addEventListener('input', updateCharCount);
updateCharCount();
</script>
{% endblock %}