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

{% block title %}{{ product.name }} - Taiya Detergents{% endblock %}

{% block content %}
<style>
    /* Custom color definitions */
    .text-taiya-green {
        color: #2e8b57 !important; /* A pleasant green shade */
    }
    
    .bg-taiya-green {
        background-color: #2e8b57 !important;
    }
    
    .text-taiya-red {
        color: #dc3545 !important; /* Bootstrap's danger red */
    }
    
    .bg-taiya-red {
        background-color: #dc3545 !important;
    }
    
    /* Custom button styles */
    .btn-taiya-green {
        background-color: #2e8b57;
        border-color: #2e8b57;
        color: white;
    }
    
    .btn-taiya-green:hover {
        background-color: #267349;
        border-color: #267349;
        color: white;
    }
    
    /* Product card enhancements */
    .product-card {
        transition: transform 0.2s;
    }
    
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(46, 139, 87, 0.15);
    }
    
    /* Custom badge styles */
    .badge-custom-green {
        background-color: rgba(46, 139, 87, 0.15);
        color: #2e8b57;
    }
    
    .badge-custom-red {
        background-color: rgba(220, 53, 69, 0.15);
        color: #dc3545;
    }
</style>

<div class="product-detail-container">
    <!-- Breadcrumb Navigation -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-taiya-green">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'product_list' %}" class="text-taiya-green">Products</a></li>
            <li class="breadcrumb-item active">{{ product.name }}</li>
        </ol>
    </nav>

    <div class="row">
        <!-- Product Image Section -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body text-center p-4">
                    <img src="{{ product.display_image }}" 
                         alt="{{ product.name }}" 
                         class="img-fluid rounded" 
                         style="max-height: 400px; width: auto;">
                    <div class="mt-4">
                        <span class="badge bg-{% if product.in_stock %}success{% else %}danger{% endif %} fs-6 p-2">
                            <i class="fas {% if product.in_stock %}fa-check-circle{% else %}fa-times-circle{% endif %} me-1"></i>
                            {% if product.in_stock %}In Stock{% else %}Out of Stock{% endif %}
                        </span>
                        <span class="badge bg-secondary ms-2 fs-6 p-2">
                            <i class="fas fa-tag me-1"></i>{{ product.category.name }}
                        </span>
                        <span class="badge bg-info ms-2 fs-6 p-2">
                            <i class="fas fa-weight me-1"></i>{{ product.volume }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Product Details Section -->
        <div class="col-md-6">
            <h1 class="text-taiya-green">{{ product.name }}</h1>
            
            <div class="d-flex align-items-center mb-3">
                <span class="text-muted me-3">{{ product.get_form_display }}</span>
                <span class="badge 
                    {% if product.volume == '1kg' %}bg-success
                    {% elif product.volume == '800gms' %}bg-primary
                    {% elif product.volume == '600gms' %}bg-warning text-dark
                    {% elif product.volume == '200gms' %}bg-info text-dark
                    {% else %}bg-secondary{% endif %} fs-6">
                    {{ product.volume }}
                    {% if product.volume == '1kg' %}(Family Size)
                    {% elif product.volume == '800gms' %}(Standard)
                    {% elif product.volume == '600gms' %}(Economy)
                    {% elif product.volume == '200gms' %}(Travel)
                    {% endif %}
                </span>
            </div>
            
            <div class="mb-4">
                <p class="fs-5">{{ product.description }}</p>
            </div>
            
            <!-- Buy Now Section -->
            <div class="card mb-4 border-taiya-green">
                <div class="card-header bg-taiya-green text-white">
                    <h5 class="mb-0">Ready to Order?</h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <label class="form-label fw-bold">Quantity</label>
                            <div class="input-group" style="max-width: 150px;">
                                <button class="btn btn-outline-secondary" type="button" id="decrease-qty">-</button>
                                <input type="number" class="form-control text-center" value="1" min="1" max="10" id="quantity">
                                <button class="btn btn-outline-secondary" type="button" id="increase-qty">+</button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <a href="{% url 'contact_us' %}?product={{ product.name }}&size={{ product.volume }}" 
                               class="btn btn-taiya-green w-100 py-3 fs-5" 
                               {% if not product.in_stock %}disabled style="background-color: #ccc; border-color: #ccc;"{% endif %}>
                                <i class="fas fa-shopping-bag me-2"></i>Buy Now
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Product Information Tabs -->
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="productTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab">
                                <i class="fas fa-info-circle me-1 text-taiya-green"></i>Details
                            </button>
                        </li>
                        {% if product.ingredients %}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="ingredients-tab" data-bs-toggle="tab" data-bs-target="#ingredients" type="button" role="tab">
                                <i class="fas fa-flask me-1 text-taiya-green"></i>Ingredients
                            </button>
                        </li>
                        {% endif %}
                        {% if product.usage_instructions %}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="usage-tab" data-bs-toggle="tab" data-bs-target="#usage" type="button" role="tab">
                                <i class="fas fa-book-open me-1 text-taiya-green"></i>Usage
                            </button>
                        </li>
                        {% endif %}
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="productTabsContent">
                        <!-- Details Tab -->
                        <div class="tab-pane fade show active" id="details" role="tabpanel">
                            <div class="row">
                                <div class="col-6">
                                    <p class="mb-2"><strong>Product Type:</strong></p>
                                    <p class="mb-2"><strong>Size:</strong></p>
                                    <p class="mb-2"><strong>Category:</strong></p>
                                    <p class="mb-2"><strong>Stock Status:</strong></p>
                                </div>
                                <div class="col-6">
                                    <p class="mb-2">{{ product.get_form_display }}</p>
                                    <p class="mb-2">{{ product.volume }}</p>
                                    <p class="mb-2">{{ product.category.name }}</p>
                                    <p class="mb-2">
                                        <span class="badge bg-{% if product.in_stock %}success{% else %}danger{% endif %}">
                                            {% if product.in_stock %}In Stock{% else %}Out of Stock{% endif %}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Ingredients Tab -->
                        {% if product.ingredients %}
                        <div class="tab-pane fade" id="ingredients" role="tabpanel">
                            <p class="card-text">{{ product.ingredients }}</p>
                            <div class="alert alert-info mt-3">
                                <i class="fas fa-leaf me-2 text-taiya-green"></i>
                                <strong>Eco-Friendly:</strong> Our products are made with natural, biodegradable ingredients that are gentle on the environment.
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Usage Instructions Tab -->
                        {% if product.usage_instructions %}
                        <div class="tab-pane fade" id="usage" role="tabpanel">
                            <p class="card-text">{{ product.usage_instructions }}</p>
                            <div class="mt-3">
                                <h6>Tips for Best Results:</h6>
                                <ul class="list-unstyled">
                                    <li><i class="fas fa-check text-taiya-green me-2"></i> Wet the bar before use</li>
                                    <li><i class="fas fa-check text-taiya-green me-2"></i> Apply directly to stains or use with a sponge</li>
                                    <li><i class="fas fa-check text-taiya-green me-2"></i> Rinse thoroughly after cleaning</li>
                                    <li><i class="fas fa-check text-taiya-green me-2"></i> Store in a dry place between uses</li>
                                </ul>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Benefits Section -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-taiya-green">
                <div class="card-header bg-taiya-green text-white">
                    <h3 class="mb-0">Why Choose This Product?</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 text-center mb-3">
                            <i class="fas fa-shield-alt fa-2x text-taiya-green mb-2"></i>
                            <h6>Gentle & Safe</h6>
                            <p class="small">Safe for hands and all washable surfaces</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <i class="fas fa-recycle fa-2x text-taiya-green mb-2"></i>
                            <h6>Eco-Friendly</h6>
                            <p class="small">Biodegradable and environmentally conscious</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <i class="fas fa-broom fa-2x text-taiya-green mb-2"></i>
                            <h6>Multipurpose</h6>
                            <p class="small">Perfect for laundry, dishes, and general cleaning</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <i class="fas fa-heart fa-2x text-taiya-green mb-2"></i>
                            <h6>Family Approved</h6>
                            <p class="small">Trusted by families across Kenya</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Related Products Section -->
    <div class="row mt-5">
        <div class="col-12">
            <h3 class="text-taiya-green mb-4">You Might Also Like</h3>
            <div class="row">
                {% for related_product in product.category.products.all|slice:":4" %}
                    {% if related_product.id != product.id %}
                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="card h-100 product-card">
                            <div class="card-body text-center">
                                <h6 class="card-title text-taiya-green">{{ related_product.name }}</h6>
                                <p class="card-text text-muted small">{{ related_product.volume }}</p>
                                <p class="card-text small">{{ related_product.description|truncatewords:10 }}</p>
                                <span class="badge bg-{% if related_product.in_stock %}success{% else %}danger{% endif %} small">
                                    {% if related_product.in_stock %}In Stock{% else %}Out of Stock{% endif %}
                                </span>
                            </div>
                            <div class="card-footer bg-transparent">
                                <a href="{% url 'product_detail' related_product.id %}" class="btn btn-taiya-green btn-sm w-100">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% empty %}
                <div class="col-12 text-center">
                    <p class="text-muted">No related products found.</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body text-center py-4">
                    <h4 class="text-taiya-green">Have Questions About This Product?</h4>
                    <p class="lead">Our team is ready to help you choose the perfect cleaning solution</p>
                    <a href="{% url 'contact_us' %}?product={{ product.name }}" class="btn btn-taiya-green btn-lg me-3">
                        <i class="fas fa-question-circle me-2"></i>Get Help
                    </a>
                    <a href="{% url 'product_list' %}" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-arrow-left me-2"></i>Back to Products
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for Quantity Controls -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const quantityInput = document.getElementById('quantity');
    const decreaseBtn = document.getElementById('decrease-qty');
    const increaseBtn = document.getElementById('increase-qty');
    
    decreaseBtn.addEventListener('click', function() {
        let currentValue = parseInt(quantityInput.value);
        if (currentValue > 1) {
            quantityInput.value = currentValue - 1;
        }
    });
    
    increaseBtn.addEventListener('click', function() {
        let currentValue = parseInt(quantityInput.value);
        if (currentValue < 10) {
            quantityInput.value = currentValue + 1;
        }
    });
    
    // Update contact link with quantity
    const buyNowBtn = document.querySelector('a[href*="contact_us"]');
    buyNowBtn.addEventListener('click', function(e) {
        if (!this.disabled) {
            const quantity = quantityInput.value;
            this.href = this.href + '&quantity=' + quantity;
        }
    });
});
</script>
{% endblock %}