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

{% block title %}{% trans "Expense Categories" %} | {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1">{% trans "Expense Categories" %}</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'index' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'expenses' %}">{% trans "Expenses" %}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% trans "Categories" %}</li>
                </ol>
            </nav>
        </div>
        <button class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
            <i class="bi bi-plus-lg me-2"></i>{% trans "Add Category" %}
        </button>
    </div>

    {% if messages %}
    <div class="mb-4">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-3" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="card border-0 shadow-sm rounded-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">{% trans "Category Name" %}</th>
                        <th>{% trans "Description" %}</th>
                        <th>{% trans "Expenses Count" %}</th>
                        <th class="text-end pe-4">{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for category in categories %}
                    <tr>
                        <td class="ps-4">
                            <div class="fw-bold">{{ category.name_en }}</div>
                            <div class="text-muted small">{{ category.name_ar }}</div>
                        </td>
                        <td>{{ category.description|default:"-" }}</td>
                        <td>
                            <span class="badge bg-light text-primary rounded-pill px-3">
                                {{ category.expenses.count }}
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            <button class="btn btn-sm btn-light rounded-circle me-1" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#editCategoryModal"
                                    data-id="{{ category.id }}"
                                    data-name-en="{{ category.name_en }}"
                                    data-name-ar="{{ category.name_ar }}"
                                    data-description="{{ category.description }}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-light rounded-circle text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ category.id }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>

                    <!-- Delete Modal -->
                    <div class="modal fade" id="deleteModal{{ category.id }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content border-0 rounded-4">
                                <div class="modal-header border-0">
                                    <h5 class="modal-title fw-bold">{% trans "Confirm Delete" %}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body py-4">
                                    <p class="text-muted">{% trans "Are you sure you want to delete this category?" %}</p>
                                    <h5 class="fw-bold">{{ category.name_en }} / {{ category.name_ar }}</h5>
                                    {% if category.expenses.exists %}
                                    <div class="alert alert-warning mt-3">
                                        <i class="bi bi-exclamation-triangle me-2"></i>
                                        {% trans "This category has active expenses. Delete them first." %}
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="modal-footer border-0">
                                    <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                                    {% if not category.expenses.exists %}
                                    <a href="{% url 'expense_category_delete' category.pk %}" class="btn btn-danger rounded-3 px-4">{% trans "Delete" %}</a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <tr>
                        <td colspan="4" class="text-center py-5">
                            <div class="py-4">
                                <i class="bi bi-tags text-muted display-1"></i>
                                <p class="text-muted mt-3">{% trans "No categories found." %}</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-4 shadow">
            <div class="modal-header p-4 border-0">
                <h5 class="modal-title fw-bold">{% trans "Add Expense Category" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{% url 'expense_categories' %}" method="post">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold">{% trans "Name (English)" %}</label>
                        <input type="text" name="name_en" class="form-control rounded-3" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">{% trans "Name (Arabic)" %}</label>
                        <input type="text" name="name_ar" class="form-control rounded-3" required>
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-bold">{% trans "Description" %}</label>
                        <textarea name="description" class="form-control rounded-3" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer p-4 border-0">
                    <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary rounded-3 px-4">{% trans "Save Category" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-4 shadow">
            <div class="modal-header p-4 border-0">
                <h5 class="modal-title fw-bold">{% trans "Edit Expense Category" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{% url 'expense_categories' %}" method="post">
                {% csrf_token %}
                <input type="hidden" name="category_id" id="edit_category_id">
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold">{% trans "Name (English)" %}</label>
                        <input type="text" name="name_en" id="edit_name_en" class="form-control rounded-3" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">{% trans "Name (Arabic)" %}</label>
                        <input type="text" name="name_ar" id="edit_name_ar" class="form-control rounded-3" required>
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-bold">{% trans "Description" %}</label>
                        <textarea name="description" id="edit_description" class="form-control rounded-3" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer p-4 border-0">
                    <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary rounded-3 px-4">{% trans "Update Category" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const editCategoryModal = document.getElementById('editCategoryModal');
    if (editCategoryModal) {
        editCategoryModal.addEventListener('show.bs.modal', event => {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');
            const nameEn = button.getAttribute('data-name-en');
            const nameAr = button.getAttribute('data-name-ar');
            const description = button.getAttribute('data-description');
            
            document.getElementById('edit_category_id').value = id;
            document.getElementById('edit_name_en').value = nameEn;
            document.getElementById('edit_name_ar').value = nameAr;
            document.getElementById('edit_description').value = description;
        });
    }
</script>
{% endblock %}
