{% 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:bank_account_list' %}">Bank Accounts</a></li>
                    {% if bank_account %}
                    <li class="breadcrumb-item active">Edit {{ bank_account.name }}</li>
                    {% else %}
                    <li class="breadcrumb-item active">New Bank 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="mb-3">
                            <label for="{{ form.name.id_for_label }}" class="form-label">Account Name *</label>
                            {{ form.name }}
                            {% if form.name.errors %}
                                <div class="invalid-feedback d-block">{{ form.name.errors.0 }}</div>
                            {% endif %}
                            <small class="form-text text-muted">e.g., "CIMB Current Account", "Maybank Savings"</small>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.bank_name.id_for_label }}" class="form-label">Bank Name *</label>
                                {{ form.bank_name }}
                                {% if form.bank_name.errors %}
                                    <div class="invalid-feedback d-block">{{ form.bank_name.errors.0 }}</div>
                                {% endif %}
                            </div>

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

                        <div class="mb-3">
                            <label for="{{ form.account.id_for_label }}" class="form-label">Link to Chart of Accounts *</label>
                            {{ form.account }}
                            {% if form.account.errors %}
                                <div class="invalid-feedback d-block">{{ form.account.errors.0 }}</div>
                            {% endif %}
                            <small class="form-text text-muted">Select an Asset account from your Chart of Accounts</small>
                        </div>

                        <hr class="my-4">

                        <h5 class="mb-3">Opening Balance</h5>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.opening_balance.id_for_label }}" class="form-label">Opening Balance (RM)</label>
                                {{ form.opening_balance }}
                                {% if form.opening_balance.errors %}
                                    <div class="invalid-feedback d-block">{{ form.opening_balance.errors.0 }}</div>
                                {% endif %}
                                <small class="form-text text-muted">Enter the starting balance from your bank statement</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="{{ form.opening_balance_date.id_for_label }}" class="form-label">Opening Balance Date</label>
                                {{ form.opening_balance_date }}
                                {% if form.opening_balance_date.errors %}
                                    <div class="invalid-feedback d-block">{{ form.opening_balance_date.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </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 Bank Account
                            </button>
                            <a href="{% url 'core:bank_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> Tips</h5>
                    <ul class="small">
                        <li>Each bank account must be linked to an Asset account</li>
                        <li>Opening balance should match your bank statement</li>
                        <li>Make sure the date is correct for accurate reporting</li>
                        <li>Inactive accounts won't show in transaction entry</li>
                    </ul>
                </div>
            </div>

            <div class="card bg-light mt-3">
                <div class="card-body">
                    <h5 class="card-title"><i class="bi bi-bank"></i> Popular Malaysian Banks</h5>
                    <ul class="small mb-0">
                        <li>Maybank</li>
                        <li>CIMB Bank</li>
                        <li>Public Bank</li>
                        <li>RHB Bank</li>
                        <li>Hong Leong Bank</li>
                        <li>AmBank</li>
                        <li>Bank Islam</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}