{% extends "base.html" %}

{% block title %}{{ shop.name }} Inventory - Ghana Wholesale Management{% endblock %}

{% block page_title %}{{ shop.name }} - Inventory{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'shop_list' %}">Shops</a></li>
    <li class="breadcrumb-item"><a href="{% url 'shop_detail' shop.pk %}">{{ shop.name }}</a></li>
    <li class="breadcrumb-item active">Inventory</li>
{% endblock %}

{% block page_actions %}
    <div class="btn-group">
        <a href="{% url 'shop_detail' shop.pk %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to Shop
        </a>
        <a href="{% url 'transfer_create' %}?from_shop={{ shop.id }}" class="btn btn-outline-primary">
            <i class="bi bi-truck"></i> Create Transfer
        </a>
    </div>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <!-- Summary Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-primary border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                            Products in Stock
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ inventory.count }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-box-seam stat-icon text-primary"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-success border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-success text-uppercase mb-1">
                            Available Units
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">
                            {% with total=inventory|length %}
                                {{ inventory|length|default:0 }}
                            {% endwith %}
                        </div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-check-circle stat-icon text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-warning border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                            Low Stock Items
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">
                            {% with low_stock_count=inventory|length %}
                                {% if low_stock_filter %}
                                {{ inventory|length }}
                                {% else %}
                                {{ inventory|length|default:0 }}
                                {% endif %}
                            {% endwith %}
                        </div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-exclamation-triangle stat-icon text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-info border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-info text-uppercase mb-1">
                            Total Value
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">
                            GH₵
                            {% with total_value=0 %}
                                {% for item in inventory %}
                                    {% with item_value=item.quantity|default:0|add:item.product.cost_price|default:0 %}
                                        {{ item_value|floatformat:2 }}
                                    {% endwith %}
                                {% empty %}
                                    0.00
                                {% endfor %}
                            {% endwith %}
                        </div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-currency-exchange stat-icon text-info"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col-md-8">
                <form method="get" class="row g-2">
                    <div class="col-md-5">
                        <div class="input-group">
                            <input type="text" name="q" class="form-control" placeholder="Search products..." value="{{ search_query }}">
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <select name="category" class="form-select" onchange="this.form.submit()">
                            <option value="">All Categories</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" {% if category.id|stringformat:"s" == selected_category %}selected{% endif %}>
                                {{ category.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <div class="form-check form-switch mt-1">
                            <input class="form-check-input" type="checkbox" name="low_stock" id="lowStockFilter" 
                                   {% if low_stock_filter %}checked{% endif %} onchange="this.form.submit()">
                            <label class="form-check-label" for="lowStockFilter">
                                Low Stock Only
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-4 text-end">
                <small class="text-muted">
                    <i class="bi bi-info-circle"></i> Showing {{ inventory|length }} items
                </small>
            </div>
        </div>
    </div>
    <div class="card-body">
        {% if inventory %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>SKU</th>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Quantity</th>
                        <th>Available</th>
                        <th>Reorder Point</th>
                        <th>Cost Price</th>
                        <th>Selling Price</th>
                        <th>Stock Value</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in inventory %}
                    <tr class="{% if item.available == 0 %}table-danger{% elif item.is_low_stock %}table-warning{% endif %}">
                        <td>
                            <strong>{{ item.product.sku }}</strong>
                            {% if item.product.barcode %}
                            <br><small class="text-muted">{{ item.product.barcode }}</small>
                            {% endif %}
                        </td>
                        <td>
                            <strong>{{ item.product.name }}</strong>
                            <br>
                            <small class="text-muted">{{ item.product.description|truncatechars:30 }}</small>
                        </td>
                        <td>{{ item.product.category.name|default:"-" }}</td>
                        <td>{{ item.quantity }}</td>
                        <td>
                            <span class="badge bg-{% if item.available == 0 %}danger{% elif item.is_low_stock %}warning{% else %}success{% endif %}">
                                {{ item.available }}
                            </span>
                        </td>
                        <td>{{ item.reorder_point }}</td>
                        <td>GH₵{{ item.product.cost_price|floatformat:2 }}</td>
                        <td>
                            {% if item.selling_price %}
                            GH₵{{ item.selling_price|floatformat:2 }}
                            {% else %}
                            GH₵{{ item.product.selling_price|floatformat:2 }}
                            {% endif %}
                        </td>
                        <td>GH₵{{ item.stock_value|floatformat:2 }}</td>
                        <td>
                            {% if item.available == 0 %}
                            <span class="badge bg-danger">Out of Stock</span>
                            {% elif item.is_low_stock %}
                            <span class="badge bg-warning">Low Stock</span>
                            {% else %}
                            <span class="badge bg-success">In Stock</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary" 
                                        onclick="transferProduct({{ item.product.id }}, '{{ item.product.name }}', {{ item.available }})"
                                        {% if item.available == 0 %}disabled{% endif %}>
                                    <i class="bi bi-truck"></i>
                                </button>
                                <a href="{% url 'product_detail' item.product.pk %}" class="btn btn-outline-info">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Summary Row -->
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="alert alert-light">
                    <h6><i class="bi bi-info-circle"></i> Inventory Summary</h6>
                    <small class="mb-0">
                        Total Items: <strong>{{ inventory|length }}</strong><br>
                        In Stock: <strong>{{ inventory|length }}</strong><br>
                        Low Stock: <strong>{{ inventory|length }}</strong><br>
                        Out of Stock: <strong>0</strong>
                    </small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="alert alert-light">
                    <h6><i class="bi bi-currency-exchange"></i> Value Summary</h6>
                    <small class="mb-0">
                        Total Cost Value: <strong>GH₵
                            {% with total_cost=0 %}
                                {% for item in inventory %}
                                    {% with item_cost=item.quantity|default:0|add:item.product.cost_price|default:0 %}
                                        {{ item_cost|floatformat:2 }}
                                    {% endwith %}
                                {% empty %}
                                    0.00
                                {% endfor %}
                            {% endwith %}
                        </strong><br>
                        Total Selling Value: <strong>GH₵
                            {% with total_sell=0 %}
                                {% for item in inventory %}
                                    {% with sell_price=item.selling_price|default:item.product.selling_price|default:0 %}
                                        {% with item_sell=item.quantity|default:0|add:sell_price %}
                                            {{ item_sell|floatformat:2 }}
                                        {% endwith %}
                                    {% endwith %}
                                {% empty %}
                                    0.00
                                {% endfor %}
                            {% endwith %}
                        </strong>
                    </small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="alert alert-light">
                    <h6><i class="bi bi-shop"></i> Shop Information</h6>
                    <small class="mb-0">
                        Shop: <strong>{{ shop.name }}</strong><br>
                        Type: <strong>{{ shop.get_shop_type_display }}</strong><br>
                        Location: <strong>{{ shop.city }}</strong><br>
                        Manager: <strong>{{ shop.manager.get_full_name|default:"Not assigned" }}</strong>
                    </small>
                </div>
            </div>
        </div>
        
        {% else %}
        <div class="text-center py-5">
            {% if search_query or selected_category or low_stock_filter %}
            <i class="bi bi-search text-muted fs-1"></i>
            <h5 class="mt-3">No inventory items found</h5>
            <p class="text-muted">Try adjusting your search or filters</p>
            <a href="{% url 'shop_inventory' shop.pk %}" class="btn btn-outline-secondary">
                Clear Filters
            </a>
            {% else %}
            <i class="bi bi-inbox text-muted fs-1"></i>
            <h5 class="mt-3">No inventory found for this shop</h5>
            <p class="text-muted">This shop has no inventory items yet.</p>
            <div class="mt-3">
                <a href="{% url 'transfer_create' %}?to_shop={{ shop.id }}" class="btn btn-primary">
                    <i class="bi bi-truck"></i> Transfer Stock Here
                </a>
                <a href="{% url 'product_list' %}" class="btn btn-outline-primary">
                    <i class="bi bi-plus-circle"></i> Add Products
                </a>
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>
    <div class="card-footer">
        <div class="row">
            <div class="col-md-6">
                <small class="text-muted">
                    <i class="bi bi-clock"></i> Last updated: {{ shop.updated_at|date:"d M Y, g:i A" }}
                </small>
            </div>
            <div class="col-md-6 text-end">
                <button class="btn btn-sm btn-outline-success" onclick="window.print()">
                    <i class="bi bi-printer"></i> Print Inventory
                </button>
                <a href="{% url 'shop_detail' shop.pk %}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Shop
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Transfer Modal -->
<div class="modal fade" id="transferModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Transfer Product</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="transferForm">
                    <div class="mb-3">
                        <label class="form-label">Product</label>
                        <input type="text" id="transferProductName" class="form-control" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Available Quantity</label>
                        <input type="text" id="transferAvailable" class="form-control" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="transferQuantity" class="form-label">Quantity to Transfer</label>
                        <input type="number" id="transferQuantity" class="form-control" min="1" value="1">
                    </div>
                    <div class="mb-3">
                        <label for="transferToShop" class="form-label">Transfer To Shop</label>
                        <select id="transferToShop" class="form-select">
                            <option value="">Select destination shop</option>
                            <!-- This will be populated by JavaScript -->
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitTransfer()">Create Transfer</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let currentProductId = null;
    let currentMaxQuantity = 0;
    
    function transferProduct(productId, productName, availableQuantity) {
        currentProductId = productId;
        currentMaxQuantity = availableQuantity;
        
        // Set modal values
        document.getElementById('transferProductName').value = productName;
        document.getElementById('transferAvailable').value = availableQuantity;
        document.getElementById('transferQuantity').value = 1;
        document.getElementById('transferQuantity').max = availableQuantity;
        
        // Load shops for destination
        loadDestinationShops();
        
        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('transferModal'));
        modal.show();
    }
    
    function loadDestinationShops() {
        const shopSelect = document.getElementById('transferToShop');
        shopSelect.innerHTML = '<option value="">Loading shops...</option>';
        
        // In a real app, you would fetch shops via AJAX
        // For now, we'll use a simple approach
        fetch('/shops/api/shops/')
            .then(response => response.json())
            .then(data => {
                shopSelect.innerHTML = '<option value="">Select destination shop</option>';
                data.shops.forEach(shop => {
                    if (shop.id != {{ shop.id }}) {
                        const option = document.createElement('option');
                        option.value = shop.id;
                        option.textContent = shop.name + ' (' + shop.code + ')';
                        shopSelect.appendChild(option);
                    }
                });
            })
            .catch(error => {
                console.error('Error loading shops:', error);
                shopSelect.innerHTML = '<option value="">Error loading shops</option>';
            });
    }
    
    function submitTransfer() {
        const quantity = parseInt(document.getElementById('transferQuantity').value);
        const toShopId = document.getElementById('transferToShop').value;
        
        if (!toShopId) {
            alert('Please select a destination shop');
            return;
        }
        
        if (quantity < 1 || quantity > currentMaxQuantity) {
            alert('Please enter a valid quantity (1-' + currentMaxQuantity + ')');
            return;
        }
        
        // Create transfer (in a real app, this would be an AJAX call)
        alert('Transfer created: ' + quantity + ' units to shop ' + toShopId);
        
        // Close modal
        const modal = bootstrap.Modal.getInstance(document.getElementById('transferModal'));
        modal.hide();
        
        // Redirect to transfer create page with pre-filled data
        window.location.href = '{% url "transfer_create" %}?from_shop={{ shop.id }}&to_shop=' + toShopId + '&product=' + currentProductId + '&quantity=' + quantity;
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        // Quantity validation
        const quantityInput = document.getElementById('transferQuantity');
        if (quantityInput) {
            quantityInput.addEventListener('change', function() {
                if (this.value < 1) this.value = 1;
                if (this.value > currentMaxQuantity) this.value = currentMaxQuantity;
            });
        }
        
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // Auto-submit category select
        const categorySelect = document.querySelector('select[name="category"]');
        if (categorySelect) {
            categorySelect.addEventListener('change', function() {
                this.form.submit();
            });
        }
    });
</script>

<style>
    @media print {
        .sidebar, .navbar-custom, .page-actions, .card-header form, .btn-group, .card-footer {
            display: none !important;
        }
        .main-content {
            margin-left: 0 !important;
            padding: 0 !important;
        }
        .card {
            border: none !important;
            box-shadow: none !important;
        }
        .table {
            font-size: 12px;
        }
        h1, h2, h3, h4, h5, h6 {
            color: #000 !important;
        }
    }
    
    .stat-card {
        transition: transform 0.2s;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }
</style>
{% endblock %}