{% extends 'base.html' %}
{% load static i18n %}

{% block content %}
<div class="container mt-2 mb-3">
    <div class="row">
        <!-- Profile Sidebar -->
        <div class="col-lg-4">
            <div class="card shadow-sm text-center">
                {% if customer.profile_picture %}
                    <img src="{{ customer.profile_picture.url }}" class="rounded-circle mx-auto d-block mt-3" 
                         style="width: 150px; height: 150px; object-fit: cover;" alt="Profile">
                {% else %}
                    <div class="mx-auto mt-3 bg-light rounded-circle d-flex align-items-center justify-content-center" 
                         style="width: 150px; height: 150px;">
                        <i class="fas fa-user fa-5x text-muted"></i>
                    </div>
                {% endif %}
                
                <div class="card-body">
                    <h4>{{ user.get_full_name|default:user.username }}</h4>
                    <p class="text-muted">{{ user.email }}</p>
                    {% if customer.phone %}
                        <p class="text-muted"><i class="fas fa-phone"></i> {{ customer.phone }}</p>
                    {% endif %}
                    {% if customer.address %}
                        <p class="text-muted"><i class="fas fa-map-marker-alt"></i> {{ customer.address }}</p>
                    {% endif %}
                    <a href="{% url 'accounts:customer_profile' %}" class="btn btn-primary w-100">Edit Profile</a>
                </div>
            </div>
            {% if shipping_addresses %}
                <div class="alert alert-success">
                    <strong>Default Shipping Address:</strong><br>
                    {{ shipping_addresses.0.full_address }} 
                    ({{ shipping_addresses.0.city }}, {{ shipping_addresses.0.state }})
                </div>
            {% endif %}
            <!-- Quick Stats -->
            <div class="card mt-4 shadow-sm">
                <div class="card-body">
                    <h5>Quick Stats</h5>
                    <p><strong>Orders:</strong> {{ recent_orders|length }}</p>
                    <p><strong>Shipping Addresses:</strong> {{ shipping_addresses|length }}</p>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-8">
            <h2 class="mb-4">Dashboard</h2>

            <!-- Recent Orders -->
            <div class="card mb-4">
                <div class="card-header">Recent Orders</div>
                <div class="card-body">
                    {% if recent_orders %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Order ID</th>
                                    <th>Date</th>
                                    <th>Total</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for order in recent_orders %}
                            <tr>
                                <td>#{{ order.id }}</td>
                                <td>{{ order.created_at|date:"d M Y" }}</td>
                                <td>${{ order.total|floatformat:2 }}</td>
                                <td>{{ order.status }}</td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p>No orders yet.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Shipping Addresses -->
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <span>Shipping Addresses</span>
                    <a href="{% url 'accounts:shipping_address_create' %}" class="btn btn-sm btn-outline-primary">+ Add New Address</a>
                </div>
                <div class="card-body">
                    {% for addr in shipping_addresses %}
                    <div class="border rounded p-3 mb-3 {% if addr.is_default %}border-success{% endif %}">
                        <strong>{{ addr.address_name }}</strong> 
                        {% if addr.is_default %}<span class="badge bg-success">Default</span>{% endif %}
                        <p class="mb-1">{{ addr.full_address }}</p>
                        <small>{{ addr.city }}, {{ addr.state }}</small>
                    </div>
                    {% empty %}
                    <p>No shipping addresses saved yet.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}