{% extends "base.html" %}

{% block title %}Shopping Cart - Project Mycelium{% endblock %}

{% block head %}
<!-- Add Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">

<style>
    .cart-item {
        transition: all 0.3s ease;
    }
    
    .cart-item:hover {
        background-color: #f8f9fa;
    }
    
    .quantity-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .quantity-controls button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .product-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 8px;
    }
    
    .cart-summary {
        position: sticky;
        top: 100px;
    }
    
    .security-notice {
        background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
        border: 1px solid #b6d4da;
    }
    
    .empty-cart-icon {
        font-size: 4rem;
        color: #6c757d;
    }
    
    .loading-overlay {
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }
    
    .toast {
        z-index: 10000;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="/marketplace">Marketplace</a></li>
            <li class="breadcrumb-item active" aria-current="page">Shopping Cart</li>
        </ol>
    </nav>

    <!-- Page Header -->
    <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 text-primary"></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 shadow-sm">
                <div class="card-body py-5">
                    <i class="bi bi-cart-x empty-cart-icon 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 ThreeFold 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 shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-bag me-2"></i>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="product-icon">
                                            {% 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 fw-bold">{{ item.product_name }}</h6>
                                        <p class="text-muted mb-1 small">
                                            <i class="bi bi-building me-1"></i>{{ item.provider_name }}
                                        </p>
                                        <span class="badge bg-light text-dark border">
                                            <i class="bi bi-tag me-1"></i>{{ item.product_category|title }}
                                        </span>
                                        
                                        {% if item.specifications %}
                                        <div class="mt-2">
                                            <small class="text-muted fw-bold">Specifications:</small>
                                            <div class="mt-1">
                                                {% for key, value in item.specifications %}
                                                <span class="badge bg-secondary me-1 small">{{ key }}: {{ value }}</span>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Quantity Controls -->
                            <div class="col-md-3">
                                <div class="quantity-controls 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 fs-5">{{ 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 class="text-center mt-2">
                                    <small class="text-muted">Quantity</small>
                                </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-3 fs-5">{{ item.total_price }}</div>
                                    <button class="btn btn-sm btn-outline-danger" data-product-id="{{ item.product_id }}" data-action="remove" title="Remove item">
                                        <i class="bi bi-trash"></i> Remove
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Cart Summary -->
        <div class="col-lg-4">
            <div class="card shadow-sm cart-summary">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-receipt me-2"></i>Order Summary</h5>
                </div>
                <div class="card-body">
                    <!-- Currency Selector -->
                    <div class="mb-3">
                        <label class="form-label small text-muted fw-bold">
                            <i class="bi bi-currency-exchange me-1"></i>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><i class="bi bi-bag me-1"></i>Subtotal ({{ cart.item_count }} items)</span>
                        <span class="fw-bold">{{ cart.subtotal }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted"><i class="bi bi-calculator me-1"></i>Estimated fees</span>
                        <span class="text-muted">Calculated at checkout</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted"><i class="bi bi-truck me-1"></i>Deployment</span>
                        <span class="text-success">Free</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="fw-bold fs-5">Total</span>
                        <span class="fw-bold text-primary fs-4">{{ cart.total }}</span>
                    </div>
                    
                    <!-- Checkout Button -->
                    <div class="d-grid mb-3">
                        {% 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>
                    
                    <!-- Additional Actions -->
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-secondary btn-sm" data-action="save-for-later">
                            <i class="bi bi-bookmark me-1"></i>Save for Later
                        </button>
                        <button class="btn btn-outline-info btn-sm" data-action="share-cart">
                            <i class="bi bi-share me-1"></i>Share Cart
                        </button>
                    </div>
                    
                    <!-- Security Notice -->
                    <div class="mt-3 p-3 security-notice rounded">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-shield-check text-success me-2 fs-5"></i>
                            <div>
                                <small class="fw-bold">Secure Checkout</small>
                                <div class="small text-muted">256-bit SSL encryption</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Recommended Products -->
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="bi bi-lightbulb me-2"></i>You might also like</h6>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-12">
                            <div class="d-flex align-items-center p-3 border rounded hover-shadow">
                                <i class="bi bi-cpu text-primary me-3 fs-4"></i>
                                <div class="flex-grow-1">
                                    <div class="fw-bold small">High-Performance Compute</div>
                                    <div class="text-muted" style="font-size: 0.75rem;">Starting at $5/month</div>
                                </div>
                                <button class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="d-flex align-items-center p-3 border rounded hover-shadow">
                                <i class="bi bi-hdd-rack text-success me-3 fs-4"></i>
                                <div class="flex-grow-1">
                                    <div class="fw-bold small">Storage Solutions</div>
                                    <div class="text-muted" style="font-size: 0.75rem;">Starting at $2.50/month</div>
                                </div>
                                <button class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-plus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="d-flex align-items-center p-3 border rounded hover-shadow">
                                <i class="bi bi-globe text-info me-3 fs-4"></i>
                                <div class="flex-grow-1">
                                    <div class="fw-bold small">Gateway Services</div>
                                    <div class="text-muted" style="font-size: 0.75rem;">Starting at $1.50/month</div>
                                </div>
                                <button class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- 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 loading-overlay">
    <div class="d-flex justify-content-center align-items-center h-100">
        <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="application/json" id="cart-hydration">
{
  "item_count": {{ cart.item_count }},
  "redirect_login_url": "/login?checkout=true",
  "redirect_register_url": "/register?checkout=true",
  "redirect_after_auth": "/cart"
}
</script>
<script src="/static/js/cart.js"></script>

<!-- 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 ThreeFold?</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>

{% endblock %}