{% extends 'admin/layout.html.twig' %}
{% block title %}Contact Submission - {{ submission.name }} - KitscoApp{% endblock %}
{% block page_title %}Contact Submission{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ path('admin_contact_submission_index') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
        <i class="bi bi-arrow-left"></i> Back to submissions
    </a>
</div>

<div class="grid lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-gray-800">Message</h2>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ submission.isRead ? 'bg-gray-100 text-gray-600' : 'bg-blue-100 text-blue-800' }}">
                    {{ submission.isRead ? 'Read' : 'Unread' }}
                </span>
            </div>
            <div class="p-6">
                <div class="prose prose-sm max-w-none text-gray-700 whitespace-pre-wrap">{{ submission.message }}</div>
            </div>
        </div>
    </div>

    <div class="space-y-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h2 class="text-lg font-semibold text-gray-800">Contact Details</h2>
            </div>
            <div class="p-6 space-y-4">
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Name</p>
                    <p class="text-gray-800 font-medium">{{ submission.name }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Email</p>
                    <p>
                        <a href="mailto:{{ submission.email }}" class="text-kitsco-accent hover:underline">{{ submission.email }}</a>
                    </p>
                </div>
                {% if submission.phone %}
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Phone</p>
                    <p>
                        <a href="tel:{{ submission.phone }}" class="text-kitsco-accent hover:underline">{{ submission.phone }}</a>
                    </p>
                </div>
                {% endif %}
                {% if submission.organization %}
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Organization</p>
                    <p class="text-gray-800">{{ submission.organization }}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h2 class="text-lg font-semibold text-gray-800">Submission Info</h2>
            </div>
            <div class="p-6 space-y-4">
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Submitted</p>
                    <p class="text-gray-800">{{ submission.createdAt|date('F j, Y \\a\\t g:i A') }}</p>
                </div>
                {% if submission.ipAddress %}
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">IP Address</p>
                    <p class="text-gray-600 text-sm font-mono">{{ submission.ipAddress }}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="flex gap-3">
            <a href="mailto:{{ submission.email }}?subject=Re: Your inquiry to KitsCo" class="flex-1 inline-flex items-center justify-center gap-2 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2.5 px-4 rounded-lg transition-colors text-sm">
                <i class="bi bi-reply"></i> Reply
            </a>
            <form method="post" action="{{ path('admin_contact_submission_delete', {id: submission.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ submission.id) }}">
                <button type="button"
                        onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Delete Submission', 'Are you sure you want to delete this submission?', 'Delete', 'danger')"
                        class="inline-flex items-center justify-center gap-2 border border-red-300 text-red-600 hover:bg-red-50 font-medium py-2.5 px-4 rounded-lg transition-colors text-sm">
                    <i class="bi bi-trash"></i> Delete
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}