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

{% block title %}{{ 'admin.contact_requests'|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-paper me-3"></i>
                            {{ 'admin.contact_requests'|trans }}
                        </h2>
                        <p class="text-muted mb-0">{{ 'admin.contact_requests_lead'|trans }}</p>
                        <p class="text-muted small mb-0 mt-2">{{ render_twig_from_string('admin.manage_contact_requests_description'|trans, _context) }}</p>
                    </div>
                    <a href="{{ path('app_admin_modules') }}" class="btn btn-outline-secondary btn-lg">
                        <i class="bi bi-arrow-left me-2"></i>
                        {{ 'admin.page.back'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="admin-card p-4">
                <form method="get" class="row g-3 align-items-end">
                    <div class="col-12 col-md-8 col-lg-9">
                        <label class="form-label small text-muted mb-1" for="contact-search-input">{{ 'admin.search'|trans }}</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted"></i></span>
                            <input type="search" id="contact-search-input" name="search" class="form-control border-start-0 ps-0"
                                   placeholder="{{ 'admin.search_contact_placeholder'|trans }}" value="{{ search|e('html_attr') }}" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-12 col-md-4 col-lg-3 d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-funnel me-2"></i>
                            {{ 'admin.search'|trans }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="admin-card overflow-hidden">
                {% if requests is empty %}
                    <div class="text-center py-5 px-4">
                        <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-3" style="width: 4rem; height: 4rem;">
                            <i class="bi bi-inbox fs-2 text-muted"></i>
                        </div>
                        <h5 class="fw-semibold mb-2">{{ search ? 'admin.contact_requests_no_match'|trans : 'admin.contact_requests_empty'|trans }}</h5>
                        <p class="text-muted small mb-0">{{ 'admin.contact_requests_empty_hint'|trans }}</p>
                    </div>
                {% else %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0 contact-requests-table" id="contactRequestsTable">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" class="ps-4">{{ 'admin.name'|trans }}</th>
                                    <th scope="col">{{ 'admin.email'|trans }}</th>
                                    <th scope="col" class="d-none d-lg-table-cell">{{ 'admin.createdAt'|trans }}</th>
                                    <th scope="col">{{ 'admin.status'|trans }}</th>
                                    <th scope="col" class="d-none d-md-table-cell">{{ 'admin.source'|trans }}</th>
                                    <th scope="col" class="text-end pe-4" style="min-width: 11rem;">{{ 'admin.actions'|trans }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for request in requests %}
                                <tr class="contact-request-row">
                                    <td class="ps-4">
                                        <span class="fw-semibold text-body">{{ request.name }}</span>
                                        <div class="d-lg-none small text-muted mt-1">{{ request.createdAt|date('d.m.Y H:i') }}</div>
                                    </td>
                                    <td>
                                        <a href="mailto:{{ request.email|e('html_attr') }}" class="text-decoration-none">{{ request.email }}</a>
                                    </td>
                                    <td class="d-none d-lg-table-cell text-muted small">{{ request.createdAt|date('d.m.Y H:i') }}</td>
                                    <td>
                                        {% 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 %}
                                    </td>
                                    <td class="d-none d-md-table-cell">
                                        <span class="text-muted small text-truncate d-inline-block" style="max-width: 12rem;" title="{{ request.source|e('html_attr') }}">{{ request.source }}</span>
                                    </td>
                                    <td class="text-end pe-4">
                                        <div class="d-inline-flex flex-wrap gap-1 justify-content-end" role="group" aria-label="{{ 'admin.actions'|trans }}">
                                            <a href="{{ path('admin_contact_view', { id: request.id }) }}"
                                               class="btn btn-sm btn-outline-primary"
                                               title="{{ 'admin.view'|trans }}">
                                                <i class="bi bi-eye" aria-hidden="true"></i>
                                            </a>
                                            {% if request.answeredAt is empty %}
                                                <a href="{{ path('admin_contact_answer', { id: request.id }) }}"
                                                   class="btn btn-sm btn-outline-success"
                                                   title="{{ 'admin.contact_request.mark_answered'|trans }}">
                                                    <i class="bi bi-check-lg" aria-hidden="true"></i>
                                                </a>
                                            {% endif %}
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-secondary js-copy-contact-id"
                                                    data-copy="{{ request.id }}"
                                                    title="{{ 'admin.copy_id'|trans }}">
                                                <i class="bi bi-clipboard" aria-hidden="true"></i>
                                            </button>
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-danger js-delete-contact"
                                                    data-delete-url="{{ path('admin_contact_delete', { id: request.id }) }}"
                                                    data-contact-name="{{ request.name|e('html_attr') }}"
                                                    title="{{ 'admin.delete'|trans }}">
                                                <i class="bi bi-trash" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% if requests is not empty and totalPages is defined and totalPages > 0 %}
        <div class="row mt-3">
            <div class="col-12">
                <div class="px-2">
                    {% include 'administration/pagination.html.twig' with {
                        paginationPath: 'app_admin_module_contact',
                        totalPages: totalPages,
                        currentPage: currentPage,
                        search: search
                    } %}
                </div>
            </div>
        </div>
    {% endif %}
</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 idCopiedTitle = {{ 'admin.contact_request.id_copied_title'|trans|json_encode|raw }};
    var idCopiedMessage = {{ 'admin.contact_request.id_copied_message'|trans|json_encode|raw }};
    var idCopyErrTitle = {{ 'admin.contact_request.id_copy_error_title'|trans|json_encode|raw }};
    var idCopyErrMessage = {{ 'admin.contact_request.id_copy_error_message'|trans|json_encode|raw }};

    async function handleDeleteContact(url, contactName) {
        var msg = deleteConfirmTpl.split('__NAME__').join(contactName || '');
        var confirmed = typeof showDeleteConfirm === 'function'
            ? await showDeleteConfirm(null, { message: msg, warning: deleteWarning })
            : window.confirm(msg);
        if (confirmed) {
            window.location.href = url;
        }
    }

    function copyToClipboard(text) {
        if (!navigator.clipboard) {
            if (window.adminNotifications) {
                window.adminNotifications.error(idCopyErrTitle, idCopyErrMessage);
            }
            return;
        }
        navigator.clipboard.writeText(String(text)).then(function () {
            if (window.adminNotifications) {
                window.adminNotifications.success(idCopiedTitle, idCopiedMessage);
            }
        }).catch(function () {
            if (window.adminNotifications) {
                window.adminNotifications.error(idCopyErrTitle, idCopyErrMessage);
            }
        });
    }

    document.querySelectorAll('.js-copy-contact-id').forEach(function (btn) {
        btn.addEventListener('click', function () {
            copyToClipboard(btn.getAttribute('data-copy'));
        });
    });

    document.querySelectorAll('.js-delete-contact').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var url = btn.getAttribute('data-delete-url');
            var name = btn.getAttribute('data-contact-name') || '';
            handleDeleteContact(url, name);
        });
    });
})();
</script>
{% endblock %}