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

{% block dashboard_content %}
<div class="w-full">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6 lg:mb-8">
        <h1 class="text-xl sm:text-2xl lg:text-3xl font-semibold font-poppins text-primary-dark">My Orders</h1>
        <a href="{% url 'dashboard:order_enquiry' %}" class="inline-flex items-center justify-center gap-2 px-4 sm:px-6 py-2.5 bg-primary text-accent font-medium font-poppins rounded-lg hover:bg-primary-dark transition text-sm sm:text-base">
            <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            New Enquiry
        </a>
    </div>

    <div class="flex flex-nowrap overflow-x-auto gap-2 mb-6 pb-2 -mx-4 px-4 sm:mx-0 sm:px-0 sm:flex-wrap scrollbar-hide">
        <a href="{% url 'dashboard:my_orders' %}" 
           class="flex-shrink-0 px-3 sm:px-4 py-2 rounded-full text-xs sm:text-sm font-poppins transition {% if not current_status %}bg-primary text-accent{% else %}bg-gray-100 text-secondary hover:bg-gray-200{% endif %}">
            All
        </a>
        {% for value, label in status_choices %}
        <a href="{% url 'dashboard:my_orders' %}?status={{ value }}" 
           class="flex-shrink-0 px-3 sm:px-4 py-2 rounded-full text-xs sm:text-sm font-poppins transition whitespace-nowrap {% if current_status == value %}bg-primary text-accent{% else %}bg-gray-100 text-secondary hover:bg-gray-200{% endif %}">
            {{ label }}
        </a>
        {% endfor %}
    </div>

    {% if enquiries %}
    
    <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-4 lg:px-6 py-4 text-left text-xs font-semibold font-poppins text-secondary uppercase tracking-wider">Enquiry ID</th>
                        <th class="px-4 lg:px-6 py-4 text-left text-xs font-semibold font-poppins text-secondary uppercase tracking-wider">Date</th>
                        <th class="px-4 lg:px-6 py-4 text-left text-xs font-semibold font-poppins text-secondary uppercase tracking-wider">Status</th>
                        <th class="px-4 lg:px-6 py-4 text-left text-xs font-semibold font-poppins text-secondary uppercase tracking-wider">Last Updated</th>
                        <th class="px-4 lg:px-6 py-4 text-left text-xs font-semibold font-poppins text-secondary uppercase tracking-wider">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for enquiry in enquiries %}
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                            <span class="text-primary-dark font-semibold font-poppins">#{{ enquiry.id }}</span>
                        </td>
                        <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                            <span class="text-secondary font-poppins text-sm">{{ enquiry.created_at|date:"M d, Y" }}</span>
                        </td>
                        <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium font-poppins
                                {% 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>
                        </td>
                        <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                            <span class="text-secondary font-poppins text-sm">{{ enquiry.updated_at|date:"M d, Y H:i" }}</span>
                        </td>
                        <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                            <a href="{% url 'dashboard:order_detail' enquiry.pk %}" class="text-primary hover:text-primary-dark font-medium font-poppins text-sm transition">
                                View Details
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="md:hidden space-y-4">
        {% for enquiry in enquiries %}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
            <div class="flex items-center justify-between mb-3">
                <span class="text-primary-dark font-semibold font-poppins text-lg">#{{ enquiry.id }}</span>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium font-poppins
                    {% 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="space-y-2 mb-4">
                <div class="flex justify-between text-sm">
                    <span class="text-secondary font-poppins">Date:</span>
                    <span class="text-primary-dark font-poppins">{{ enquiry.created_at|date:"M d, Y" }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-secondary font-poppins">Last Updated:</span>
                    <span class="text-primary-dark font-poppins">{{ enquiry.updated_at|date:"M d, Y H:i" }}</span>
                </div>
            </div>
            
            <a href="{% url 'dashboard:order_detail' enquiry.pk %}" class="block w-full text-center py-2.5 bg-gray-50 text-primary hover:bg-gray-100 font-medium font-poppins text-sm rounded-lg transition">
                View Details
            </a>
        </div>
        {% endfor %}
    </div>

    {% if enquiries.has_other_pages %}
    <div class="flex justify-center items-center gap-2 mt-6 lg:mt-8">
        {% if enquiries.has_previous %}
        <a href="?page={{ enquiries.previous_page_number }}{% if current_status %}&status={{ current_status }}{% endif %}" 
           class="px-3 sm:px-4 py-2 bg-white border border-gray-300 rounded-lg text-primary-dark font-poppins text-sm hover:bg-gray-50 transition">
            Previous
        </a>
        {% endif %}
        <span class="px-3 sm:px-4 py-2 text-secondary font-poppins text-sm">Page {{ enquiries.number }} of {{ enquiries.paginator.num_pages }}</span>
        {% if enquiries.has_next %}
        <a href="?page={{ enquiries.next_page_number }}{% if current_status %}&status={{ current_status }}{% endif %}" 
           class="px-3 sm:px-4 py-2 bg-white border border-gray-300 rounded-lg text-primary-dark font-poppins text-sm hover:bg-gray-50 transition">
            Next
        </a>
        {% endif %}
    </div>
    {% endif %}

    {% else %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 sm:p-12 text-center">
        <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4 sm:mb-6">
            <svg class="w-8 h-8 sm:w-10 sm:h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
            </svg>
        </div>
        <h3 class="text-lg sm:text-xl font-semibold font-poppins text-primary-dark mb-2">No Orders Yet</h3>
        <p class="text-secondary font-poppins text-sm sm:text-base mb-4 sm:mb-6">You haven't submitted any order enquiries yet.</p>
        <a href="{% url 'dashboard:order_enquiry' %}" class="inline-flex items-center justify-center gap-2 px-5 sm:px-6 py-2.5 sm:py-3 bg-primary text-accent font-medium font-poppins rounded-lg hover:bg-primary-dark transition text-sm sm:text-base">
            <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            Submit Your First Enquiry
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}