{% extends 'base.html' %}

{% block title %}{{ product.name }} - Thangka Arts{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <!-- Product Images -->
        <div class="col-lg-6 mb-4">
            {% if product.images.first %}
                <img src="{{ product.images.first.image.url }}" alt="{{ product.name }}" class="img-fluid rounded shadow">
            {% else %}
                <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 400px;">
                    <i class="fas fa-image fa-5x text-muted"></i>
                </div>
            {% endif %}
        </div>
        
        <!-- Product Info -->
        <div class="col-lg-6">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'products:product_list' %}">Shop</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'products:category_list' product.category.slug %}">{{ product.category.name }}</a></li>
                    <li class="breadcrumb-item active">{{ product.name }}</li>
                </ol>
            </nav>
            
            <h1 class="fw-bold mb-3">{{ product.name }}</h1>
            
            <div class="mb-3">
                <span class="badge bg-primary me-2">{{ product.get_thangka_type_display }}</span>
                <span class="badge bg-secondary me-2">{{ product.get_mounting_type_display }}</span>
                {% if product.is_featured %}
                    <span class="badge bg-warning">Featured</span>
                {% endif %}
            </div>
            
            <div class="mb-4">
                {% if product.is_on_sale %}
                    <div class="d-flex align-items-center mb-2">
                        <span class="product-price sale-price fs-3 me-3">${{ product.sale_price }}</span>
                        <span class="original-price fs-5">${{ product.price }}</span>
                        <span class="discount-badge ms-3">-{{ product.discount_percentage }}%</span>
                    </div>
                {% else %}
                    <span class="product-price fs-3">${{ product.price }}</span>
                {% endif %}
            </div>
            
            <div class="mb-4">
                <p class="text-muted mb-2">
                    <i class="fas fa-ruler me-2"></i><strong>Dimensions:</strong> {{ product.dimensions }}
                </p>
                <p class="text-muted mb-2">
                    <i class="fas fa-palette me-2"></i><strong>Materials:</strong> {{ product.materials }}
                </p>
                <p class="text-muted mb-2">
                    <i class="fas fa-user me-2"></i><strong>Artist:</strong> {{ product.artist }}
                </p>
                <p class="text-muted mb-2">
                    <i class="fas fa-box me-2"></i><strong>Stock:</strong> {{ product.stock }} available
                </p>
            </div>
            
            <div class="mb-4">
                <h6 class="fw-bold mb-2">Description</h6>
                <p>{{ product.description }}</p>
            </div>
            
            <!-- Add to Cart Form -->
            {% if product.stock > 0 %}
                <form method="POST" action="{% url 'cart:add_to_cart' product.id %}" class="mb-4">
                    {% csrf_token %}
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="quantity" class="form-label">Quantity</label>
                            <input type="number" name="quantity" id="quantity" value="1" min="1" max="{{ product.stock }}" class="form-control">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">&nbsp;</label>
                            <button type="submit" class="btn btn-primary btn-lg w-100">
                                <i class="fas fa-shopping-cart me-2"></i>Add to Cart
                            </button>
                        </div>
                    </div>
                </form>
            {% else %}
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    This product is currently out of stock
                </div>
            {% endif %}
            
            <!-- Product Features -->
            <div class="row g-3 mt-4">
                <div class="col-6">
                    <div class="text-center p-3 border rounded">
                        <i class="fas fa-shipping-fast fa-2x text-primary mb-2"></i>
                        <p class="small mb-0">Free Shipping</p>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-center p-3 border rounded">
                        <i class="fas fa-shield-alt fa-2x text-primary mb-2"></i>
                        <p class="small mb-0">Secure Payment</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Related Products -->
    {% if related_products %}
    <div class="mt-5">
        <h3 class="fw-bold mb-4">Related Products</h3>
        <div class="row g-4">
            {% for related_product in related_products %}
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 product-card">
                    {% if related_product.images.first %}
                        <img src="{{ related_product.images.first.image.url }}" class="card-img-top" alt="{{ related_product.name }}" style="height: 200px; object-fit: cover;">
                    {% else %}
                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                            <i class="fas fa-image fa-3x text-muted"></i>
                        </div>
                    {% endif %}
                    
                    <div class="card-body d-flex flex-column">
                        <h6 class="card-title">{{ related_product.name }}</h6>
                        <p class="card-text text-muted small">{{ related_product.category.name }}</p>
                        
                        <div class="mt-auto">
                            <div class="mb-2">
                                {% if related_product.is_on_sale %}
                                    <span class="product-price sale-price">${{ related_product.sale_price }}</span>
                                    <span class="original-price ms-2">${{ related_product.price }}</span>
                                {% else %}
                                    <span class="product-price">${{ related_product.price }}</span>
                                {% endif %}
                            </div>
                            
                            <div class="d-grid">
                                <a href="{% url 'products:product_detail' related_product.slug %}" class="btn btn-outline-primary btn-sm">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}