{% extends 'theme/dashborad_base.html' %}

{% block dashboard_content %}
<div class="max-w-4xl">
    <a href="{% url 'dashboard:my_orders' %}" class="inline-flex items-center gap-2 text-secondary hover:text-primary font-poppins mb-6 transition">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
        </svg>
        Back to My Orders
    </a>

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <h1 class="text-2xl lg:text-3xl font-semibold font-poppins text-primary-dark">Enquiry #{{ enquiry.id }}</h1>
        <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium font-poppins w-fit
            {% if enquiry.status == 'pending' %}bg-yellow-100 text-yellow-800
            {% elif enquiry.status == 'processing' %}bg-blue-100 text-blue-800
            {% elif enquiry.status == 'quoted' %}bg-purple-100 text-purple-800
            {% elif enquiry.status == 'approved' %}bg-green-100 text-green-800
            {% elif enquiry.status == 'rejected' %}bg-red-100 text-red-800
            {% elif enquiry.status == 'completed' %}bg-gray-100 text-gray-800
            {% endif %}">
            {{ enquiry.get_status_display }}
        </span>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div>
                    <label class="block text-sm font-medium font-poppins text-secondary mb-1">Submitted On</label>
                    <p class="text-primary-dark font-poppins">{{ enquiry.created_at|date:"F d, Y \a\t H:i" }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium font-poppins text-secondary mb-1">Last Updated</label>
                    <p class="text-primary-dark font-poppins">{{ enquiry.updated_at|date:"F d, Y \a\t H:i"  }}</p>
                </div>
            </div>

            <div class="mb-8">
                <label class="block text-sm font-medium font-poppins text-secondary mb-2">Uploaded Excel File</label>
                <a href="{{ enquiry.excel_file.url }}" 
                   download
                   class="inline-flex items-center gap-3 px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <div>
                        <p class="text-primary-dark font-medium font-poppins text-sm">{{ enquiry.excel_file.name|slice:"20:" }}</p>
                        <p class="text-secondary font-poppins text-xs">Click to download</p>
                    </div>
                </a>
            </div>

            {% if enquiry.notes %}
            <div class="mb-8">
                <label class="block text-sm font-medium font-poppins text-secondary mb-2">Your Notes</label>
                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                    <p class="text-primary-dark font-poppins text-sm whitespace-pre-wrap">{{ enquiry.notes }}</p>
                </div>
            </div>
            {% endif %}

            {% if enquiry.staff_remarks %}
            <div class="mb-8">
                <label class="block text-sm font-medium font-poppins text-secondary mb-2">Staff Remarks</label>
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <p class="text-blue-800 font-poppins text-sm whitespace-pre-wrap">{{ enquiry.staff_remarks }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}