{% extends "../base.html" %}
{% load crispy_forms_tags %}
{% load humanize %}

{% block page_title %}Expenses{% endblock page_title %}
{% block content %}
    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Manage Expenses</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addExpenseModal">
                                <i class="fa fa-plus"></i> Add Expense
                            </button>
                        </div>
                        <div class="col-md-6 text-right">
                            <span class="badge bg-blue">Total Expenses: {{ expenses|length }}</span>
                        </div>
                    </div>
                    <br>

                    <!-- Start Expenses List -->
                    {% if expenses %}
                        <div class="table-responsive">
                            <table id="datatable-checkbox" class="table table-striped table-bordered bulk_action" style="width:100%">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>
                                            <input type="checkbox" id="check-all">
                                        </th>
                                        <th>#</th>
                                        <th>Expense Name</th>
                                        <th>Description</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for expense in expenses %}
                                        <tr>
                                            <td>
                                                <input type="checkbox" class="flat" name="table_records">
                                            </td>
                                            <td>{{ forloop.counter }}</td>
                                            <td>
                                                <strong>{{ expense.name }}</strong>
                                            </td>
                                            <td>
                                                {% if expense.description %}
                                                    <small class="text-muted">{{ expense.description|truncatechars:100 }}</small>
                                                {% else %}
                                                    <small class="text-muted">No description provided</small>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#editExpenseModal{{ expense.id }}">
                                                    <i class="fa fa-edit"></i> 
                                                </button>
                                                <a href="{% url 'delete_expense' expense.id %}" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure you want to delete this expense?')"><i class="fa fa-trash-o"></i> </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center mt-5">
                            <h4>No Expenses Available</h4>
                            <p>Get started by adding your first expense.</p>
                            <button type="button" class="btn btn-success mt-2" data-toggle="modal" data-target="#addExpenseModal">
                                <i class="fa fa-plus"></i> Add First Expense
                            </button>
                        </div>
                    {% endif %}
                    <!-- End Expenses List -->
                </div>
            </div>
        </div>
    </div>

    <!-- Add Expense Modal -->
    <div class="modal fade" id="addExpenseModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add New Expense</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{% url 'add_expense_page' %}" enctype="multipart/form-data">
                        {% csrf_token %}
                        {{ form|crispy }}
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- End Add Expense Modal -->

    <!-- Edit Expense Modals -->
    {% for expense in expenses %}
    <div class="modal fade" id="editExpenseModal{{ expense.id }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Expense: {{ expense.name }}</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{% url 'edit_expense' expense.id %}" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% for key, edit_form in edit_forms.items %}
                            {% if key == expense.id %}
                                {{ edit_form|crispy }}
                            {% endif %}
                        {% endfor %}
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    <!-- End Edit Expense Modals -->

    <!-- Custom CSS for Enhanced Styling -->
    <style>
        .x_panel {
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        .x_title h2 {
            font-weight: 600;
            color: #333;
        }
        .btn-success {
            background-color: #28a745;
            border: none;
            transition: background-color 0.3s ease;
        }
        .btn-success:hover {
            background-color: #218838;
        }
        .btn-info {
            background-color: #17a2b8;
            border: none;
        }
        .btn-info:hover {
            background-color: #138496;
        }
        .btn-danger {
            background-color: #dc3545;
            border: none;
        }
        .btn-danger:hover {
            background-color: #c82333;
        }
        .badge.bg-blue {
            background-color: #007bff;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
        }
        .table-responsive {
            margin-top: 20px;
        }
        .table thead.thead-dark th {
            background-color: #343a40;
            color: #fff;
            border: none;
        }
        .table tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
        .text-center h4 {
            color: #555;
            font-weight: 500;
        }
        .text-center p {
            color: #777;
        }
        .modal-content {
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        .modal-header {
            background-color: #f8f9fa;
            border-bottom: none;
        }
        .modal-title {
            font-weight: 600;
            color: #333;
        }
        .modal-footer {
            border-top: none;
            justify-content: space-between;
        }
    </style>
{% endblock content %}