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

{% block page_title %}
<a href="{% url 'expenditure_page' %}" class="btn btn-outline-secondary btn-sm mr-2"><i class="fa fa-chevron-left"></i> Back to Expenditures</a>
{{expenditure}}{% 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 Expenditure Items</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">
                    {% if editing_locked %}
                    <div class="alert alert-warning d-flex align-items-center" role="alert">
                        <i class="fa fa-lock mr-2"></i>
                        Items are read-only because this expenditure belongs to a closed term. Activate that term to make changes.
                    </div>
                    {% endif %}
                    <div class="card mb-4 shadow-sm">
                        <div class="card-header bg-light">
                            <h5 class="my-0">Expenditure Details</h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless mb-0">
                                <tr>
                                    <th class="w-25">Department:</th><td>{{expenditure.department}}</td>
                                    <th class="w-25">Expense:</th><td>{{expenditure.expense}}</td>
                                </tr>
                                <tr>
                                    <th>Vendor:</th><td>{{expenditure.vendor}}</td>
                                    <th>Date Incurred:</th><td>{{expenditure.date_incurred}}</td>
                                </tr>
                                <tr>
                                    <th>Date Recorded:</th><td>{{expenditure.date_recorded}}</td>
                                    <th>V.A.T:</th><td>{{expenditure.vat}}</td>
                                </tr>
                                <tr>
                                    <th>Status:</th>
                                    <td>
                                        {% if expenditure.payment_status == 'Paid' %}
                                            <span class="badge badge-pill badge-success p-2">{{expenditure.payment_status}}</span>
                                        {% elif expenditure.payment_status == 'Pending' %}
                                            <span class="badge badge-pill badge-warning p-2">{{expenditure.payment_status}}</span>
                                        {% else %}
                                            <span class="badge badge-pill badge-danger p-2">{{expenditure.payment_status}}</span>
                                        {% endif %}
                                    </td>
                                    <th>Approved By:</th><td>{{expenditure.approved_by}}</td>
                                </tr>
                                <tr>
                                    <th>Attachment:</th>
                                    <td colspan="3">
                                        {% if expenditure.attachment %}
                                            <a href="{{ expenditure.attachment.url }}" target="_blank" class="btn btn-outline-info btn-sm">
                                                <i class="fa fa-paperclip"></i> View Attachment
                                            </a>
                                        {% else %}
                                            <span class="text-muted">None</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    </table>
                    
                    <h3>Expenditure Total: {{expenditure.amount|intcomma}}/-</h3>

                    {% if editing_locked %}
                    <button type="button" class="btn btn-success btn-sm mb-3" disabled title="Editing locked for closed term">
                        <i class="fa fa-plus-circle"></i> Add Item
                    </button>
                    {% else %}
                    <button type="button" class="btn btn-success btn-sm mb-3" data-toggle="modal" data-target="#addItemModal">
                        <i class="fa fa-plus-circle"></i> Add Item
                    </button>
                    {% endif %}

                    <!-- start item list -->
                    {% if expenditure_items %}
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="itemSearch" placeholder="Search items...">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" id="clearSearch">Clear</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <table id="datatable-checkbox" class="table table-striped table-bordered bulk_action dt-responsive nowrap" style="width:100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th class="text-center"><input type="checkbox" id="check-all"></th>
                                    <th class="text-center" style="width: 1%">#</th>
                                    <th>Item</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-right">Unit Cost</th>
                                    <th class="text-right">Amount</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in expenditure_items %}
                                    <tr>
                                        <td class="align-middle text-center"><input type="checkbox" class="flat" name="table_records"></td>
                                        <td class="align-middle text-center">{{ forloop.counter }}</td>
                                        <td class="align-middle">{{ item.item_name }}</td>
                                        <td class="align-middle text-center">{{ item.quantity }}</td>
                                        <td class="align-middle text-right">
                                            <span class="badge badge-pill badge-primary p-2">{{ item.unit_cost|intcomma }}/-</span>
                                        </td>
                                        <td class="align-middle text-right">
                                            <span class="badge badge-pill badge-info p-2">{{ item.amount|intcomma }}/-</span>
                                        </td>
                                        <td class="align-middle text-center">
                                            {% if editing_locked %}
                                                <span class="text-muted small"><i class="fa fa-lock"></i> Locked for closed term</span>
                                            {% else %}
                                                <div class="btn-group" role="group">
                                                    <a href="{% url 'edit_expenditure_item' item.id %}" class="btn btn-outline-info btn-sm"><i class="fa fa-edit"></i> Edit</a>
                                                    <a href="{% url 'delete_expenditure_item' item.id %}" class="btn btn-outline-danger btn-sm" onclick="return confirm('Are you sure you want to delete this record?')"><i class="fa fa-trash"></i> Delete</a>
                                                </div>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                        <div class="text-center py-5">
                            <h4>No Items Available</h4>
                            <p>Get started by adding your first expenditure item.</p>
                            <button type="button" class="btn btn-success btn-sm mt-2" data-toggle="modal" data-target="#addItemModal">
                                <i class="fa fa-plus-circle"></i> Add First Item
{% block extra_js %}
<script>
    $(document).ready(function() {
        // Initialize DataTable if not already initialized
        if (!$.fn.DataTable.isDataTable('#datatable-checkbox')) {
            $('#datatable-checkbox').DataTable({
                responsive: true,
                pageLength: 10,
                order: [[1, 'asc']],
                columnDefs: [
                    { orderable: false, targets: 0 },
                    { responsivePriority: 1, targets: 2 },
                    { responsivePriority: 2, targets: 6 }
                ]
            });
        }

        // Search functionality
        $('#itemSearch').on('keyup', function() {
            $('#datatable-checkbox').DataTable().search(this.value).draw();
        });

        // Clear search input
        $('#clearSearch').on('click', function() {
            $('#itemSearch').val('');
            $('#datatable-checkbox').DataTable().search('').draw();
        });
    });
</script>
<style>
    .badge-pill {
        border-radius: 50rem !important;
    }
    .table th, .table td {
        vertical-align: middle;
    }
    .btn-outline-primary, .btn-outline-info, .btn-outline-danger {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    .input-group {
        margin-bottom: 0 !important;
    }
    .card-header {
        background-color: rgba(0,0,0,.03);
        border-bottom: 1px solid rgba(0,0,0,.125);
    }
    .table-borderless th, .table-borderless td {
        border: 0;
    }
    .w-25 {
        width: 25%;
    }
</style>
{% endblock extra_js %}
                            </button>
                        </div>
                    {% endif %}
                    <!-- end class list -->
                </div>
            </div>
        </div>
    </div>

    <!-- Add item Modal -->
    <div class="modal fade add-item-modal" id="addItemModal" 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" id="myModalLabel">Add Item</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_expenditure_item_page' %}" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="form-group row">
                            {{ form|crispy }}
                        </div>
                </div>
                <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>

{% endblock content %}