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

{% block title %}{{ title }}{% endblock %}

{% block header_title %}{{ title }}{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ title }}</h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h6 class="text-muted">Current Stock Information</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Product Name:</label>
                                    <p>{{ product.name }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Category:</label>
                                    <p>{{ product.category.name|default:"Uncategorized" }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Current Stock Quantity:</label>
                                    <p class="fs-5 fw-bold">{{ product.quantity }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Low Stock Threshold:</label>
                                    <p>{{ product.low_stock_threshold }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="{{ form.adjustment_type.id_for_label }}" class="form-label">Adjustment Type <span class="text-danger">*</span></label>
                            {{ form.adjustment_type }}
                            {% if form.adjustment_type.errors %}
                                <div class="text-danger">
                                    {{ form.adjustment_type.errors }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="mb-3">
                            <label for="{{ form.quantity.id_for_label }}" class="form-label">Quantity <span class="text-danger">*</span></label>
                            {{ form.quantity }}
                            {% if form.quantity.errors %}
                                <div class="text-danger">
                                    {{ form.quantity.errors }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="mb-3">
                            <label for="{{ form.reason.id_for_label }}" class="form-label">Reason <span class="text-danger">*</span></label>
                            {{ form.reason }}
                            {% if form.reason.errors %}
                                <div class="text-danger">
                                    {{ form.reason.errors }}
                                </div>
                            {% endif %}
                            {% if form.reason.help_text %}
                                <div class="form-text">
                                    {{ form.reason.help_text }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mt-3">
                            <a href="{% url 'product_detail' product_id=product.id %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Product Details
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Apply Adjustment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Add any JavaScript needed for the stock adjustment form
        const adjustmentType = document.getElementById('{{ form.adjustment_type.id_for_label }}');
        const quantityInput = document.getElementById('{{ form.quantity.id_for_label }}');
        
        adjustmentType.addEventListener('change', function() {
            // You could add special handling based on adjustment type here
            if (this.value === 'set') {
                quantityInput.placeholder = 'Enter new stock level';
            } else if (this.value === 'add') {
                quantityInput.placeholder = 'Enter quantity to add';
            } else if (this.value === 'remove') {
                quantityInput.placeholder = 'Enter quantity to remove';
            }
        });
        
        // Trigger the change event to set initial placeholder
        adjustmentType.dispatchEvent(new Event('change'));
    });
</script>
{% endblock %}