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

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{% url 'accounting_dashboard' %}">{% trans "Accounting" %}</a></li>
                    <li class="breadcrumb-item active">{% trans "Journal Entries" %}</li>
                </ol>
            </nav>
            <h2 class="mb-0">{% trans "Journal Entries" %}</h2>
        </div>
        <a href="{% url 'manual_journal_entry' %}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> {% trans "New Manual Entry" %}
        </a>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">{% trans "Date" %}</th>
                            <th>{% trans "Ref #" %}</th>
                            <th>{% trans "Description" %}</th>
                            <th class="text-end">{% trans "Debit" %}</th>
                            <th class="text-end">{% trans "Credit" %}</th>
                            <th class="text-end pe-4">{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in entries %}
                        <tr>
                            <td class="ps-4 text-nowrap">{{ entry.date }}</td>
                            <td>
                                {% if entry.reference %}
                                <span class="badge bg-light text-dark border">{{ entry.reference }}</span>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>{{ entry.description|truncatechars:60 }}</td>
                            <td class="text-end fw-bold text-success">{{ entry.total_debit|floatformat:global_settings.decimal_places }}</td>
                            <td class="text-end fw-bold text-danger">{{ entry.total_credit|floatformat:global_settings.decimal_places }}</td>
                            <td class="text-end pe-4">
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#entry-details-{{ entry.id }}" aria-expanded="false">
                                    <i class="bi bi-eye"></i> {% trans "View" %}
                                </button>
                            </td>
                        </tr>
                        <!-- Details Row -->
                        <tr class="collapse bg-light" id="entry-details-{{ entry.id }}">
                            <td colspan="6" class="p-0">
                                <div class="p-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h6 class="mb-0 text-muted small text-uppercase fw-bold">{% trans "Transaction Details" %} #{{ entry.id }}</h6>
                                        <small class="text-muted">{% trans "Created" %}: {{ entry.created_at|date:"Y-m-d H:i" }}</small>
                                    </div>
                                    <table class="table table-sm table-bordered bg-white mb-0">
                                        <thead>
                                            <tr>
                                                <th>{% trans "Account" %}</th>
                                                <th class="text-end" style="width: 150px;">{% trans "Debit" %}</th>
                                                <th class="text-end" style="width: 150px;">{% trans "Credit" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for item in entry.items.all %}
                                            <tr>
                                                <td>
                                                    <span class="fw-medium">{{ item.account.code }}</span> - 
                                                    {% if LANGUAGE_CODE == 'ar' %}{{ item.account.name_ar }}{% else %}{{ item.account.name_en }}{% endif %}
                                                </td>
                                                <td class="text-end text-success">
                                                    {% if item.type == 'debit' %}{{ item.amount|floatformat:global_settings.decimal_places }}{% endif %}
                                                </td>
                                                <td class="text-end text-danger">
                                                    {% if item.type == 'credit' %}{{ item.amount|floatformat:global_settings.decimal_places }}{% endif %}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                {% trans "No journal entries found." %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}