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

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

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

{% block extra_head %}
<style>
    .product-image-preview {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 5px;
        border: 1px solid #dee2e6;
    }
    .image-placeholder {
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
        border-radius: 5px;
        border: 1px dashed #ced4da;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ title }}</h5>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="{{ form.name.id_for_label }}" class="form-label">Product Name <span class="text-danger">*</span></label>
                                    {{ form.name }}
                                    {% if form.name.errors %}
                                        <div class="text-danger">
                                            {{ form.name.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.category.id_for_label }}" class="form-label">Category</label>
                                            {{ form.category }}
                                            {% if form.category.errors %}
                                                <div class="text-danger">
                                                    {{ form.category.errors }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.price.id_for_label }}" class="form-label">Price (KSh) <span class="text-danger">*</span></label>
                                            {{ form.price }}
                                            {% if form.price.errors %}
                                                <div class="text-danger">
                                                    {{ form.price.errors }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.barcode.id_for_label }}" class="form-label">Barcode</label>
                                            {{ form.barcode }}
                                            {% if form.barcode.errors %}
                                                <div class="text-danger">
                                                    {{ form.barcode.errors }}
                                                </div>
                                            {% endif %}
                                            <div class="form-text">
                                                Optional barcode for scanning.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.quantity.id_for_label }}" class="form-label">Stock Quantity <span class="text-danger">*</span></label>
                                            {{ form.quantity }}
                                            {% if form.quantity.errors %}
                                                <div class="text-danger">
                                                    {{ form.quantity.errors }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.low_stock_threshold.id_for_label }}" class="form-label">Low Stock Threshold</label>
                                            {{ form.low_stock_threshold }}
                                            {% if form.low_stock_threshold.errors %}
                                                <div class="text-danger">
                                                    {{ form.low_stock_threshold.errors }}
                                                </div>
                                            {% endif %}
                                            <div class="form-text">
                                                Alert when stock falls below this level.
                                            </div>
                                        </div>
                                    </div>
                                    {% if user.role == 'admin' %}
                                    <div class="col-md-6">
                                        <div class="mb-3 mt-4">
                                            <div class="form-check">
                                                {{ form.is_active }}
                                                <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                                    Active
                                                </label>
                                            </div>
                                            {% if form.is_active.errors %}
                                                <div class="text-danger">
                                                    {{ form.is_active.errors }}
                                                </div>
                                            {% endif %}
                                            <div class="form-text">
                                                Inactive products won't appear in sales screens.
                                            </div>
                                        </div>
                                    </div>
                                    {% else %}
                                        {{ form.is_active.as_hidden }}
                                    {% endif %}
                                </div>
                                
                                {% if user.role == 'admin' %}
                                <div class="mb-3">
                                    <label for="{{ form.branch.id_for_label }}" class="form-label">Branch</label>
                                    {{ form.branch }}
                                    {% if form.branch.errors %}
                                        <div class="text-danger">
                                            {{ form.branch.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                                {% else %}
                                    {{ form.branch.as_hidden }}
                                {% endif %}
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.image.id_for_label }}" class="form-label">Product Image</label>
                                    <div class="mb-2">
                                        {% if form.instance.image %}
                                            <img src="{{ form.instance.image.url }}" alt="{{ form.instance.name }}" class="product-image-preview" id="imagePreview">
                                        {% else %}
                                            <div class="image-placeholder" id="imagePlaceholder">
                                                <i class="fas fa-camera fa-2x text-muted"></i>
                                            </div>
                                            <img src="" alt="Preview" class="product-image-preview d-none" id="imagePreview">
                                        {% endif %}
                                    </div>
                                    {{ form.image }}
                                    {% if form.image.errors %}
                                        <div class="text-danger">
                                            {{ form.image.errors }}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        Recommended: Square image, 500x500px or larger.
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
                                    {{ form.description }}
                                    {% if form.description.errors %}
                                        <div class="text-danger">
                                            {{ form.description.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="mt-3">
                            <a href="{% url 'product_list' %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to List
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Save Product
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const imageInput = document.getElementById('{{ form.image.id_for_label }}');
        const imagePreview = document.getElementById('imagePreview');
        const imagePlaceholder = document.getElementById('imagePlaceholder');
        
        imageInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    imagePreview.setAttribute('src', e.target.result);
                    imagePreview.classList.remove('d-none');
                    if (imagePlaceholder) {
                        imagePlaceholder.classList.add('d-none');
                    }
                }
                
                reader.readAsDataURL(this.files[0]);
            }
        });
    });
</script>
{% endblock %}
{% endblock %}