{% extends "base.html" %}

{% block title %}Orders - Pro Choice Admin{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">

<div class="admin-container">
    <div class="admin-header">
        <h1>📋 Order Management</h1>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    {% if orders %}
        <div class="orders-table">
            <table>
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Date</th>
                        <th>Total Amount</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in orders %}
                    <tr>
                        <td>#{{ order.id }}</td>
                        <td>
                            <strong>{{ order.user.full_name }}</strong><br>
                            <small>{{ order.user.email }}</small>
                        </td>
                        <td>{{ order.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td><strong>₦{{ "{:,.2f}".format(order.total_amount) }}</strong></td>
                        <td>
                            <span class="status-badge status-{{ order.status }}">
                                {{ order.status }}
                            </span>
                        </td>
                        <td>
                            <a href="{{ url_for('admin.order_detail', order_id=order.id) }}" class="btn-view">
                                <i class="fas fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="empty-state">
            <i class="fas fa-shopping-bag"></i>
            <h3>No Orders Yet</h3>
            <p>Orders will appear here when customers complete their purchases</p>
        </div>
    {% endif %}

    <a href="{{ url_for('admin.dashboard') }}" class="back-link">
        <i class="fas fa-arrow-left"></i>
        Back to Dashboard
    </a>
</div>
{% endblock %}