{% extends 'base.html' %}
{% load i18n %}

{% block title %}
  {{ page_title }}
{% endblock %}

{% block content %}
  <!-- Delete Modal -->
  <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content rounded">
        <div class="modal-body d-flex justify-content-center">
          <h1 class="text-danger me-2"><i class="bi bi-exclamation-diamond-fill"></i></h1>
          <span class="text-danger">{% trans 'Are you sure you want to delete this account?' %}</span>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans 'No' %}</button>
          <div class="btn btn-sm btn-danger">
            <form action="{% url 'account_delete' account.pk %}" method="post">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-danger">{% trans 'Yes' %}</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row my-3">
    <div class="">
      <div class="">
        <p class="mb-3"></p>
      </div>
      <div class="">
        <div class="row">
          <div class="col-md-6">
            <p>
              <strong>{{ _('Account Name') }}:</strong> {{ account.name }}
            </p>
            <p>
              <strong>{{ _('Account Code') }}:</strong> {{ account.code }}
            </p>
          </div>
          <div class="col-md-6">
            <p>
                {% if account.balance_type == 'debit' %}
                                  <strong>{{ _('Balance Type') }}:</strong><div class="badge badge-phoenix fs-10 badge-phoenix-success"> <span class="fw-bold">{{ _("Debit") }}</span><span class="ms-1 fas fa-arrow-circle-down"></span></div>
                                    {% else %}
                                    <strong>{{ _('Balance Type') }}:</strong><div class="badge badge-phoenix fs-10 badge-phoenix-danger"> <span class="fw-bold">{{ _("Credit") }}</span><span class="ms-1 fas fa-arrow-circle-up"></span></div>
                                    {% endif %}

            </p>
            <p>
              <strong>{{ _('Active') }}:</strong> {{ account.active }}
            </p>
          </div>
        </div>
        <div class="row">
          <div class="table-responsive">
                          <table class="table table-sm fs-9 mb-0">
              <tr>
                <th class="has-text-centered">{{ _('JE Number') }}</th>
                <th class="has-text-centered">{{ _('Date') }}</th>
                <th class="has-text-centered">{{ _('Debit') }}</th>
                <th class="has-text-centered">{{ _('Credit') }}</th>
                <th class="has-text-centered">{{ _('Description') }}</th>

                <th class="has-text-centered">{{ _('Actions') }}</th>
              </tr>

              {% for tx in account.transactionmodel_set.all %}
                <tr class="has-text-centered">
                  <td>{{ tx.journal_entry.je_number }}</td>
                  <td>{{ tx.journal_entry.timestamp }}</td>
                  <td class="text-success">
                    {% if tx.tx_type == 'debit' %}
                    <i class="fa-solid fa-circle-up"></i> {{ tx.amount }}
                    {% endif %}
                  </td>
                  <td class="text-danger">
                    {% if tx.tx_type == 'credit' %}
                      <i class="fa-solid fa-circle-down"></i> {{ tx.amount }}
                    {% endif %}
                  </td>
                  <td>{{ tx.description }}</td>

                  <td>
                    <div class="btn-reveal-trigger position-static">
                      <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                      <div class="dropdown-menu dropdown-menu-end py-2">
                        <a class="dropdown-item" href="{% url 'payment_details' tx.journal_entry.pk %}">{% trans 'view'|capfirst %}</a>
                      </div>
                    </div>
                  </td>
                </tr>
              {% endfor %}
              <tr class="has-text-weight-bold">
                <td></td>
                  <td class="has-text-right"><span class="fw-bold fs-8">{{ _("Total") }}</span></td>
                <td class="has-text-centered"><span class="fw-bold fs-8 text-success">{{ total_debits }} <span class="currency">{{ CURRENCY }}</span></span></td>
                <td class="has-text-centered"><span class="fw-bold fs-8 text-danger">{{ total_credits }} <span class="currency">{{ CURRENCY }}</span></span></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="mt-3 d-flex">
        <a class="btn btn-sm btn-phoenix-primary me-1" href="{% url 'account_update' account.pk %}">
          <!-- <i class="bi bi-pencil-square"></i> -->
          <i class="fa-solid fa-pen-to-square"></i> {{ _('Edit') }}
        </a>
        <a class="btn btn-sm btn-phoenix-danger me-1" data-bs-toggle="modal" data-bs-target="#deleteModal">
          <!-- <i class="bi bi-trash-fill"></i> -->
          <i class="fa-solid fa-trash"></i> {{ _('Delete') }}
        </a>
        <a class="btn btn-sm btn-phoenix-secondary" href="{% url 'account_list' %}">
          <!-- <i class="bi bi-arrow-left-square-fill"></i> -->
          <i class="fa-regular fa-circle-left"></i> {% trans 'Back to List' %}
        </a>
      </div>
    </div>
  </div>
{% endblock %}