{% extends 'dashboard/base.html' %}

{% block title %}Lead Details - Orbia CMS{% endblock %}

{% block content %}
<div class="container-fluid p-0">

    <!-- Header Actions -->
    <div class="mb-5">
        <a href="{% url 'dashboard_lead_list' %}" class="text-decoration-none text-muted fw-semibold d-inline-flex align-items-center gap-2" style="font-size: 13.5px; transition: color 0.2s ease;">
            <i class="fa-solid fa-arrow-left" style="font-size: 11px;"></i> Back to Inquiry Leads
        </a>
        <h4 class="mt-3 mb-1" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--heading-color);">Inquiry Details</h4>
        <p class="text-muted mb-0" style="font-size: 13.5px;">Review customer submission message and contact details</p>
    </div>

    <div class="row g-4">
        <div class="col-12 col-lg-8">
            <!-- Details Card -->
            <div class="card-custom mb-4">
                <div class="d-flex align-items-center justify-content-between border-bottom pb-3 mb-4" style="border-color: var(--border-color) !important;">
                    <div>
                        <h5 class="mb-1 text-dark" style="font-family: 'Outfit', sans-serif; font-weight: 700;">{{ lead.subject }}</h5>
                        <p class="text-muted mb-0" style="font-size: 12.5px;"><i class="fa-regular fa-clock me-1"></i> Received on {{ lead.created_at|date:"F d, Y \a\t H:i" }}</p>
                    </div>
                </div>

                <!-- Message Body -->
                <div class="mb-5">
                    <h6 class="fw-semibold text-muted mb-3" style="font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px;">Message Content:</h6>
                    <div class="p-4 rounded-3 text-dark" style="white-space: pre-line; line-height: 1.7; font-size: 15px; background: #f8fafc; border: 1px solid var(--border-color);">
                        {{ lead.message }}
                    </div>
                </div>

                <!-- Action Controls -->
                <div class="d-flex align-items-center justify-content-between pt-3 border-top" style="border-color: var(--border-color) !important;">
                    <!-- Delete -->
                    <a href="{% url 'dashboard_lead_delete' lead.pk %}" class="btn btn-outline-danger fw-semibold px-4" style="border-radius: 10px; border-color: rgba(239, 68, 68, 0.3);" onclick="return confirm('Are you sure you want to delete this lead?');">
                        <i class="fa-solid fa-trash-can me-2" style="font-size: 13px;"></i> Delete Inquiry
                    </a>
                    <!-- Reply -->
                    <a href="mailto:{{ lead.email }}?subject=Re: {{ lead.subject|urlencode }}" class="btn btn-primary fw-semibold px-4 py-2.5 d-flex align-items-center gap-2" style="border-radius: 10px;">
                        <i class="fa-solid fa-reply" style="font-size: 14px;"></i> Reply by Email
                    </a>
                </div>
            </div>
        </div>

        <!-- Sender Sidebar Details -->
        <div class="col-12 col-lg-4">
            <div class="card-custom">
                <h5 class="mb-4 pb-2" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--heading-color); border-bottom: 1px solid var(--border-color);">Sender Profile</h5>
                
                <div class="mb-4">
                    <span class="text-muted d-block mb-1.5" style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Full Name:</span>
                    <h6 class="text-dark fw-bold mb-0" style="font-size: 16px;">{{ lead.name }}</h6>
                </div>

                <div class="mb-4">
                    <span class="text-muted d-block mb-1.5" style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Email Address:</span>
                    <a href="mailto:{{ lead.email }}" class="text-primary fw-bold text-decoration-none" style="font-size: 15px;">{{ lead.email }}</a>
                </div>

                <div class="mb-4">
                    <span class="text-muted d-block mb-1.5" style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Phone Number:</span>
                    <a href="tel:{{ lead.phone }}" class="text-dark fw-bold text-decoration-none" style="font-size: 15px;">{{ lead.phone }}</a>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}