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

{% block title %}{{ warehouse.name }} - Manufacturing App{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- Header -->
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <div>
            <h1 class="h2">{{ warehouse.name }}</h1>
            <p class="text-muted">{{ warehouse.location }}</p>
        </div>
        <div class="btn-toolbar mb-2 mb-md-0">
            <a href="{% url 'inventory:edit_warehouse' warehouse.id %}" class="btn btn-sm btn-outline-primary">
                <i class="fas fa-edit"></i> Edit Warehouse
            </a>
            <a href="{% url 'inventory:delete_warehouse' warehouse.id %}" class="btn btn-sm btn-outline-danger ms-2">
                <i class="fas fa-trash"></i> Delete
            </a>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

    <!-- Warehouse Info Cards -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Warehouse Status</h5>
                    <div class="d-flex align-items-center">
                        {% if warehouse.is_active %}
                            <span class="badge bg-success me-2">Active</span>
                        {% else %}
                            <span class="badge bg-secondary me-2">Inactive</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Total Products</h5>
                    <h3 class="text-primary">{{ total_products|indonesian_number:0 }}</h3>
                    <p class="text-muted">Different product types</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Total Value</h5>
                    <h3 class="text-success">{{ total_value|format_rupiah }}</h3>
                    <p class="text-muted">Based on cost price</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Inventory Details -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Current Inventory</h5>
        </div>
        <div class="card-body">
            {% if inventory_items %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Product Code</th>
                                <th>Product Name</th>
                                <th>Category</th>
                                <th>Quantity</th>
                                <th>Unit</th>
                                <th>Cost Price</th>
                                <th>Total Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in inventory_items %}
                            <tr>
                                <td><code>{{ item.product.code }}</code></td>
                                <td>
                                    <strong>{{ item.product.name }}</strong>
                                </td>
                                <td>{{ item.product.category.name }}</td>
                                <td>{{ item.quantity|indonesian_number:0 }}</td>
                                <td>{{ item.product.unit_of_measure.abbreviation }}</td>
                                <td>{{ item.product.cost_price|format_rupiah }}</td>
                                <td class="text-end">{{ item.total_value|format_rupiah }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center text-muted py-4">
                    <i class="fas fa-box-open fa-3x mb-3"></i>
                    <p>No products currently stored in this warehouse.</p>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Navigation -->
    <div class="mt-4">
        <a href="{% url 'inventory:warehouse_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Warehouse List
        </a>
    </div>
</div>
{% endblock %}