{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load tenhal_tag %}

{% block title %}{% trans "Expense Detail" %}{% endblock %}

{% block content %}

    <section class="hero-section text-center py-5">
        <div class="container">
            <h1 class="display-4 fw-bold text-primary">{{ expense.name|title }}</h1>
            <p class="lead text-muted">{% trans "Comprehensive details for your expense." %}</p>
        </div>
    </section>

    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-md-11">
                <div class="card shadow-lg border-0 rounded-4">
                    <div class="card-body p-4 p-md-5">

                        <h2 class="h4 fw-bold mb-4">{% trans "Expense Information" %} <span class="fs-7 ms-3"><a class="btn  btn-phoenix-secondary" href="{% url 'item_expense_list' request.dealer.slug %}">Back To List</a></span></h2>

                        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 text-center text-md-start mb-5">
                            <div class="col">
                                <h6 class="text-uppercase text-muted small mb-1">SKU</h6>
                                <p class="fw-bold ">{{ expense.sku|default:"N/A" }}</p>
                            </div>
                            <div class="col">
                                <h6 class="text-uppercase text-muted small mb-1">UPC</h6>
                                <p class="fw-bold ">{{ expense.upc|default:"N/A" }}</p>
                            </div>
                            <div class="col">
                                <h6 class="text-uppercase text-muted small mb-1">{% trans "Default Amount" %}</h6>
                                <p class="fw-bold">{{ expense.default_amount }}<span class="icon-saudi_riyal ms-1"></span></p>
                            </div>
                            <div class="col">
                                <h6 class="text-uppercase text-muted small mb-1">{% trans "Expense Account" %}</h6>
                                <p class="fw-boldBI">{{ expense.expense_account }}</p>
                            </div>
                        </div>

                        <hr class="my-5">

                        <h2 class="h4 fw-bold mb-4">{% trans "Associated Bills" %}</h2>


                        {% if page_obj %}
                            <div class="table-responsive">
                                <table class="table table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th scope="col">{% trans "Bill Number" %}</th>
                                            <th scope="col" class="text-center">{% trans "Status" %}</th>
                                            <th scope="col" class="text-center">{% trans "Vendor" %}</th>
                                            <th scope="col" class="text-center">{% trans "Terms" %}</th>
                                            <th scope="col" class="text-center">{% trans "Created On" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for bill in page_obj%}
                                            <tr>
                                                <td>
                                                    <a href="{% url 'bill-detail' dealer_slug=request.dealer.slug entity_slug=entity.slug bill_pk=bill.pk %}" class="fw-bold text-decoration-none">
                                                        {{ bill.bill_number }}
                                                    </a>
                                                </td>

                                                <td class="text-center">
                                                    <span class="">{{ bill.get_bill_status_display }}</span>
                                                </td>
                                                <td class="text-center">{{ bill.vendor }}</td>
                                                <td class="text-center">{{ bill.get_terms_display }}</td>
                                                <td class="text-center">{{ bill.created|date:"M j, Y" }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>

                            </div>
                            {% if page_obj.paginator.num_pages > 1 %}
                                <div class="d-flex justify-content-end mt-3">
                                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="alert alert-info text-center py-4">
                                {% trans "No bills are associated with this expense yet." %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}