{% extends "dashboard/layout.html" %}

{% block title %}Order History - Mycelium Dashboard{% endblock %}

{% block dashboard_content %}
<div class="my-4">
    <!-- Header with marketplace navigation -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="mb-1">
                <i class="bi bi-receipt me-2"></i>Order History
            </h1>
            <p class="lead mb-0">Track your purchases and deployments</p>
        </div>
        <div class="d-flex gap-2">
            <a href="/" class="btn btn-outline-primary">
                <i class="bi bi-shop me-1"></i> Browse Marketplace
            </a>
            <a href="/dashboard/cart" class="btn btn-outline-secondary">
                <i class="bi bi-cart3 me-1"></i> Shopping Cart
                <span class="badge bg-primary ms-1" id="cartBadge" style="display: none;">0</span>
            </a>
        </div>
    </div>

    <!-- Orders Filter and Search -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <label for="orderStatus" class="form-label">Filter by Status</label>
                            <select class="form-select" id="orderStatus">
                                <option value="">All Orders</option>
                                <option value="pending">Pending</option>
                                <option value="processing">Processing</option>
                                <option value="deployed">Deployed</option>
                                <option value="active">Active</option>
                                <option value="failed">Failed</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="orderPeriod" class="form-label">Time Period</label>
                            <select class="form-select" id="orderPeriod">
                                <option value="">All Time</option>
                                <option value="7">Last 7 days</option>
                                <option value="30">Last 30 days</option>
                                <option value="90">Last 3 months</option>
                                <option value="365">Last year</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="orderSearch" class="form-label">Search Orders</label>
                            <input type="text" class="form-control" id="orderSearch" placeholder="Order ID or service name...">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    <h5 class="mb-1" id="totalOrders">0</h5>
                    <small class="text-muted">Total Orders</small>
                    <hr class="my-2">
                    <h6 class="mb-1 text-success" id="totalSpent">0</h6>
                    <small class="text-muted">Total Spent</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Orders List -->
    <div class="card shadow-sm">
        <div class="card-header bg-light">
            <h5 class="mb-0">
                <i class="bi bi-list-ul me-2"></i>Your Orders
            </h5>
        </div>
        <div class="card-body" id="ordersContainer">
            <!-- Orders will be loaded here -->
            <div class="text-center py-5" id="noOrdersMessage">
                <i class="bi bi-receipt display-1 text-muted mb-3"></i>
                <h4 class="text-muted">No orders found</h4>
                <p class="text-muted mb-4">Start shopping to see your order history here</p>
                <a href="/" class="btn btn-primary">
                    <i class="bi bi-shop me-1"></i> Browse Marketplace
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Order Item Template -->
<template id="orderItemTemplate">
    <div class="order-item border-bottom py-3" data-order-id="">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="d-flex align-items-start">
                    <div class="order-icon me-3">
                        <i class="bi bi-box-seam display-6 text-primary"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">
                                    <span class="order-id"></span>
                                    <span class="badge order-status ms-2"></span>
                                </h6>
                                <p class="text-muted mb-1 order-services"></p>
                                <small class="text-muted order-date"></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 text-center">
                <div class="price-display">
                    <span class="h6 mb-0 order-total"></span>
                    <small class="text-muted d-block">Total Cost</small>
                </div>
            </div>
            <div class="col-md-3 text-end">
                <div class="order-actions">
                    <button class="btn btn-sm btn-outline-primary me-2" data-action="toggle-details">
                        <i class="bi bi-eye"></i> Details
                    </button>
                    <div class="btn-group">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="bi bi-three-dots"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-action="view-invoice">
                                <i class="bi bi-eye me-1"></i> View Invoice
                            </a></li>
                            <li><a class="dropdown-item" href="#" data-action="contact-support">
                                <i class="bi bi-headset me-1"></i> Contact Support
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Expandable Order Details -->
        <div class="order-details mt-3" style="display: none;">
            <div class="row">
                <div class="col-md-8">
                    <h6>Services Ordered:</h6>
                    <div class="order-services-list">
                        <!-- Services will be populated here -->
                    </div>
                </div>
                <div class="col-md-4">
                    <h6>Deployment Status:</h6>
                    <div class="deployment-status">
                        <!-- Deployment info will be populated here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<!-- Order Details Modal -->
<div class="modal fade" id="orderDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-receipt me-2"></i>Order Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="orderDetailsContent">
                <!-- Order details will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-action="view-invoice-from-modal">
                    <i class="bi bi-eye me-1"></i> View Invoice
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script type="application/json" id="orders-hydration">
{
  "currency_symbol": {{ currency_symbol | default(value='$') | json_encode() }},
  "display_currency": {{ display_currency | default(value='MC') | json_encode() }}
}
</script>
<script src="/static/js/dashboard_orders.js"></script>
{% endblock %}