{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load humanize %}

{% block page_title %}{{ academic_class.Class.name }} - Class Bills{% endblock page_title %}

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

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2><i class="fa fa-money-bill-wave"></i> Class Bills - {{ academic_class.Class.name }}</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <p class="text-muted">Manage bill items for {{ academic_class.Class.name }} - {{ academic_class.academic_year }} ({{ academic_class.term }})</p>
                    </div>
                    <div class="col-md-6 text-right">
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addBillItemModal">
                            <i class="fa fa-plus-circle"></i> Add Bill Item
                        </button>
                        <a href="{% url 'class_bill_list' %}" class="btn btn-default">
                            <i class="fa fa-arrow-left"></i> Back to Class Bills
                        </a>
                    </div>
                </div>
                <div class="ln_solid"></div>

                {% if class_bills %}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search bill items..." id="billSearch">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <p class="text-right text-muted">Total Bills: {{ class_bills|length }}</p>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-bordered" id="billsTable" style="width:100%">
                            <thead class="thead-dark">
                                <tr>
                                    <th style="width: 5%">#</th>
                                    <th>Item Name</th>
                                    <th>Description</th>
                                    <th>Amount</th>
                                    <th>Academic Year</th>
                                    <th>Term</th>
                                    <th style="width: 15%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for class_bill in class_bills %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td><strong>{{ class_bill.bill_item.item_name }}</strong></td>
                                    <td>{{ class_bill.bill_item.description|truncatechars:50|default:"No description" }}</td>
                                    <td><span class="text-success font-weight-bold">UGX {{ class_bill.amount|intcomma }}</span></td>
                                    <td>{{ academic_class.academic_year }}</td>
                                    <td>{{ academic_class.term }}</td>
                                    <td>
                                        <a href="{% url 'edit_class_bill_item' class_bill.id %}" class="btn btn-info btn-sm" title="Edit Bill Item">
                                            <i class="fa fa-edit"></i> 
                                        </a>
                                        <a href="{% url 'delete_class_bill_item' class_bill.id %}" class="btn btn-danger btn-sm" title="Delete Bill Item" onclick="return confirm('Are you sure you want to delete this bill item?');">
                                            <i class="fa fa-trash"></i> 
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center">
                        <div class="alert alert-info" role="alert">
                            <i class="fa fa-info-circle fa-2x"></i>
                            <h4>No Bill Items Found</h4>
                            <p>No bill items have been added for this class yet. Use the button above to add the first bill item.</p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Add Bill Item Modal -->
<div class="modal fade" id="addBillItemModal" tabindex="-1" role="dialog" aria-labelledby="addBillItemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBillItemModalLabel"><i class="fa fa-plus-circle"></i> Add Bill Item to {{ academic_class.Class.name }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{% url 'add_class_bill_items' academic_class.id %}">
                {% csrf_token %}
                <div class="modal-body">
                    {{ bill_item_form|crispy }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fa fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-save"></i> Add Bill Item
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Simple search functionality
        $('#billSearch').on('keyup', function() {
            var value = $(this).val().toLowerCase();
            $('#billsTable tbody tr').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });
</script>
{% endblock content %}