{% extends "base.html" %}

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

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

<div class="admin-container">
    <div class="admin-header">
        <h1>Admin Dashboard</h1>
        <a href="{{ url_for('admin.add_product') }}" class="add-product-btn">
            <i class="fas fa-plus-circle"></i>
            Add New Product
        </a>
    </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 %}



    <!-- Tab Navigation -->
    <div class="tab-navigation">
        <button class="tab-btn active" data-tab="products">
            <i class="fas fa-box"></i> Products
        </button>
        <button class="tab-btn" data-tab="orders">
            <i class="fas fa-shopping-bag"></i> Recent Orders
        </button>
    </div>

    <!-- Products Tab -->
    <div class="tab-content active" id="products-tab">
        {% if products %}
            <div class="products-grid">
                {% for product in products %}
                <div class="product-card">
                    <div style="position: relative;">
                        {% if product.image_url %}
                            <img src="{{ url_for('static', filename=product.image_url) }}" alt="product image" class="product-image">
                        {% else %}
                            <img src="{{ url_for('static', filename='images/701ed985f9328736.jpg') }}" alt="product image" class="product-image">
                        {% endif %}
                        {% if product.badge %}
                            <span class="product-badge badge-{{ product.badge.lower() }}">
                                {{ product.badge }}
                            </span>
                        {% endif %}
                    </div>
                    
                    <div class="product-content">
                        <h3 class="product-name">{{ product.name }}</h3>
                        <p class="product-description">{{ product.description }}</p>
                        
                        <div class="product-meta">
                            <div class="product-price">₦{{ "{:,.2f}".format(product.price) }}</div>
                            <div class="product-stock">
                                <span class="stock-indicator"></span>
                                {{ product.quantity_available }} in stock
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <a href="{{ url_for('admin.edit_product', product_id=product.id) }}" class="action-btn edit-btn">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <form action="{{ url_for('admin.delete_product', product_id=product.id) }}" method="POST" style="flex: 1;" onsubmit="return confirm('Are you sure you want to delete {{ product.name }}?');">
                                <button type="submit" class="action-btn delete-btn" style="width: 100%;">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">
                <i class="fas fa-box-open"></i>
                <h3>No Products Yet</h3>
                <p>Start building your inventory by adding your first product</p>
                <a href="{{ url_for('admin.add_product') }}" class="add-product-btn">
                    <i class="fas fa-plus-circle"></i>
                    Add Your First Product
                </a>
            </div>
        {% endif %}
    </div>

    <!-- Orders Tab -->
    <div class="tab-content" id="orders-tab">
        {% 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>
            <div class="view-all-link">
                <a href="{{ url_for('admin.orders') }}" class="btn-view-all">
                    <i class="fas fa-list"></i> View All Orders
                </a>
            </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 %}
    </div>

    <a href="{{ url_for('main.home') }}" class="back-link">
        <i class="fas fa-arrow-left"></i>
        Back to Home
    </a>
</div>

<script src="{{ url_for('static', filename='js/admin-dashboard.js') }}"></script>
{% endblock %}