{% extends 'base.html' %}

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

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-12">
            <h2>{{ title }}</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 'core:account_list' %}">Chart of Accounts</a></li>
                    {% if account %}
                    <li class="breadcrumb-item active">Edit {{ account.code }}</li>
                    {% else %}
                    <li class="breadcrumb-item active">New Account</li>
                    {% endif %}
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <form method="post" novalidate>
                        {% csrf_token %}
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.code.id_for_label }}" class="form-label">Account Code *</label>
                                {{ form.code }}
                                {% if form.code.errors %}
                                    <div class="invalid-feedback d-block">{{ form.code.errors.0 }}</div>
                                {% endif %}
                                <small class="form-text text-muted">e.g., 1000, 4000, 5000</small>
                            </div>

                            <div class="col-md-8 mb-3">
                                <label for="{{ form.account_type.id_for_label }}" class="form-label">Account Type *</label>
                                {{ form.account_type }}
                                {% if form.account_type.errors %}
                                    <div class="invalid-feedback d-block">{{ form.account_type.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.name.id_for_label }}" class="form-label">Account Name (English) *</label>
                            {{ form.name }}
                            {% if form.name.errors %}
                                <div class="invalid-feedback d-block">{{ form.name.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.name_bm.id_for_label }}" class="form-label">Nama Akaun (Bahasa Malaysia)</label>
                            {{ form.name_bm }}
                            {% if form.name_bm.errors %}
                                <div class="invalid-feedback d-block">{{ form.name_bm.errors.0 }}</div>
                            {% endif %}
                        </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="invalid-feedback d-block">{{ form.description.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3 form-check">
                            {{ form.is_active }}
                            <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                Active
                            </label>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg"></i> Save Account
                            </button>
                            <a href="{% url 'core:account_list' %}" class="btn btn-secondary">
                                <i class="bi bi-x-lg"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body">
                    <h5 class="card-title"><i class="bi bi-info-circle"></i> Account Code Guide</h5>
                    <ul class="small mb-0">
                        <li><strong>1xxx</strong> - Asset accounts</li>
                        <li><strong>2xxx</strong> - Liability accounts</li>
                        <li><strong>3xxx</strong> - Equity accounts</li>
                        <li><strong>4xxx</strong> - Income accounts</li>
                        <li><strong>5xxx</strong> - Expense accounts</li>
                    </ul>
                    <hr>
                    <p class="small mb-0"><strong>Examples:</strong></p>
                    <ul class="small mb-0">
                        <li>1000 - Cash</li>
                        <li>1100 - Bank Account</li>
                        <li>4000 - Sales Revenue</li>
                        <li>5000 - Office Supplies</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}