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

{% block title %}{{ form.instance.pk|yesno:"Edit,New" }} Category - POS{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2>
                        <i class="fas fa-tags me-2"></i>
                        {% if form.instance.pk %}
                            Edit Category: {{ form.instance.name }}
                        {% else %}
                            New Category
                        {% endif %}
                    </h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{% url 'pos:dashboard' %}">POS</a></li>
                            <li class="breadcrumb-item"><a href="{% url 'pos:category_list' %}">Categories</a></li>
                            <li class="breadcrumb-item active">{{ form.instance.pk|yesno:"Edit,New" }}</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{% url 'pos:category_list' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="row">
        <div class="col-lg-8 col-xl-6">
            <div class="card shadow-sm">
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <!-- Error Messages -->
                        {% if form.errors %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Please correct the errors below:</h6>
                            <ul class="mb-0">
                                {% for field in form %}
                                    {% for error in field.errors %}
                                        <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                                    {% endfor %}
                                {% endfor %}
                                {% for error in form.non_field_errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        {% endif %}

                        <!-- Category Information -->
                        <div class="card mb-3">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Category Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="{{ form.name.id_for_label }}" class="form-label">
                                        Category Name (English) <span class="text-danger">*</span>
                                    </label>
                                    {{ form.name }}
                                    <small class="form-text text-muted">e.g., Electronics, Food & Beverage, Services</small>
                                </div>

                                <div class="mb-3">
                                    <label for="{{ form.name_bm.id_for_label }}" class="form-label">
                                        Nama Kategori (Bahasa Malaysia)
                                    </label>
                                    {{ form.name_bm }}
                                    <small class="form-text text-muted">Opsional: Contoh - Elektronik, Makanan & Minuman, Perkhidmatan</small>
                                </div>

                                <div class="mb-3">
                                    <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
                                    {{ form.description }}
                                    <small class="form-text text-muted">Brief description of this category</small>
                                </div>
                            </div>
                        </div>

                        <!-- Accounting Settings -->
                        <div class="card mb-3">
                            <div class="card-header bg-info text-white">
                                <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>Accounting Settings</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="{{ form.default_income_account.id_for_label }}" class="form-label">
                                        Default Income Account
                                    </label>
                                    {{ form.default_income_account }}
                                    <small class="form-text text-muted">
                                        Products in this category will use this income account by default
                                    </small>
                                </div>

                                <div class="alert alert-info mb-0">
                                    <i class="fas fa-lightbulb me-2"></i>
                                    <strong>Tip:</strong> Setting a default income account helps streamline accounting. 
                                    Products can still override this setting individually.
                                </div>
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="form-check">
                                    {{ form.is_active }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        <strong>Active Category</strong>
                                    </label>
                                    <small class="form-text text-muted d-block">
                                        Inactive categories won't appear in product selection
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Info Box -->
                        {% if form.instance.pk %}
                        <div class="alert alert-light border">
                            <div class="row">
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        <i class="fas fa-box me-1"></i>
                                        <strong>Total Products:</strong> {{ form.instance.get_product_count }}
                                    </small>
                                </div>
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        <i class="fas fa-calendar me-1"></i>
                                        <strong>Created:</strong> {{ form.instance.created_at|date:"d M Y" }}
                                    </small>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'pos:category_list' %}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>
                                {% if form.instance.pk %}Update{% else %}Create{% endif %} Category
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}