{% extends 'shop/base.html' %}
{% block title %}My Orders - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <!-- 🏆 Page Header -->
    <div class="text-center mb-4">
        <h1 class="fw-bold display-5 order-title">
            <i class="fas fa-box-open text-primary"></i> 
            <span class="order-heading">My Orders</span>
        </h1>
        <p class="order-subtext">Track your past and ongoing orders here.</p>
    </div>

    <!-- 🔍 Search & Filter -->
    <form method="GET" class="row g-3 mb-4">
        <div class="col-md-6">
            <input type="text" name="search" class="form-control order-input search-box" placeholder="🔎 Search by Order ID..." value="{{ request.GET.search }}">
        </div>
        <div class="col-md-4">
            <select name="status" class="form-select order-input">
                <option value="">📌 Filter by Status</option>
                <option value="Pending" {% if request.GET.status == "Pending" %}selected{% endif %}>Pending</option>
                <option value="Processing" {% if request.GET.status == "Processing" %}selected{% endif %}>Processing</option>
                <option value="Shipped" {% if request.GET.status == "Shipped" %}selected{% endif %}>Shipped</option>
                <option value="Delivered" {% if request.GET.status == "Delivered" %}selected{% endif %}>Delivered</option>
                <option value="Cancelled" {% if request.GET.status == "Cancelled" %}selected{% endif %}>Cancelled</option>
            </select>
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-success w-100 apply-btn">
                <i class="fas fa-filter"></i> Apply
            </button>
        </div>
    </form>


    <!-- 📦 Order List -->
    {% if orders %}
        <div class="row g-4">
            {% for order in orders %}
            <div class="col-md-6">
                <div class="card order-card shadow-sm border-0">
                    <div class="card-body">
                        <!-- 🆔 Order ID & Date -->
                        <h5 class="card-title fw-bold">Order #{{ order.id }}</h5>
                        <p class="text-muted mb-2"><i class="fas fa-calendar-alt me-2"></i> {{ order.created_at|date:"F d, Y" }}</p>

                        <!-- 🔘 Status Badge -->
                        <p class="mb-2">
                            <strong>Status:</strong>
                            <span class="badge order-status 
                                {% if order.status == 'Pending' %} bg-warning text-dark
                                {% elif order.status == 'Processing' %} bg-primary
                                {% elif order.status == 'Shipped' %} bg-info
                                {% elif order.status == 'Delivered' %} bg-success
                                {% elif order.status == 'Cancelled' %} bg-danger
                                {% else %} bg-secondary {% endif %}"> 
                                {{ order.status }}
                            </span>
                        </p>

                        <!-- 💲 Order Total -->
                        <p><strong>Total:</strong> <span class="text-success fw-bold">${{ order.total_price }}</span></p>

                        <!-- 🔘 Action Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'generate_invoice' order.id %}" class="btn btn-outline-secondary btn-sm order-btn">
                                <i class="fas fa-file-invoice"></i> Invoice
                            </a>
                            <a href="{% url 'order_detail' order.id %}" class="btn btn-dark btn-sm order-btn">
                                <i class="fas fa-eye"></i> View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <!-- 📌 No Orders Message -->
        <div class="alert alert-info text-center mt-5">
            <h5 class="fw-bold text-secondary">No Orders Found! 🛍️</h5>
            <p class="order-subtext">Try adjusting your search or filters.</p>
            <a href="{% url 'shop' %}" class="btn btn-success mt-3">
                <i class="fas fa-store"></i> Browse Products
            </a>
        </div>
    {% endif %}
</div>

<!-- 🎨 Custom Styling -->
<style>
/* 🌟 Dark Mode Support */
/* 🌟 Search Box Placeholder Text Visibility */
.search-box::placeholder {
    color: #555 !important; /* Default color for light mode */
    opacity: 1; /* Ensures visibility */
}

.dark-mode .search-box::placeholder {
    color: #ddd !important; /* Light gray text for dark mode */
}

/* ✅ Apply Button Styling */
.apply-btn {
    background: #148818;
    border: none;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

.apply-btn:hover {
    background: #0f6f12;
    transform: scale(1.05);
}

/* 🌙 Dark Mode Fix for Apply Button */
.dark-mode .apply-btn {
    background: #00c853;
    color: white;
    border: none;
}

.dark-mode .apply-btn:hover {
    background: #008000;
}

/* 🌙 Dark Mode Fix for Input Fields */
.dark-mode .order-input {
    background: #333;
    color: white;
    border-color: #00c853;
}

.dark-mode .order-title,
.dark-mode .order-heading {
    color: #00e676 !important;
}

.dark-mode .order-subtext,
.dark-mode .text-muted {
    color: #bbb !important;
}

.dark-mode .order-card {
    background: #2b2b2b !important;
    color: white;
}

.dark-mode .order-status {
    border-radius: 6px;
    padding: 5px 10px;
}

.dark-mode .order-input {
    background: #333;
    color: white;
    border-color: #00c853;
}

.dark-mode .order-btn {
    border-color: #00c853 !important;
    color: white !important;
}

.dark-mode .btn-dark {
    background: #008000 !important;
    border: none;
}

/* 🎨 Order Card Styling */
.order-card {
    transition: all 0.3s ease-in-out;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.order-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 📌 Order Status Styling */
.order-status {
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: bold;
    color: white;
}

.order-status:contains("Pending") { background-color: #ffc107; }
.order-status:contains("Processing") { background-color: #007bff; }
.order-status:contains("Shipped") { background-color: #17a2b8; }
.order-status:contains("Delivered") { background-color: #28a745; }
.order-status:contains("Cancelled") { background-color: #dc3545; }

/* ✅ Input Fields */
.order-input {
    border: 2px solid #148818;
    border-radius: 8px;
    padding: 10px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
}

.order-input:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(20, 136, 24, 0.5);
}

/* 🔘 Buttons */
.order-btn {
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
}

.order-btn:hover {
    background-color: #148818 !important;
    color: white !important;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .order-card {
        text-align: center;
    }
    .d-flex {
        flex-direction: column;
        gap: 10px;
    }
}
</style>

{% endblock %}