{% extends 'base.html' %}
{% block content %}
    <section id="profile" class="auth-section">
        <div class="auth-container">
            <div class="auth-card profile-card">
                <div class="auth-header">
                    <h2>My Profile<span>Account Settings</span></h2>
                </div>

                <!-- Profile Picture Section -->
                <div class="profile-picture-section">
                    <div class="profile-picture-container">
                        {% if current_user.profile_picture and current_user.profile_picture != 'default.png' %}
                            <img src="{{ url_for('static', filename=current_user.profile_picture) }}" alt="Profile Picture" class="profile-picture">
                        {% else %}
                            <div class="profile-picture-placeholder">
                                <i class="bi bi-person"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Profile Form -->
                <form method="POST" action="{{ url_for('main.profile') }}" class="auth-form" enctype="multipart/form-data" novalidate>
                    {{ form.hidden_tag() }}
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.full_name.label }}
                            {% if form.full_name.errors %}
                                {{ form.full_name(class="form-control is-invalid", placeholder="Enter your full name") }}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.full_name.errors %}
                                        <small>{{ error }}</small><br>
                                    {% endfor %}
                                </div>
                            {% else %}
                                {{ form.full_name(class="form-control", placeholder="Enter your full name") }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.email.label }}
                            {% if form.email.errors %}
                                {{ form.email(class="form-control is-invalid", placeholder="you@example.com") }}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.email.errors %}
                                        <small>{{ error }}</small><br>
                                    {% endfor %}
                                </div>
                            {% else %}
                                {{ form.email(class="form-control", placeholder="you@example.com") }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.profile_picture.label }}
                            {{ form.profile_picture(class="form-control-file") }}
                            {% if form.profile_picture.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.profile_picture.errors %}
                                        <small>{{ error }}</small><br>
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <small class="form-text text-muted">Accepted formats: jpg, jpeg, png, gif, webp</small>
                        </div>
                    </div>
                    {{ form.submit(class="btn") }}
                </form>
            </div>

            <!-- Order History Section -->
            <div class="auth-card order-history-card">
                <div class="auth-header">
                    <h2>Order History<span>Your Past Orders</span></h2>
                </div>

                {% if orders %}
                    <div class="orders-list">
                        {% for order in orders %}
                            <div class="order-card">
                                <div class="order-header">
                                    <div class="order-info">
                                        <span class="order-id">Order #{{ order.id }}</span>
                                        <span class="order-date">{{ order.created_at.strftime('%B %d, %Y at %I:%M %p') }}</span>
                                    </div>
                                    <div class="order-status">
                                        <span class="status-badge status-{{ order.status }}">{{ order.status|capitalize }}</span>
                                    </div>
                                </div>
                                <div class="order-items">
                                    {% for item in order.items %}
                                        <div class="order-item">
                                            <span class="item-name">{{ item.product_name }} x {{ item.quantity }}</span>
                                            <span class="item-price">N {{ "%.2f"|format(item.price * item.quantity) }}</span>
                                        </div>
                                    {% endfor %}
                                </div>
                                <div class="order-total">
                                    <span>Total:</span>
                                    <span class="total-amount">N {{ "%.2f"|format(order.total_amount) }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="no-orders">
                        <i class="bi bi-bag"></i>
                        <p>You haven't placed any orders yet.</p>
                        <a href="{{ url_for('main.products') }}" class="btn">Start Shopping</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </section>

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