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

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-cube"></i> {{ product.name }}</h2>
    <div>
        <a href="{% url 'product_update' product.pk %}" class="btn btn-warning">
            <i class="fas fa-edit"></i> Edit Product
        </a>
        <a href="{% url 'product_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to List
        </a>
    </div>
</div>

<div class="row">
    <!-- Product Information -->
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle"></i> Product Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <th width="40%">SKU:</th>
                                <td><strong>{{ product.sku }}</strong></td>
                            </tr>
                            <tr>
                                <th>Barcode:</th>
                                <td>{{ product.barcode|default:"Not set" }}</td>
                            </tr>
                            <tr>
                                <th>Name:</th>
                                <td>{{ product.name }}</td>
                            </tr>
                            <tr>
                                <th>Category:</th>
                                <td>
                                    {% if product.category %}
                                    <span class="badge bg-info">{{ product.category.name }}</span>
                                    {% else %}
                                    <span class="text-muted">Not assigned</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Supplier:</th>
                                <td>
                                    {% if product.supplier %}
                                    {{ product.supplier.name }}
                                    {% else %}
                                    <span class="text-muted">Not assigned</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Unit:</th>
                                <td>{{ product.get_unit_display }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <th width="40%">Cost Price:</th>
                                <td class="text-danger">GH₵ {{ product.cost_price|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <th>Selling Price:</th>
                                <td class="text-success">GH₵ {{ product.selling_price|floatformat:2 }}</td>
                            </tr>
                            <tr>
                                <th>Wholesale Price:</th>
                                <td>
                                    {% if product.wholesale_price %}
                                    GH₵ {{ product.wholesale_price|floatformat:2 }}
                                    {% else %}
                                    <span class="text-muted">Not set</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Margin:</th>
                                <td>
                                    <span class="badge bg-{% if product.margin_percentage > 0 %}success{% else %}danger{% endif %}">
                                        {{ product.margin_percentage|floatformat:1 }}%
                                    </span>
                                    (GH₵ {{ product.margin_amount|floatformat:2 }})
                                </td>
                            </tr>
                            <tr>
                                <th>Reorder Level:</th>
                                <td>{{ product.reorder_level }}</td>
                            </tr>
                            <tr>
                                <th>Reorder Quantity:</th>
                                <td>{{ product.reorder_quantity }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                {% if product.description %}
                <div class="mt-3">
                    <h6>Description:</h6>
                    <p class="mb-0">{{ product.description|linebreaks }}</p>
                </div>
                {% endif %}
                
                <div class="mt-3">
                    <span class="badge bg-{% if product.is_active %}success{% else %}secondary{% endif %}">
                        {% if product.is_active %}Active{% else %}Inactive{% endif %}
                    </span>
                    <small class="text-muted ms-2">
                        Created: {{ product.created_at|date:"d M Y" }} | 
                        Updated: {{ product.updated_at|date:"d M Y" }}
                    </small>
                </div>
            </div>
        </div>

        <!-- Stock Information -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-warehouse"></i> Stock Information</h5>
            </div>
            <div class="card-body">
                <div class="row text-center mb-4">
                    <div class="col-md-4">
                        <div class="display-4 fw-bold text-{% if product.warehouse_stock == 0 %}danger{% elif product.is_low_stock %}warning{% else %}success{% endif %}">
                            {{ product.warehouse_stock }}
                        </div>
                        <small class="text-muted">Warehouse Stock</small>
                        {% if product.is_low_stock %}
                        <br><span class="badge bg-warning mt-1">Low Stock</span>
                        {% endif %}
                    </div>
                    <div class="col-md-4">
                        <div class="display-4 fw-bold">{{ product.reorder_level }}</div>
                        <small class="text-muted">Reorder Level</small>
                    </div>
                    <div class="col-md-4">
                        <div class="display-4 fw-bold">{{ product.reorder_quantity }}</div>
                        <small class="text-muted">Reorder Quantity</small>
                    </div>
                </div>
                
                {% if warehouse %}
                <div class="text-center">
                    <a href="{% url 'simple_transfer' %}?product_id={{ product.id }}" class="btn btn-primary">
                        <i class="fas fa-truck"></i> Transfer Stock
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Shop Stocks -->
        {% if shop_stocks %}
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-store"></i> Shop Stocks</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Shop</th>
                                <th>Type</th>
                                <th class="text-end">Quantity</th>
                                <th class="text-end">Available</th>
                                <th class="text-end">Selling Price</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stock in shop_stocks %}
                            <tr>
                                <td>
                                    <strong>{{ stock.shop.name }}</strong>
                                    <br><small class="text-muted">{{ stock.shop.code }}</small>
                                </td>
                                <td>{{ stock.shop.get_shop_type_display }}</td>
                                <td class="text-end">{{ stock.quantity }}</td>
                                <td class="text-end">
                                    <span class="badge bg-{% if stock.available == 0 %}danger{% elif stock.is_low_stock %}warning{% else %}success{% endif %}">
                                        {{ stock.available }}
                                    </span>
                                </td>
                                <td class="text-end text-success">GH₵ {{ stock.effective_price|floatformat:2 }}</td>
                                <td>
                                    {% if stock.is_low_stock %}
                                    <span class="badge bg-warning">Low Stock</span>
                                    {% else %}
                                    <span class="badge bg-success">OK</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Sidebar -->
    <div class="col-md-4">
        <!-- Quick Actions -->
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0"><i class="fas fa-bolt"></i> Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'simple_transfer' %}?product_id={{ product.id }}" class="btn btn-primary">
                        <i class="fas fa-truck"></i> Transfer Stock
                    </a>
                    <a href="{% url 'product_update' product.pk %}" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Edit Product
                    </a>
                    <a href="{% url 'barcode_scan' %}" class="btn btn-success">
                        <i class="fas fa-barcode"></i> Scan Barcode
                    </a>
                    {% if product.barcode %}
                    <div class="mt-3 text-center">
                        <h6>Barcode:</h6>
                        <div class="barcode-display">{{ product.barcode }}</div>
                        <small class="text-muted">Use this for scanning</small>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Warehouse Stock -->
        {% if warehouse_stock %}
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-warehouse"></i> Warehouse Stock</h5>
            </div>
            <div class="card-body">
                <div class="text-center mb-3">
                    <div class="display-1 fw-bold text-{% if warehouse_stock.available == 0 %}danger{% elif warehouse_stock.is_low_stock %}warning{% else %}success{% endif %}">
                        {{ warehouse_stock.available }}
                    </div>
                    <small class="text-muted">Available Units</small>
                </div>
                
                <table class="table table-sm">
                    <tr>
                        <th>Total Quantity:</th>
                        <td class="text-end">{{ warehouse_stock.quantity }}</td>
                    </tr>
                    <tr>
                        <th>Committed:</th>
                        <td class="text-end">{{ warehouse_stock.committed }}</td>
                    </tr>
                    <tr>
                        <th>Available:</th>
                        <td class="text-end fw-bold">{{ warehouse_stock.available }}</td>
                    </tr>
                    <tr>
                        <th>Reorder Point:</th>
                        <td class="text-end">{{ warehouse_stock.reorder_point }}</td>
                    </tr>
                    <tr>
                        <th>Min Stock:</th>
                        <td class="text-end">{{ warehouse_stock.min_stock }}</td>
                    </tr>
                    <tr>
                        <th>Max Stock:</th>
                        <td class="text-end">{{ warehouse_stock.max_stock }}</td>
                    </tr>
                    <tr>
                        <th>Stock Value:</th>
                        <td class="text-end text-success">GH₵ {{ warehouse_stock.stock_value|floatformat:2 }}</td>
                    </tr>
                </table>
                
                {% if warehouse_stock.is_low_stock %}
                <div class="alert alert-warning mt-3">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Low Stock Alert!</strong> Reorder point reached.
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Recent Movements -->
        {% if movements %}
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-history"></i> Recent Stock Movements</h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    {% for movement in movements %}
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>{{ movement.get_movement_type_display }}</strong>
                                <br>
                                <small class="text-muted">{{ movement.created_at|date:"d M, H:i" }}</small>
                            </div>
                            <div class="text-{% if movement.quantity > 0 %}success{% else %}danger{% endif %} fw-bold">
                                {% if movement.quantity > 0 %}+{% endif %}{{ movement.quantity }}
                            </div>
                        </div>
                        {% if movement.notes %}
                        <small class="text-muted">{{ movement.notes|truncatechars:50 }}</small>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                <div class="text-center mt-3">
                    <a href="#" class="btn btn-sm btn-outline-secondary">View All Movements</a>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.barcode-display {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}
</style>
{% endblock %}