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

{% block title %}{{ product.name }} - djinsight Example{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="product-header mb-4">
            <h1>{{ product.name }}</h1>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <span class="badge bg-secondary">{{ product.category }}</span>
                    <span class="text-success fs-4 fw-bold ms-3">${{ product.price }}</span>
                </div>
                {% if product.total_views > 0 %}
                <div class="popularity-badge">
                    🔥 {{ product.total_views|format_view_count }} views
                </div>
                {% endif %}
            </div>
        </div>
        
        <div class="product-description mb-4">
            {{ product.description|linebreaks }}
        </div>
        
        <!-- djinsight Product Analytics Demo -->
        <div class="analytics-demo mt-5">
            <h3>📊 Product Analytics Demo</h3>
            <p class="text-muted">
                This section shows how djinsight tracks product views and displays analytics for e-commerce.
            </p>
            
            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>Product Performance</h5>
                    <div class="stats-grid">
                        {% total_views_stat obj=product %}
                        {% unique_views_stat obj=product %}
                        {% views_today_stat obj=product %}
                    </div>
                </div>
                
                <div class="col-md-6">
                    <h5>Customer Interest</h5>
                    <div class="stats-grid">
                        {% first_viewed_stat obj=product %}
                        {% last_viewed_stat obj=product %}
                        {% views_week_stat obj=product %}
                    </div>
                </div>
            </div>
            
            <!-- Live Product Analytics -->
            <div class="mb-4">
                <h5>Live Product Analytics</h5>
                {% live_stats_counter obj=product show_unique=True refresh_interval=15 %}
            </div>
            
            <!-- E-commerce Analytics Widget -->
            <div class="mb-4">
                <h5>E-commerce Analytics Widget</h5>
                {% page_analytics_widget obj=product period='month' %}
            </div>
        </div>
        
        <div class="mt-4">
            <a href="{% url 'product_list' %}" class="btn btn-secondary">← Back to Products</a>
            <a href="{% url 'home' %}" class="btn btn-primary">Home</a>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- Product Stats Sidebar -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">🛍️ Product Stats</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>Price:</strong> ${{ product.price }}
                </div>
                <div class="mb-3">
                    <strong>Category:</strong> {{ product.category }}
                </div>
                <div class="mb-3">
                    <strong>Added:</strong> {{ product.created_at|date:"M d, Y" }}
                </div>
                
                <hr>
                
                <h6>View Statistics:</h6>
                {% total_views_stat obj=product %}
                {% unique_views_stat obj=product %}
                {% if product.last_viewed_at %}
                    {% last_viewed_stat obj=product %}
                {% endif %}
            </div>
        </div>
        
        <!-- E-commerce Features -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">🚀 E-commerce Features</h5>
            </div>
            <div class="card-body">
                <ul class="small">
                    <li>Product view tracking</li>
                    <li>Customer interest analytics</li>
                    <li>Popular product detection</li>
                    <li>Conversion rate optimization</li>
                    <li>Inventory insights</li>
                </ul>
                
                <div class="mt-3">
                    <strong>Template Tags Used:</strong>
                    <pre class="small bg-light p-2 rounded mt-2"><code>{% templatetag openblock %} total_views_stat obj=product {% templatetag closeblock %}
{% templatetag openblock %} unique_views_stat obj=product {% templatetag closeblock %}
{% templatetag openblock %} live_stats_counter obj=product {% templatetag closeblock %}</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Track this product view -->
{% page_view_tracker obj=product debug=True %}
{% endblock %} 