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

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

{% block content %}

  <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-phoenix-secondary" data-bs-dismiss="modal">{% trans 'No' %}</button>
          <div class="btn btn-sm btn-phoenix-danger">
            <form action="{% url 'account_delete' request.dealer.slug account.pk %}" method="post">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-phoenix-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 mt-4">

          <div class="table-responsive px-1 scrollbar mt-3">
            <table class="table align-items-center table-flush">
              <thead>
                <tr class="bg-body-highlight">
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('JE Number') }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Date') }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Debit') }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Credit') }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Description') }}</th>
                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Actions') }}</th>
                </tr>
              </thead>
              <tbody class="list">
                {% for tx in account.transactionmodel_set.all %}
                  <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                    <td class="align-middle product white-space-nowrap">
                      {{ tx.journal_entry.je_number }}
                    </td>
                    <td class="align-middle product white-space-nowrap">
                      {{ tx.journal_entry.timestamp }}
                    </td>
                    <td class="align-middle product white-space-nowrap">
                      {% if tx.tx_type == 'debit' %}
                        <i class="fa-solid fa-circle-up"></i> {{ tx.amount }}
                      {% endif %}
                    </td>
                    <td class="align-middle product white-space-nowrap">
                      {% if tx.tx_type == 'credit' %}
                        <i class="fa-solid fa-circle-down"></i> {{ tx.amount }}
                      {% endif %}
                    </td>
                    <td class="align-middle product white-space-nowrap">
                      {% if tx.description %}
                        {{ tx.description }}
                      {% endif %}
                    </td>
                    <td class="align-middle white-space-nowrap text-start">
                      <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 text-success-dark" href="{% url 'payment_details' request.dealer.slug tx.journal_entry.pk %}">{% trans 'view Transactions'|capfirst %}</a>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% endfor %}

                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                  <td class="align-middle product white-space-nowrap">

                  </td>
                  <td class="align-middle product white-space-nowrap">
                    <span class="fw-bold fs-8">{{ _("Total") }}</span>
                  </td>
                  <td class="align-middle product white-space-nowrap">
                    <span class="fw-bold fs-8 text-success">{{ total_debits }} <span class="icon-saudi_riyal"></span></span>
                  </td>
                  <td class="align-middle product white-space-nowrap">
                    <span class="fw-bold fs-8 text-danger">{{ total_credits }} <span class="icon-saudi_riyal"></span></span>
                  </td>
                  <td class="align-middle product white-space-nowrap">

                  </td>
                  <td class="align-middle white-space-nowrap text-start">

                  </td>
                </tr>

              </tbody>
            </table>
          </div>


        </div>

        <div class="mt-3 d-flex">
          <a class="btn btn-sm btn-phoenix-primary me-1" href="{% url 'account_update' request.dealer.slug 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' request.dealer.slug %}">
          <!-- <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>
  <!--test-->
{% endblock %}