{% extends 'base.html' %}
{% load crispy_forms_filters %}
{% load i18n %}
{% load custom_filters %}
{% load num2words_tags %}

{% block title %}
  {% trans 'Car Transfer Details' %}
{% endblock %}

{% block content %}
<!-- Approve Modal -->
  <div class="modal fade" id="approveCardModal" tabindex="-1" aria-labelledby="approveModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-light" id="approveModalLabel">{% trans 'Car Transfer Approve' %}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% trans 'Are you sure?' %}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-phoenix-danger" data-bs-dismiss="modal">{% trans 'No' %}</button>
          <form method="POST" action="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}" class="d-inline">
            {% csrf_token %}
            <button type="submit" class="btn btn-phoenix-success btn-sm">{% trans 'Confirm' %}</button>
          </form>
        </div>
      </div>
    </div>
  </div>
<!-- Cancel Modal -->
  <div class="modal fade" id="cancelCardModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-light" id="cancelModalLabel">{% trans 'Cancel Transfer' %}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% trans 'Are you sure' %}?
        </div>
        <div class="p-1">
          <div class="d-flex gap-1">
          <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">{% trans 'No' %}</button>
            <a href="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}?action=cancel" type="button" type="submit" class="btn btn-success btn-sm">{% trans 'Yes' %}</a>
        </div>
        </div>
      </div>
    </div>
  </div>


    <div class="row g-3">
      <div class="col-12">
          <h3 class="my-3">{% trans 'Transfer Details' %}</h3>
<div class="transfer-details">
            <p><strong>{% trans "Date" %} :</strong> {{transfer.created_at}}</p>
            <p><strong>{% trans "From" %} :</strong> {{transfer.from_dealer}}</p>
            <p><strong>{% trans "To" %} :</strong> {{transfer.to_dealer}}</p>
        </div>

        <!-- Items Table -->
        <div class="table table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>{% trans "VIN" %}</th>
                        <th>{% trans "Car" %}</th>

                        <th class="text-center">{% trans "Price" %}</th>
                        <th class="text-center">{% trans "VAT" %}</th>
                        <th class="text-center">{% trans "Total" %}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ transfer.car.vin }}</td>
                        <td>{{ transfer.car }}</td>
                        <td class="text-center">{{ transfer.car.finances.selling_price }}&nbsp;<span class="currency"> {{ CURRENCY }}</span></td>
                        <td class="text-center">{{ transfer.car.finances.vat_amount }}&nbsp;<span class="currency"> {{ CURRENCY }}</span></td>
                        <td class="text-center">{{ transfer.total_price }}&nbsp;<span class="currency"> {{ CURRENCY }}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>


        <!-- Total -->
        <div class="transfer-total">
            <p><strong>{%trans "Total Amount" %}:</strong> <span class="text-danger-darker fw-bold fs-8">{{transfer.total_price}}&nbsp;<span class="currency"> {{ CURRENCY }}</span></span></p>
            <p><strong>{%trans "Total Amount written" %}:</strong> <span>{{ transfer.total_price|num_to_words:"ar" }}&nbsp;<span class="currency"> {{ CURRENCY }}</span> {{ _("only") }}</span></p>
        </div>
      </div>
        <div class="col-12">

      </div>
    </div>
    <div class="row g-1">
        <div class="col-12">
      <div class="d-flex gap-1">
        {% if not action == 'cancel' %}
          <button type="button" class="btn btn-sm btn-success w-100" data-bs-toggle="modal" data-bs-target="#approveCardModal">
            {% trans 'Approve' %}
          </button>        
        {% endif %}
        <button type="button" class="btn btn-sm btn-warning w-100" data-bs-toggle="modal" data-bs-target="#cancelCardModal">
            {% trans 'Cancel Transfer' %}
        </button>
      </div>
        </div>
    </div>


  <!-- JavaScript Section -->
{% endblock %}