{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Help Center{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/help_center.css">
{% endblock %}
{% block content %}
<div class="hil-page-tools">
    {{ ui.button('Admin Dashboard', '/admin', 'secondary') }}
    {{ ui.button('Help Center', '/help-center', 'secondary') }}
</div>

<nav class="top-nav">
    <div class="nav-brand">Help Center</div>
    <div class="nav-links">
        <a href="/admin">Back to Admin</a>
        <a href="/logout" class="hil-inline-2056554381">Logout</a>
    </div>
</nav>

<div class="main-wrapper">

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="flash-messages">
                {% for category, message in messages %}
                    <div class="flash {{ category }}">{{ message }}</div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    {% if support_guidance %}
    <div class="card hil-inline-4a8eaa4ad7">
        <h2>AI Support Guidance</h2>
        <p class="hil-inline-da09ad2035">
            The user support agent saved your report and prepared these next steps.
        </p>
        <ul class="hil-inline-b3afd34337">
            {% for item in support_guidance %}
                <li>{{ item }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <!-- Report Issue -->
    <div class="card">
        <h2>&#128221; Report an Issue</h2>
        <p class="hil-inline-d34af5cc48">
            Describe the problem you are experiencing. We will review it as soon as possible.
        </p>
        <form method="POST" action="/help-center" class="hil-inline-1b0f4999d2">
            <div class="form-group">
                <label>Issue Type</label>
                <select name="issue_type" required>
                    <option value="">Select type...</option>
                    <option value="bug">Bug / Something is broken</option>
                    <option value="feature">Feature request</option>
                    <option value="payment">Payment problem</option>
                    <option value="login">Login / Account issue</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div class="form-group">
                <label>Description</label>
                <textarea name="description" rows="4" placeholder="Please describe the issue in detail..." required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit Report</button>
        </form>
    </div>

    <!-- Contact for More Information -->
    <div class="card">
        <h2>&#128172; Contact for More Information</h2>
        <p class="hil-inline-d34af5cc48">
            Reach the server owner directly for urgent issues. All contacts are listed below.
        </p>
        <div class="contact-grid">
            <div class="contact-item">
                <div class="icon">&#128241;</div>
                <div class="label">Phone / WhatsApp</div>
                <div class="value">{{ help_center_owner_phone or '' }}</div>
            </div>
            <div class="contact-item">
                <div class="icon">&#128241;</div>
                <div class="label">Phone / WhatsApp (Alt)</div>
                <div class="value">{{ help_center_owner_phone_alt or '' }}</div>
            </div>
            <div class="contact-item">
                <div class="icon">&#9993;</div>
                <div class="label">Email</div>
                <div class="value">
                    {% if help_center_owner_email %}
                        <a href="mailto:{{ help_center_owner_email }}" class="hil-inline-7447fa5a9a">{{ help_center_owner_email }}</a>
                    {% endif %}
                </div>
            </div>
            <div class="contact-item">
                <div class="icon">&#128222;</div>
                <div class="label">Customer Care</div>
                <div class="value">{{ customer_care_available_text or 'Available 24/7' }}</div>
            </div>

        </div>
    </div>

    <!-- Customer Care -->
    <div class="card">
        <h2>&#128222; Customer Care</h2>
        <p class="hil-inline-d34af5cc48">
            Reach our customer care team directly for urgent issues.
        </p>
        <div class="contact-grid hil-inline-1b0f4999d2">
            <div class="contact-item">
                <div class="icon">&#128241;</div>
                <div class="label">Phone / WhatsApp</div>
                <div class="value">{{ customer_care_phone or '' }}</div>
            </div>
            <div class="contact-item">
                <div class="icon">&#128241;</div>
                <div class="label">Phone / WhatsApp (Alt)</div>
                <div class="value">{{ customer_care_phone_alt or '' }}</div>
            </div>
            <div class="contact-item">
                <div class="icon">&#9993;</div>
                <div class="label">Email</div>
                <div class="value">
                    {% if customer_care_email %}
                        <a href="mailto:{{ customer_care_email }}" class="hil-inline-7447fa5a9a">{{ customer_care_email }}</a>
                    {% endif %}
                </div>
            </div>
            <div class="contact-item">
                <div class="icon">&#128172;</div>
                <div class="label">AI Help Bot</div>
                <div class="value">
                    <a href="/ai-help" class="hil-inline-7447fa5a9a">{{ ai_help_bot_label or 'Open AI Help' }}</a>
                </div>
            </div>
        </div>
    </div>


</div>
{% endblock %}