{% 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{

      max-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 dealer_slug=request.dealer.slug 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' request.dealer.slug %}"
                 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' request.dealer.slug 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' request.dealer.slug 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' request.dealer.slug 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-2">
              <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">
                <thead >
                  <tr class="bg-body-highlight">
                    <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 class="list fs-9" id="project-list-table-body">
                  {% 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">
                          {{ 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">
                          {{ bill_item.total_amount | currency_format }}
                        </span>
                      </td>
                      <td class="align-items-start white-space-nowrap pe-2">
                        {% if bill_item.po_model_id %}
                           {% if perms.django_ledger.view_purchaseordermodel%}
                          <a class="btn btn-sm btn-phoenix-primary"
                             href="{% url 'purchase_order_detail' request.dealer.slug request.dealer.entity.slug bill_item.po_model_id %}">
                            {% trans 'View PO' %}
                          </a>
                           {% endif %}
                        {% 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-2">
              <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 table-responsive">
            {% 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-2">
              <i class="fas fa-sticky-note me-3 text-primary"></i>
              <h5 class="mb-0">{% trans 'Bill Notes' %}</h5>
            </div>
          </div>
          {% if perms.django_ledger.change_billmodel%}
          <div class="card-body">
            {% include 'bill/includes/card_markdown.html' with style='card_1' title='' notes_html=bill.notes_html %}
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% include "bill/includes/mark_as.html" %}
{% endblock %}