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

{% block title %}{{ 'admin.view_contact_request'|trans }}{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="admin-card p-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                    <div>
                        <h2 class="gradient-text fw-bold mb-2">
                            <i class="bi bi-envelope-open me-3"></i>
                            {{ 'admin.view_contact_request'|trans }}
                        </h2>
                        <p class="text-muted mb-0">{{ request.name }}</p>
                        <div class="mt-2">
                            {% if request.answeredAt %}
                                <span class="badge rounded-pill text-bg-success-subtle text-success-emphasis border border-success-subtle">{{ 'admin.contact_request_done'|trans }}</span>
                            {% else %}
                                <span class="badge rounded-pill text-bg-warning-subtle text-warning-emphasis border border-warning-subtle">{{ 'admin.contact_request_open'|trans }}</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ path('app_admin_module_contact') }}" class="btn btn-outline-secondary btn-lg">
                            <i class="bi bi-arrow-left me-2"></i>
                            {{ 'admin.contact_request.back_to_list'|trans }}
                        </a>
                        <a href="mailto:{{ request.email|e('html_attr') }}?subject={{ ('Re: ' ~ request.name)|url_encode }}"
                           class="btn btn-outline-primary btn-lg">
                            <i class="bi bi-envelope me-2"></i>
                            {{ 'admin.contact_request.mailto'|trans }}
                        </a>
                        {% if request.answeredAt is empty %}
                            <a href="{{ path('admin_contact_answer', { id: request.id }) }}" class="btn btn-success btn-lg">
                                <i class="bi bi-check-lg me-2"></i>
                                {{ 'admin.contact_request.mark_answered'|trans }}
                            </a>
                        {% endif %}
                        <button type="button"
                                class="btn btn-outline-danger btn-lg js-delete-contact-detail"
                                data-delete-url="{{ path('admin_contact_delete', { id: request.id }) }}"
                                data-contact-name="{{ request.name|e('html_attr') }}">
                            <i class="bi bi-trash me-2"></i>
                            {{ 'admin.delete'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-12 col-lg-4">
            <div class="admin-card p-4 h-100">
                <h4 class="gradient-text fw-bold mb-3">
                    <i class="bi bi-person-vcard me-2"></i>
                    {{ 'admin.details'|trans }}
                </h4>
                <dl class="row mb-0 small">
                    <dt class="col-sm-4 text-muted">{{ 'admin.name'|trans }}</dt>
                    <dd class="col-sm-8 fw-semibold">{{ request.name }}</dd>
                    <dt class="col-sm-4 text-muted">{{ 'admin.email'|trans }}</dt>
                    <dd class="col-sm-8"><a href="mailto:{{ request.email|e('html_attr') }}">{{ request.email }}</a></dd>
                    <dt class="col-sm-4 text-muted">{{ 'admin.createdAt'|trans }}</dt>
                    <dd class="col-sm-8 text-muted">{{ request.createdAt|date('d.m.Y H:i') }}</dd>
                    {% if request.answeredAt %}
                        <dt class="col-sm-4 text-muted">{{ 'admin.answered'|trans }}</dt>
                        <dd class="col-sm-8 text-muted">{{ request.answeredAt|date('d.m.Y H:i') }}</dd>
                    {% endif %}
                    <dt class="col-sm-4 text-muted">{{ 'admin.source'|trans }}</dt>
                    <dd class="col-sm-8 text-break">{{ request.source }}</dd>
                </dl>
            </div>
        </div>
        <div class="col-12 col-lg-8">
            <div class="admin-card p-4 h-100">
                <h4 class="gradient-text fw-bold mb-3">
                    <i class="bi bi-chat-left-text me-2"></i>
                    {{ 'admin.contact_request.message_label'|trans }}
                </h4>
                <div class="contact-request-message rounded-3 border bg-light-subtle p-4 text-body" style="white-space: pre-wrap;">{{ request.text }}</div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    var deleteConfirmTpl = {{ 'admin.contact_request.delete_confirm'|trans|json_encode|raw }};
    var deleteWarning = {{ 'admin.contact_request.delete_warning'|trans|json_encode|raw }};
    var btn = document.querySelector('.js-delete-contact-detail');
    if (!btn) return;
    btn.addEventListener('click', async function () {
        var url = btn.getAttribute('data-delete-url');
        var name = btn.getAttribute('data-contact-name') || '';
        var msg = deleteConfirmTpl.split('__NAME__').join(name);
        var confirmed = typeof showDeleteConfirm === 'function'
            ? await showDeleteConfirm(null, { message: msg, warning: deleteWarning })
            : window.confirm(msg);
        if (confirmed) {
            window.location.href = url;
        }
    });
})();
</script>
{% endblock %}