{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container-fluid p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold" style="color: #0e2e63;">
                <i class="fas fa-envelope me-2"></i>Message Details
            </h3>
            <p class="text-muted small">View and reply to contact message</p>
        </div>
        <a href="{% url 'contact_messages' %}" class="btn btn-light">
            <i class="fas fa-arrow-left me-1"></i> Back to Messages
        </a>
    </div>

    <div class="row">
        <!-- Message Info -->
        <div class="col-md-7">
            <div class="card shadow-sm border-0" style="border-radius: 12px;">
                <div class="card-header bg-white border-0" style="border-radius: 12px 12px 0 0;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="fw-bold" style="color: #0e2e63;">
                            <i class="fas fa-user me-2"></i>{{ message.name }}
                        </h5>
                        <span class="badge {% if message.status == 'unread' %}bg-danger{% elif message.status == 'read' %}bg-primary{% else %}bg-success{% endif %}">
                            {{ message.get_status_display }}
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="text-muted small fw-bold">Email</label>
                            <p><a href="mailto:{{ message.email }}" class="text-decoration-none">{{ message.email }}</a></p>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted small fw-bold">Phone</label>
                            <p>{{ message.phone|default:"Not provided" }}</p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-12">
                            <label class="text-muted small fw-bold">Subject</label>
                            <p><strong>{{ message.subject }}</strong></p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-12">
                            <label class="text-muted small fw-bold">Message</label>
                            <div class="p-3 bg-light rounded" style="border-radius: 8px; white-space: pre-wrap;">
                                {{ message.message }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="text-muted small fw-bold">Received</label>
                            <p>{{ message.created_at|date:"F d, Y H:i" }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted small fw-bold">IP Address</label>
                            <p>{{ message.ip_address|default:"Not recorded" }}</p>
                        </div>
                    </div>

                    {% if message.reply_message %}
                    <div class="mt-4">
                        <label class="text-muted small fw-bold">Reply Sent</label>
                        <div class="p-3 bg-success bg-opacity-10 rounded" style="border-radius: 8px; border-left: 4px solid #198754;">
                            <p class="mb-0">{{ message.reply_message }}</p>
                            <small class="text-muted">Sent on {{ message.replied_at|date:"F d, Y H:i" }}</small>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Reply Form -->
        <div class="col-md-5">
            <div class="card shadow-sm border-0" style="border-radius: 12px;">
                <div class="card-header bg-white border-0" style="border-radius: 12px 12px 0 0;">
                    <h5 class="fw-bold" style="color: #0e2e63;">
                        <i class="fas fa-reply me-2"></i>Reply to {{ message.name }}
                    </h5>
                </div>
                <div class="card-body">
                    {% if message.status == 'replied' %}
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i> Reply already sent.
                    </div>
                    {% endif %}
                    <form method="post" action="{% url 'contact_reply' message.id %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Your Reply *</label>
                            <textarea name="reply_message" class="form-control" rows="8" style="border-radius: 8px; padding: 10px;" required>Dear {{ message.name }},

</textarea>
                        </div>
                        <button type="submit" class="btn w-100" style="background: #0e2e63; color: #fff; padding: 10px; border-radius: 8px;">
                            <i class="fas fa-paper-plane me-2"></i> Send Reply
                        </button>
                    </form>
                </div>
            </div>

            <!-- Delete -->
            <div class="card shadow-sm border-0 mt-3" style="border-radius: 12px;">
                <div class="card-body">
                    <form method="post" action="{% url 'contact_delete' message.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger w-100" onclick="return confirm('Are you sure you want to delete this message?')">
                            <i class="fas fa-trash me-2"></i> Delete Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}