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

{% block title %}Help Center Contacts - Admin{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/admin_help_center_contacts.css">
{% endblock %}
{% block content %}
<nav class="top-nav">
        <div class="nav-brand">Admin</div>
        <div class="nav-links">
            <a href="/admin">Back to Admin</a>
            <a href="/help-center">View Help Center</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 %}

        <div class="card">
            <h1>Help Center / Customer Care Contacts</h1>
            <p class="subtitle">Server admin changes are saved in DB and apply to all users immediately.</p>

            <form method="POST" action="{{ url_for('admin.help_center_contacts') }}">
                <div class="section-title">Customer Care</div>
                <div class="grid">
                    <div>
                        <label>Customer Care Phone (WhatsApp)</label>
                        <input type="text" name="customer_care_phone" value="{{ customer_care_phone or '' }}" placeholder="e.g. +2547..." />
                    </div>
                    <div>
                        <label>Customer Care Phone Alt</label>
                        <input type="text" name="customer_care_phone_alt" value="{{ customer_care_phone_alt or '' }}" placeholder="e.g. +2547..." />
                    </div>
                    <div>
                        <label>Customer Care Email</label>
                        <input type="email" name="customer_care_email" value="{{ customer_care_email or '' }}" placeholder="support@domain.com" />
                    </div>
                    <div>
                        <label>AI Help Bot Label (optional)</label>
                        <input type="text" name="ai_help_bot_label" value="{{ ai_help_bot_label or 'Open AI Help' }}" />
                        <div class="help-text">Only changes the button label. The actual link stays `/ai-help`.</div>
                    </div>
                </div>

                <div class="section-title">Help Center Owner (urgent server-owner contact)</div>
                <div class="grid">
                    <div>
                        <label>Owner Phone (WhatsApp)</label>
                        <input type="text" name="help_center_owner_phone" value="{{ help_center_owner_phone or '' }}" placeholder="e.g. +2547..." />
                    </div>
                    <div>
                        <label>Owner Phone Alt</label>
                        <input type="text" name="help_center_owner_phone_alt" value="{{ help_center_owner_phone_alt or '' }}" placeholder="e.g. +2547..." />
                    </div>
                    <div>
                        <label>Owner Email</label>
                        <input type="email" name="help_center_owner_email" value="{{ help_center_owner_email or '' }}" placeholder="owner@domain.com" />
                    </div>
                    <div>
                        <label>Owner Section Label (optional)</label>
                        <input type="text" name="help_center_owner_label" value="{{ help_center_owner_label or 'Reach the server owner directly for urgent issues.' }}" />
                    </div>
                </div>

                <div class="btn-row">
                    <button type="submit" class="btn btn-primary">Save Contacts</button>
                    <a class="btn btn-ghost" href="/help-center">Cancel</a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}