{% extends "marketplace/layout.html" %}
{% block title %}Shopping Cart - Mycelium Marketplace{% endblock %}

{% block extra_css %}
<style>
.hover-shadow:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transform: translateY(-1px);
}

.add-recommended-btn {
    transition: all 0.2s ease;
    min-width: 60px;
}

.add-recommended-btn:hover {
    transform: scale(1.05);
}
</style>
{% endblock %}

{% block marketplace_content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="bi bi-cart3 me-2"></i>Shopping Cart</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="/marketplace" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>Continue Shopping
            </a>
        </div>
    </div>
</div>

{% if cart.is_empty %}
<!-- Empty Cart State -->
<div class="row justify-content-center">
    <div class="col-md-8 text-center">
        <div class="card border-0">
            <div class="card-body py-5">
                <i class="bi bi-cart-x display-1 text-muted mb-4"></i>
                <h3 class="text-muted mb-3">Your cart is empty</h3>
                <p class="text-muted mb-4">Looks like you haven't added any items to your cart yet. Browse our marketplace to find the perfect Mycelium resources for your needs.</p>
                <a href="/marketplace" class="btn btn-primary btn-lg">
                    <i class="bi bi-shop me-2"></i>Browse Marketplace
                </a>
            </div>
        </div>
    </div>
</div>
{% else %}
<!-- Cart with Items -->
<div class="row">
    <!-- Cart Items -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Cart Items ({{ cart.item_count }})</h5>
                <button class="btn btn-sm btn-outline-danger" id="clearCartBtn">
                    <i class="bi bi-trash me-1"></i>Clear Cart
                </button>
            </div>
            <div class="card-body p-0">
                {% for item in cart.items %}
                <div class="cart-item border-bottom p-4" data-product-id="{{ item.product_id }}">
                    <div class="row align-items-center">
                        <!-- Product Info -->
                        <div class="col-md-6">
                            <div class="d-flex">
                                <div class="flex-shrink-0 me-3">
                                    <div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                        {% if item.product_category == "compute" %}
                                            <i class="bi bi-cpu fs-4 text-primary"></i>
                                        {% elif item.product_category == "hardware" %}
                                            <i class="bi bi-hdd-rack fs-4 text-success"></i>
                                        {% elif item.product_category == "gateways" %}
                                            <i class="bi bi-globe fs-4 text-info"></i>
                                        {% elif item.product_category == "applications" %}
                                            <i class="bi bi-app fs-4 text-warning"></i>
                                        {% elif item.product_category == "services" %}
                                            <i class="bi bi-person-workspace fs-4 text-secondary"></i>
                                        {% else %}
                                            <i class="bi bi-box fs-4 text-muted"></i>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">{{ item.product_name }}</h6>
                                    <p class="text-muted mb-1 small">{{ item.provider_name }}</p>
                                    <span class="badge bg-light text-dark">{{ item.product_category|title }}</span>
                                    
                                    {% if item.specifications %}
                                    <div class="mt-2">
                                        <small class="text-muted">Specifications:</small>
                                        <div class="mt-1">
                                            {% for key, value in item.specifications %}
                                            <span class="badge bg-secondary me-1">{{ key }}: {{ value }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <!-- Quantity Controls -->
                        <div class="col-md-3">
                            <div class="d-flex align-items-center justify-content-center">
                                <button class="btn btn-sm btn-outline-secondary" data-product-id="{{ item.product_id }}" data-action="decrease">
                                    <i class="bi bi-dash"></i>
                                </button>
                                <span class="mx-3 fw-bold">{{ item.quantity }}</span>
                                <button class="btn btn-sm btn-outline-secondary" data-product-id="{{ item.product_id }}" data-action="increase">
                                    <i class="bi bi-plus"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- Price and Actions -->
                        <div class="col-md-3">
                            <div class="text-end">
                                <div class="mb-2">
                                    <small class="text-muted">Unit: {{ item.unit_price }}</small>
                                </div>
                                <div class="fw-bold text-primary mb-2">{{ item.total_price }}</div>
                                <button class="btn btn-sm btn-outline-danger" data-product-id="{{ item.product_id }}" data-action="remove">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    
    <!-- Cart Summary -->
    <div class="col-lg-4">
        <div class="card sticky-top" style="top: 100px;">
            <div class="card-header">
                <h5 class="mb-0">Order Summary</h5>
            </div>
            <div class="card-body">
                <!-- Currency Selector -->
                <div class="mb-3">
                    <label class="form-label small text-muted">Display Currency</label>
                    <select class="form-select form-select-sm" id="currencySelector">
                        {% for currency in currencies %}
                        <option value="{{ currency.code }}" {% if currency.code == user_currency %}selected{% endif %}>
                            {{ currency.symbol }} {{ currency.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <hr>
                
                <!-- Price Breakdown -->
                <div class="d-flex justify-content-between mb-2">
                    <span>Subtotal ({{ cart.item_count }} items)</span>
                    <span>{{ cart.subtotal }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Estimated fees</span>
                    <span class="text-muted">Calculated at checkout</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between mb-3">
                    <span class="fw-bold">Total</span>
                    <span class="fw-bold text-primary fs-5">{{ cart.total }}</span>
                </div>
                
                <!-- Guest User Notice -->
                {% if not user_json %}
                <div class="alert alert-info mb-3">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-info-circle me-2"></i>
                        <div>
                            <strong>Almost ready to checkout!</strong><br>
                            <small>You'll need to log in or create an account to complete your purchase. Don't worry - your cart items will be saved!</small>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- Checkout Button -->
                <div class="d-grid">
                    {% if user_json %}
                    <a href="/checkout" class="btn btn-primary btn-lg">
                        <i class="bi bi-credit-card me-2"></i>Proceed to Checkout
                    </a>
                    {% else %}
                    <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#guestCheckoutModal">
                        <i class="bi bi-credit-card me-2"></i>Proceed to Checkout
                    </button>
                    {% endif %}
                </div>
                
                <!-- Security Notice -->
                <div class="mt-3 p-3 bg-light rounded">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-shield-check text-success me-2"></i>
                        <small class="text-muted">Secure checkout with 256-bit SSL encryption</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Recommended Products -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-stars me-2"></i>Recommended for you</h6>
            </div>
            <div class="card-body">
                <div class="row g-2">
                    {% for product_data in recommended_products %}
                    <div class="col-12">
                        <div class="d-flex align-items-center p-3 border rounded hover-shadow" style="transition: all 0.2s ease;">
                            <i class="bi bi-cpu text-primary me-3 fs-4"></i>
                            <div class="flex-grow-1">
                                <div class="fw-bold">{{ product_data.product.name }}</div>
                                <small class="text-muted">{{ product_data.product.description }}</small>
                                <div class="text-primary fw-bold mt-1">{{ product_data.formatted_price }}</div>
                            </div>
                            <button class="btn btn-sm btn-primary add-recommended-btn"
                                    data-product-id="{{ product_data.product.id }}"
                                    data-product-name="{{ product_data.product.name }}"
                                    data-product-price="{{ product_data.price.display_amount }}"
                                    data-product-category="{{ product_data.product.category_id }}">
                                <i class="bi bi-plus me-1"></i>Add
                            </button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <div class="text-center mt-3">
                    <a href="/marketplace" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-shop me-1"></i>Browse All Products
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Clear Cart Confirmation Modal -->
<div class="modal fade" id="clearCartModal" tabindex="-1" aria-labelledby="clearCartModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="clearCartModalLabel">
                    <i class="bi bi-exclamation-triangle me-2"></i>Clear Entire Cart
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center mb-3">
                    <i class="bi bi-cart-x text-danger me-3" style="font-size: 2rem;"></i>
                    <div>
                        <p class="mb-1 fw-bold">Are you sure you want to clear your entire cart?</p>
                        <p class="mb-0 text-muted small">This action will remove all items from your cart and cannot be undone.</p>
                    </div>
                </div>
                <div class="alert alert-warning d-flex align-items-center">
                    <i class="bi bi-info-circle me-2"></i>
                    <small>All {{ cart.item_count }} items will be permanently removed from your cart.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmClearCartBtn">
                    <i class="bi bi-trash me-1"></i>Clear Cart
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Remove Item Confirmation Modal -->
<div class="modal fade" id="removeItemModal" tabindex="-1" aria-labelledby="removeItemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="removeItemModalLabel">
                    <i class="bi bi-exclamation-triangle me-2"></i>Remove Item
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center mb-3">
                    <i class="bi bi-trash text-warning me-3" style="font-size: 2rem;"></i>
                    <div>
                        <p class="mb-1 fw-bold">Remove this item from your cart?</p>
                        <p class="mb-0 text-muted small">This action cannot be undone.</p>
                    </div>
                </div>
                <div class="alert alert-info d-flex align-items-center">
                    <i class="bi bi-info-circle me-2"></i>
                    <small>You can always add this item back later from the marketplace.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-warning" id="confirmRemoveItemBtn">
                    <i class="bi bi-trash me-1"></i>Remove Item
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-none" style="background: rgba(0,0,0,0.5); z-index: 9999;">
    <div class="d-flex justify-content-center align-items-center h-100">
        <div class="spinner-border text-light" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script src="/static/js/cart-marketplace.js"></script>
{% endblock %}

<!-- Guest Checkout Modal -->
<div class="modal fade" id="guestCheckoutModal" tabindex="-1" aria-labelledby="guestCheckoutModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="guestCheckoutModalLabel">
                    <i class="bi bi-person-check me-2"></i>Complete Your Purchase
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <i class="bi bi-cart-check text-primary" style="font-size: 3rem;"></i>
                    <h4 class="mt-3 mb-2">Almost there!</h4>
                    <p class="text-muted">You're just one step away from completing your purchase.</p>
                </div>
                
                <div class="alert alert-info d-flex align-items-center mb-4">
                    <i class="bi bi-shield-check me-2"></i>
                    <div>
                        <strong>Your cart is safe!</strong><br>
                        <small>All items in your cart will be automatically saved when you log in or create an account.</small>
                    </div>
                </div>
                
                <div class="row g-3">
                    <div class="col-12">
                        <h6 class="mb-3">Choose an option to continue:</h6>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="card h-100 border-primary">
                            <div class="card-body text-center">
                                <i class="bi bi-person-fill text-primary mb-2" style="font-size: 2rem;"></i>
                                <h6>Already have an account?</h6>
                                <p class="text-muted small mb-3">Sign in to access your saved information and complete checkout quickly.</p>
                                <button type="button" class="btn btn-primary w-100" id="guestLoginBtn">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>Log In
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="card h-100 border-success">
                            <div class="card-body text-center">
                                <i class="bi bi-person-plus-fill text-success mb-2" style="font-size: 2rem;"></i>
                                <h6>New to Mycelium?</h6>
                                <p class="text-muted small mb-3">Create a free account to manage your orders and access exclusive features.</p>
                                <button type="button" class="btn btn-success w-100" id="guestRegisterBtn">
                                    <i class="bi bi-person-plus me-2"></i>Create Account
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4 p-3 bg-light rounded">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <i class="bi bi-lightning-charge text-warning" style="font-size: 1.5rem;"></i>
                        </div>
                        <div class="col">
                            <h6 class="mb-1">Quick & Secure</h6>
                            <small class="text-muted">Registration takes less than 30 seconds. Your payment information is protected with enterprise-grade security.</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-arrow-left me-2"></i>Continue Shopping
                </button>
            </div>
        </div>
    </div>
</div>