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

{% block title %}Bill Details - {{ block.super }}{% endblock %}

{% block customCSS %}
<style>
  /* Optional custom overrides for Bootstrap 5 */
  .table th,
  .table td {
    vertical-align: middle;
  }

  .card-header i {
    font-size: 1.25rem;
  }

  .text-xs {
    font-size: 0.75rem;
  }

  .text-xxs {
    font-size: 0.6rem;
  }

#djl-vendor-card-widget{
  height:30rem;

}


</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
  <div class="row g-4" >
    <!-- Left Sidebar -->
    <div class="col-lg-4">
      <div class="card  shadow-sm">
        <div class="card-body">
          {% include 'bill/includes/card_bill.html' with bill=bill entity_slug=view.kwargs.entity_slug style='bill-detail' %}
          <hr class="my-4">
          {% include 'bill/includes/card_vendor.html' with vendor=bill.vendor %}
          <div class="d-grid mt-4">
            <a href="{% url 'bill_list' %}"
               class="btn btn-phoenix-primary">
              <i class="fas fa-arrow-left me-1"></i> {% trans 'Bill List' %}
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div class="col-lg-8 ">
      {% if bill.is_configured %}
      <div class="card mb-4 shadow-sm">
        <div class="card-body">
          <div class="row text-center g-3">
            <div class="col-md-3">
              <div class="border rounded p-3">
                <h6 class="text-uppercase text-xs text-muted mb-2">
                  {% trans 'Cash Account' %}:
                  <a href="{% url 'account_detail' bill.cash_account.uuid %}"
                     class="text-decoration-none ms-1">
                    {{ bill.cash_account.code }}
                  </a>
                </h6>
                <h4 class="mb-0" id="djl-bill-detail-amount-paid">
                  {% currency_symbol %}{{ bill.get_amount_cash | absolute | currency_format }}
                </h4>
              </div>
            </div>
            {% if bill.accrue %}
            <div class="col-md-3">
              <div class="border rounded p-3">
                <h6 class="text-uppercase text-xs text-muted mb-2">
                  {% trans 'Prepaid Account' %}:
                  <a href="{% url 'account_detail' bill.prepaid_account.uuid %}"
                     class="text-decoration-none ms-1">
                    {{ bill.prepaid_account.code }}
                  </a>
                </h6>
                <h4 class="text-success mb-0" id="djl-bill-detail-amount-prepaid">
                  {% currency_symbol %}{{ bill.get_amount_prepaid | currency_format }}
                </h4>
              </div>
            </div>
            <div class="col-md-3">
              <div class="border rounded p-3">
                <h6 class="text-uppercase text-xs text-muted mb-2">
                  {% trans 'Accounts Payable' %}:
                  <a href="{% url 'account_detail' bill.unearned_account.uuid %}"
                     class="text-decoration-none ms-1">
                    {{ bill.unearned_account.code }}
                  </a>
                </h6>
                <h4 class="text-danger mb-0" id="djl-bill-detail-amount-unearned">
                  {% currency_symbol %}{{ bill.get_amount_unearned | currency_format }}
                </h4>
              </div>
            </div>
            <div class="col-md-3">
              <div class="border rounded p-3">
                <h6 class="text-uppercase text-xs text-muted mb-2">
                  {% trans 'Accrued' %} {{ bill.get_progress | percentage }}
                </h6>
                <h4 class="mb-0">
                  {% currency_symbol %}{{ bill.get_amount_earned | currency_format }}
                </h4>
              </div>
            </div>
            {% else %}
            <div class="col-md-3 offset-md-6">
              <div class="border rounded p-3">
                <h6 class="text-uppercase text-xs text-muted mb-2">
                  {% trans 'You Still Owe' %}
                </h6>
                <h4 class="text-danger mb-0" id="djl-bill-detail-amount-owed">
                  {% currency_symbol %}{{ bill.get_amount_open | currency_format }}
                </h4>
              </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
      {% endif %}

      <!-- Bill Items Card -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header pb-0">
          <div class="d-flex align-items-center mb-1">
            <i class="fas fa-receipt me-3 text-primary"></i>
            <h5 class="mb-0">{% trans 'Bill Items' %}</h5>
          </div>
        </div>
        <div class="card-body px-0 pt-0 pb-2">
          <div class="table-responsive">
            <table class="table table-hover align-items-center mb-0">
              <thead >
                <tr>
                  <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Item' %}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Entity Unit' %}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Unit Cost' %}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Quantity' %}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Total' %}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'PO' %}</th>
                </tr>
              </thead>
              <tbody>
                {% for bill_item in itemtxs_qs %}
                <tr>
                  <td class="align-middle white-space-nowrap">
                    <div class="d-flex px-2 py-1">
                      <div class="d-flex flex-column justify-content-center">
                        <h6 class="mb-0 text-sm">{{ bill_item.item_model }}</h6>
                      </div>
                    </div>
                  </td>
                  <td class="align-middle white-space-nowrap">
                    <span class="text-xs font-weight-bold">
                      {% if bill_item.entity_unit %}
                      {{ bill_item.entity_unit }}
                      {% endif %}
                    </span>
                  </td>
                  <td class="align-middle white-space-nowrap">
                    <span class="text-xs font-weight-bold">
                      {% currency_symbol %}{{ bill_item.unit_cost | currency_format }}
                    </span>
                  </td>
                  <td class="align-middle white-space-nowrap">
                    <span class="text-xs font-weight-bold">{{ bill_item.quantity }}</span>
                  </td>
                  <td class="align-middle white-space-nowrap">
                    <span class="text-xs font-weight-bold">
                      {% currency_symbol %}{{ bill_item.total_amount | currency_format }}
                    </span>
                  </td>
                  <td class="align-middle white-space-nowrap">
                    {% if bill_item.po_model_id %}
                    <a class="btn btn-sm btn-phoenix-primary"
                       href="{% url 'purchase_order_detail' bill_item.po_model_id %}">
                      {% trans 'View PO' %}
                    </a>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="3"></td>
                  <td class="text-end"><strong>{% trans 'Total' %}</strong></td>
                  <td class="text-end">
                    <strong>
                      {% currency_symbol %}{{ total_amount__sum | currency_format }}
                    </strong>
                  </td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>

      <!-- Bill Transactions Card -->
      <div class="card mb-4 shadow-sm">
        <div class="card-header pb-0">
          <div class="d-flex align-items-center mb-1">
            <i class="fas fa-exchange-alt me-3 text-primary"></i>
            <h5 class="mb-0">{% trans 'Bill Transactions' %}</h5>
          </div>
        </div>
        <div class="card-body px-0 pt-0 pb-2">
          {% transactions_table bill %}
        </div>
      </div>

      <!-- Bill Notes Card -->
      <div class="card shadow-sm ">
        <div class="card-header pb-0">
          <div class="d-flex align-items-center mb-1">
            <i class="fas fa-sticky-note me-3 text-primary"></i>
            <h5 class="mb-0">{% trans 'Bill Notes' %}</h5>
          </div>
        </div>
        <div class="card-body">
          {% include 'bill/includes/card_markdown.html' with style='card_1' title='' notes_html=bill.notes_html %}
        </div>
      </div>
    </div>
  </div>
</div>
{% include "bill/includes/mark_as.html" %}
{% endblock %}