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

{% block title %}{{ product.name }} - Product Details{% endblock %}

{% block header_title %}Product Details{% endblock %}

{% block extra_head %}
<style>
    .product-image {
        width: 200px;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }
    .stock-movement-table {
        font-size: 0.9rem;
    }
    .stock-badge {
        font-size: 1rem;
    }
    .price-tag {
        font-size: 1.5rem;
        font-weight: bold;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ product.name }}</h5>
                    <div>
                        <a href="{% url 'product_list' %}" class="btn btn-sm btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Products
                        </a>
                        {% if user.role == 'admin' or user.role == 'manager' %}
                        <a href="{% url 'product_edit' product_id=product.id %}" class="btn btn-sm btn-primary">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{% url 'product_delete' product_id=product.id %}" class="btn btn-sm btn-danger">
                            <i class="fas fa-trash"></i> Delete
                        </a>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 text-center mb-4">
                            {% if product.image %}
                                <img src="{{ product.image.url }}" alt="{{ product.name }}" class="product-image mb-3">
                            {% else %}
                                <div class="product-image d-flex align-items-center justify-content-center bg-light mb-3">
                                    <i class="fas fa-image fa-3x text-muted"></i>
                                </div>
                            {% endif %}
                            
                            {% if product.is_active %}
                                <span class="badge bg-success mb-2">Active</span>
                            {% else %}
                                <span class="badge bg-danger mb-2">Inactive</span>
                            {% endif %}
                            
                            {% if product.is_low_stock %}
                                <span class="badge bg-warning text-dark mb-2">Low Stock</span>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-9">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-muted">Basic Information</h6>
                                    <table class="table table-borderless">
                                        <tr>
                                            <th style="width: 40%">Name:</th>
                                            <td>{{ product.name }}</td>
                                        </tr>
                                        <tr>
                                            <th>Category:</th>
                                            <td>{{ product.category.name|default:"Uncategorized" }}</td>
                                        </tr>
                                        <tr>
                                            <th>SKU:</th>
                                            <td>{{ product.sku|default:"--" }}</td>
                                        </tr>
                                        <tr>
                                            <th>Barcode:</th>
                                            <td>{{ product.barcode|default:"--" }}</td>
                                        </tr>
                                        <tr>
                                            <th>Description:</th>
                                            <td>{{ product.description|default:"No description provided."|linebreaks }}</td>
                                        </tr>
                                    </table>
                                </div>
                                
                                <div class="col-md-6">
                                    <h6 class="text-muted">Pricing & Stock</h6>
                                    <table class="table table-borderless">
                                        <tr>
                                            <th style="width: 40%">Price:</th>
                                            <td class="price-tag text-primary">KSh {{ product.price }}</td>
                                        </tr>
                                        <tr>
                                            <th>Cost Price:</th>
                                            <td>KSh {{ product.cost_price }}</td>
                                        </tr>
                                        <tr>
                                            <th>Profit Margin:</th>
                                            <td>{{ product.profit_margin|floatformat:2 }}%</td>
                                        </tr>
                                        <tr>
                                            <th>Current Stock:</th>
                                            <td>
                                                <span class="stock-badge {% if product.is_low_stock %}text-warning{% endif %}">
                                                    {{ product.quantity }}
                                                </span>
                                                {% if user.role == 'admin' or user.role == 'manager' %}
                                                <a href="{% url 'adjust_stock' product_id=product.id %}" class="btn btn-sm btn-outline-primary ml-2">
                                                    <i class="fas fa-plus-minus"></i> Adjust
                                                </a>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Low Stock Alert:</th>
                                            <td>When below {{ product.low_stock_threshold }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    {% if stock_movements %}
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Stock Movement History</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped stock-movement-table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>User</th>
                                    <th>Type</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Quantity</th>
                                    <th>Reason</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for movement in stock_movements %}
                                <tr>
                                    <td>{{ movement.timestamp|date:"M d, Y H:i" }}</td>
                                    <td>{% if movement.user %}{{ movement.user.get_full_name|default:movement.user.email }}{% else %}System{% endif %}</td>
                                    <td>
                                        {% if movement.adjustment_type == 'add' %}
                                            <span class="badge bg-success">Add</span>
                                        {% elif movement.adjustment_type == 'remove' %}
                                            <span class="badge bg-danger">Remove</span>
                                        {% elif movement.adjustment_type == 'set' %}
                                            <span class="badge bg-primary">Set</span>
                                        {% elif movement.adjustment_type == 'sale' %}
                                            <span class="badge bg-info">Sale</span>
                                        {% elif movement.adjustment_type == 'purchase' %}
                                            <span class="badge bg-secondary">Purchase</span>
                                        {% elif movement.adjustment_type == 'return' %}
                                            <span class="badge bg-warning text-dark">Return</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ movement.from_quantity }}</td>
                                    <td>{{ movement.to_quantity }}</td>
                                    <td>{{ movement.adjustment_quantity }}</td>
                                    <td>{{ movement.reason|default:"--" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}