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

{% block title %}Journal Entries{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Journal Entries</h2>
            <a href="{% url 'create_journal_entry' %}" class="btn btn-success">
                <i class="bi bi-plus-circle"></i> New Entry
            </a>
        </div>
        
        <!-- Filter Form -->
        <div class="card-body bg-light">
            <form method="get" class="row g-3">
                <div class="col-md-2">
                    <label for="date_from" class="form-label">From Date</label>
                    <input type="date" class="form-control" id="date_from" name="date_from" 
                           value="{{ filter_params.date_from }}">
                </div>
                <div class="col-md-2">
                    <label for="date_to" class="form-label">To Date</label>
                    <input type="date" class="form-control" id="date_to" name="date_to" 
                           value="{{ filter_params.date_to }}">
                </div>
                <div class="col-md-3">
                    <label for="account" class="form-label">Account</label>
                    <select class="form-select" id="account" name="account">
                        <option value="">All Accounts</option>
                        {% for account in accounts %}
                        <option value="{{ account.id }}" {% if filter_params.account == account.id|stringformat:"s" %}selected{% endif %}>
                            {{ account.code }} - {{ account.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="job" class="form-label">Job</label>
                    <select class="form-select" id="job" name="job">
                        <option value="">All Jobs</option>
                        {% for job in jobs %}
                        <option value="{{ job.id }}" {% if filter_params.job == job.id|stringformat:"s" %}selected{% endif %}>
                            {{ job.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-funnel"></i> Filter
                    </button>
                    <a href="{% url 'journal_entry_list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                </div>
            </form>
        </div>
        
        <!-- Entries Table -->
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>Entry #</th>
                        <th>Description</th>
                        <th>Job</th>
                        <th class="text-end">Debit</th>
                        <th class="text-end">Credit</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in page_obj %}
                    <tr>
                        <td>{{ entry.date|date:"Y-m-d" }}</td>
                        <td>
                            <a href="{% url 'journal_entry_edit' entry.pk %}">
                                {{ entry.entry_number }}
                            </a>
                        </td>
                        <td>{{ entry.description|truncatechars:50 }}</td>
                        <td>
                            {% if entry.job %}
                            <span class="badge bg-info">{{ entry.job.name }}</span>
                            {% endif %}
                        </td>
                        <td class="text-end">{{ entry.total_debit|floatformat:2 }}</td>
                        <td class="text-end">{{ entry.total_credit|floatformat:2 }}</td>
                        <td>
                            <div >
                                {% if entry.status == 'posted' %}
                                <a href="{% url 'journal_entry_edit' entry.pk %}" Class="btn btn-sm btn-success">
                                    View
                                 </a>
                                {% else %}
                                    <a href="{% url 'journal_entry_edit' entry.pk %}" Class="btn btn-sm btn-primary">
                                        View / Edit
                                    </a>
                                {% endif %}
                                
                                <!-- <a href="{% url 'journal_entry_edit' entry.pk %}" class="btn btn-danger btn-sm">
                                   Delete
                                </a> -->
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center text-muted">No journal entries found</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-active">
                    <tr>
                        <td colspan="4"><strong>Page Totals</strong></td>
                        <td class="text-end"><strong>{{ page_obj|sum_attr:'total_debit'|floatformat:2 }}</strong></td>
                        <td class="text-end"><strong>{{ page_obj|sum_attr:'total_credit'|floatformat:2 }}</strong></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        
        <!-- Pagination -->
        {% if page_obj.paginator.num_pages > 1 %}
        <div class="card-footer">
            <nav aria-label="Journal entries pagination">
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?{% param_replace page=1 %}">
                                <i class="bi bi-chevron-double-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?{% param_replace page=page_obj.previous_page_number %}">
                                <i class="bi bi-chevron-left"></i>
                            </a>
                        </li>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?{% param_replace page=num %}">{{ num }}</a>
                            </li>
                            {% endif %}
                        {% endfor %}
                    
                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?{% param_replace page=page_obj.next_page_number %}">
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?{% param_replace page=page_obj.paginator.num_pages %}">
                                <i class="bi bi-chevron-double-right"></i>
                            </a>
                        </li>
                        {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add confirmation for deleting entries
    document.querySelectorAll('.delete-entry').forEach(button => {
        button.addEventListener('click', function(e) {
            if (!confirm('Are you sure you want to delete this journal entry?')) {
                e.preventDefault();
            }
        });
    });
});
</script>
{% endblock %}